【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
理想のモバイルナビゲーションとは、どのようなものだと思いますか?
モバイルナビゲーションにおいて大切なことは、アクセスが簡単であること、コンテンツが探しやすいこと、そして、それらをできる限り小さいスペースで体現することです。
今回は、3つの基本的なデザインスタイルの説明と、注意すべきこと、実例を紹介したいと思います。ぜひインスパイアされてください!
ナビゲーションのスタイルは多種多様で、それぞれに長所と短所があります。
Webサイトやアプリの特性、目的に一番フィットするデザインを選べたらいいですね。
Thomas Budiman / dribbble
デザインスタイルを紹介する前に、メニューを作るときに気をつけるべきことを紹介します。数あるメニュー項目の中でも、次の2つは優先的にスペースを確保しなければなりません。
・サーチ機能
・サイトもしくはアプリ内のナビゲーション
もしメニューをデザインするならその2つから着手するといいでしょう。
忘れてはならないのは、見た目よりコンテンツの内容が重要だということ。デザインに凝りすぎたばかりにメインのコンテンツが見づらい、なんてことにならないようにしましょう。
コンテンツの見やすさを優先しようとするとナビゲーションのデザインが難しくなる。反対に、ナビゲーション優先のデザインではコンテンツが見づらいかもしれない。これが、モバイルナビゲーションのデザインが手強いといわれている理由です。
Ghani Pradita / dribbble
トップナビゲーションバーは、デスクトップパソコンのメニュー表示方法を、そのままモバイル用に運用したもので、Webサイトやアプリで使われることが多いです。
この手法のメリットは、スペースをあまり必要としないこと。
しかし、デメリットもあるのでチェックしておきましょう。
ひとつめは、限られた数のオプションしか表示できないこと。
ふたつめは、最初に表示される画面をファーストビューといいますが、その画面内の貴重なスペースを埋めてしまうことです。
Fireart Studio / dribbble
タブバーは、モバイル機器専用のアプリ向けに開発されたメニューデザインです。
通常は、Androidでは画面上部、iOSでは画面下に表示されます。
これはアプリ内のどの画面においても表示されるので、トップナビゲーションバーと同じようなデメリットがあります。そして、トップナビゲーションバーはページを下にスクロールすると消えますが、タブバーは画面上に残り、消えることがありません。
Veronika Bass / Dribbble
トップナビゲーションバーとタブバー、それぞれのメリットはなんでしょう?
トップナビゲーションバーはスクロールすることによって消えるので、ページ内でのユーザーの位置をわかりやすく伝えることができます。また、アイコンやラベルを使うことで見やすい画面を実現できます。
一方、タブバーは常に表示されているので、メニューにワンクリックでアクセスすることができます。
デメリットはどちらも共通です。それは、どちらのデザインも限られた数のメニューしか表示できないということです。
表示するメニューは、最大で5個が目安です。それ以上になると、ボタンのサイズが小さくなり使い心地が悪くなってしまいます。逆にメニューの数が少ないウェブサイトなら、トップナビゲーションバーとタブバーは打ってつけの選択肢です。
それでは、AndroidとiOSの異なるOSで、それぞれどのような配慮をすればいいのでしょう?
まず、ご存知の方も多いと思いますが、それぞれのOSは異なるガイドラインに沿ってデザインされています。なので、もしアプリをデザインするのなら、そのガイドラインに合わせることは非常に大切です。
基本的に、Androidなら画面上部に、iOSなら画面下にタブバーを配置します。
さらに、ビュースイッチ機能を取り入れて、全画面表示に切り替えられるようにするのもいいですね。
また、ユーザーが簡単に理解できるような明瞭なデザインのアイコンやラベルを使う方法もあります。アイコンには小さくて場所を取らないというメリットがありますし、ラベルを使えばオプションが何を意味しているのか分かりやすくなります。
Gal Shir / dribbble
ハンバーガーメニューという言葉、聞いたことありますか?
ひとつのボタンから複数のメニューを呼び出せる仕掛けをハンバーガーメニューといいます。
最近人気が出てきているメニュースタイルですが、他にも同じような働きをするスタイルがあります。
それが、アイコンとラベルです。
ハンバーガーメニューのアイコンの代わりに、「メニュー」と記されたボタンを採用した方が、ユーザーにクリックされやすい傾向にあります。
しかし、ユーザーが実際にハンバーガーメニューの使い方を知っているかは、ユーザー各々の経験量によります。
Ghani Pradita / dribbble
ハンバーガーメニューの良いところは、小さいアイコンの中にたくさんのメニューが入れられることです。
さらに、それぞれのメニューに詳細なオプションを追加して階層化することもできます。
デメリットはやはり、メニューを開くまでアイコンの中のオプションが分からないないことでしょう。
これらの理由から、閲覧サイトや複雑なアプリなど多くのコンテンツがある場合に限ってハンバーガーメニューを使うのをオススメします。
NYANCE / dribbble
サイトによってはナビゲーションが簡単なこともあります。
例えば、あなたが新しくサイトを立ち上げたとします。
ユーザーは、何か特定のものを探すというより、あなたのサイトにどのような情報があるかを見て回るのではないでしょうか?
そういったケースでは、標準的なナビゲーションメニューを使って、シンプルで見やすい画面にするのがいいと思われます。
シンプルながらにも、ユーザーが興味あるものを簡単に見つけられるデザインが理想ですね。
ただ、ひとつ心に留めておいて欲しいのは、たとえメニューが目立っていても、中のコンテンツは見るまでわからない、ということです。
ユーザーがメニューオプションをクリックしたくなるようにするには、メニューが中身のコンテンツへ強い関連性をもつ必要があります。
メニューの名前や色、アイコンや画像などを駆使して、関連性を強調しましょう。
そして、一番効率的で簡単なのは、他の有名なサイトと似たような構造やデザインスタイルを取り入れることです。
ユーザーは、見慣れたものなら安心して迷いなく使うことができます。
逆に、見慣れないメニュー構成であったり、使いづらいデザインのウェブサイトには、ユーザーはあまり戻ってこないかもしれません。
標準的なナビゲーションバーを使うのならば、少し機能を追加することでさらに良くできます。
たとえば、IA(情報設計)を取り入れると情報が探しやすくなります。
ナビゲーションは、アプリやWebサイトのインターフェイスにとって大事な要素です。
縦長のもの、横長のもの、シンプルなものからとても詳細なものまでさまざまなデザインがありますが、すべてに共通していえることは、メニューデザインはバランスが一番大事だということです。注
力すべきは見栄えの良さではなく、いかに直感的で簡単なアクセスができるかです。使いやすさと美学的な美しさを取り込み、それを組み合わせることで、モバイルナビゲーションは素晴らしいインターフェイスを生み出しました。
モバイルメニューの実例をあげるので、アイディアに詰まったらぜひとも参考にしてください。
clᴧy / dribbble
lonut Zamfir / dribbble
Nguyen Tri / dribbble
GREAT SIMPLE / Visual Hierarchy
Azís Pradana / dribbble
Norde / dribbble
Iftikhar Shaikh / dribbble
Matt Thompson / dribbble
Leo Leung / dribbble
(翻訳:Juri Ando)
Casey Labatt-Simon / dribbble
デザインを選ぶ際には以下のことに注意しなければいけません。
たとえば、ハンバーガーメニューはたくさんのメニューオプションを入れることができます。しかし、そのすべてのオプションをユーザーが実際に見るとは限りません。
トップナビゲーションバーとタブバーは簡単なアクセスが可能です。しかし、この方法が有効なのはメニューの数が少ないときだけです。
どのナビゲーションデザインもアプリの重要な側面を担います。だからこそ、メニューの存在によって混乱を招くようなデザインにしてはなりません。
zero / dribbble
デザイナーたちは今、モバイルナビゲーションで大きな問題に直面しています。
簡単なアクセスと、十分な画面スペースの確保を両立するのは大変です。
そのどちらを優先するかは、それぞれのウェブサイトやアプリのニーズによって異なります。
一番いいのは、選んだデザインのデメリットが、ユーザーのアクティビティーに悪い影響を与えないこと。つまり、デメリットをデメリットでなくすることができるのなら、それは理想のデザインといえるでしょう。