レスポンシブWebデザインの“現実的な”ワークフロー│株式会社イー・エージェンシーグループ

レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。
でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない……

という、恐らく受託サイト制作では一般的であろうシチュエーション。
そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。

■最初にレイアウトパターンを絞る

画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。
3パターンに収まるのが理想です。

メインページ：ヘッダ／フッタ、ナビゲーション、メインコンテンツ
┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例　付き
一覧系ページ：ヘッダ／フッタ、ナビゲーション、メインコンテンツ
┗記事一覧、商品一覧など、サイトに応じて
フォーム系ページ：簡易ヘッダ／フッタ、メインコンテンツ
┗ステップ表示、注意書、アラート表示、フォーム各要素サンプル、決定／戻るボタン
〈例外〉トップページ

この各パターンについて、必要な画面サイズ分だけレイアウトを決めます。
その際、必ず各画面サイズを同時進行すること。
スマホサイズを基準に、大きい画面では何を追加するか、という、今までとは逆の方向で考えた方がやりやすいです。

各レイアウトが決まってから、サイト内の各ページがどのパターンに当てはまるかを割り振って、そのパターン内の要素だけを使って、必要な個別ページの画面設計をしていきます。
どうしても要素が足りなくなった時だけ、ベースのレイアウトに戻って追加します。

■デザインはレイアウトパターン分のみ

デザインカンプを作るのは、レイアウトパターン分×画面サイズ分のみです。

必要な要素はパターンに全部含まれているはずなので、それで十分なはずです。
（カテゴリによって色を変える、とかの場合は、そこの部分だけは追加で作ります。）

■コンテンツ（原稿）はレイアウトパターンに則って用意し、コーディング段階で流し込む

いわゆるテキスト原稿にあたるものは、ワイヤーやデザインデータを正にするのではなく、エクセルでもDBでもいいので、配置する場所と中身を一括で管理できるとラクです。

コーディング段階で初めて流し込んでいくことで、工程を重ねるために起こりやすい、修正反映漏れを減らします。

■トップページは後から作る

全体のデザインテイストを決めるためには、最初にトップページが必要だとは思うのですが。
レイアウトにしろ、パーツにしろ、トップページはサイトの中ではイレギュラーな存在です。また、下層の影響で調整が発生しやすいこともあります。
なので、作り込み＆コーディングは、他のページがある程度落ち着いてから、最後にいっきに作った方がラクじゃないかな、と思います。

■クライアントさんへの事前説明必須＆無理な場合はレスポンシブWebデザイン自体をやめる

従来のフローに慣れてるクライアントさんほど、レスポンシブWebデザインの場合はフローが異なる（特にデザインの提出物が変わる）ことを、事前に十分説明し、理解していただくことが必要です。

なお。
このフローでは納得いただけない場合（各画面のデザインを印刷したもので社内回覧チェックがある）とか。
あるいは、このフローでは進行できない（レイアウトパターンに収まりきらない、原稿は画像化テキストが多い等）とか。
そういう案件の場合は、そもそもレスポンシブWebデザインには向いてない案件です。
今まで通り、各デバイス向けに個別に作った方が、恐らく皆が幸せです。

【補足】
従来の画面設計手法だと、トップページから順番に必要そうなところを作っていって、後付けで似たレイアウトを使い回すということがほとんどですが。
上記レイアウトパターンの考え方は、レスポンシブWebデザインに限らず、通常のサイトでも、特にブログ／システムテンプレート系の画面設計では一般的になってほしいなぁ、と思っています。