海外デザインブログCanva Design School Blogで公開されたエントリー「Website Navigation Trends: 10 Tips & Examples」を日本語抄訳しています。

 

「ハンバーガー型メニュー」の扱い方に、ユーザーも慣れてきているようです。好きか嫌いかは別にして、この小さなデザイン要素は、ウェブサイトのナビゲーションデザインにおける、もっとも大きなトレンドのひとつとなっています。

 

 

しかしこのトレンドだけでなく、ナビゲーション・メニューを作成する方法は、大きく変わってきています。ハンバーガー型メニューのような、とても小さなサイズのナビゲーションから、特大サイズのナビゲーションメニューまで、ユーザーに情報をより分かりやすく、はっきり伝えることができる、10個のテクニックを今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

01. フルスクリーン型ナビゲーション

 

ナビゲーションメニュー自体が、デザインとなっているケースはどうでしょう。じっくりと検討し実装することで、ユーザーが他のページやコンテンツへと移動する手助けをしてくれる、有効的なテクニックとなります。

 

 

このテクニックは、ウェブデザインに分かりやすく導入することも、ほんのわずかだけ利用することも、両方のアプローチに対応できます。実際にメインコンテンツがナビゲーションメニューということを、ユーザーは理解できるでしょうか？もしなにも考えずに、サイトの使い方が分かるようであれば、このテクニックをうまく導入できたと言えるでしょう。

 

 

 

02. ページ下に配置するナビゲーション

 

通常、ナビゲーションメニューを設置する場所は、スクリーン画面の一番上でしょう。ユーザーがウェブページを読む順番として道理にかなうことから、ウェブデザインが作成されはじめた頃から活用されている方法です。

 

 

そのためデザイナーの中には、メイン・ナビゲーションメニューをページの下に移動した、新しいデザインの可能性を考えはじめています。少しだけ大きく表示したスタイルで、特に他のページでのナビゲーション・メニューの配置方法を考える必要がない、縦に長いシングルページに最適なテクニックのひとつです。

 

 

このテクニックの鍵は、スクロールしたときにビゲーション・メニューが見つけやすいように、ページ上部に固定することです。また、ユーザーが何をしたらよいか迷わないように、分かりやすくデザインすることが大切になります。

 

 

 

03. フルスクリーン型ナビゲーション

 

通常のナビゲーションスタイルをカスタマイズするもうひとつの方法は、メニューアイテムを水平ではなく、垂直方向に並べてみましょう。垂直型ナビゲーションは、ウェブサイトのカンバスや余白スペースの新しく、楽しい考え方と言えます。

 

 

垂直型ナビゲーション・メニューで人気の高いスタイルが、ハンバーガー型アイコンをクリックしたときに、垂直方向にメニューバーが展開する方法か、メインコンテンツに重なり、２カラムのようなレイアウトで表示される方法です。

 

 

特に2番目のテクニックの面白いところは、ウェブデザインのメインとなるコンテンツを作成するときに、異なるスタイルを反映されることができる点です。（同様にモバイルなど小さなスクリーンサイズにおいて、垂直ナビゲーションは簡単に隠すことができ、コンテンツ表示スペースを広げ、デザインの見た目を統一することができます。）

 

 

 

04. ナビゲーションメニューなし

 

コンテンツの少ないサイトでは、ナビゲーションメニューを含まないフレームワークを使っているケースがあります。ここで気をつけたいのは、ほとんどシングルページ型レイアウトでのみ、有効なテクニックということです。Coming Soonページや特集ページなどに検討してみるとよいでしょう。

 

 

いくつかのデザイン事務所などでは利用されているケースもありますが、あまりこのテクニックは、複数ページにコンテンツがあるウェブサイトにはおすすめできません。上記サンプルでは、Q&Aの質問形式をそのままナビゲーションメニューとして利用しています。通常のナビゲーションスタイルを使わずに、質問の答えとなる特定ページに、ユーザーを誘導しやすくなっています。

 

 

 

05. 横スライド型ナビゲーション

 

横スライド型（英: Slide-out）ナビゲーションは、モバイル端末において人気の高いテクニックです。ユーザーが最初にナビゲーションメニューを見るのではなく、メインコンテンツを先に表示することができます。

 

 

このテクニックのコンセプトは、モバイルやデスクトップなどすべての端末上で、アニメーション付きスライドエフェクト付きで適用することができます。モバイル型ナビゲーションスタイルを予想していない、デスクトップユーザーにちょっとした驚きを演出するテクニックのひとつです。

 

 

 

06. さらに展開するメガメニュー

 

数年前に人気となり、すぐに流行が去ってしまった（デスクトップ環境以外であまり好ましくないのが大きな理由。）メガナビゲーション・メニューのコンセプトを、デザイナーはもう一度考えるようになっています。今でもデスクトップ端末では利用されていますが、小さなスクリーンサイズでも、より改良が加えられています。

 

 

コンテンツや商品数の多い販売サイトで、特に好まれるテクニックです。例えば上記サイトでは、うまくメガメニュースタイルを適用しています。ナビメニューは、まず基本となるアイテムを素早く探すことができるサイドバーに、部門ごとにより詳しく探すことができる、メガメニューの２層からなります。

 

 

このテクニックをうまくウェブサイトに反映するポイントは、ナビゲーションメニューがスクリーン全体を覆うことです。上記サンプルでは、部門をクリックすると、そこからカテゴリーごとにアイテムを見つけることができるようになっています。（また、ポップアップ表示されるコンテンツのサイズも合わせることで、デザインをより素敵に魅せています。）

 

 

 

07. アニメーション付ナビゲーション

 

アニメーション・フェクトは、2015年に流行しているトレンドの中でも、特に注目されており、ナビゲーション・メニューのスタイリング要素として、活用されるケースが増えてきています。ナビメニューにアニメーションを加えるときは、シンプルさがもっとも大切になってきます。

 

 

素敵なホバーエフェクトを加えたり、矢印アイコンをアニメーション付きで表示し、ユーザーを分かりやすく誘導しましょう。上記サンプルでは、各メニューリストにマウスカーソルを合わせることで、少しだけ幅が広く表示されます。アニメーション効果は、ユーザーがいまどの場所を閲覧していて、どこがクリックできるのか、分かりやすくしてくれるでしょう。

 

 

このちょっとしたテクニックは、視覚的なエフェクトとしても魅力的と言えます。おどろきを与えるデザイン要素は、ユーザーのスクロールを止め、サイトがどのようになっているのか分析したり、他にもいい商品がないか、探すきっかけにもなるでしょう。

 

 

 

08. カード型ナビゲーション

 

上記サンプル、Pinterestではナビゲーションメニューを含め、すべてのコンテンツにカード型デザインを採用しています。カード状スタイルのもっとも効果的な導入方法のひとつと言っても良いでしょう。あらゆる年齢層のユーザーでも、使いやすさを感じるように考慮されています。

 

 

それぞれの異なるボード（メニューリスト）は、カード状に表示されます。また各ボードには、たくさんのカード状コンテンツが収録されており、スクロールすることで永遠に新しいコンテンツが表示され続けます。こうすることで、一日中サイトをクリックし続けてもらうように、デザイン設計されています。

 

 

また、より多くのユーザーやウェブサイトも、このレイアウト形式に慣れてきています。Google Material Designにはカード状スタイルのガイドラインも存在するほどです。このナビゲーションスタイルは、特に目立たせる必要のない、たくさんのコンテンツがある場合に効果的で、サイト全体のコンテンツを結びつける役目も果たします。

 

 

 

09. ボタンを使わないナビゲーション

 

文字テキストだけを表示することで、ボタンとして活用する新しいスタイルです。文字間隔をたっぷりと空け、ナビメニューをライン線で分け、ウェブページの上下部にシンプルに配置することができるスタイルです。ボタンのスタイリングを悩む必要もなく、他のコンテンツへユーザーを正しく導きます。（フルスクリーン写真を利用したサイトで特に有効。）

 

 

読みやすく、背景とのコントラストを強調できるフォント書体で、シンプルにスタイリングすることが、このテクニックの秘訣と言えます。余白スペースを十分に確保し、マウスや指によるタップが押しやすいように、メニューアイテムごとのスペースも広げるようにしましょう。

 

 

 

10. シングルページ型スクロール・ナビゲーション

 

たくさんのコンテンツを１ページにまとめたウェブサイトでは、手元操作そのものがナビゲーションとなります。特にデザインの中に手がかりもなく、ユーザーは次のコンテンツを見つけるために、スクロール（またはスワイプ）を繰り返すでしょう。

 

 

すこしややこしいテクニックのひとつで、コンテンツ数が少ないときにもっとも最適な方法となるでしょう。通常のナビゲーションメニューがないことで、ユーザーの興味をかきたて、実際にウェブサイトの他のページを訪れるきっかけづくりをしてくれます。ユーザーを惹きつける面白いコンテンツが、ウェブサイトに揃っていることが重要になるでしょう。

 

 

 

ユニークなナビゲーションメニューを採用した参考Webデザイン

 

他とは異なるアプローチで、ナビゲーションメニューを実装した以下のウェブサイトも参考にしてみましょう。実際にWebサイトを訪れてみることで、どのように展開するのか確認してみるとよいでしょう。

 

 

Adwyse

よく見かけるハンバーガー型アイコンを利用していますが、クリックすることで、ふわりとしたアニメーション付きでフルスクリーン表示されます。

 

 

 

Cave a Bieres

どこにナビゲーションメニューがあるか分かりますか？実は、スクリーン全体に表示されたイラストの中に、メニューリストが隠されています。

 

 

 

Seeing Data

このサイトは、ストーリーを読みながら情報を伝えます。クリックをするたびに、異なるデータへと移動し、さまざまな選択オプションから選ぶことができます。ナビゲーションメニューを利用していないサイトの参考例。

 

 

 

Ludlow Kingsley

ナビゲーションメニューは、はじめ非表示となっており、画面スクリーンの下にある三角マークが、続けてスクロールするように促します。

 

 

 

Nike LiDyana

ストーリーを伝えるためのツールとして、ナビゲーションメニューを利用しているサンプル例。クリックするアイコンによって、ストーリが変わり、はじめて訪れたユーザーの興味を惹く仕組みが素敵。

 

 

 

さいごに、。

 

Webサイトのナビゲーションメニューを作成するときに、あなたなら通常スタイル、それともデザインの最先端スタイルを狙いますか。どんなデザイントレンドにおいても、なぜそのテクニックを利用としているのか、じっくりと考えてみましょう。作成しているものは、プロジェクト案件に本当に当てはまるでしょうか。

 

 

またユーザーについても検討する必要があるでしょう。ナビゲーションメニューとリストアイテムの展開方法は、もっともシンプルで、ユーザーの探しているコンテンツにすぐ移動できることが重要となります。もしナビゲーションメニューが分かりづらいと、ショッピングサイトでは販売のチャンスを失いかねません。ユーザーがどのページに進み、何をしたら良いのか、分かりやすいシンプルさを心がけましょう。

 

 

サムネイル@ : Luxury Property Development by Imperial Homes | Surrey, UK

参照元リンク : Website Navigation Trends: 10 Tips & Examples | DesignShack