こんにちは。ディレクターのTです。
WEBディレクターの仕事の中で大きな割合を占めるのが構成案の作成です。
構成案はサイト制作の根本となる部分なので、クライアントの要望や現在抱えているお悩み・課題をヒアリングし、
それらを解決し、ターゲットに的確に情報が伝わるようにコンテンツの見せ方や配置を考えることが非常に重要です。
的確に情報を伝えるためには、サイト訪問者が自分の欲しい情報にすぐにたどり着けるようにする必要があります。
そこでポイントとなるのがサイトマップ、メニューをどうつくるかです。
今回は様々なパターンのサイトマップ、メニューの見せ方をご紹介します。
目次
ヘッダーメニュー＋メガメニュー
一番メジャーなヘッダーメニュー＋メガメニューのパターンです。
メガメニューは、ホバーで表示される場合が多いですが、こちらのサイトではクリック時に大きく表示されています。
このつくりになっているサイトは多いのでサイト流入者にとっても分かりやすいですね。
開閉式メニュー（サイド）
参照：toutou coco
右上のハンバーガーメニューをクリックすることでメニューが開きます。
TOPページがシンプルですっきりとし、洗練されたイメージになりますね。
メニューを縦並びの開閉式にすることにより「文字量が多くて横に並べると入りきらない」といった問題も解決することができます。
画面中央に飛び出すメニュー
右上の「Menu」をクリックすると飛び出るようなアニメーションとともにメニューが表示されます。
デフォルトでは最小表示になっているためMVの動画を邪魔しませんし、クリック時は中央に大きく表示されとても見やすいです。
さらに、こちらのサイトでは表示時のアニメーションやホバー時の背景の切り替わりなど、わくわくする仕掛けがたくさん盛り込まれています。
サイドバーとして表示
参照：馬路村ホームページ
左側に固定表示させホバーでメガメニューを表示させる仕様になっています。
このサイトでは文字サイズの変更や音声読み上げ機能があり、
それらのボタンと区分しつつ分かりやすく見せるためにこちらのかたちになっているようです。
メニュー以外にポイントとなる機能がある場合はこういった工夫も大切ですね。
全画面サイトマップ
TOPはヘッダーなどはとくになく、とにかくMVのインパクト重視のつくりになっています。
右上のハンバーガーメニュークリックで全画面にサイトマップが表示され、遷移が非常に分かりやすくなっています。
ページ数の多いサイトや遷移が複雑なサイトはこちらのように、
全画面サイトマップで整理して見せるようにすると良いかもしれません。
ヘッダーメニュー＋各ページセクションごとのサイトマップ
ヘッダーメニューに加えて、ハンバーガーメニューをクリックでサイトマップが全画面表示されます。
ヘッダーでも表示される各ページへの遷移だけでなく
各ぺージのセクションごとの遷移もあり、一つ一つのページのボリュームが多くても
どこに何が掲載されているのかをすぐに知らせることができます。
まとめ
サイトの特徴やコンテンツのボリューム、流入層、与えたい印象によって
サイトマップ・メニューの見せ方は工夫するべきですね！
参考になるサイトはとてもたくさんあるので日頃から
いろいろなサイトの見せ方を注意して見ておくことも大切です。
