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

スプリングボード
スプリングボード
スプリングボードはiOSやAndroidなどの
OS・画面解像度にほとんど依存しないのが特徴です。ローンチパッド(
LaunchPad)と呼ばれることもあります。
MacのUIにも、Mac OS X Lionから実装されたLaunchPadに採用されていますが、近年モバイルのUIデザインではやや下火になりつつある(採用例が減っている)ナビゲーションパターンです。
Mac OS X Lionから採用されているLaunchPad
1. Facebook
最初期Facebookのアプリ画面はスプリングボードを採用していました。現在はドロワーメニュー(後述)を使っています。
TIPS
項目のタイトル名が短い場合など(Facebookであれば1wordのアイコン)にダッシュボードパターンは効果的です
2. Blogger
Googleのブログツール、Bloggerはシンプルな2×2のダッシュボード。
TIPS
グリッドのレイアウトは3×3、2×3など様々な例があります
リストメニュー
リストメニュー
リストメニュー(
List Menu)パターンは一覧性や閲覧性の点でスプリングボードと同じ役割を持っています。
非常に数多くのバリエーションがあるのがこのUIパターンの特徴です。
3. Tinysquare
Foursquareに自動チェックインするためのアプリ。たくさんのチェックイン場所を表示させる必要があるためリストメニューパターンを採用しています。
TIPS
項目のタイトルが長い場合(Tinysquareであれば長い地名が入る可能性がある)や、サブタイトルを入れる必要がある場合(Tinysquareであれば最新チェックイン日時や住所の表示)にリストメニューが役立ちます
4. ZOZOTOWN
伸縮リスト(
Expanding List)を採用しているZOZOTOWNの公式サイト。各ジャンルのメニューが縮まって表示されます
ドロワーメニュー
ドロワーメニュー
ドロワー(
drawer)とは引き出しのこと。サイドメニュー(
Side Menu)と呼ばれることもあります。iOS版のFacebookアプリで採用され、またたくまに様々なアプリが採用しました(ドロワーメニューの先駆けとなったiOS版Facebookアプリでは、現在チャット一覧など一部にその姿を残すのみとなっています)
5. ClearWeather
天気予報アプリClearWeatherは天気表示させる地点をドロワーメニューで選択させています。
6. Vyclone
ビデオの自動合成アプリ、Vycloneもドロワーメニュー。かなり幅広です。
7. hike
コミュニケーションアプリのhikeはかなり短いドロワーメニュー。アイコンを使うと幅を短くできます。
TIPS
ドロワーメニューの幅が狭いとタップエリアが狭くなりますので、右利きの人にとってはユーザビリティの低いUIとなる可能性があります。
タブメニュー
タブメニュー
iOSではApple標準のアプリにも数多く採用されているタブメニューです。
8. POP
アプリのプロトタイプを作るためのiPhoneアプリ。シンプルなアイコンのタブメニューです。
TIPS
タブ数は3〜5個のアプリが多いですが、それ以上の個数になる場合は左右にスクロールできるようにしても大丈夫です
9. Vimeo
動画共有サービスVimeoのiPhoneアプリ。動画のアップロードボタンがひときわ大きく表示されています。
TIPS
選択されたタブはVimeoのように他と明確に区別できるようにしておくのが良いでしょう
ギャラリー
ギャラリー
ギャラリー(
Gallery)パターンはコンテンツがナビゲーションとして機能するUIパターンです。
10. Voicepic
写真に声を乗せて共有できるVoicepicは、アプリを立ち上げるとユーザの投稿作品がズラリ。代表的なギャラリーパターンの使い方だと言えます。
TIPS
ギャラリーパターンは、ニュース系アプリや投稿系アプリなどの、コンテンツが頻繁に更新されるアプリに適したナビゲーションです
11. BBC
常に最新の情報に更新されるBBCのアプリもギャラリーパターンを使っています。後述のイメージカルーセルを併用したUIパターンで、フリック操作で記事を左右にめくることができます。
ダッシュボード
ダッシュボード
ダッシュボード(
Dashboard)とは、
自動車などの計器盤の意味。それぞれの指標をタップして展開することでさらに次の階層へ進めるのが特徴です。財務状況の確認・分析ツール・マーケティングアプリなどで採用されているUIパターンです。
12. Argus
ライフログ記録アプリのArgusは、毎日の歩数や消費カロリーを記録してくれます。難しい六角形の配置ながら数値を綺麗に見せている、挑戦的なUIと言えるでしょう。
TIPS
ダッシュボードパターンを採用する時には、コンテンツを詰め込まないことが良いUIの基本です。たとえばArgusでは、iPhoneの限られた画面内で六角形の表示を保つため、画面に出す表示を制限しています
13. 楽天証券 iSPEED
楽天証券の取引アプリ、iSPEEDは、市況や株価を一覧表示するのに非常に適しています。クリックすると詳しいチャートが見れるのがポイント。iPad版はiPadに最適化されているため、こちらも要チェックです。
メタファー
メタファー
メタファー(
Metaphor)パターンの特徴は、最初に表示される画面が何らかのメタファー(隠喩)になっている点です。パッと見で何かを想像させやすい、現実世界に存在するプロダクトデザインを踏襲しています。
14. Paypal
Paypalは登録中のクレジットカードがズラリ。
15. Evernote
Evernoteは最初に表示される画面が縦に並んだノート形式。「ノートブック」の中には折りたたまれたポートフォリオ形式のノートが並んでいます。
メガメニュー
メガメニュー
メガメニュー(
Mega Menu)パターンでは、大きなメニューのパネルがポップアップし、オーバーレイ表示されるのが特徴です。
16. Dropbox
ドロップボックスの基本ナビゲーションはタブメニューですが、メニューは大きなアイコンを採用しています。
ページカルーセル
ページカルーセル
ページカルーセル(
Page Carousel)はページインジケーター(画面下部に表示される小さな点。)が特徴のパターンです。どこにいるのかわかるよう、小さな点によって現在位置を示しています。フリックによってページを移動できるものがほとんどです。ちなみに、
カルーセル(
Carousel)
とは木馬を意味しています。
17. LINE 天気
LINEの天気予報アプリは地点を複数登録できるのが特徴。ページインジケータでどの位置にいるのか、表示されるようになっています。
18. Flight Board
飛行機の発着時間を調べるFlight Board。一番大事な情報(離陸時間や便名)を邪魔しないよう、ページインジケーターを上部に配置しています。
19. Start by Tack
特徴的なUIを持つアラーム・ストップウォッチアプリのStart by Tack。ボタン操作を必要とせず、スワイプなどで時間をセットします。挑戦的なUIが特徴であるこのアプリでは、アプリの雰囲気を壊さないよう、ページインジケータをバーで表示しています。
イメージカルーセル
イメージカルーセル
ページカルーセルに対して画像をめくるのがイメージカルーセル(Image Carousel)パターンです。
20. GU
GUの公式アプリは大きなイメージカルーセルを採用しています。
21. Origami
セレクトショップアプリのOrigamiは透過型のタブメニューを使っています。上部の新着商品がイメージカルーセルパターンです。Origamiではインジケータを付けていません。
22. myPANTONE
紙のデザイナーには欠かせないPANTONE色見本帳のアプリです。色見本チップをフリックしながらすばやく色を選ぶことができます。
まとめ
いかがでしたか?今回はナビゲーションを取り上げました。部分に注目すると見えてこないものが見えてくるはず。iPhoneアプリデザインの参考にしてみてください。
【あわせて読みたい!】
累計32種!UIが優れたiPhoneアプリの部分デザイン(ヘッダ・フッタ編)
iPhoneアプリの視線誘導デザインパターン
(取材協力 永尾正史)
参考文献