レスポンシブWebデザインの“現実的な”ワークフロー

2012年11月6日 | 本舩坂 香

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

PICK UP

ライター

Webディレクター 1*年目。 モバイル&システム手前あたりが、メイン領域。

お問い合わせ

サービスに関するご相談は
こちらよりお気軽にお問い合わせください。

関連記事

e-Agencyの様々な情報をFacebookでお届けします!