累計22種！UIが優れたiPhoneアプリの部分デザイン（ナビゲーション/メニュー編）
2013/10/20
いろんなUIを持ったアプリが並ぶiPhone App。
今回はその中から、特にUIの優れた「部分デザイン」を紹介します。アプリを開いた時、真っ先に目に入るナビゲーション/メニュー編です。
目次
今回はこんなナビゲーションを取り上げます。
スプリングボード
スプリングボード
MacのUIにも、Mac OS X Lionから実装されたLaunchPadに採用されていますが、近年モバイルのUIデザインではやや下火になりつつある（採用例が減っている）ナビゲーションパターンです。
Mac OS X Lionから採用されているLaunchPad
１. Facebook
最初期Facebookのアプリ画面はスプリングボードを採用していました。現在はドロワーメニュー（後述）を使っています。
TIPS
項目のタイトル名が短い場合など（Facebookであれば1wordのアイコン）にダッシュボードパターンは効果的です
２. Blogger
Googleのブログツール、Bloggerはシンプルな2×2のダッシュボード。
TIPS
グリッドのレイアウトは3×3、2×3など様々な例があります
リストメニュー
リストメニュー
非常に数多くのバリエーションがあるのがこのUIパターンの特徴です。
３. Tinysquare
Foursquareに自動チェックインするためのアプリ。たくさんのチェックイン場所を表示させる必要があるためリストメニューパターンを採用しています。
TIPS
項目のタイトルが長い場合（Tinysquareであれば長い地名が入る可能性がある）や、サブタイトルを入れる必要がある場合（Tinysquareであれば最新チェックイン日時や住所の表示）にリストメニューが役立ちます
４. ZOZOTOWN
伸縮リスト（Expanding List）を採用しているZOZOTOWNの公式サイト。各ジャンルのメニューが縮まって表示されます
ドロワーメニュー
ドロワーメニュー
５. ClearWeather
天気予報アプリClearWeatherは天気表示させる地点をドロワーメニューで選択させています。
６. Vyclone
ビデオの自動合成アプリ、Vycloneもドロワーメニュー。かなり幅広です。
７. hike
コミュニケーションアプリのhikeはかなり短いドロワーメニュー。アイコンを使うと幅を短くできます。
TIPS
ドロワーメニューの幅が狭いとタップエリアが狭くなりますので、右利きの人にとってはユーザビリティの低いUIとなる可能性があります。
タブメニュー
タブメニュー
８. POP
アプリのプロトタイプを作るためのiPhoneアプリ。シンプルなアイコンのタブメニューです。
TIPS
タブ数は3〜5個のアプリが多いですが、それ以上の個数になる場合は左右にスクロールできるようにしても大丈夫です
９. Vimeo
動画共有サービスVimeoのiPhoneアプリ。動画のアップロードボタンがひときわ大きく表示されています。
TIPS
選択されたタブはVimeoのように他と明確に区別できるようにしておくのが良いでしょう
ギャラリー
ギャラリー
１０. Voicepic
写真に声を乗せて共有できるVoicepicは、アプリを立ち上げるとユーザの投稿作品がズラリ。代表的なギャラリーパターンの使い方だと言えます。
TIPS
ギャラリーパターンは、ニュース系アプリや投稿系アプリなどの、コンテンツが頻繁に更新されるアプリに適したナビゲーションです
１１. BBC
常に最新の情報に更新されるBBCのアプリもギャラリーパターンを使っています。後述のイメージカルーセルを併用したUIパターンで、フリック操作で記事を左右にめくることができます。
ダッシュボード
ダッシュボード
１２. Argus
ライフログ記録アプリのArgusは、毎日の歩数や消費カロリーを記録してくれます。難しい六角形の配置ながら数値を綺麗に見せている、挑戦的なUIと言えるでしょう。
TIPS
ダッシュボードパターンを採用する時には、コンテンツを詰め込まないことが良いUIの基本です。たとえばArgusでは、iPhoneの限られた画面内で六角形の表示を保つため、画面に出す表示を制限しています
１３. 楽天証券 iSPEED
楽天証券の取引アプリ、iSPEEDは、市況や株価を一覧表示するのに非常に適しています。クリックすると詳しいチャートが見れるのがポイント。iPad版はiPadに最適化されているため、こちらも要チェックです。
メタファー
メタファー
１４. Paypal
Paypalは登録中のクレジットカードがズラリ。
１５. Evernote
Evernoteは最初に表示される画面が縦に並んだノート形式。「ノートブック」の中には折りたたまれたポートフォリオ形式のノートが並んでいます。
メガメニュー
メガメニュー
１６. Dropbox
ドロップボックスの基本ナビゲーションはタブメニューですが、メニューは大きなアイコンを採用しています。
ページカルーセル
ページカルーセル
１７. LINE 天気
LINEの天気予報アプリは地点を複数登録できるのが特徴。ページインジケータでどの位置にいるのか、表示されるようになっています。
１８. Flight Board
飛行機の発着時間を調べるFlight Board。一番大事な情報（離陸時間や便名）を邪魔しないよう、ページインジケーターを上部に配置しています。
１９. Start by Tack
特徴的なUIを持つアラーム・ストップウォッチアプリのStart by Tack。ボタン操作を必要とせず、スワイプなどで時間をセットします。挑戦的なUIが特徴であるこのアプリでは、アプリの雰囲気を壊さないよう、ページインジケータをバーで表示しています。
イメージカルーセル
イメージカルーセル
２０. GU
GUの公式アプリは大きなイメージカルーセルを採用しています。
２１. Origami
セレクトショップアプリのOrigamiは透過型のタブメニューを使っています。上部の新着商品がイメージカルーセルパターンです。Origamiではインジケータを付けていません。
２２. myPANTONE
紙のデザイナーには欠かせないPANTONE色見本帳のアプリです。色見本チップをフリックしながらすばやく色を選ぶことができます。
まとめ
いかがでしたか？今回はナビゲーションを取り上げました。部分に注目すると見えてこないものが見えてくるはず。iPhoneアプリデザインの参考にしてみてください。【あわせて読みたい！】
累計32種！UIが優れたiPhoneアプリの部分デザイン（ヘッダ・フッタ編）
iPhoneアプリの視線誘導デザインパターン
（取材協力 永尾正史）
参考文献
- Theresa Neil 著、深津貴之 訳・監訳、牧野 聡 訳『モバイルデザインパターン― ユーザーインタフェースのためのパターン集』（オライリー・ジャパン、2012年）
