UIデザイン思想のバイブルといわれる、iOSのヒューマンインターフェイスガイドラインの日本語訳です。 約80項目のうちの１つ「ナビゲーション」を解説付きでまとめました。 指摘等ありましたらお願いいたします。

1. App Architecture >
Navigation
アプリの構造設計 > ナビゲーションについて
iOS
Human Interface Guideline
日本語版（全訳・例解）

2. Navigation
People tend to be unaware of an
app’s navigation until it doesn’t
meet their expectations.
Your job is to implement navigation
in a way that supports the structure
and purpose of your app without
calling attention to itself.
ナビゲーション（画面遷移）
ユーザーの予想に沿ったものでないかぎり、
ユーザーはアプリで表示されるナビゲーション
にはあまり気づきません。
デザイナーとしてやるべきことは、ユーザーが
操作中にナビゲーションに気をとられることな
く、アプリの目的を達成できるようにナビゲー
ションを実装することです。
NAVIGATION 全訳 1/13

3. NAVIGATION 全訳 2/13
Navigation should feel natural and
familiar, and shouldn’t dominate the
interface or draw focus away from
content.
In iOS, there are three main styles of
navigation.
ナビゲーションは自然で親しみやすいものにす
べきであり、インターフェースを覆いつくした
り、コンテンツから目線を遠ざけるものであっ
てはいけません。
iOSでは、ナビゲーションのスタイルは3つあり
ます。

4. NAVIGATION例解 1/7
①
そもそもなぜNAVIGATION（画面遷移の設計）が重要
なのか？
1つのアプリは1つの機能のためにつくられてます。
ナビゲーションの役割とは
アプリの目的地までユーザーを誘導することです。
例えば、
「写真を撮る」と「写真を管理する」は別アプリですよ
ね
「音楽を買う」「音楽を聴く」も別アプリです。
1つのアプリの目的は1つです。
その目的地を明確にするのがNAVIGATIONの役割です。
https://twitter.com/kobaka7/status/903414613122834432/photo/1

5. NAVIGATION例解 1/7
②
ナビゲーションの配置は意識せず使えるくらい自然
な配置に！
UIデザイナーが実現すべきことは、ユーザーがアプ
リを使う際に自然と使ってもらえるものをつくるこ
とです。
たとえば、Facebook、Twitter、Instagramの新着
通知。
配置はすべて左から二番目のタブに設置されていま
す。
これによって、私たちは意識して探すことなく、新
着通知が来ているかどうかを知ることが出来ます。
投稿ボタンは右上、プロフィールは一番右、タイム
ラインはファーストビュー（一番左のタブ）など、
統一されたナビゲーションにより、UIに集中するの
ではなく、本質的なアプリの使い方が出来るのだと
と思います。
https://twitter.com/kobaka7/status/903414613122834432/photo/1

6. NAVIGATION 全訳 3/13
Hierarchical Navigation
Make one choice per screen until
you reach a destination.
To go to another destination, you
must retrace your steps or start over
from the beginning and make
different choices.
Settings and Mail use this navigation
style.
【階層型ナビゲーション】
ユーザーがたどり着きたいぺ―ジを見るまでに階
層を潜ることでタスクを進行させます。
そこから違うページに行くためには、ユーザー
はたどってきた導線を元に戻るか、最初のトッ
プページからやり直して違うページへ移動して
いく必要があります。
「設定」と「メール」アプリは、階層型ナビ
ゲーションを使っています。

7. NAVIGATION例解 2/7
階層型ナビゲーションのメリット
★今どこにいるのか把握しやすい→優先順位の高いタスクから進められ
る
例：Twitter
トップページ「タイムライン」
→目的地「投稿の詳細（を読む）」
→次ページ「プロフィール画面」→目的「投稿の詳細（を読む）」
→目的地「投稿」
ちなみに、階層型だと目的地変更（投稿詳細
を見ようとしてたけど、やっぱツイートした
くなった場合など）するときには階層はその
ままで別画面を表示したりできます。
→モーダル(Modality)といいます。（別章解
説）
メインタスクを妨げずにサブタスクを途中で
はさむ方法

8. NAVIGATION 全訳 4/13
Flat Navigation
Switch between multiple content
categories. Music and App Store use
this navigation style.
【水平型ナビゲーション】
複数のコンテンツカテゴリを切り替えるスタイ
ルです。「Music」や「App Store」はこのナ
ビゲーションスタイルを使っています。

9. NAVIGATION例解 3/7
水平型のメリット
・これは階層型と違い、ゴールに対して入り口を一つに絞らず、複数の
切り口からゴールまでの道のりを提示する事ができるナビゲーションで
す。
・「タブバー」を使ってカテゴリ移動が簡単にできます。
例：App store
「アプリの詳細」を見ながら、気になったことを検索したいときに
「戻る」を押さなくてもタブバーで「検索」に移動できる。
Twitterのタブバーも「ホーム」「検索」「通知」が並列してますね！
https://d2l930y2yx77uc.cloudfront.net/production/uploads/images/56105
97/picture_pc_1841993985756c9e7a1bf71fdfa6ef44.jpg

10. NAVIGATION 全訳 6/13
Content-Driven or Experience-
Driven Navigation
Move freely through content, or the
content itself defines the navigation.
Games, books, and other immersive
apps generally use this navigation
style.
Some apps combine multiple
navigation styles. For example, an
app that uses flat navigation may
implement hierarchical navigation
within each category.
【コンテンツドリブン・エクスペリエンスドリ
ブンのナビゲーション】
コンテンツごとの移動が自由にできたり、コン
テンツそれ自体がナビゲーションを決定します。
「Games」や「Books」やその他の没入感のあ
るアプリは一般的にこのナビゲーションスタイ
ルを使っています。
----------------------------------
まとめ
アプリによっては、複数のナビゲーションスタ
イルを組み合わせて取り入れています。例えば、
水平型ナビゲーションを採用しているアプリが
それぞれのカテゴリ内では階層型ナビゲーショ
ンを取り入れている場合があります。

11. NAVIGATION例解 4/7
コンテンツドリブン型のメリット
決まった型や構造がなく、作成者が自由につくれるナビゲーション構造。
ゲームや電子書籍のアプリに使われますね！
例：ゲームアプリ
「敵を倒す」「リタイアする」などゲーム側で定義された行動以外で、
勝手に次のコンテンツに進むこと（画面遷移）はできません。

12. NAVIGATION 全訳 7/13
Always provide a clear path.
People should always know where they are
in your app and how to get to their next
destination. Regardless of navigation style,
it’s essential that the path through content is
logical, predictable, and easy to follow.
In general, give people one path to each
screen. If they need to see a screen in
multiple contexts, consider using an action
sheet, alert, popover, or modal view. To
learn more, see Action Sheets, Alerts,
Popovers, and Modality.
【画面遷移の導線を常に明確にしよう】
アプリ内でどこにいるのかを常にユーザーに対して知らせ
る必要があります。どの型のナビゲーションを実装するか
にかかわらず、画面遷移の導線（以下、パス）をユーザー
が論理的に予想しやすく、かつ、従いやすいものにするこ
とが重要です。
一般的には、画面ごとにひとつのパスを用意しましょう。
１つの階層で複数画面を見る必要がある場合には、アク
ションシートやアラート、ポップオーバー、モーダル
ビューを使うことを考えましょう。（用語はよくわからな
いと思うので、）より詳細なことは、別項目で解説してい
るアクションシート、アラート、ポップオーバー、モダリ
ティをご覧ください。

13. NAVIGATION 全訳 8/13
Design an information structure that makes
it fast and easy to get to content.
Organize your information structure in a
way that requires a minimum number of
taps, swipes, and screens.
Use touch gestures to create fluidity.
Make it easy to move through your interface
with minimum friction. For example, you
could let people swipe from the side of the
screen to return to the previous screen.
【コンテンツにより速く簡単にたどり着けるようにサイト
構造をデザインしましょう】
サイト構造を考えるときには、最小限のタップ、スワイプ、
スクロールでユーザーが情報にたどり着けるように設計し
ましょう。
【タッチジェスチャを使用してスムーズさを生み出しま
しょう】
最小限のアクションでインターフェースを操作できるよう
にしましょう。たとえば、画面横からスワイプするだけで
前の画面に戻れるようにします。

14. NAVIGATION例解 5/7
【Apple製品のタッチジェスチャー用語】
・タップ
指で軽く叩く操作。マウスのクリックに相当。
・ダブルタップ
指で2回叩く操作。マウスのダブルクリックに相当。
・トリプルタップ
指で3回叩く操作。マウスのトリプルクリックに相当。
・フリック
指ではじく・払う操作。
・スワイプ
指でなぞる操作。
・ドラッグ
指で引きずる操作。マウスの同名の操作に相当。なお、OS Xのアクセシビリティ項目として「トラックパッドオプション - ドラッグロック」が存在する。この
ドラッグロックをオンにすると、ドラッグ途中で指を離しても対象をホールドした状態を維持することが可能。
・ピンチイン
複数本の指でつまむ・狭める操作。
・ピンチアウト
複数本の指で広げる操作。
・回転
2本の指を円を描くように動かす。
https://dic.nicovideo.jp/a/%E3%82%BF%E3%83%83%E3%83%81%E3%82%B8%E3%82%A7%E3%82%B9%E3%83%81%E3%83%A3%E3%83%BC

15. NAVIGATION 全訳 9/13
Use standard navigation components.
Whenever possible, use standard navigation
controls such as page controls, tab bars,
segmented controls, table views, collection
views, and split views. Users are already
familiar with these controls, and will
intuitively know how to get around your app.
【iOSのデフォルトコンポーネントを使いましょう】
できるかぎり、iOSコンポーネントを使いましょう。
ページコントロール、タブバー、セグメント化コントロー
ル、テーブルビュー、コレクションビュー、分割ビューな
ど。（※用語解説はそれぞれの項目を見てください。
ユーザーはこれらのパーツは使い慣れており、直感的に扱
えます。

16. NAVIGATION例解 6/7
参考：
標準コンポーネントって何？？って人 ↓
あのUIは何て言うの？iOSのデフォルトUIコンポーネントをおさらいする
(https://nvtrlab.jp/blog/jb/ios_ui_component.html)
サイズなどはこちら(英語)：https://ivomynttinen.com/blog/ios-design-guidelines
https://d2l930y2yx77uc.cloudfront.net/production/uploads/images/56105
97/picture_pc_1841993985756c9e7a1bf71fdfa6ef44.jpg

17. NAVIGATION 全訳 10/13
Use a navigation bar to traverse a hierarchy
of data.
The navigation bar’s title can show the
current position in the hierarchy, and the back
button makes it easy to return to the previous
location. For specific guidance, see
Navigation Bars.
【ナビゲーションバーを使って階層を表します】
ナビゲーションバーのタイトルは階層内でどの位置にいる
かを表示でき、戻るボタンを使用すると前の画面に戻るこ
とができます。詳細はこちら（ナビゲーションバー）

18. NAVIGATION例解 7/7
①Status bar
ステータスバー。電波状況やバッテリー残量、日付などを表示。デバイスの上部に配置さ
れます。
②Navigation bar
ナビゲーションバー。情報階層移動に使う。よくあるのが左にBackボタン、真ん中に階
層ラベル（必須ではない）のパターン。通常、ステータスバーの下に配置されます。
③Tab bar
タブバー。異なるタスクを切り替える場合に使用。下に配置するのがデフォルト。
④Search bar
検索バー。その名の通り、検索窓が入っているバーです。
⑤Tool bar

19. NAVIGATION 全訳 11/13
Use a tab bar to present peer categories of
content or functionality.
A tab bar lets people quickly and easily
switch between categories, regardless of the
current location. For specific guidance, see
Tab Bars.
【タブバーを使用してカテゴリを表示するようにしましょ
う】
タブバーを使用することで、現在の階層に関係なく、すば
やく簡単にカテゴリを切り替えることができます。詳細は
タブバーの解説ページへ。

20. NAVIGATION 全訳 12/13
Use a page control when you have multiple
pages of the same type of content.
A page control clearly communicates the
number of pages available and which one is
currently active. The Weather app uses a
page control to show location-specific
weather pages. For specific guidance, see
Page Controls.
【複数ページを1つの階層で見せたいときは、ページコント
ロールを使いましょう】
ページコントロールはページ数と現在表示されているペー
ジを明確に伝えます。
「天気アプリ」ではページコントロールを使用して、場所
ごとに天気ページを表示してますよね。詳しくはこちら
（ページコントロール）
※一番右がページコントロールです。

21. NAVIGATION 全訳 13/13
TIP
Segmented controls and toolbars don’t
enable navigation. Use a segmented control
to organize information into different
categories. Use a toolbar to provide controls
for interacting with the current context. For
additional information on these types of
elements, see Segmented Controls and
Toolbars.
【tips】
セグメント化コントロールとツールバーは画面遷移を有効
にしません。
セグメント化コントロールは、情報をさまざまなカテゴリ
に整理するときに使いましょう。
ツールバーは、現在表示しているページ環境に対応してコ
ントロールするときに使いましょう。
追加情報などは別項目（セグメント化コントロール、ツー
ルバー）。
※セグメント化コントロール（「関連性が高いものの、お互い
に排他的な選択肢をもつビュー」を切り替える役目がありま
す。）