レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。
でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない……
という、恐らく受託サイト制作では一般的であろうシチュエーション。
そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。
■最初にレイアウトパターンを絞る
画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。
3パターンに収まるのが理想です。
- メインページ:ヘッダ/フッタ、ナビゲーション、メインコンテンツ
┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例 付き - 一覧系ページ:ヘッダ/フッタ、ナビゲーション、メインコンテンツ
┗記事一覧、商品一覧など、サイトに応じて - フォーム系ページ:簡易ヘッダ/フッタ、メインコンテンツ
┗ステップ表示、注意書、アラート表示、フォーム各要素サンプル、決定/戻るボタン - 〈例外〉トップページ
この各パターンについて、必要な画面サイズ分だけレイアウトを決めます。
その際、必ず各画面サイズを同時進行すること。
スマホサイズを基準に、大きい画面では何を追加するか、という、今までとは逆の方向で考えた方がやりやすいです。
各レイアウトが決まってから、サイト内の各ページがどのパターンに当てはまるかを割り振って、そのパターン内の要素だけを使って、必要な個別ページの画面設計をしていきます。
どうしても要素が足りなくなった時だけ、ベースのレイアウトに戻って追加します。
■デザインはレイアウトパターン分のみ
デザインカンプを作るのは、レイアウトパターン分×画面サイズ分のみです。
必要な要素はパターンに全部含まれているはずなので、それで十分なはずです。
(カテゴリによって色を変える、とかの場合は、そこの部分だけは追加で作ります。)
■コンテンツ(原稿)はレイアウトパターンに則って用意し、コーディング段階で流し込む
いわゆるテキスト原稿にあたるものは、ワイヤーやデザインデータを正にするのではなく、エクセルでもDBでもいいので、配置する場所と中身を一括で管理できるとラクです。
コーディング段階で初めて流し込んでいくことで、工程を重ねるために起こりやすい、修正反映漏れを減らします。
■トップページは後から作る
全体のデザインテイストを決めるためには、最初にトップページが必要だとは思うのですが。
レイアウトにしろ、パーツにしろ、トップページはサイトの中ではイレギュラーな存在です。また、下層の影響で調整が発生しやすいこともあります。
なので、作り込み&コーディングは、他のページがある程度落ち着いてから、最後にいっきに作った方がラクじゃないかな、と思います。
■クライアントさんへの事前説明必須&無理な場合はレスポンシブWebデザイン自体をやめる
従来のフローに慣れてるクライアントさんほど、レスポンシブWebデザインの場合はフローが異なる(特にデザインの提出物が変わる)ことを、事前に十分説明し、理解していただくことが必要です。
なお。
このフローでは納得いただけない場合(各画面のデザインを印刷したもので社内回覧チェックがある)とか。
あるいは、このフローでは進行できない(レイアウトパターンに収まりきらない、原稿は画像化テキストが多い等)とか。
そういう案件の場合は、そもそもレスポンシブWebデザインには向いてない案件です。
今まで通り、各デバイス向けに個別に作った方が、恐らく皆が幸せです。
【補足】
従来の画面設計手法だと、トップページから順番に必要そうなところを作っていって、後付けで似たレイアウトを使い回すということがほとんどですが。
上記レイアウトパターンの考え方は、レスポンシブWebデザインに限らず、通常のサイトでも、特にブログ/システムテンプレート系の画面設計では一般的になってほしいなぁ、と思っています。
PICK UP
-
タグ: つながりの力, イー・エージェンシー, コラム, リモートワーク, 人材育成, 企業文化, 信頼と自主性, 働き方, 広報戦略, 未来のリーダー育成, 次世代経営, 社長インタビュー, 組織づくり, 経営哲学, 経営者の視点
リモートワークどうする?経営合宿で何を話してる?【甲斐社長に聞く 第1回】|株式会社イー・エージェンシー公式note -
タグ: ECサイト分析, GA4, Googleアナリティクス, Looker Studio, gmpプレミアムサロン, イー・エージェンシー, コラム, ダッシュボード作成, デジタル販売推進, データ可視化, データ活用トレーニング, ニトリ, マーケティング分析, 探索レポート, 業務効率化
株式会社ニトリ様 GA4・Looker Studioワークショップ開催事例 – データ活用への関心の高さを実感! -
タグ: AIアップデート, AIデザイン支援, AI活用事例, Claude比較, Gemini 2.5 Pro, Google Gemini, HTML生成, イー・エージェンシー, グラレコHTML, コラム, フロントエンド生成, プロンプト設計, 手書き風デザイン, 生成ai, 視覚化
猫よりAI 第5回:「Gemini 2.5 Pro、すごくない?」──グラレコHTML出力をClaudeから移植してみた話|公式note -
タグ: エンジニア募集, オウンドメディア, コラム, ビジネス職, リモートワーク, レコメンドエンジン, 中途採用, 働きやすい環境, 採用強化, 社内文化, 翻訳ツール
【オープン社内報 2025年6月号】イー・エージェンシー プレミアムニュース -
タグ: エンジニア採用, キャリア採用, コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 文化, 環境
2025年6月の募集職種一覧!ビジネス職を中心に採用強化中!|株式会社イー・エージェンシー公式note -
有限会社シサム工房様:さぶみっと!レコメンドご利用事例