累計22種!UIが優れたiPhoneアプリの部分デザイン(ナビゲーション/メニュー編)

    
2013/10/20
    

部分テ?サ?イン ナヒ?ケ?ーション 01
いろんなUIを持ったアプリが並ぶiPhone App。
今回はその中から、特にUIの優れた「部分デザイン」を紹介します。アプリを開いた時、真っ先に目に入るナビゲーション/メニュー編です。

目次

今回はこんなナビゲーションを取り上げます。
目次 01のコヒ?ー

スプリングボード

Iphone5 CS 01

スプリングボード


スプリングボードはiOSやAndroidなどのOS・画面解像度にほとんど依存しないのが特徴です。ローンチパッド(LaunchPad)と呼ばれることもあります。

MacのUIにも、Mac OS X Lionから実装されたLaunchPadに採用されていますが、近年モバイルのUIデザインではやや下火になりつつある(採用例が減っている)ナビゲーションパターンです。
スクリーンショット 2013 10 15 12 27 06

Mac OS X Lionから採用されているLaunchPad


1. Facebook

最初期Facebookのアプリ画面はスプリングボードを採用していました。現在はドロワーメニュー(後述)を使っています。
IMG 0228


TIPS

項目のタイトル名が短い場合など(Facebookであれば1wordのアイコン)にダッシュボードパターンは効果的です

2. Blogger

Googleのブログツール、Bloggerはシンプルな2×2のダッシュボード。
October 18 2013 at 0906AM


TIPS

グリッドのレイアウトは3×3、2×3など様々な例があります

リストメニュー

List 01

リストメニュー


リストメニュー(List Menu)パターンは一覧性や閲覧性の点でスプリングボードと同じ役割を持っています。

非常に数多くのバリエーションがあるのがこのUIパターンの特徴です。

3. Tinysquare

Foursquareに自動チェックインするためのアプリ。たくさんのチェックイン場所を表示させる必要があるためリストメニューパターンを採用しています。
October 17 2013 at 0412PM 1


TIPS

項目のタイトルが長い場合(Tinysquareであれば長い地名が入る可能性がある)や、サブタイトルを入れる必要がある場合(Tinysquareであれば最新チェックイン日時や住所の表示)にリストメニューが役立ちます

4. ZOZOTOWN

伸縮リスト(Expanding List)を採用しているZOZOTOWNの公式サイト。各ジャンルのメニューが縮まって表示されます
October 18 2013 at 1048AM

ドロワーメニュー

Drowar 01

ドロワーメニュー


ドロワー(drawer)とは引き出しのこと。サイドメニュー(Side Menu)と呼ばれることもあります。iOS版のFacebookアプリで採用され、またたくまに様々なアプリが採用しました(ドロワーメニューの先駆けとなったiOS版Facebookアプリでは、現在チャット一覧など一部にその姿を残すのみとなっています)

5. ClearWeather

天気予報アプリClearWeatherは天気表示させる地点をドロワーメニューで選択させています。
October 18 2013 at 1109AM


6. Vyclone

ビデオの自動合成アプリ、Vycloneもドロワーメニュー。かなり幅広です。
01


7. hike

コミュニケーションアプリのhikeはかなり短いドロワーメニュー。アイコンを使うと幅を短くできます。
02


TIPS

ドロワーメニューの幅が狭いとタップエリアが狭くなりますので、右利きの人にとってはユーザビリティの低いUIとなる可能性があります。

タブメニュー

Tab 01

タブメニュー


iOSではApple標準のアプリにも数多く採用されているタブメニューです。

8. POP

アプリのプロトタイプを作るためのiPhoneアプリ。シンプルなアイコンのタブメニューです。
October 18 2013 at 1130AM


TIPS

タブ数は3〜5個のアプリが多いですが、それ以上の個数になる場合は左右にスクロールできるようにしても大丈夫です

9. Vimeo

動画共有サービスVimeoのiPhoneアプリ。動画のアップロードボタンがひときわ大きく表示されています。
October 17 2013 at 0510PM


TIPS

選択されたタブはVimeoのように他と明確に区別できるようにしておくのが良いでしょう

 

ギャラリー

Gallery 01

ギャラリー


ギャラリー(Gallery)パターンはコンテンツがナビゲーションとして機能するUIパターンです。

10. Voicepic

写真に声を乗せて共有できるVoicepicは、アプリを立ち上げるとユーザの投稿作品がズラリ。代表的なギャラリーパターンの使い方だと言えます。
October 17 2013 at 0526PM


TIPS

ギャラリーパターンは、ニュース系アプリや投稿系アプリなどの、コンテンツが頻繁に更新されるアプリに適したナビゲーションです

11. BBC

常に最新の情報に更新されるBBCのアプリもギャラリーパターンを使っています。後述のイメージカルーセルを併用したUIパターンで、フリック操作で記事を左右にめくることができます。
October 17 2013 at 0529PM 1


ダッシュボード

Dashboard 01

ダッシュボード


ダッシュボード(Dashboard)とは、自動車などの計器盤の意味。それぞれの指標をタップして展開することでさらに次の階層へ進めるのが特徴です。財務状況の確認・分析ツール・マーケティングアプリなどで採用されているUIパターンです。

12. Argus

ライフログ記録アプリのArgusは、毎日の歩数や消費カロリーを記録してくれます。難しい六角形の配置ながら数値を綺麗に見せている、挑戦的なUIと言えるでしょう。
October 17 2013 at 0547PM

TIPS

ダッシュボードパターンを採用する時には、コンテンツを詰め込まないことが良いUIの基本です。たとえばArgusでは、iPhoneの限られた画面内で六角形の表示を保つため、画面に出す表示を制限しています

13. 楽天証券 iSPEED

楽天証券の取引アプリ、iSPEEDは、市況や株価を一覧表示するのに非常に適しています。クリックすると詳しいチャートが見れるのがポイント。iPad版はiPadに最適化されているため、こちらも要チェックです。
October 17 2013 at 0551PM

メタファー

Metaphor 01

メタファー


メタファー(Metaphor)パターンの特徴は、最初に表示される画面が何らかのメタファー(隠喩)になっている点です。パッと見で何かを想像させやすい、現実世界に存在するプロダクトデザインを踏襲しています。

14. Paypal

Paypalは登録中のクレジットカードがズラリ。
October 17 2013 at 0600PM


15. Evernote

Evernoteは最初に表示される画面が縦に並んだノート形式。「ノートブック」の中には折りたたまれたポートフォリオ形式のノートが並んでいます。
October 17 2013 at 0601PM 2

メガメニュー

Megamenu 01

メガメニュー


メガメニュー(Mega Menu)パターンでは、大きなメニューのパネルがポップアップし、オーバーレイ表示されるのが特徴です。

16. Dropbox

ドロップボックスの基本ナビゲーションはタブメニューですが、メニューは大きなアイコンを採用しています。
October 17 2013 at 0416PM


ページカルーセル


Page 01

ページカルーセル


ページカルーセル(Page Carousel)はページインジケーター(画面下部に表示される小さな点。)が特徴のパターンです。どこにいるのかわかるよう、小さな点によって現在位置を示しています。フリックによってページを移動できるものがほとんどです。ちなみに、カルーセルCarouselとは木馬を意味しています。

17. LINE 天気

LINEの天気予報アプリは地点を複数登録できるのが特徴。ページインジケータでどの位置にいるのか、表示されるようになっています。
October 18 2013 at 1030AM


18. Flight Board

飛行機の発着時間を調べるFlight Board。一番大事な情報(離陸時間や便名)を邪魔しないよう、ページインジケーターを上部に配置しています。
October 18 2013 at 1025AM


19. Start by Tack

特徴的なUIを持つアラーム・ストップウォッチアプリのStart by Tack。ボタン操作を必要とせず、スワイプなどで時間をセットします。挑戦的なUIが特徴であるこのアプリでは、アプリの雰囲気を壊さないよう、ページインジケータをバーで表示しています。
October 18 2013 at 1010AM


イメージカルーセル

Image 01

イメージカルーセル


ページカルーセルに対して画像をめくるのがイメージカルーセル(Image Carousel)パターンです。

20. GU

GUの公式アプリは大きなイメージカルーセルを採用しています。
October 18 2013 at 1026AM


21. Origami

セレクトショップアプリのOrigamiは透過型のタブメニューを使っています。上部の新着商品がイメージカルーセルパターンです。Origamiではインジケータを付けていません。
October 09 2013 at 0233PM 1


22. myPANTONE

紙のデザイナーには欠かせないPANTONE色見本帳のアプリです。色見本チップをフリックしながらすばやく色を選ぶことができます。
October 18 2013 at 1019AM 1

まとめ

いかがでしたか?今回はナビゲーションを取り上げました。部分に注目すると見えてこないものが見えてくるはず。iPhoneアプリデザインの参考にしてみてください。

【あわせて読みたい!】
累計32種!UIが優れたiPhoneアプリの部分デザイン(ヘッダ・フッタ編)
iPhoneアプリの視線誘導デザインパターン

(取材協力 永尾正史)

 

参考文献

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2017 mixi recruitment, Inc. all rights reserved.