こんにちは、Mochiです。
ページの上のほうにメニューのようなものをを見た事は無いでしょうか？いろんなカテゴリだったりが置かれているのがナビゲーションで、特にサイトの重要な内容を配置しているのがグローバルナビゲーションです。
もしグローバルナビゲーションがなかったり、使いにくいデザインだと他のページに行くことができないので、非常に困ってしまいます。逆にグローバルナビゲーションのデザイン性が高ければ、自分の狙ったページにすぐにたどり着くことができますし、サイト側も自分のサイトをより魅力的に見せることができます。
でも、グローバルナビゲーションのいいデザインを探したいんだけど、どんなデザインの種類があるの？デザインするのに、何か良いアイディアとかヒントをたくさん見られたらいいのになぁ🤔
そんな悩みはありませんか？
この記事はそんな方に向けた記事です。この記事を読むことで魅力的なウェブサイトをつくる上で役立つグローバルメニューのデザインを種類別に見られ、好みのデザインを選択することができます。またグローバルメニューのアイディアやヒントを得ることができます。
では、まずはナビゲーションは知っているけど、グローバルナビゲーションはあまり聞いたことがない方に向けて、どんなものかを説明します。
グローバルナビゲーションとは
グローバルナビゲーションは、Webサイトの上部（トップページや各ページのヘッダー）に配置される、サイト全体の主要なコンテンツへのリンクをまとめたメニューです。他にもグローバルメニューとも呼ばれたりします。
グローバルナビゲーションのデザインには、さまざまな種類があります。ここでは、実際に複数のWebサイトやアプリケーションでデザインを行った経験がある私、Mochiが独自の視点から8つの種類に分類して説明します。
私の視点からのメリット・デメリットもまとめておくので、参考にしてみてください。
では早速、8種類に分類したデザインを見ていきましょう。
グローバルナビゲーションの8種類のデザイン
シンプルなタブ
最もシンプルなデザインで、タブ形式でコンテンツを表示します。タブのデザインは、テキストのみ、アイコンのみ、テキストとアイコンの組み合わせなど、さまざまなバリエーションが可能です。
「とりあえず1番シンプルに作りたい」という方や「速く作っちゃいたい」といった方は、こちらのシンプルタブのタイプを作るのがオススメです。
メリット
- シンプルでわかりやすい
- 制作が簡単
デメリット
- コンテンツ量が多いと、タブが小さくなり見づらくなる
- 並べられる量に限界がある
- サブカテゴリのページには移動できない
タブ＋小サイズのリスト
シンプルなタブに詳細なリストを追加したデザインです。タブをクリックしたり、ホバーすると、リストが展開して小さなサブカテゴリを表すコンテンツが表示されます。
先程のタブだけだとたどり着けない、ユーザが狙ったページに1クリックで飛ぶことができるのも大きな特徴です。
メリット
- シンプルなタブにリストを追加することで、コンテンツ量を増やすことができる
- 一発でサブカテゴリのページに辿り着ける
デメリット
- リストを展開しないと、コンテンツ量がわからない
- ホバーの場合は操作ミスで閉じてしまい、煩わしい時がある
タブ＋中サイズのリスト
タブ＋小サイズのリストよりも、リストのサイズを大きくしたデザインです。より多くのコンテンツを表示できるため、サイトのコンテンツ量が多い場合に適しています。
また、表示できる領域が広いため、軽い説明も付け加えることができます。 そのためメインは英語表記で日本語でちょっと説明を加えるといったパターンもあります。
メリット
- タブ＋小サイズのリストよりも、リストのサイズを大きくすることで、より多くのコンテンツを表示できる
- アイコンが入れやすい
デメリット
- リストのサイズが大きくなるため、画面のスペースを多く占める
タブ＋大サイズのリスト
タブ＋中サイズのリストよりも、リストのサイズをさらに大きくしたデザインです。また、より多くのサブカテゴリを示すだけではなく、説明文や画像を加えるスタイルもあります。
メリット
- タブ＋中サイズのリストよりも、リストのサイズをさらに大きくすることで、リスト内のコンテンツを詳細に表示できる
- 詳細を書けるため、ユーザは内容を理解してからページを移動することができる
- 説明文や画像を入れることができる
デメリット
- リストのサイズが大きくなるため、画面のスペースをさらに多く占める
- 目的のものを見つけるのが大変になる
サイドメニュー
上部ではなく、画面の横にメニューを表示するデザインです。ページを暗くして、サイドメニューのみを目立たせる場合もあります。
また、上部に出されているメニューと同じ内容がサイドメニューにも出ているケースも結構ありました。
メリット
- 画面の中央にメニューを表示するよりも、スペースを有効に活用できる
- リスト形式で表示するため、コンテンツ量が多い場合でも見やすい
デメリット
- 画面の横幅が狭いと、メニューが押しづらくなったりする
- 文字が長いと折り返しで見た目が不格好になる
ローカルナビゲーションとの組み合わせ
グローバルナビゲーションとローカルナビゲーションを組み合わせたデザインです。ローカルナビゲーションとは、グローバルナビゲーション選択後のページごとに表示されるメニューです。
以下の例は、グローバルナビゲーションで「本」を選択した後のページです。
ローカルナビゲーションでは、グローバルナビゲーションと同じような前述のどれかのスタイルのナビゲーションが利用されます。また、現在選択中のメニューがローカルナビゲーションでは目立つように配置されているケースが多いです。
メリット
- グローバルナビゲーションとローカルナビゲーションを組み合わせることで、ページ単位の使いやすさを向上させることができる
- より深い階層構造を作ることができる
デメリット
- ローカルナビゲーションを追加することで、画面のスペースをさらに多く占めてしまう。
- そのページまで行かないと、サブカテゴリが選択できない
ハンバーガーメニュー
画面の右上などにアイコンを表示し、クリックするとメニューを表示するデザインです。スマホでよく見かけるデザインですね。
表示するメニューの形式としては、これまで説明してきた小から大サイズのリストやサイドメニューのような縦に重なったものが出てくることが多いです。メニューを開いた際に、背景を暗くするデザインもあります。
メリット
- 画面をすっきりと見せることができる
デメリット
- メニューを表示するために操作が必要になるため、使い勝手が悪くなる可能性がある
- 開くまで、どんなメニューがあるのかわからない
大きいイラスト＋メニュー
イラストとメニューを組み合わせたデザインです。 イラストの分、表示できるカテゴリが減ってしまいますが、インパクト重視のメニューを作ることができます。
メリット
- イラストが視覚的なアクセントとなり、サイトの印象を強くすることができる
- 商品の写真などがある場合には、ユーザの記憶に商品の印象を残すことができる
デメリット
- イラストのデザインや色彩によっては、サイトの印象が偏ってしまう可能性がある
- 適切な写真の撮影や選択が必要となる
リストのデザイン
先ほど示したでは文字だけのリストでしたが、私が調べたところ、リストにもいくつかの種類のデザインがあります。そのような、リストのデザインも紹介します。
リストには次のようなデザインの種類があります。
- 文字だけ（グローバルナビゲーションの8種類のデザインで利用）
- 文字と説明
- 画像と文字
- アイコンと文字（アイコンは色鮮やかな場合も多い）
- サブカテゴリを開けるアイコンと文字
これらの種類を組み合わせる場合もあります。例えば、アイコンと説明の両方を入れる場合です。
また、画像やアイコンは、カテゴリによってはなかなか選択が難しいです。目的に合ったリストのデザインを選んで、組み合わせてみてください。
デザインのヒントやアイデアをもらえるサイト集
更なるグローバルナビゲーションのデザインのヒントやアイディアをもらうのに、役立つサイトを紹介します。参考にして、インスピレーションを湧かしてみてください。
Awwwards
Awwwardsは、世界中の優れたWebデザインを集めたサイトです。グローバルナビゲーションのデザイン事例も多数掲載されており、トレンドや最新のデザインをチェックすることができます。
サイトのトップページには、最新のデザイン事例を取り上げており、カテゴリ別や国別に検索することもできます。また、各デザインの詳細ページでは、制作者のインタビューや解説が掲載されているため、デザインの裏側を知ることができます。
Dribbble
Dribbbleは、Webデザイナーやイラストレーターが作品を投稿するサイトです。グローバルナビゲーションのデザインアイデアが豊富に見つかります。
サイトのトップページには、新着作品を取り上げており、タグやキーワードで検索することもできます。また、各作品には、デザイナーによるコメントやいいねが付けられており、ユーザーの反応を参考にすることができます。
Web Design Inspiration
Web Design Inspirationは、Webデザインのヒントやアイデアをまとめたサイトです。グローバルナビゲーションのデザインに関する記事も多数掲載されています。
サイトのトップページには、最新のデザイントレンドや、Webデザインに関するコラムなどが掲載されています。また、カテゴリ別やテーマ別に記事を検索することもできます。
MUUUUU.ORG
MUUUUU.ORGは、WebデザインやWeb制作に関する情報を提供するサイトです。グローバルナビゲーションのデザイン事例や、デザインに関する解説記事などが掲載されています。
サイトのトップページには、最新のデザイントレンドや、Webデザインに関するニュースなどが掲載されています。また、カテゴリ別やテーマ別に記事を検索することもできます。
SANKOU!
SANKOU!は、WebデザインやWeb制作に関する情報を提供するサイトです。MUUUUU.ORGさんと同じサイトも並んでいますね…。
サイトのトップページには、最新のデザイントレンドや、Webデザインに関するニュースなどが掲載されています。また、カテゴリ別やテーマ別に記事を検索することもできます。
Web Design Clip
Web Design Clipは、WebデザインやWeb制作に関する情報を提供するサイトです。グローバルナビゲーションのデザイン事例や、デザインに関する解説記事などが掲載されています。
サイトのトップページには、最新のデザイントレンドや、Webデザインに関するニュースなどが掲載されています。また、カテゴリ別やテーマ別に記事を検索することもできます。
以上、インスピレーションやヒントをもらえそうなサイトを紹介しました。迷った際には、とりあえずこれらを眺めてみると、良いアイデアが浮かぶかもしれません！眺めてみましょう！
まとめ
この記事ではグローバルナビゲーションとは何かについて説明し、Mochiの視点からいくつかの種類にデザインを分けてわかりやすく紹介しました。 どうでしょう、好みのデザインのグローバルメニューは見つかりましたか？
「全体を読んだけど、選ぶのがやっぱり難しい」という方は、1番シンプルなタブだけのものを選ぶのがオススメです。 なぜなら、手軽に作れるからです。まずは作ってみて、後々実際に見たり使ったりして感じたことから、改良を重ねていくのも良い作戦だと思います🤓
