Web制作フローの再考とDesigning in the browser

グリッド

必ずしもグリッドレイアウトにしなければならない訳ではないですが、
グリッドを使ってデザインすることで整ったレイアウトを素早く構築できます。

Griddle.itを利用すると、
下記のような記述で簡単に背景にグリッドを表示できます。

			body {
			  background: url(https://griddle.it/1120-12-20) repeat-y center top;
			}
			

この場合は全体が960px、12カラム、カラム間30pxでグリッドが表示されます。
同様にBasehold.itを利用するとベースラインを表示させることができます。

CSS3

ブラウザ上でデザインを行うのにCSS3は欠かせません。
角丸、グラデーション、ドロップシャドウなどの表現がCSSのみでできます。

LESSやSassなどのCSS拡張メタ言語

CSSで変数やMixinなどが使えるので作業が捗ります。
例えば下記のように角丸を半径を指定して簡単に作れます。

			/*Mixin*/
			.border-radius( @radius: 3px ) {    
				-webkit-border-radius: @radius;    
				-moz-border-radius: @radius;    
				border-radius: @radius; 
			}
			#hoge{
				.border-radius(5px); /*()内の数値で角丸が作成される*/
			}
			

僕はLESSを使ってるので、
デザイン中はjavascriptでクライアントサイドで処理して、最終的にはcssにコンパイルしてます。

Developer Tools

殆どのモダンブラウザには何かしらのDeveloper toolが備わってます。
変更が即座にブラウザに反映されるので、ちょっとした変更を確認する時や動作の確認を調べる時に役立ちます。

スニペット（パターン）のストック

WebのUIには幾つかの決まったパターンが存在します。
そのような共通なパターンはストックしておくと素早く構築ができます。

同様に配色のパターンも複数用意しておくと便利です。
この辺りはTwitter BootstrapやjQuery UI – ThemeRollerが参考になると思います。

Web Fonts

テキストのフォントを変更できます。
またアイコンフォントを使用するとフォントのみでアイコンの表示もできます。
日本語のWeb Fontは数が少なかったり、全部読み込むとデータ量が多いなどまだ課題が多いですが、
ここが解決するとグッと表現の幅が広がると思います。

早めにテストが行える

全てを作りこんでからテストした結果、バグが見つかって修正となると、
最悪の場合デザインから手直しするケースもあります。
そこを早めに知って対応できるのは効率的であり、また安全でもあります。

時間の短縮

グラフィックソフトでのデザイン工程がなくなる（少なくなる）ので時間の短縮に繋がります。

変更が容易

CSSの記述を少し変えるだけでレイアウトの変更が簡単に行えます。
特にLESSやSassでCSSを書いてると、文字や色の変更も変数一つ変えるだけでできてしまう場合もあります。

ラフと成果物の相違が無い

デザインを最終的な成果物のプラットフォームであるブラウザ上で行うため、そこで作られたデザインと成果物が違うということがありません。

周りの理解が必要

一人で全てを行うのであれば柔軟に制作フローを変更できますが、
複数人で行う場合は全員の理解が必要です。
また、新しい手法なので予期しない事態が生じる可能性もあります。
慣れるまでは余計に時間がかかる場合もあります。
故に保守的な体制では受け入れられないこともあるかと思います。

もうひとつがクライアントです。
今までの制作フローを当然と思ってるクライアントは、まず静的なデザインを要求してくるかも知れません。
「このような流れで制作を行う」と事前の告知は必要でしょう。

デザインの限界

CSS3になってできることが増えたといっても、まだまだPhotoshopなどの表現には追いつきません。
ミニマル・シンプルなデザインであれば十分対応できますが、
デザイン性の高いサイトでは力不足です。

古いブラウザに対応させるか

IE8以前などの古いブラウザは多くのCSS3プロパティに対応していません。
そのような場合はJavascriptで対応させるか、プログレッシブ・エンハンスメントの考えで必要な情報が伝われば良しとするか検討して制作する必要があります。