レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。
でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない……
という、恐らく受託サイト制作では一般的であろうシチュエーション。
そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。
■最初にレイアウトパターンを絞る
画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。
3パターンに収まるのが理想です。
- メインページ:ヘッダ/フッタ、ナビゲーション、メインコンテンツ
┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例 付き - 一覧系ページ:ヘッダ/フッタ、ナビゲーション、メインコンテンツ
┗記事一覧、商品一覧など、サイトに応じて - フォーム系ページ:簡易ヘッダ/フッタ、メインコンテンツ
┗ステップ表示、注意書、アラート表示、フォーム各要素サンプル、決定/戻るボタン - 〈例外〉トップページ
この各パターンについて、必要な画面サイズ分だけレイアウトを決めます。
その際、必ず各画面サイズを同時進行すること。
スマホサイズを基準に、大きい画面では何を追加するか、という、今までとは逆の方向で考えた方がやりやすいです。
各レイアウトが決まってから、サイト内の各ページがどのパターンに当てはまるかを割り振って、そのパターン内の要素だけを使って、必要な個別ページの画面設計をしていきます。
どうしても要素が足りなくなった時だけ、ベースのレイアウトに戻って追加します。
■デザインはレイアウトパターン分のみ
デザインカンプを作るのは、レイアウトパターン分×画面サイズ分のみです。
必要な要素はパターンに全部含まれているはずなので、それで十分なはずです。
(カテゴリによって色を変える、とかの場合は、そこの部分だけは追加で作ります。)
■コンテンツ(原稿)はレイアウトパターンに則って用意し、コーディング段階で流し込む
いわゆるテキスト原稿にあたるものは、ワイヤーやデザインデータを正にするのではなく、エクセルでもDBでもいいので、配置する場所と中身を一括で管理できるとラクです。
コーディング段階で初めて流し込んでいくことで、工程を重ねるために起こりやすい、修正反映漏れを減らします。
■トップページは後から作る
全体のデザインテイストを決めるためには、最初にトップページが必要だとは思うのですが。
レイアウトにしろ、パーツにしろ、トップページはサイトの中ではイレギュラーな存在です。また、下層の影響で調整が発生しやすいこともあります。
なので、作り込み&コーディングは、他のページがある程度落ち着いてから、最後にいっきに作った方がラクじゃないかな、と思います。
■クライアントさんへの事前説明必須&無理な場合はレスポンシブWebデザイン自体をやめる
従来のフローに慣れてるクライアントさんほど、レスポンシブWebデザインの場合はフローが異なる(特にデザインの提出物が変わる)ことを、事前に十分説明し、理解していただくことが必要です。
なお。
このフローでは納得いただけない場合(各画面のデザインを印刷したもので社内回覧チェックがある)とか。
あるいは、このフローでは進行できない(レイアウトパターンに収まりきらない、原稿は画像化テキストが多い等)とか。
そういう案件の場合は、そもそもレスポンシブWebデザインには向いてない案件です。
今まで通り、各デバイス向けに個別に作った方が、恐らく皆が幸せです。
【補足】
従来の画面設計手法だと、トップページから順番に必要そうなところを作っていって、後付けで似たレイアウトを使い回すということがほとんどですが。
上記レイアウトパターンの考え方は、レスポンシブWebデザインに限らず、通常のサイトでも、特にブログ/システムテンプレート系の画面設計では一般的になってほしいなぁ、と思っています。
PICK UP
-
タグ: BigQuery, GA4, GoogleMarketingPlatform, Googleアナリティクス, コラム
【資料】GA4無料版をご利用の方必見! GA4導入後のよくあるお悩みと解決方法8選 -
タグ: ASEAN越境EC支援, Webサイト多言語変換サービス, shutto翻訳, クラウドサービス, コラム, ニュース
shutto翻訳、Webサイト翻訳部門で「Leader」を5年連続受賞!- ITreview Grid Award 2024 Winter -
タグ: CART RECOVERY, カゴ落ち対策, カートリカバリー, クラウドサービス, コラム, ニュース
CART RECOVERY、カゴ落ち対策部門で「High Performer」を受賞!- ITreview Grid Award 2024 Spring -
タグ: CART RECOVERY, カゴ落ち対策, カートリカバリー, クラウドサービス, コラム, ニュース
ECサイトの構築方法5選! 特徴と選び方を解説 -
タグ: コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 文化, 環境
有楽町 森の本社オフィスのVR紹介記事がメディアに掲載されました!|公式note -
タグ: CART RECOVERY, カゴ落ち対策, カートリカバリー, クラウドサービス, コラム, ニュース
ECサイトとは? 役割と必要な機能・サイトの種類についてわかりやすく解説