コーポレートサイトの画面設計チェックリスト【トップページ、共通ナビ】
2023年01月31日
2023年01月31日
これまで、webディレクター、プロデューサーとしてそれなりに多くのwebサイト制作に関わってきました。webサイト制作は複数の工程に別れますが、自分は特に設計部分に携わる事が多いです。
そのwebサイトの設計をするなかで自分が意識していることをリストアップしておきます。
今回はwebサイトのトップページ（+共通メニュー部分）についてです。
今後、他のページ種別についてもまとめていこうかなって思っています。 多分網羅性があるわけでもないので、随時この記事もアップデートしていければと思っています。
※結構自分用の備忘チェックリストにも近いですかね。
トップページの画面設計で意識・注意すること。
キービジュアル
- 企業の価値を端的に表すブランドコピー、タグラインをファーストビューに入れる。
- キービジュアル部分は、企業の特長で内容を分ける。
- キービジュアル部分で企業の価値訴求が出来ているかという観点で考える。
- キービジュアル内にトピック情報や新製品情報を出す場合は慎重に検討する。
- サイトの顔になる部分なので、サイト全体の印象を左右しやすい）
- キービジュアル部分でのカルーセル表示は慎重に検討する。
- ユーザーは上から下に情報を見ていく、横にスクロールする要素は見られない可能性が高い、という前提で考える。
トピック・お知らせ
- CMS更新できる「トピック情報・最新のお知らせ」は表現の柔軟性を持たせる。
- 優先度別の情報訴求エリアを設けておき、お客さま側でどこに出すかを選択してもらう方が、利用頻度は高い。（訴求エリア大、訴求エリア中、訴求エリア小）
- お知らせ表示エリアは、ページの最上部に置くこともあるし、最下部に置くこともある。
- まずは会社を知ってもらうということに重きを置いているからか最近のトレンドはページの最下部に置くことの方が多い印象。
- 「重要なお知らせエリア」を設ける。
- 流れていかない常時表示させられるお知らせ表示欄として定義しておく。
- 重要なお知らせは日付不要であることが多いので非表示の方が望ましい。
サービス訴求エリア
- 主要なサービスや事業概要を端的に訴求できる要素をピックアップして表示。
- サービストップとの兼ね合いも考慮する。（直接サービストップにランディングされることもあるので、サービストップと情報や導線表示が似通うことは問題ではない。）
- 社会的認知度の低い会社であれば、固有名詞のサービス名より、そのサービスが提供するメリットの方を目立たせてる。
下層コンテンツへの導線・目次
- サイト全体の主要コンテンツの目次として機能させる。
- 第２階層のすべてのコンテンツをリスト表示する必要はないが、各カテゴリトップへの導線は「すべて見る」というような形で配置する。
- 「すべてを見る」ボタンの表示位置は、ピックアップしたコンテンツよりも下に置く。「ピックアップコンテンツに求める情報がないのでカテゴリトップに行く」というユーザーの行動原理に踏まえた導線配置の順番を守る。
ヘッダーのグローバルナビゲーションで意識・注意すること。
グローバルナビゲーション
- コンバージョン導線は他とは違う形で入れる。
- トップページへの導線を入れる。
- グローバルナビに入れる項目は7個までに抑える。（一応そういう定説があるので意識はするようにしている感じ。）
- 8個以上に並べる場合は、そのコンテンツへの導線の貼り方も別でルールとして準備しておく。（サイト全体のサイトマップをナビゲーション内に入れる等）
- サイトの種別によっては、PCサイトであっても常時表示メニューとハンバーガーメニューを併用する。
- グローバルナビのメニュー項目をクリックしたらそのカテゴリトップにリンクするようにする。メガメニューの利用を強制させない。
メガメニュー
- 掲載する情報は取捨選択する。すべてのコンテンツへの導線を格納する必要はない。
- 情報の優先度で掲載コンテンツを選択し、優先度別に見た目も差別化を図る。
- 各カテゴリトップへの導線を「○○○○のトップへ」という意味の分かる形で設ける。
- この導線は、グローバルナビゲーションのメニューにマウスオーバーした状態からカーソルを持っていきやすい場所に配置する。
- スマホ利用時はハンバーガーメニュー内に収めることを模索する。
- メガメニューからしかいけないページは設けない。あくまで補助的な導線であることを意識する。
フッターサイトマップ
フッターサイトマップは入れたり入れなかったり。 最近はヘッダーをスクロールに追従させることが多いので、以前ほどフッターサイトマップという形で、フッター部分に下層ページへのリンク一覧をずらずら並べることは頻度としては減ってきている印象。
サイト全体に共通する画面設計時の暗黙ルール。
トップページも関係するがサイト全体で共通認識にしておきたいこともリストアップしておきます。
- 画面設計は戦略策定、サイト構造（コンテンツマップ）ありき。
- 画面設計の表示テキストは日本語で考える。海外向けサービスではない限り、英語は禁止。
- 英語を入れる場合は、あくまで装飾と考える。装飾はデザイナーに委ねる。
- 「項目名」と「価値」の伝え方を切り分けて考える。
- H2は項目名にするが、H3は価値を端的なコピーで伝える、、等。
関連記事
