モバイルナビゲーション初心者は必見！ 3つの基本とアイディア集

理想のモバイルナビゲーションとは、どのようなものだと思いますか？
モバイルナビゲーションにおいて大切なことは、アクセスが簡単であること、コンテンツが探しやすいこと、そして、それらをできる限り小さいスペースで体現することです。

今回は、３つの基本的なデザインスタイルの説明と、注意すべきこと、実例を紹介したいと思います。ぜひインスパイアされてください！

ナビゲーションのスタイルは多種多様で、それぞれに長所と短所があります。
Webサイトやアプリの特性、目的に一番フィットするデザインを選べたらいいですね。

モバイルナビゲーション3つの基本的なデザインスタイル

Thomas Budiman / dribbble

デザインスタイルを紹介する前に、メニューを作るときに気をつけるべきことを紹介します。数あるメニュー項目の中でも、次の2つは優先的にスペースを確保しなければなりません。

・サーチ機能
・サイトもしくはアプリ内のナビゲーション

もしメニューをデザインするならその2つから着手するといいでしょう。

忘れてはならないのは、見た目よりコンテンツの内容が重要だということ。デザインに凝りすぎたばかりにメインのコンテンツが見づらい、なんてことにならないようにしましょう。

コンテンツの見やすさを優先しようとするとナビゲーションのデザインが難しくなる。反対に、ナビゲーション優先のデザインではコンテンツが見づらいかもしれない。これが、モバイルナビゲーションのデザインが手強いといわれている理由です。

トップナビゲーションバー

Ghani Pradita / dribbble

トップナビゲーションバーは、デスクトップパソコンのメニュー表示方法を、そのままモバイル用に運用したもので、Webサイトやアプリで使われることが多いです。

この手法のメリットは、スペースをあまり必要としないこと。
しかし、デメリットもあるのでチェックしておきましょう。
ひとつめは、限られた数のオプションしか表示できないこと。
ふたつめは、最初に表示される画面をファーストビューといいますが、その画面内の貴重なスペースを埋めてしまうことです。

タブバー

Fireart Studio / dribbble

タブバーは、モバイル機器専用のアプリ向けに開発されたメニューデザインです。

通常は、Androidでは画面上部、iOSでは画面下に表示されます。
これはアプリ内のどの画面においても表示されるので、トップナビゲーションバーと同じようなデメリットがあります。そして、トップナビゲーションバーはページを下にスクロールすると消えますが、タブバーは画面上に残り、消えることがありません。

Veronika Bass / Dribbble

トップナビゲーションバーとタブバー、それぞれのメリットはなんでしょう？

トップナビゲーションバーはスクロールすることによって消えるので、ページ内でのユーザーの位置をわかりやすく伝えることができます。また、アイコンやラベルを使うことで見やすい画面を実現できます。

一方、タブバーは常に表示されているので、メニューにワンクリックでアクセスすることができます。

デメリットはどちらも共通です。それは、どちらのデザインも限られた数のメニューしか表示できないということです。
表示するメニューは、最大で5個が目安です。それ以上になると、ボタンのサイズが小さくなり使い心地が悪くなってしまいます。逆にメニューの数が少ないウェブサイトなら、トップナビゲーションバーとタブバーは打ってつけの選択肢です。

Jakub Antalík / dribbble

それでは、AndroidとiOSの異なるOSで、それぞれどのような配慮をすればいいのでしょう？

まず、ご存知の方も多いと思いますが、それぞれのOSは異なるガイドラインに沿ってデザインされています。なので、もしアプリをデザインするのなら、そのガイドラインに合わせることは非常に大切です。

基本的に、Androidなら画面上部に、iOSなら画面下にタブバーを配置します。
さらに、ビュースイッチ機能を取り入れて、全画面表示に切り替えられるようにするのもいいですね。

また、ユーザーが簡単に理解できるような明瞭なデザインのアイコンやラベルを使う方法もあります。アイコンには小さくて場所を取らないというメリットがありますし、ラベルを使えばオプションが何を意味しているのか分かりやすくなります。

ハンバーガーメニューと別の選択肢

Gal Shir / dribbble

ハンバーガーメニューという言葉、聞いたことありますか？

ひとつのボタンから複数のメニューを呼び出せる仕掛けをハンバーガーメニューといいます。
最近人気が出てきているメニュースタイルですが、他にも同じような働きをするスタイルがあります。
それが、アイコンとラベルです。
ハンバーガーメニューのアイコンの代わりに、「メニュー」と記されたボタンを採用した方が、ユーザーにクリックされやすい傾向にあります。

しかし、ユーザーが実際にハンバーガーメニューの使い方を知っているかは、ユーザー各々の経験量によります。

Ghani Pradita / dribbble

ハンバーガーメニューの良いところは、小さいアイコンの中にたくさんのメニューが入れられることです。

さらに、それぞれのメニューに詳細なオプションを追加して階層化することもできます。
デメリットはやはり、メニューを開くまでアイコンの中のオプションが分からないないことでしょう。

これらの理由から、閲覧サイトや複雑なアプリなど多くのコンテンツがある場合に限ってハンバーガーメニューを使うのをオススメします。

NYANCE / dribbble

サイトによってはナビゲーションが簡単なこともあります。

例えば、あなたが新しくサイトを立ち上げたとします。
ユーザーは、何か特定のものを探すというより、あなたのサイトにどのような情報があるかを見て回るのではないでしょうか？
そういったケースでは、標準的なナビゲーションメニューを使って、シンプルで見やすい画面にするのがいいと思われます。
シンプルながらにも、ユーザーが興味あるものを簡単に見つけられるデザインが理想ですね。

ただ、ひとつ心に留めておいて欲しいのは、たとえメニューが目立っていても、中のコンテンツは見るまでわからない、ということです。
ユーザーがメニューオプションをクリックしたくなるようにするには、メニューが中身のコンテンツへ強い関連性をもつ必要があります。
メニューの名前や色、アイコンや画像などを駆使して、関連性を強調しましょう。

そして、一番効率的で簡単なのは、他の有名なサイトと似たような構造やデザインスタイルを取り入れることです。
ユーザーは、見慣れたものなら安心して迷いなく使うことができます。
逆に、見慣れないメニュー構成であったり、使いづらいデザインのウェブサイトには、ユーザーはあまり戻ってこないかもしれません。
標準的なナビゲーションバーを使うのならば、少し機能を追加することでさらに良くできます。

たとえば、IA(情報設計)を取り入れると情報が探しやすくなります。

モバイルナビゲーションのアイディア集

ナビゲーションは、アプリやWebサイトのインターフェイスにとって大事な要素です。

縦長のもの、横長のもの、シンプルなものからとても詳細なものまでさまざまなデザインがありますが、すべてに共通していえることは、メニューデザインはバランスが一番大事だということです。注

力すべきは見栄えの良さではなく、いかに直感的で簡単なアクセスができるかです。使いやすさと美学的な美しさを取り込み、それを組み合わせることで、モバイルナビゲーションは素晴らしいインターフェイスを生み出しました。

モバイルメニューの実例をあげるので、アイディアに詰まったらぜひとも参考にしてください。

スライド機能(Swiiish app)

clᴧy / dribbble

サムネイル(Thumbnail Navigation Pebltree)

lonut Zamfir / dribbble

コラボレーション(Collaboration on mobile)

Nguyen Tri / dribbble

明るくてモダン(Bright and modern iOS menus)

GREAT SIMPLE / Visual Hierarchy

プロフィールアニメーション(Profile Animation)

Azís Pradana / dribbble

ウィジェット(Ink Project: Stats widget)

Norde / dribbble

ホーム画面とサイドメニュー(Home & Side Menu Screen)

Iftikhar Shaikh / dribbble

ポルシェのゲームと順位表(Porsche Game and Leaderboard concept)

Matt Thompson / dribbble

トランジションアニメーション(Book selecting – concept animation transition)

Leo Leung / dribbble

（翻訳：Juri Ando）

最後に

Casey Labatt-Simon / dribbble

デザインを選ぶ際には以下のことに注意しなければいけません。

情報は探しやすいか

たとえば、ハンバーガーメニューはたくさんのメニューオプションを入れることができます。しかし、そのすべてのオプションをユーザーが実際に見るとは限りません。

簡単にアクセスできるか

トップナビゲーションバーとタブバーは簡単なアクセスが可能です。しかし、この方法が有効なのはメニューの数が少ないときだけです。

メニューの中身を理解しておく

どのナビゲーションデザインもアプリの重要な側面を担います。だからこそ、メニューの存在によって混乱を招くようなデザインにしてはなりません。

まとめ

zero / dribbble

デザイナーたちは今、モバイルナビゲーションで大きな問題に直面しています。

簡単なアクセスと、十分な画面スペースの確保を両立するのは大変です。
そのどちらを優先するかは、それぞれのウェブサイトやアプリのニーズによって異なります。

一番いいのは、選んだデザインのデメリットが、ユーザーのアクティビティーに悪い影響を与えないこと。つまり、デメリットをデメリットでなくすることができるのなら、それは理想のデザインといえるでしょう。