「専門スキルを伸ばす VS 幅広い領域に挑戦する」フリーランスの生存戦略討論
- スキル
- フリーランス/個人事業主
- 座談会
Webサイトに欠かせない存在である「ナビゲーションメニュー」。Webデザイナーの悩みのたねでもありますよね。ユーザーにとって使いやすく、かつデザイン性にも優れたナビゲーションメニューについて日々頭を悩ませているはずです。
デザイナーによって、ナビゲーションメニューの好みはさまざま。そこで今回は、デザイナーのスタイルを問わずに活用できる「固定ナビゲーションメニュー」のトレンドデザインを4つの種類に分けてご紹介します。
WebサイトのUXを改善するデザイン方法も合わせて解説しているので、デザイナーの方はぜひ参考にしてください。
まずはじめにナビゲーションメニューの2019トレンドデザインを4つご紹介します。トレンドデザインを取り入れたWebサイトの例も挙げているのでぜひ参考にしてみてください。
オートリサイズナビゲーションメニューは大きいサイズのナビゲーションメニューを採用したいデザイナーにおすすめです。
画面サイズに合わせて自動的にナビゲーションメニューがリサイズされるため、ナビゲーションメニューがスペースを占領してしまう心配がありません。画面の面積がより限られているモバイル端末にも対応可能です。
Fandango Media Groupはオートリサイズナビゲーションメニューを採用しているWebサイトです。
画面サイズに合わせて、上部に固定されているナビゲーションメニューのサイズも変わっているため操作性に優れています。
メニューが小さすぎて見つからなかったり、メニューが大きすぎてWebサイトの情報が隠れてしまうとユーザーをイライラさせる原因になります。オートリサイズナビゲーションメニューを活用してUXの向上を目指しましょう。
ナビゲーションメニューのリンクサイズやロゴを変化させるデザインもUXの改善に効果的です。
Tweed Barbersの例を見てみましょう。画面サイズを変えると、ナビゲーションメニューのロゴサイズも変化しています。ロゴ配置は、スタンダードなデザインで、画面の大きさに沿った設計にすることが大切です。
これまでは横型のナビゲーションメニューが主流でしたが、近年は縦型のナビゲーションメニューを採用するWebサイトも増えてきています。
縦型のナビゲーションメニューは以下のようなメリットがあります。
Jorge Rigabert氏のポートフォリオサイトを見てみましょう。画面左に固定されているナビゲーションメニューにロゴが含まれており、縦型のナビゲーションメニューなのでスクロールする際のサイズ変更の必要がありません。
Michael Ngo氏のポートフォリオサイトも縦型のナビゲーションメニューを採用しています。
カスタムアイコンを使用しており、ポートフォリオサイトに適したミニマルなナビゲーションメニューです。Webサイト全体をシンプルなデザインに仕上げたい方は参考にしてみてください。
さらにテクニカルなアプローチをしているのがRoman Kirichik氏のポートフォリオサイトです。
ファーストビューはナビゲーションメニューが画面の半分を占めていますが、一度スクロールすると小さなサイドバーに変化するデザインになっています。スクロールしてもナビゲーションメニューは固定されているので、Webサイトのどこからでも簡単にアクセスできます。
縦型のナビゲーションメニューを採用して、UXを意識したWebデザインを行いましょう。
フラットデザインとロングシャドウの組み合わせたデザインに変わって、近年はページに深みを出せるドロップシャドウを取り入れたデザインのナビゲーションメニューが注目されています。
Grain & MortarのWebサイトは、上部に固定されたナビゲーションメニューにドロップシャドウをつけています。飛び出して見えるような濃いシャドウではなく、スクロールしてもナビゲーションメニューを見失わないようにするための薄いシャドウです。
存在感のあるドロップシャドウを使いたい方は、KarmaのWebサイトを参考にすると良いでしょう。
ナビゲーションメニュー全体にシャドウをつけているため、より立体感のあるナビゲーションメニューになっています。濃いシャドウを使うばあいは余白やバランスを見ながら実装して、見栄えの確認をしましょう。
アニメーション技法の進化に伴って、ナビゲーションメニューに細かいアニメーションを組み込むWebデザインが増えています。
難しいコードばかりではなく、HTMLやCSS、JavaScriptなどで実装できる簡単なナビゲーションメニューのコードも存在します。
ちょっとしたアニメーションを加えるだけで、ユーザーの印象に残りやすいWebサイトになるのでぜひ活用してみてください。
Search Engine JournalのWebサイトは下にスクロールすると、ヘッダーのロゴがアニメーションで表示されます。ナビゲーションメニューがページ上部にすっきりと保たれ、ロゴに注目を集められます。
99UのWebサイトは、ページをスクロールするとナビゲーションメニューがフェードするアニメーションが付けられています。Webサイトの情報を効果的に伝えられるデザインですね。
ナビゲーションメニューの流行を掴んだら、次は実際にデザインしてみましょう。
以下で紹介する5つのポイントを抑えて、UXを意識したWebサイトをデザインをしてみてください。
UXはナビゲーションメニューがシンプルになればなるほど向上します。最小限の重要な要素だけが残されたWebデザインほど、使い勝手が良くなるからです。
ナビゲーションメニューは、カテゴリの数とコンテンツ内の内部リンクから形成されます。Webサイトのナビゲーションメニューを作るときはユーザーが見やすいように、カテゴリの数やコンテンツ内の内部リンクを多く見せない工夫をしましょう。
ナビゲーションメニューをシンプルにするための最良の方法は、すべての異なるカテゴリを定義してから関連アイテムをグループ化することです。
ナビゲーションメニューをグループ化してデザインすることでスクロール操作の手間が省け、ユーザーが操作やすいWebサイトになります。
ナビゲーションメニューは理解しやすいよう正しく編成し、強力な視覚的糸口を設け、正しい場所に配置しなければなりません。
前のページに戻る、ビデオを見る、テキストをもっと読む、外部リンクに飛ぶ、個人情報を入力するなどのアクションの質は、ユーザーのコンバージョン率に影響します。
ページを閲覧するユーザーの視線の動きとして「Fの法則」が重要視されています。上部を水平に一瞥し、次に左側をページの下部に向かって垂直方向にスキャンする動きです。
これは、英語ユーザーが、ページの左側から読むことに慣れており、そのため、その側にあるものに意識を集中させるからです。反対に、右から左への読み上げに慣れている日本人の場合は、逆のパターンが適切な場合もあります。
コンテンツやユーザーの特性に合わせてナビゲーションメニューの配置をしましょう。
ナビゲーションメニューの言葉遣いも、UXの向上に大切な役割を果たす大事なポイントです。ナビゲーションメニューの表示方法が優れていたとしても、項目が非一般的に記述されていると、UXの向上は難しくなります。
Webサイトのナビゲーションメニューは、シンプルかつ誰にでもわかる言葉を使いましょう。またナビゲーションメニューを見やすくするために各項目の言葉は短くすることも大切です。カテゴリの名前にクリエイティビティを発揮したところで、混乱を招くだけです。
ナビゲーションメニューで使用される言葉はWebサイトのタイプによって異なりますが、共通している要点は次の4つです。
ナビゲーションメニューの言葉もWebデザインを決める要素のひとつです。ユーザーがわかりやすく、見やすい言葉遣いがUXの向上に繋がるでしょう。
カテゴリ表示において、次の例が該当するケースでは、アルファベット順にカテゴリを表示しないことをおすすめします。
リンクの並び順序は、多くのユーザーが探しているものをすぐに見つけられるように編成しなければなりません。最も頻繁に使用されるナビゲーションメニューが一番上に表示されていると、ユーザーはメニュー全体を精読する必要がないのでWebサイトのUXを向上できます。
ナビゲーションメニューのカテゴリを優先順位付けすることによって、最も重要なメニューが見失われることがなくなります。
販売を目的としたWebサイトでは、重要度の高いメニューをカテゴリ一覧に含めるのではなく、ナビゲーションメニューのトップ付近に配置した方が効果的でしょう。
ホバーアクティブ化されたメニューは、デスクトップやラップトップコンピュータのユーザーに即座にアクセスできるメリットがあります。しかしタッチスクリーンデバイスでアクセスするユーザーもいるので、ホバーのアクティブ化が望ましくない場合があることを覚えておきましょう。
タッチスクリーンデバイスは画面が小さいためデバイスからWebサイトを閲覧した場合、狙った通りにタップしたり、スクロールすることが困難になります。ホバーメニューを採用したい場合は、タッチスクリーンユーザーがPC上でホバーをアクティブにして、アクセスしているユーザーと同じナビゲーションメニューを使えるようにしましょう。
ナビゲーションメニューは、すべてのページに簡単にアクセスできる便利さと、デザインの可能性の幅広さが特徴です。
流行を抑えて、UXを意識したナビゲーションメニューをデザインしましょう。
(参考:designmodo/ Design your way 執筆:Asuka Nakajima/ Ayaka Takei)
こちらもおすすめ!▼
今風に作られたスライド式サイドバーのコードスニペット9選
Workship MAGAZINE
スライドアウトボックスメニューという新しいアプローチのご紹介
Workship MAGAZINE
ナビゲーションメニューのデザイントレンドは?良いUXを生み出す5つのポイント
Workship MAGAZINE