インブラウザデザインのススメ

2014/5/3　しかたこうき

自己紹介

デザイナーです紙・Web・映像

c5歴：約半年

WPよりもc5

インブラウザデザイン

Designing in Browserブラウザでデザインする

デザインカンプをつくらない制作法のこと

ここでは…

と定義してお話します

一般的（と思われる）Web制作フロー

サイトマップWF作成

文言・素材作成

カンプ作成

コーディング

CMS

クラチェック

クラチェック

変換ロス

変換ロス

1ヶ所で遅れると後が詰まる形が見えないと、先に進めない

インブラウザデザインだと…

サイトマップWF作成

文言作成

画像素材作成

コーディング CMS

クラチェック

納期が短くなる各工程での遅れをある程度吸収できる

カンプあるある

動的な要素がイメージしにくいロールオーバー　ツールチップ等

クライアントがイメージしにくい？「フォントの見え方が…」「小さくないですか？」「左に寄ってるんですけど…」「（コーディングの後）背景がスクロールしないんですけど」

カンプあるある

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

カンプあるある

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

ほなおまえがヤレや！

こういうのは向かないかも…

キャンペーンサイトグラフィックをごりごりに使うデザイン

インブラ・用意しておきたいツール

chrome MeasureIt EyeDropper

Chrome Extention

お世話になるサービス

ダミーテキストジェネレーター placehold.jp

DEMO

concrete5とインブラウザ

HTMLを作りこまない

サイトマップから完成させるheader.php、footer.phpぐらいまで。

なるべくCMSの吐くコードにあわせてCSS/JSを書く

SHOWCASE / DEMO