インブラウザデザインのすすめ

596 views
482 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
596
On SlideShare
0
From Embeds
0
Number of Embeds
174
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

インブラウザデザインのすすめ

  1. 1. インブラウザデザイン の ススメ 2014/5/3 しかたこうき
  2. 2. 自己紹介 デザイナーです 紙・Web・映像 c5歴:約半年 WPよりもc5
  3. 3. インブラウザデザイン Designing in Browser ブラウザでデザインする デザインカンプをつくら ない制作法のこと ここでは… と定義してお話します
  4. 4. 一般的(と思われる)Web制作フロー サイトマップ WF作成 文言・素材作成 カンプ作成 コーディング CMS クラチェック クラチェック 変換ロス 変換ロス 1ヶ所で遅れると後が詰まる 形が見えないと、先に進めない
  5. 5. インブラウザデザインだと… サイトマップ WF作成 文言作成 画像素材作成 コーディング CMS クラチェック 納期が短くなる 各工程での遅れをある程度吸収できる
  6. 6. カンプあるある 動的な要素がイメージしにくい ロールオーバー ツールチップ等 クライアントがイメージしにくい? 「フォントの見え方が…」 「小さくないですか?」 「左に寄ってるんですけど…」 「(コーディングの後)背景がスクロールしないんですけど」
  7. 7. カンプあるある コーダーさんへ指示が増えまくる position: fixed ホバーでツールチップ 0.3秒でふわっと出してください
  8. 8. カンプあるある コーダーさんへ指示が増えまくる position: fixed ホバーでツールチップ 0.3秒でふわっと出してください ほな おまえが ヤレや!
  9. 9. こういうのは向かないかも… キャンペーンサイト グラフィックを ごりごりに使うデザイン
  10. 10. インブラ・用意しておきたいツール chrome MeasureIt EyeDropper Chrome Extention
  11. 11. お世話になるサービス ダミーテキスト ジェネレーター placehold.jp
  12. 12. DEMO
  13. 13. concrete5とインブラウザ HTMLを作りこまない サイトマップから完成させる header.php、footer.phpぐらいまで。 なるべくCMSの吐くコードに あわせてCSS/JSを書く
  14. 14. SHOWCASE / DEMO

×