ホームページに必須のヘッダメニュー。
そのサイトにどんなコンテンツがあるのかを明示的にする大事な導線です。
基本的に「いかにユーザーのアクションを少なく目的の情報に到達させるか」が目標になるのですが、情報を増やしすぎると逆に迷わせることにもなるのでさじ加減が難しいところでもあります。
今回は大事なナビゲーションでもあるヘッダメニューのパターンについて見ていきましょう。
1.通常メニュー
第一層または主要コンテンツに絞ったシンプルな構成。
各メニューは単一のページにリンクします。
５ページ前後の一般的なコーポレートサイトならこれで十分です。
ただ横並びで詰めすぎるとブラウザ縮小時に収まりきらなくなる可能性があるので、問い合わせはアイコンにするなどの考慮を検討したほうが良いです。
2.ドロップダウンメニュー
次にマウスを当てると広がるドロップダウンメニュー。
サイト構成にもよりますが、親・子階層になっているコンテンツをアコーディオン表示する構成です。
ページ数が10ページ前後くらいならば１工程で全ページを網羅できるのがメリットです。
ただ詰め込みすぎて縦に長くなるとマウス操作の距離が長くなってしまうため、別の対応をするほうがベターです。
3.メガメニュー
ドロップダウンのようにマウスを当てると広いエリアで表示されるのがメガメニュー。
サイトの階層構造が少ない工程でより広く見渡せるのがメリットです。
あと画像を載せてどういったコンテンツ群なのかを明示することもできます。
サービスや商品が細分化された構成でページ数は15〜20ページ以上のサイトで有効な手段です。
ただ広い面積を占有するため、レスポンシブ時にどこまでメガメニューのレイアウトを保持するかを決定するため、あらかじめ最大コンテンツ量を検討しておく必要があります。
4.ハンバーガーメニュー
スマホではお馴染みのハンバーガーメニュー。
ユーザー体験として浸透している為、PCでもハンバーガーに収めてしまうのが最近増えています。
レイアウトに影響せずメガメニューより広い面積にコンテンツを整理できるのと、PC・スマホに関係なく同じメニュー構造で対応できるのがメリットです。
コンテンツボリューの大小かかわらず、このメニューだけでサイトマップとしてコンテンツを網羅できるのも良いです。
あとはアコーディオンで折りたたんでおくという方法も無理なく併用できます。
モバイルファースト的な側面もあるので、主にスマートフォンでの閲覧をターゲットししたサイトとの親和性が高いですね。
ということで今回はヘッダメニューいろいろについて語ってみました。
ホームページは「見る」ものではなく「使う」ものです。
いかにユーザーを迷わせずに目的の情報へ到達させるかが重要なので、自分のサイトにはどのタイプがベターか、より良い方法を検討してみてください。
もちろん、こちらからもご提案いたしますので是非お気軽にご相談ください。
