【NEW 】転職や給料アップに向けて、Webマーケティング関連の資格について調べてみた [ → 記事を読む ]

グローバルナビゲーションの種類とレイアウト例

グローバルナビゲーションの種類とレイアウト例

構成やデザインを作成する際に、クライアントの意向を反映できるレイアウトを、自身の経験や競合他社のサイトから選定するのですが、その時間を短縮するために情報を集めてストックできたら効率的だなと思い、本ページを作成することにしました。

随時、案件が発生する度に更新していく予定なので、最新のデザインなども反映していけたらと考えていますし、日々の仕事のクオリティとスピードを向上に寄与するページ作りができたらいいなと思っています。

グローバルナビゲーションで大事なこととは?

グローバルナビゲーションは、サイトの柱にあたる部分で、ユーザーが欲しい情報に辿り着くために重要です。どのようなことに考慮すればよいかというと、

  • 掲載したいカテゴリの多さ
  • ページの量・内容

などによって、そのサイトに最適なレイアウト(今回の場合は、ナビゲーション)をセレクトする必要があります。又、ユーザーが迷わない導線づくりが必要なため、ナビゲーションの各表記は分かりやすいものにしておくことが大事です。

ナビゲーション例・7種|ヘッダー下部配置

1)ヘッダー下部全体がメニュー

このタイプが一番多い、画面上部に配置するグローバルナビゲーション。誰も見たこともある「定番のグローバルナビゲーション」です。

2)左:ロゴ + 右:メニュー

次に多いのがこのタイプ。画面上部に配置するグローバルナビゲーションで、左側にロゴを配置し、右側はメニューを設置したものです。

3)真ん中:ロゴ + 左右:メニュー

時折みられるレイアウト。画面上部に配置するグローバルナビゲーションで、ヘッダーなどに置きがちなロゴを、ナビゲーションのセンターに置くタイプです。

4)ドロップダウンメニュー

画面上部に配置するグローバルナビゲーションで、メニューをクリックする、もしくはホバー時にメニューが表示されます。メニュー下部へドロップダウンするメニューです。1つのメニューの中に、表示させたい項目(カテゴリ)が複数ある場合などに最適です。

5)メガメニュー|コンパクト

画面上部に配置するグローバルナビゲーション。4番のドロップダウンメニューよりも、更に表示領域が大きくなったメニュー。クリック時もしくはホバー時に表示されます。

6)メガメニュー|フルスクリーン

5番のメガメニューよりも更に大きなグローバルナビゲーション。クリック時もしくはホバー時に表示されます。

このナビゲーションは、第2・3階層まで表示させることができるため、ページ数や多い場合や表示させたい項目(カテゴリ)が複数ある場合に最適。又、オススメしたい情報が各メニュー毎にある場合などに使えるグローバルナビゲーションです。

7)バーガーメニュー

グローバルナビゲーションの領域をコンパクトに抑えたい場合に使います。
スタイリッシュモダンなサイトを目指し、且つナビゲーションの表示にこだわりのないクライアントさんの場合に使う場合が多いです。

巷では、廃れていくメニュー&分かりづらくて良くないなどと言われていますが、クリエイティブにこだわるクライアントさんからは好評です。

ナビゲーション例・2種|サイドに配置

1)メニューをサイドに配置

画面左側もしくは右側に配置したグローバルナビゲーション。ECサイトのように、カテゴリやお知らせしたいものが多い時に活用できます。

2)メニューをサイドに配置|固定

画面左側もしくは右側に配置した、固定型のグローバルナビゲーション。和テイストのサイト制作時などに使う場面が多いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA