レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。
でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない……
という、恐らく受託サイト制作では一般的であろうシチュエーション。
そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。
■最初にレイアウトパターンを絞る
画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。
3パターンに収まるのが理想です。
- メインページ:ヘッダ/フッタ、ナビゲーション、メインコンテンツ
┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例 付き - 一覧系ページ:ヘッダ/フッタ、ナビゲーション、メインコンテンツ
┗記事一覧、商品一覧など、サイトに応じて - フォーム系ページ:簡易ヘッダ/フッタ、メインコンテンツ
┗ステップ表示、注意書、アラート表示、フォーム各要素サンプル、決定/戻るボタン - 〈例外〉トップページ
この各パターンについて、必要な画面サイズ分だけレイアウトを決めます。
その際、必ず各画面サイズを同時進行すること。
スマホサイズを基準に、大きい画面では何を追加するか、という、今までとは逆の方向で考えた方がやりやすいです。
各レイアウトが決まってから、サイト内の各ページがどのパターンに当てはまるかを割り振って、そのパターン内の要素だけを使って、必要な個別ページの画面設計をしていきます。
どうしても要素が足りなくなった時だけ、ベースのレイアウトに戻って追加します。
■デザインはレイアウトパターン分のみ
デザインカンプを作るのは、レイアウトパターン分×画面サイズ分のみです。
必要な要素はパターンに全部含まれているはずなので、それで十分なはずです。
(カテゴリによって色を変える、とかの場合は、そこの部分だけは追加で作ります。)
■コンテンツ(原稿)はレイアウトパターンに則って用意し、コーディング段階で流し込む
いわゆるテキスト原稿にあたるものは、ワイヤーやデザインデータを正にするのではなく、エクセルでもDBでもいいので、配置する場所と中身を一括で管理できるとラクです。
コーディング段階で初めて流し込んでいくことで、工程を重ねるために起こりやすい、修正反映漏れを減らします。
■トップページは後から作る
全体のデザインテイストを決めるためには、最初にトップページが必要だとは思うのですが。
レイアウトにしろ、パーツにしろ、トップページはサイトの中ではイレギュラーな存在です。また、下層の影響で調整が発生しやすいこともあります。
なので、作り込み&コーディングは、他のページがある程度落ち着いてから、最後にいっきに作った方がラクじゃないかな、と思います。
■クライアントさんへの事前説明必須&無理な場合はレスポンシブWebデザイン自体をやめる
従来のフローに慣れてるクライアントさんほど、レスポンシブWebデザインの場合はフローが異なる(特にデザインの提出物が変わる)ことを、事前に十分説明し、理解していただくことが必要です。
なお。
このフローでは納得いただけない場合(各画面のデザインを印刷したもので社内回覧チェックがある)とか。
あるいは、このフローでは進行できない(レイアウトパターンに収まりきらない、原稿は画像化テキストが多い等)とか。
そういう案件の場合は、そもそもレスポンシブWebデザインには向いてない案件です。
今まで通り、各デバイス向けに個別に作った方が、恐らく皆が幸せです。
【補足】
従来の画面設計手法だと、トップページから順番に必要そうなところを作っていって、後付けで似たレイアウトを使い回すということがほとんどですが。
上記レイアウトパターンの考え方は、レスポンシブWebデザインに限らず、通常のサイトでも、特にブログ/システムテンプレート系の画面設計では一般的になってほしいなぁ、と思っています。
PICK UP
-
タグ: Webサイト多言語変換サービス, shutto翻訳, コラム, 事例紹介
株式会社崎陽軒様:shutto翻訳ご利用事例 -
タグ: さぶみっと!メール配信, クラウドサービス, コラム, ニュース, 自社サービス
ITreview Grid Award 2025 Springにて「High Performer」を受賞しました!(メールマーケティングツールカテゴリー) -
タグ: eコマース, itreviewアワード, カゴ落ち対策, クラウドサービス, コラム, ニュース, 顧客満足度
ITreview Grid Award 2025 Springにてカゴ落ち対策カテゴリー部門で「High Performer」を受賞しました! -
タグ: Webサイト多言語変換サービス, shutto翻訳, インバウンド, コラム, ニュース, 顧客満足度
ITreview Grid Award 2025 Springにて、ウェブサイト翻訳ツール部門で「Leader」を5年連続で受賞しました! -
タグ: 2025年の崖, DX推進, GA4, Googleアナリティクス, IT人材育成, gmpプレミアムサロン, イー・エージェンシー, オンライン学習, コラム, データ活用, マーケティングDX, レガシーシステム, 企業変革, 社内教育, 自社DX戦略
「2025年の崖」を乗り越える!DX推進とIT人材の育成が鍵 -
タグ: GA4, GMPパートナー, Googleアナリティクス, Udemy Business, アクセス解析, イー・エージェンシー, オンライン学習, コラム, サイト運営支援, データ活用, マーケティング支援, 初心者向け講座, 動画講座, 学習プラットフォーム, 法人向け教育
Udemy Businessで視聴可能に!GA4のスキルアップを強力サポート!