1. インブラウザデザイン
の
ススメ
2014/5/3 しかたこうき

2. 自己紹介
デザイナーです
紙・Web・映像
c5歴：約半年
WPよりもc5

3. インブラウザデザイン
Designing in Browser
ブラウザでデザインする
デザインカンプをつくら
ない制作法のこと
ここでは…
と定義してお話します

4. 一般的（と思われる）Web制作フロー
サイトマップ
WF作成
文言・素材作成
カンプ作成
コーディング
CMS
クラチェック
クラチェック
変換ロス
変換ロス
1ヶ所で遅れると後が詰まる
形が見えないと、先に進めない

5. インブラウザデザインだと…
サイトマップ
WF作成
文言作成
画像素材作成
コーディング CMS
クラチェック
納期が短くなる
各工程での遅れをある程度吸収できる

6. カンプあるある
動的な要素がイメージしにくい
ロールオーバー ツールチップ等
クライアントがイメージしにくい？
「フォントの見え方が…」
「小さくないですか？」
「左に寄ってるんですけど…」
「（コーディングの後）背景がスクロールしないんですけど」

7. カンプあるある
コーダーさんへ指示が増えまくる
position: fixed ホバーでツールチップ
0.3秒でふわっと出してください

8. カンプあるある
コーダーさんへ指示が増えまくる
position: fixed ホバーでツールチップ
0.3秒でふわっと出してください
ほな
おまえが
ヤレや！

9. こういうのは向かないかも…
キャンペーンサイト
グラフィックを
ごりごりに使うデザイン

10. インブラ・用意しておきたいツール
chrome MeasureIt EyeDropper
Chrome Extention

11. お世話になるサービス
ダミーテキスト
ジェネレーター
placehold.jp

12. DEMO

13. concrete5とインブラウザ
HTMLを作りこまない
サイトマップから完成させる
header.php、footer.phpぐらいまで。
なるべくCMSの吐くコードに
あわせてCSS/JSを書く

14. SHOWCASE / DEMO