モバイルアプリのメニューデザインをマスターしよう！事例18選

モバイルアプリを設計するにあたって、キーとなるのがメニューデザインです。

ともすると単純なものに思われるメニューですが、いざデザインするとその奥深さや難しさが身にしみるはず。項目や役割を考えるところからフロントのデザインまで、考えなければならないことは意外とたくさんあります。

では、どうすればユーザーにとって使いやすいメニューをデザインできるのでしょうか。今回は優れたアプリメニューをデザインするための方法をご紹介します。

メニューの役割

▲Menu Animation

メニューをデザインするにあたって、まず理解しておきたいのがメニューの役割です。

メニューはユーザーがあるポイントから別のポイントに移動するために存在しています。メニューには少なくとも2つ以上の項目が含まれていなければならず、そうでなければほとんど意味がありません。また、すべてのメニュー項目には、何らかの機能が付いていなければいけません。多くの場合はメニューボタンを押すと、異なるページに移動します。

メニューはユーザーがアプリを操作するのを手助けするための存在です。ユーザーが見つけやすいところに配置するよう心がけましょう。仮にアプリに検索機能があっても、それに頼るべきではありません。検索機能なしでもユーザーがアプリの機能を見つけられるようにしておくべきです。

一方で、ナビゲーションメニューについて「こうでなければいけない」と考えすぎるのはやめましょう。ナビゲーションバーやハンバーガーメニューなど、デザインの選択肢はたくさんあります。

メニューデザインで気をつけたい5つのポイント

1. メニューラベルはシンプルかつ分かりやすいものにしよう

▲Aston Martin UI

メニューにおいて重要なポイントのひとつが、ラベルです。ラベルには、ボタンがなんのために存在しているのかを正確かつ簡潔に表す必要があります。あいまいなラベルや不適切なラベルは、ユーザーを混乱させてしまいます。

また、すべてのメニュー項目は一行にまとめましょう。テキストはポイントを短くおさえたものにし、専門用語などの使用は避けるべきです。多くの場合は「プロフィール」や「製品」など単一の単語が使用されますが、必ずしも単語をひとつに絞る必要はありません。ユーザーが必要としている情報を適切に伝えられるようにしましょう。

2. 状況に応じてメニューの項目を無効にしよう

▲Blog Minimal interior design

メニューに表示される項目は一貫しているのが理想ですが、アプリの状況に応じてメニューの項目を有効または無効にする必要もあります。

たとえばアプリで販売している製品が売り切れた場合、アイテムを購入するというメニューは無効になっていなければいけません。無効を示すためによく使用されているデザインとして「グレーアウト」があります。

3. ユーザーにメニューの位置を分かりやすく伝えよう

▲eCommerce

ユーザーは自らの位置を把握するためにさまざまなビジュアルに依存しています。そのため、ユーザーが現在見ている画面の位置を把握できるようにしましょう。

ユーザーがホーム画面以外からページにアクセスした場合は特に重要です。メニューの位置を工夫して、その存在を分かりやすく伝えるようにしましょう。

4. メニューの項目の順番に気を配ろう

▲Productivity App – Side Menu & Mail View – WIP

静的コンテンツのメニューについては、もっとも頻繁に使用される項目をメニューの上部に表示しましょう。これによりユーザビリティが向上し、アプリ内でユーザーが迷子になるのを防げます。

一方で動的コンテンツの場合は、順番にこだわる必要はありません。ユーザーの操作に基づいて順番を臨機応変に調整しましょう。

5. 多階層メニューの採用は慎重に行おう

▲Settings + Sidemenu (unused element part 11)

メニューを選択したり、メニュー上の特定のポイントを選択すると、サブメニューを表示するようにすることも可能です。多階層メニューは便利ですが、サブメニューはなるべくひとつまでにするよう心がけましょう。

また、多階層メニューは正しく動作しなくなることがよくあるため、その点にも注意が必要です。アプリを公開する前に、多階層構造が直感的に動作するかどうかをよく確認しましょう。

メニューデザインで避けたい5つのポイント

▲Fonewire App UI Design

1. メニューが小さすぎる

メニューは見やすい大きさにするよう心がけましょう。メニューを表示するための十分なスペースがある場合には、小さなメニューやアイコンを使用するべきではありません。

2. メニューの場所がわかりにくい

メニューはユーザーにとってわかりやすいところに配置しましょう。他のアプリやWebサイトのUIとあまりにもかけ離れていると、ユーザーは混乱してしまいます。通常、メニューは画面左に配置されています。縦型アプリであれば、メニューは左揃えにしてみましょう。

3. リンクされているかどうかが不明確

メニューの項目がリンクされているかどうかを明確にしましょう。クリック可能かどうかが分からないと、装飾や見出しだと勘違いされてしまう恐れがあります。

4. メニューが地味すぎる

メニューを過度に派手にする必要はありませんが、全体のデザインが派手な場合、メニューが地味すぎると存在感がなくなってしまう可能性があります。ユーザビリティを念頭に置いて、必要に応じて、色、グラフィックス、画像などの視覚的要素を活用しましょう。

5. 背景とテキストの色が不適切

背景色と対照的な色をテキストに用いることによって、メニューのテキストを目立たせることが可能です。このルールを無視してしまうと、メニューが見えづらくなってしまう場合があります。

メニューデザイン6種とその機能

1. コンテキストメニュー

▲my home ui

近年、一般的になってきたのがコンテキストメニューです。コンテキストメニューはアプリの状況に基づいて、利用可能なメニュー項目を動的に変更します。そのため、現在のコンテキストとは関係のないメニュー項目は表示されません。

関連はしているものの、使用するために特定の条件を満たす必要のあるメニュー項目も無効にできます。ユーザーが選択できる項目を適切に伝えることが重要です。

状況によっては、メニューにひとつの項目しか表示されないこともあります。画面上の情報量を減らすことにも繋がるため、必要であればこれは必ずしも悪いことではありません。グレーアウトではなく、メニューの項目自体を消してしまうのも選択肢のひとつです。

2. オプションメニュー

▲mobile menu

オプションメニューは、現在のアクティビティに関するコマンドを含みます。また、新しいアクティビティを開始するために使用することも可能です。

たとえばメールアプリでは、オプションメニューを使用して新しいメッセージを作成したり、検索したり、リストを更新したり、設定を変更できます。メール作成ビューでは、CCの追加、ファイルの添付、メッセージの破棄などさまざまなオプションメニューが表示されます。

ほとんどのデバイスでは、メニューボタンからオプションメニューにアクセスします。これを閉じるには、通常はメニューを再度選択するか、戻るボタンを選択します。また、メニューの外側のポイントをタッチすることで閉じる場合もあります。

すべてのアクティビティには独自のオプションメニューが必要です。アプリ内に複数のアクティビティがある場合、それらすべてについて独自のオプションメニューが必要となります。

どのメニューアイテムをどのように整理するかについては、以下の2つのステップに分類できます。

1. オプションメニューアイコン：メニューボタンを最初に選択すると、スクロール不可のアイコンが複数表示されます。ボタンの数はさまざまで、調整することも可能です。
2. オプション拡張メニュー：アクティビティの項目がメニューに収まらない場合、最後のアイコンを「さらに表示」などのラベルにします。それを選択することによって、任意の数のメニュー項目を表示します。通常は必要に応じてスクロール可能なリストが表示されます。

3. スクロール可能なメニュー

▲Plaza

メニューの項目が多すぎると、すべての項目を画面に表示できなくなります。その場合はメニューをスクロール可能にしてみましょう。常にスクロール可能にもできますし、横向きで表示した場合のみスクロール可能にするのも良いでしょう。

スクロールの方法はユーザーフレンドリーなものにするよう心がけましょう。小さなスクロールバーは使用せず、タッチスクロールや矢印などで工夫することをおすすめします。

4. ドロップダウンメニュー

ドロップダウンメニューを扱う上で注意したいのが、その大きさと動作です。ドロップダウンメニューは小さすぎても大きすぎても誤った動作をしてしまう可能性があります。ドロップダウンが短すぎてもユーザーをイライラさせてしまいますが、逆に長すぎると一番下のリンクにアクセスしづらくなってしまいます。また、ホバリングしている際に有効になっているメニューが大きすぎると、誤ったページにアクセスしてしまう可能性もあります。

ユーザーがアクセスしたいページに適切にアクセスできるよう、デザインに気をくばるようにしましょう。

5. スティッキーメニュー

縦長のページにおすすめなのが、スティッキーメニューです。長いページの一番下を閲覧していると、メニューに戻るために長くて退屈なスクロールをしなければいけません。それを解決してくれるのが、ユーザーがページをスクロールするとメニューがその動作についてくる、スティッキーメニューです。これによりメニューが常に画面に表示された状態になるため、ユーザーは新しい場所に移動する際にスクロールをする必要がなくなります。

6. パイメニュー

パイメニューは、円や半円型のメニューです。最近いくつかのモバイルアプリに採用されはじめています。メニューというとボックス型のものを想像しがちですが、パイメニューという選択肢があることもお忘れなく。

モバイルアプリのメニューデザイン 事例18選

モバイルメニューのデザインは実際に取り組んでみると非常に困難なものです。創造的なプロセスには多くの時間を割く必要があります。

デスクトップで閲覧するWebサイトと異なり、モバイルアプリのメニューには”画面の大きさ”という制限があります。その制限の中でどのように優れたUIを実現するのか、実例をとおして考えてみましょう。

1. ICQ mobile app redesign

▲ICQ mobile app redesign

2. Mobile menu Animation

▲Mobile menu Animation

3. V Avenue

▲V Avenue

4. Test and Navigation on Mobile

▲Test and Navigation on Mobile

5. Timeline & Profile menu design

▲Timeline & Profile menu design

6. GeGe App: user interface menu design

▲GeGe App: user interface menu design

7. Musixmatch Prototype

▲Musixmatch Prototype

8. Profile UI

▲Profile UI

9. Project collaboration: Mobile navigation

▲Project collaboration: Mobile navigation

10. Cloud Analytics Mobile App

▲Cloud Analytics Mobile App

11. Mobile Side Menu UI/UX

▲Mobile Side Menu UI/UX

12. HomeSwipe

▲HomeSwipe

13. Evalarm project

▲Evalarm project

14. Linkedin – Android material design

▲Linkedin – Android material design

15. Appbooster dashboard

▲Appbooster dashboard

16. Bolder Multipurpose Mobile UI Kit for Sketch

▲Bolder Multipurpose Mobile UI Kit for Sketch

17. Profile

▲Profile

18. Mobile navigation

▲Mobile navigation

おわりに

ユーザーはメニューを目的としてアプリを利用するわけではありませんが、優れたメニューのデザインなくして、スマートなアプリは成立しません。

常にユーザーの視点に立ち、テストを繰り返しながら、あなたのアプリにとってベストなメニューを模索しましょう。

（翻訳：Asuka Nakajima）