画面構成
Web ページ上における、各要素(ヘッダー、メインコンテンツ、フッターなど)の配置やバランス全般のことです。ワイヤーフレーム(WF / ワイヤーフレーム)(骨組み)からデザイン、コーディングにいたるまで、すべての工程の土台となります。
画面を構成する「5 大基本パーツ」とその役割
- ヘッダー(Header)：画面の一番上。ロゴや主要メニューを置き、「何のサイトか」を瞬時に伝える。
- ナビゲーション(Global Navigation)：サイト全体の案内看板(グローバルナビゲーション)。重要ページへのリンクをまとめる。
- メインコンテンツ(Main Content)：ページの主役。ユーザーが一番読みたい文章や画像、動画を配置する。
- サイドバー(Sidebar)：画面の横側(左右)。関連情報やバナー、ランキングなどを置き、他ページへの回遊を促す(サイドバー)。
- フッター(Footer)：画面の一番下。サイトマップや会社概要、コピーライトを置き、迷ったユーザーの受け皿にする(フッター)。
「目的駆動」で決める、定番の画面構成
デザインの好みではなく、「そのページでユーザーにどんな行動をとってほしいか」でレイアウトを使い分けます。
- ランディングページ(LP)や申込フォーム：ユーザーを迷わせず購入・登録へ一直線に向かわせるため、サイドバーのない「1 カラム(全幅)」(カラム)の構成にする。
- メディアやブログ、EC サイト：たくさんの記事や商品を見回って(回遊して(回遊率))ほしいため、ランキングやカテゴリが見える「2 カラム(サイドバー付き)」の構成にする。
よくある落とし穴(注意点)
言葉をよく利用する人
- デザイナー
- Web 担当者(発注側)
- プロデューサー
- ディレクター
会話上での使用例
リニューアルでトップページの構成を全面的に見直すことになった打ち合わせの場面
-
プロデューサー
今回のリニューアルでは、トップの画面構成を思いきって全面的に作り直したいと思っています。
-
Web 担当者(発注側)
そうですね。ただ見た目の好みで決めるのは避けたいので、まずはワイヤーフレームの段階から、何を達成してほしいかという目的を起点に 画面構成 を組み立てていきましょう。
-
デザイナー
承知しました。では離脱率の高い箇所を先に洗い出して、そこを優先的に並べ替える方向で叩き台を用意します。
デザイン変更の提案を受けて、社内で改善の優先順位を相談する場面
-
マーケター
もっと印象的になるように、デザインをガラッと変えたいんですよね。
-
Web 担当者(発注側)
気持ちは分かるのですが、画面構成 を大きく変えると数字への影響も大きいんです。まずどこが課題なのか仮説を立てて、A/B テストで効果を確かめてから本格的に変える流れにしませんか。
-
マーケター
なるほど、いきなり全部変えずに検証してからですね。それで進めましょう。