ナビゲーションメニューのデザイントレンドは？良いUXを生み出す5つのポイント

Webサイトに欠かせない存在である「ナビゲーションメニュー」。Webデザイナーの悩みのたねでもありますよね。ユーザーにとって使いやすく、かつデザイン性にも優れたナビゲーションメニューについて日々頭を悩ませているはずです。

デザイナーによって、ナビゲーションメニューの好みはさまざま。そこで今回は、デザイナーのスタイルを問わずに活用できる「固定ナビゲーションメニュー」のトレンドデザインを4つの種類に分けてご紹介します。

WebサイトのUXを改善するデザイン方法も合わせて解説しているので、デザイナーの方はぜひ参考にしてください。

ナビゲーションメニューのデザインにおける4つのトレンド

まずはじめにナビゲーションメニューの2019トレンドデザインを4つご紹介します。トレンドデザインを取り入れたWebサイトの例も挙げているのでぜひ参考にしてみてください。

1. オートリサイズナビゲーションメニュー

オートリサイズナビゲーションメニューは大きいサイズのナビゲーションメニューを採用したいデザイナーにおすすめです。

画面サイズに合わせて自動的にナビゲーションメニューがリサイズされるため、ナビゲーションメニューがスペースを占領してしまう心配がありません。画面の面積がより限られているモバイル端末にも対応可能です。

▲出典：Fandango Media Group

Fandango Media Groupはオートリサイズナビゲーションメニューを採用しているWebサイトです。

画面サイズに合わせて、上部に固定されているナビゲーションメニューのサイズも変わっているため操作性に優れています。

メニューが小さすぎて見つからなかったり、メニューが大きすぎてWebサイトの情報が隠れてしまうとユーザーをイライラさせる原因になります。オートリサイズナビゲーションメニューを活用してUXの向上を目指しましょう。

▲出典：Tweed Barbers

ナビゲーションメニューのリンクサイズやロゴを変化させるデザインもUXの改善に効果的です。

Tweed Barbersの例を見てみましょう。画面サイズを変えると、ナビゲーションメニューのロゴサイズも変化しています。ロゴ配置は、スタンダードなデザインで、画面の大きさに沿った設計にすることが大切です。

2. 縦型のナビゲーションメニュー

これまでは横型のナビゲーションメニューが主流でしたが、近年は縦型のナビゲーションメニューを採用するWebサイトも増えてきています。

縦型のナビゲーションメニューは以下のようなメリットがあります。

• ユーザーにWebサイトのインパクトを与えられる
• メニューページを追加する際にデザイン修正の必要がない
• メニューをたくさん表示できるためシングルページにのWebサイトにも適している

▲出典：Jorge Rigabert

Jorge Rigabert氏のポートフォリオサイトを見てみましょう。画面左に固定されているナビゲーションメニューにロゴが含まれており、縦型のナビゲーションメニューなのでスクロールする際のサイズ変更の必要がありません。

▲出典：Michael Ngo

Michael Ngo氏のポートフォリオサイトも縦型のナビゲーションメニューを採用しています。

カスタムアイコンを使用しており、ポートフォリオサイトに適したミニマルなナビゲーションメニューです。Webサイト全体をシンプルなデザインに仕上げたい方は参考にしてみてください。

▲出典：Roman Kirichik

さらにテクニカルなアプローチをしているのがRoman Kirichik氏のポートフォリオサイトです。

ファーストビューはナビゲーションメニューが画面の半分を占めていますが、一度スクロールすると小さなサイドバーに変化するデザインになっています。スクロールしてもナビゲーションメニューは固定されているので、Webサイトのどこからでも簡単にアクセスできます。

▲出典：1Bite2Go

縦型のナビゲーションメニューを採用して、UXを意識したWebデザインを行いましょう。

3. ドロップシャドウを使ったナビゲーションメニュー

フラットデザインとロングシャドウの組み合わせたデザインに変わって、近年はページに深みを出せるドロップシャドウを取り入れたデザインのナビゲーションメニューが注目されています。

▲出典：Grain & Mortar

Grain & MortarのWebサイトは、上部に固定されたナビゲーションメニューにドロップシャドウをつけています。飛び出して見えるような濃いシャドウではなく、スクロールしてもナビゲーションメニューを見失わないようにするための薄いシャドウです。

▲出典：Karma

存在感のあるドロップシャドウを使いたい方は、KarmaのWebサイトを参考にすると良いでしょう。

ナビゲーションメニュー全体にシャドウをつけているため、より立体感のあるナビゲーションメニューになっています。濃いシャドウを使うばあいは余白やバランスを見ながら実装して、見栄えの確認をしましょう。

4. アニメーション付きナビゲーションメニュー

アニメーション技法の進化に伴って、ナビゲーションメニューに細かいアニメーションを組み込むWebデザインが増えています。

難しいコードばかりではなく、HTMLやCSS、JavaScriptなどで実装できる簡単なナビゲーションメニューのコードも存在します。

ちょっとしたアニメーションを加えるだけで、ユーザーの印象に残りやすいWebサイトになるのでぜひ活用してみてください。

▲出典：Search Engine Journal

Search Engine JournalのWebサイトは下にスクロールすると、ヘッダーのロゴがアニメーションで表示されます。ナビゲーションメニューがページ上部にすっきりと保たれ、ロゴに注目を集められます。

▲出典：99U

99UのWebサイトは、ページをスクロールするとナビゲーションメニューがフェードするアニメーションが付けられています。Webサイトの情報を効果的に伝えられるデザインですね。

UXを意識したナビゲーションメニューをデザインする5つのポイント

ナビゲーションメニューの流行を掴んだら、次は実際にデザインしてみましょう。

以下で紹介する5つのポイントを抑えて、UXを意識したWebサイトをデザインをしてみてください。

1. グループ化してシンプルに

▲出典：itsjustyes.com

UXはナビゲーションメニューがシンプルになればなるほど向上します。最小限の重要な要素だけが残されたWebデザインほど、使い勝手が良くなるからです。

ナビゲーションメニューは、カテゴリの数とコンテンツ内の内部リンクから形成されます。Webサイトのナビゲーションメニューを作るときはユーザーが見やすいように、カテゴリの数やコンテンツ内の内部リンクを多く見せない工夫をしましょう。

▲出典：grosselanterne.com

ナビゲーションメニューをシンプルにするための最良の方法は、すべての異なるカテゴリを定義してから関連アイテムをグループ化することです。

ナビゲーションメニューをグループ化してデザインすることでスクロール操作の手間が省け、ユーザーが操作やすいWebサイトになります。

2. ナビゲーションの配置は分かりやすく

▲出典：Frantisek Kusovsky

ナビゲーションメニューは理解しやすいよう正しく編成し、強力な視覚的糸口を設け、正しい場所に配置しなければなりません。

前のページに戻る、ビデオを見る、テキストをもっと読む、外部リンクに飛ぶ、個人情報を入力するなどのアクションの質は、ユーザーのコンバージョン率に影響します。

▲出典：Mani

ページを閲覧するユーザーの視線の動きとして「Fの法則」が重要視されています。上部を水平に一瞥し、次に左側をページの下部に向かって垂直方向にスキャンする動きです。

これは、英語ユーザーが、ページの左側から読むことに慣れており、そのため、その側にあるものに意識を集中させるからです。反対に、右から左への読み上げに慣れている日本人の場合は、逆のパターンが適切な場合もあります。

コンテンツやユーザーの特性に合わせてナビゲーションメニューの配置をしましょう。

3. 用いるワードは分かりやすく

ナビゲーションメニューの言葉遣いも、UXの向上に大切な役割を果たす大事なポイントです。ナビゲーションメニューの表示方法が優れていたとしても、項目が非一般的に記述されていると、UXの向上は難しくなります。

▲出典：Saptarshi Prakash

Webサイトのナビゲーションメニューは、シンプルかつ誰にでもわかる言葉を使いましょう。またナビゲーションメニューを見やすくするために各項目の言葉は短くすることも大切です。カテゴリの名前にクリエイティビティを発揮したところで、混乱を招くだけです。

ナビゲーションメニューで使用される言葉はWebサイトのタイプによって異なりますが、共通している要点は次の4つです。

• ユーザーは標準的な言い回しに慣れ親しんでいるので、一般的な言葉を使用する
• 画像を追加した場合は、画像の効果を最大限に発揮するために言葉の表現を最小限に留める
• Webサイトに珍しいカテゴリがある場合は、補足を書く
• Webサイトにとって適切であれば、パーソナライズされた言葉遣いがユーザーに対してより親密なナビゲーションとなるので使用しても良い

ナビゲーションメニューの言葉もWebデザインを決める要素のひとつです。ユーザーがわかりやすく、見やすい言葉遣いがUXの向上に繋がるでしょう。

4. カテゴリの並び順に気を配る

カテゴリ表示において、次の例が該当するケースでは、アルファベット順にカテゴリを表示しないことをおすすめします。

• 各カテゴリに論理的な順序がある場合
• 訪問者がカテゴリの正式名称に慣れていない場合
• 各カテゴリに優先順位を付ける必要がある場合

リンクの並び順序は、多くのユーザーが探しているものをすぐに見つけられるように編成しなければなりません。最も頻繁に使用されるナビゲーションメニューが一番上に表示されていると、ユーザーはメニュー全体を精読する必要がないのでWebサイトのUXを向上できます。

▲出典：7diamonds.com

ナビゲーションメニューのカテゴリを優先順位付けすることによって、最も重要なメニューが見失われることがなくなります。

販売を目的としたWebサイトでは、重要度の高いメニューをカテゴリ一覧に含めるのではなく、ナビゲーションメニューのトップ付近に配置した方が効果的でしょう。

5. ホバーメニューはなるべく小さく作る

ホバーアクティブ化されたメニューは、デスクトップやラップトップコンピュータのユーザーに即座にアクセスできるメリットがあります。しかしタッチスクリーンデバイスでアクセスするユーザーもいるので、ホバーのアクティブ化が望ましくない場合があることを覚えておきましょう。

タッチスクリーンデバイスは画面が小さいためデバイスからWebサイトを閲覧した場合、狙った通りにタップしたり、スクロールすることが困難になります。ホバーメニューを採用したい場合は、タッチスクリーンユーザーがPC上でホバーをアクティブにして、アクセスしているユーザーと同じナビゲーションメニューを使えるようにしましょう。

まとめ

ナビゲーションメニューは、すべてのページに簡単にアクセスできる便利さと、デザインの可能性の幅広さが特徴です。

流行を抑えて、UXを意識したナビゲーションメニューをデザインしましょう。

（参考：designmodo/ Design your way　執筆：Asuka Nakajima/ Ayaka Takei）

こちらもおすすめ！▼