Apple ヒューマンインターフェースガイドライン日本語訳 - iOS Bars編

August 7, 2021

本記事は、本記事投稿時点の Human Interface Guidelines - iOS を日本語訳したものです。DeepL で機械翻訳を行った後、誤訳が見受けられた際には修正を加えています。

Human Interface Guidelines - iOS #

https://developer.apple.com/design/human-interface-guidelines/

1. Overview
2. App Architecture
3. User Interaction
4. System Capabilities
5. Visual Design
6. Icons and Images
7. Bars
8. Views
9. Controls
10. Extensions

Bars - Navigation Bars #

https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/

ナビゲーションバー #

ナビゲーションバーは、アプリ画面の最上部、ステータスバーの下に表示され、一連の階層的な画面を移動することができる。新しい画面が表示されると、ナビゲーションバーの左側には、前の画面のタイトルが表示された「戻る」ボタンが表示されます。ナビゲーションバーの右側には、アクティブなビュー内のコンテンツを管理するための「編集」や「完了」ボタンなどのコントロールが配置されていることがある。分割ビューでは、分割ビューの 1 つのペインにナビゲーションバーが表示されることがあります。ナビゲーションバーは半透明で、背景色が付いている場合もあります。また、キーボードが画面に表示されているとき、ジェスチャーが発生したとき、またはビューのサイズが変更されたときに、ナビゲーションバーを隠すように設定することもできます。

より臨場感のある体験を提供するために、ナビゲーションバーを一時的に隠すことを検討します。 たとえば、「写真」では、フルスクリーンの写真を表示すると、ナビゲーションバーやその他のインターフェース要素が非表示になります。このような動作を実装する場合は、タップなどの簡単なジェスチャーでナビゲーションバーを元に戻すことができます。

開発者向けのガイダンスは、UINavigationBar を参照してください。

ナビゲーションバーのタイトル #

ナビゲーションバーに現在のビューのタイトルを表示することを検討してください。 ほとんどの場合、タイトルは人々が自分の見ているものを理解するのに役立ちます。しかし、ナビゲーションバーのタイトル表示が冗長に思える場合は、タイトルを空にしておくことができます。例えば、「Notes」では、現在のノートにタイトルを付けていませんが、これは最初の行のコンテンツで必要なコンテキストがすべて揃っているからです。

文脈を特に強調したい場合は、大きなタイトルを使用します。 大きなタイトルはコンテンツと競合するものではありませんが、アプリによっては、閲覧や検索の際に、大きなタイトルの太いテキストが人を誘導するのに役立ちます。例えば、タブ形式のレイアウトでは、大きなタイトルを付けることで、アクティブなタブを明確にしたり、上までスクロールしたことを示すことができます。電話」ではこの方法を採用し、「ミュージック」では、アルバム、アーティスト、プレイリスト、ラジオなどのコンテンツ領域を大きなタイトルで区別しています。iOS 13 以降では、大きなタイトルのナビゲーションバーには、デフォルトで背景素材や影が含まれません。また、大きなタイトルは、コンテンツをスクロールし始めると標準のタイトルに移行します。開発者向けのガイダンスは prefersLargeTitles を参照してください。

タイトルが大きいナビゲーションバーの境界線を隠すことを検討します。 iOS 13 以降では、ナビゲーションバーの影を消すことで、ナビゲーションバーの下の境界線を隠すことができます（コンテンツエリアをスクロールすると、境界線は自動的に再表示されます）。ボーダーレススタイルは、タイトルとコンテンツの関連性を高めるため、大きなタイトルのナビゲーションバーに適しています。しかし、標準的なタイトルのナビゲーションバーでは、タイトルとボタンの区別がつきにくくなるため、ボーダレススタイルはあまり効果的ではありません。ただし、iPad のスプリットビューでは、プライマリビューとセカンダリビューの両方にボーダレススタイルを使用して、一貫性を維持することができます。

ナビゲーションバーのコントロール #

ナビゲーションバーにコントロールを詰め込みすぎないようにしましょう。 一般的に、ナビゲーションバーには、ビューの現在のタイトル、戻るボタン、およびビューのコンテンツを管理する 1 つのコントロール以上のものを含めるべきではありません。ナビゲーションバーにセグメント化されたコントロールを使用している場合は、ナビゲーションバーにタイトルやセグメント化されたコントロール以外のコントロールを含めるべきではありません。

ナビゲーションバーコントロール用にカスタムグリフを作成する場合は、以下のサイズを使用し、必要に応じてバランスを調整してください。

標準の戻るボタンを使う。標準の戻るボタンは、情報の階層を辿ることができることを人々は知っています。 ただし、カスタムの戻るボタンを実装する場合は、見た目が戻るボタンであること、人々が期待する動作をすること、インターフェイスの他の部分と一致していること、アプリ全体で一貫して実装されていることを確認してください。システムが提供するバックボタンのシェブロンをカスタム画像で置き換える場合は、カスタムマスク画像も提供してください。iOS は、トランジション時にこのマスクを使用してボタンのタイトルをアニメーション化します。

マルチセグメントのパンくずパスを含めないでください。 「戻る」ボタンは、常に前の画面に戻るという単一の動作を行います。現在の画面へのフルパスがないと、ユーザーが迷子になる可能性がある場合は、アプリの階層をフラットにすることを検討してください。

テキストタイトルボタンに十分なスペースを確保する。 ナビゲーションバーに複数のテキストボタンがある場合、それらのボタンのテキストが一緒に表示され、ボタンの区別がつかなくなることがあります。ボタンとボタンの間に固定のスペースアイテムを挿入して、区切りをつけてください。開発者向けのガイダンスとしては、UIBarButtonItem の UIBarButtonSystemItemFixedSpace 定数値を参照してください。

ナビゲーションバーにセグメント化されたコントロールを使用して、アプリの情報階層をフラットにすることを検討します。 ナビゲーションバーにセグメント化されたコントロールを使用する場合は、階層の最上位レベルでのみ使用し、下位レベルでは正確なバックボタンのタイトルを選択するようにしてください。その他のガイダンスについては、「セグメントコントロール」を参照してください。

Bars - Search Bars #

https://developer.apple.com/design/human-interface-guidelines/ios/bars/search-bars/

検索バー #

検索バーは、フィールドにテキストを入力することで、大量の値のコレクションから検索することができます。検索バーは単独でも、ナビゲーションバーやコンテンツビューの中でも表示することができます。ナビゲーションバーに表示する場合は、検索バーをナビゲーションバーに固定していつでもアクセスできるようにしたり、ユーザーが下にスワイプして表示させるまで検索バーを折り畳むことができます。

検索の実装には、テキストフィールドではなく、検索バーを使用します。 テキストフィールドでは、人々が期待するような標準的な検索バーの外観が得られません。

クリアボタンを有効にする。 ほとんどの検索バーには、フィールドの内容を消去する Clear ボタンが付いています。

必要に応じてキャンセルボタンを有効にしてください。 ほとんどの専用検索バーには、検索を直ちに終了させるキャンセルボタンがあります。テキスト・フィールドは、人々が期待する標準的な検索バーの外観を持っていません。

必要に応じて、検索バーでヒントやコンテキストを提供します。 検索バーのフィールドには、「Search Clothing, Shoes and Accessories」や単に「Search」などのプレースホルダーテキストを入れて、検索対象のコンテキストを思い出させることができます。また、適切な句読点を用いた簡潔な 1 行のプロンプトを検索バーの真上に表示し、ガイダンスを提供することもできます。「Stocks」では、企業名や株式記号を入力できることを知らせるプロンプトを表示しています。

検索バーの下に、便利なショートカットやその他のコンテンツを提供することを検討します。 検索バーの下には、ユーザーがより早くコンテンツにたどり着けるような工夫が施されています。例えば、Safari では、検索フィールドをタップするとすぐにブックマークが表示されます。ブックマークを選択すると、検索キーワードを入力しなくてもすぐにそのページに移動できます。Stocks では、検索フィールドに文字を入力すると、検索結果のリストが表示されます。文字を入力することなく、いつでも選択できます。

開発者向けのガイダンスとして、UISearchController と UISearchBar を参照してください。

スコープバー #

検索バーにスコープバーを追加することで、検索の範囲を絞り込むことができます。

スコープバーを入れることで検索結果が向上することを支持します。 スコープバーは、検索対象となるカテゴリーが明確に定義されている場合に有効です。しかし、検索結果を向上させることが一番なので、スコープは必要ありません。

開発者向けのガイダンスとしては、UISearchBar を参照してください。

Bars - Sidebars #

https://developer.apple.com/design/human-interface-guidelines/ios/bars/sidebars/

サイドバー #

サイドバーは、アプリレベルのナビゲーションと、アプリ内のコンテンツのトップレベルのコレクションへのクイックアクセスを提供します。サイドバーでアイテムを選択すると、特定のコンテンツに移動することができます。例えば、Mail のサイドバーには、すべてのメールボックスのリストが表示されます。メールボックスを選択してメッセージのリストにアクセスしたり、特定のメッセージを選択してコンテンツペインに表示したりすることができます。

サイドバースタイルのリストを使用してサイドバーを作成し、それを分割ビューの主列に配置します。関連するガイダンスは、「分割ビュー」を参照してください。

サイドバーに正しい外観を適用します。 サイドバーを作成するには、コレクションビューのリストレイアウトのサイドバー外観を使用します。開発者向けのガイダンスは、「UICollectionLayoutListConfiguration.Appearance」を参照してください。

サイドバーを使用して、アプリレベルで情報を整理します。 サイドバーは、情報の階層をフラットにして、複数の情報カテゴリーやモードに同時にアクセスできるようにするのに適した方法です。サイドバーは、アプリの重要な部分や、フォルダやプレイリストなどのトップレベルのコンテンツコレクションへのクイックナビゲーションに使用します。

可能な限り、サイドバーのコンテンツをユーザーがカスタマイズできるようにしてください。 サイドバーはアプリのナビゲーションになるので、ユーザーが重要なコンテンツに素早くアクセスできるようにするためのショートカットとして使用できます。どの項目が最も重要なのかをユーザーが決められるとよいでしょう。

サイドバーの非表示を禁止しないでください。 ユーザーがサイドバーを非表示にして、コンテンツのためのスペースを確保したり、内蔵のエッジスワイプジェスチャーを使ってサイドバーを再び表示できるようにしましょう。サイドバーをデフォルトで非表示にすることは避けましょう。

サイドバーに表示されるタイトルは、明確で簡潔なものにしてください。 不必要な単語や冗長な単語は省きます。例えば、Mail では、各メールボックスのタイトルから「Messages」という言葉を省き、「Flagged」や「Drafts」などのより簡潔な言葉を使用しています。

一般的に、サイドバー内では 2 レベル以上の階層を表示しないようにしてください。 データの階層が 2 レベルよりも深い場合は、スプリットビューのインターフェースの補助列にリストビューを使用してください。

開発者向けのガイダンスとしては、UICollectionLayoutListConfiguration を参照してください。

Bars - Status Bars #

https://developer.apple.com/design/human-interface-guidelines/ios/bars/status-bars/

ステータスバー #

画面の上端に表示されるステータスバーには、時刻、携帯電話会社、バッテリー残量など、デバイスの現在の状態に関する有用な情報が表示されます。ステータスバーに表示される情報は、デバイスやシステムの構成によって異なります。

システムが提供するステータスバーをご利用ください。 人々は、ステータスバーがシステム全体で一貫していることを期待しています。カスタムのステータスバーに置き換えないでください。

ステータスバーのスタイルをアプリのデザインに合わせることができます。 ステータスバーのテキストとインジケータのビジュアルスタイルは、ライトまたはダークのいずれかで、アプリに対してグローバルに設定することも、画面ごとに個別に設定することもできます。暗い色のステータスバーは明るい色のコンテンツの上でうまく機能し、明るい色のステータスバーは暗い色のコンテンツの上でうまく機能します。

ステータスバーの下のコンテンツを見えにくくする。 デフォルトでは、ステータスバーの背景は透明で、下のコンテンツが透けて見えます。ステータスバーの読みやすさを保ち、その下のコンテンツがインタラクティブであることを示唆しないようにします。これにはいくつかの一般的な手法があります。

• アプリでナビゲーションバーを使用すると、ステータスバーの背景が自動的に表示され、ステータスバーの下にコンテンツが表示されないようになります。
• グラデーションやソリッドカラーなどのカスタム画像をステータスバーの背後に表示する。
• ステータスバーの背後にぼかしたビューを配置する。開発者向けのガイダンスとして、UIBlurEffect を参照してください。

フルスクリーンメディアを表示する場合は、ステータスバーを一時的に非表示にすることを検討してください。 ユーザーがメディアに集中しようとしているときに、ステータスバーが邪魔になることがあります。これらの要素を一時的に隠すことで、より没入感のある体験を提供できます。たとえば、「写真」アプリでは、ユーザーが全画面の写真を閲覧するときに、ステータスバーやその他のインターフェイス要素を非表示にします。

ステータスバーを永久に隠さないようにします。 ステータスバーがないと、ユーザーは時間を確認したり、Wi-Fi 接続があるかどうかを確認するためにアプリを離れる必要があります。隠されたステータスバーを再表示させるには、発見しやすいシンプルなジェスチャーを使うとよいでしょう。写真」アプリケーションでフルスクリーンの写真を閲覧しているときにシングルタップすると、ステータスバーが再び表示されます。

開発者向けのガイダンスとしては、UIApplication の UIStatusBarStyle 定数と、UIViewController の preferredStatusBarStyle プロパティを参照してください。

Bars - Tab Bars #

https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/

タブバー #

タブバーは、アプリケーションの画面下部に表示され、アプリケーションのさまざまなセクションをすばやく切り替えることができます。タブバーは半透明で、背景色が付いている場合もあります。また、画面の向きを問わず同じ高さを保ち、キーボードが表示されている場合は非表示になります。タブバーには任意の数のタブを配置できますが、表示されるタブの数はデバイスのサイズや方向によって異なります。水平方向のスペースが限られているために表示できないタブがある場合は、最後に表示されるタブが「詳細」タブとなり、追加のタブが別画面で一覧表示されます。

ヒント

タブバーとツールバーは、アプリの画面下に表示されるものです。タブバーは、時計アプリの「アラーム」、「ストップウォッチ」、「タイマー」のように、アプリ内のさまざまなセクションを切り替えるためのものです。ツールバーには、アイテムの作成、アイテムの削除、注釈の追加、写真の撮影など、現在のコンテキストに関連したアクションを実行するためのボタンがあります。詳しくは、「ツールバー」を参照してください。タブバーとツールバーが同じビューに一緒に表示されることはありません。

開発者向けのガイダンスは、「UITabBar」を参照してください。

一般的に、タブバーはアプリレベルで情報を整理するために使用します。 タブバーは、情報の階層をフラットにし、複数の仲間の情報カテゴリーやモードに同時にアクセスできるようにするのに適した方法です。

タブバーはナビゲーションにのみ使用してください。 アクションを有効にするためにタブバーのボタンを使用しないでください。現在のビューの要素に作用するコントロールを提供する必要がある場合は、代わりにツールバーを使用してください。

タブの数は適切にしてください。 タブの数が多すぎると、各タブのタップ可能な領域が狭くなり、アプリが複雑になるため、ユーザーが情報を見つけにくくなる可能性があります。また、タブの数が少なすぎると、インターフェースが途切れているように見えてしまうため、問題となります。More タブは追加のタブを表示することができますが、タブを表示するには追加のタップが必要で、スペースを有効に活用できません。必要なタブだけを表示し、情報の階層構造に合わせて必要最小限のタブを使用してください。一般的に、iPhone では 3 ～ 5 個のタブを使用し、iPad では必要に応じて数個のタブを使用します。

ユーザーがアプリ内の異なるエリアに移動するときに、タブバーを隠さないでください。 タブバーはアプリのグローバルナビゲーションを可能にするので、どこでも表示されているべきです。ただし、モーダルビューの場合は例外です。モーダルビューは、ユーザーに別のエクスペリエンスを提供し、終了時には削除されるため、アプリの全体的なナビゲーションの一部ではありません。

タブの機能が利用できない場合は、タブを削除または無効にしないでください。 タブが利用できる場合もあれば、利用できない場合もあると、アプリのインターフェイスが不安定になり、予測できなくなります。すべてのタブが常に有効であることを確認し、タブのコンテンツが利用できない理由を説明してください。例えば、iOS デバイスに曲がない場合、ミュージックアプリの「今すぐ聴く」タブでは、曲をダウンロードする方法を説明します。

コンテキストの切り替えは、常に付属のビューで行う。 予測可能なインターフェイスを維持するために、タブを選択すると、画面上の別のビューではなく、タブバーに直接接続されたビューに常に影響を与える必要があります。例えば、分割ビューの左側でタブを選択しても、分割ビューの右側が突然変更されることはありません。ポップオーバーの中のタブを選択しても、ポップアップの後ろのビューが変化することはありません。

バッジを使って控えめなコミュニケーションを。 新しい情報がそのビューやモードに関連付けられていることを示すために、タブ上にバッジ（白いテキストと数字または感嘆符を含む赤い楕円形）を表示することができます。

タブバーのグリフが視覚的に一貫しており、バランスが取れていることを確認してください。 iOS 13 以降では、SF シンボルを使ってタブバーのアイテムを表現することができます。iOS のすべてのバージョンでは、システム API により、一般的なユースケースのためにデザインされた特定のグリフのセットが提供されています（「システムアイコン」 > 「タブバーアイコン」を参照）。独自のグリフをデザインすることもできます。詳しくは「グリフ」を参照してください。

縦向きでは、タブバーのグリフがタブのタイトルの上に表示され、横向きでは、グリフとタイトルが並んで表示されます。デバイスと方向に応じて、システムは通常のタブバーまたはコンパクトなタブバーを表示します。アプリには、どちらのサイズにも対応するカスタムタブバーグリフを含める必要があります。異なる形状のタブバーグリフを作成する場合は、次の指標を使用します。

ターゲットの幅と高さ（円形のグリフ）

ターゲットの幅と高さ（四角いグリフ）

ターゲット幅（ワイドグリフ）

ターゲットの高さ（トールグリフ）

Bars - Toolbars #

https://developer.apple.com/design/human-interface-guidelines/ios/bars/toolbars/

ツールバー #

アプリの画面下部に表示されるツールバーには、現在のビューやコンテンツに関連した操作を行うためのボタンが配置されています。ツールバーは半透明で、背景の色が付いていることもあり、必要性が低い場合は非表示になります。例えば、Safari では、ページの下部に向かってスクロールしている間はツールバーが非表示になり、上部に向かってスクロールしたり、画面の下部をタップしたりするとツールバーが表示されます。また、キーボードが画面に表示されているときも、ツールバーは隠れます。

ヒント

アプリの画面下には、ツールバーとタブバーが表示されますが、その違いを理解しておきましょう。ツールバーには、アイテムの作成、アイテムの削除、注釈の追加、写真の撮影など、現在のコンテキストに関連したアクションを実行するためのボタンがあります。タブバーは、時計アプリの「アラーム」、「ストップウォッチ」、「タイマー」のように、アプリ内の異なるセクションをすばやく切り替えるためのものです。詳しくは、「タブバー」を参照してください。ツールバーとタブバーが同じビューに表示されることはありません。

開発者向けのガイダンスは、「UIToolbar」を参照してください。

関連するツールバーボタンを用意する。 ツールバーには、現在のコンテキストで意味のある、頻繁に使用するコマンドを含める必要があります。

ボタンの数が 3 つ以下のツールバーでは、テキストの使用を検討してください。 それ以外の場合は、グリフを使用してください。例えばカレンダーでは、「Today」「Calendars」「Inbox」というタイトルで、それぞれのボタンの意味を明確にしています。テキストタイトルのツールバーボタンがアプリに適している場合は、簡潔なタイトルを作成し、ボタンとボタンの間に十分なスペースを確保して、ボタンが一緒にならないようにしてください。ボタンとボタンの間に固定スペースを挿入することで、ボタンの間隔を確保することができます。開発者向けのガイダンスとしては、UIBarButtonItem の UIBarButtonSystemItemFixedSpace 定数値を参照してください。

ツールバーボタンにカスタムグリフを作成する場合は、以下のサイズを使用し、必要に応じてバランスを調整してください。

セグメント化されたコントロールをツールバーで使用することは避けてください。 セグメント化されたコントロールはコンテクストを切り替えることができますが、ツールバーのアクションは現在の画面に固有のものです。コンテキストを切り替える方法を提供する必要がある場合は、代わりにタブバーの使用を検討してください。