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

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

August 9, 2021

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

Human Interface Guidelines - iOS #

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

Controls - Buttons #

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

ボタン #

ボタンは、アプリ固有のアクションを開始するもので、カスタマイズ可能な背景を持ち、タイトルやアイコンを含めることができます。システムには、ほとんどのユースケースに対応する多数の定義済みボタンスタイルが用意されています。また、完全なカスタムボタンをデザインすることもできます。

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

システムボタン #

システムボタンは、ナビゲーションバーやツールバーに表示されることが多いですが、どこでも使用できます。

タイトルには動詞を使いましょう。 アクションに特化したタイトルは、ボタンがインタラクティブであることを示し、ボタンをタップすると何が起こるかを説明します。

タイトルにはタイトルケースを使用します。 冠詞、調整用接続詞、4 文字以下の前置詞を除くすべての単語を大文字にします。

タイトルは短くしましょう。 長すぎるテキストはインターフェイスを混雑させ、小さな画面では切り捨てられてしまう可能性があります。

枠線や背景は必要な場合にのみ追加してください。 デフォルトでは、システムボタンには境界線や背景がありません。しかし、コンテンツエリアによっては、インタラクティブ性を示すためにボーダーや背景が必要な場合があります。電話」アプリでは、数字キーをボーダー状にすることで、従来の電話のかけ方を強調し、「電話」ボタンの背景を目立たせることで、簡単に電話をかけることができるようにしています。

開発者向けのガイダンスとして、UIButton のボタンタイプである UIButtonTypeSystem を参照してください。

詳細表示ボタン #

詳細表示ボタンは、画面上の特定のアイテムに関連する追加情報や機能を含むビュー（通常、モーダルビュー）を開きます。どのような種類のビューでも使用できますが、詳細表示ボタンは、特定の行に関する情報にアクセスするためにテーブルでよく使用されます。

詳細表示ボタンを表の中で適切に使用する。 表の行に詳細表示ボタンがある場合、そのボタンをタップすると追加情報が表示されます。他の場所をタップすると、その行が選択されるか、アプリで定義された動作が行われます。行全体をタップして詳細情報を表示させたい場合は、詳細表示ボタンを使用しないでください。代わりに、開示インジケータのアクセサリコントロールを使用します。UITableViewCell の closureIndicator を参照してください。

開発者向けのガイダンスとして、UIButton のボタンタイプ UIButtonTypeDetailDisclosure を参照してください。

情報ボタン #

情報ボタンは、アプリの設定情報を表示します。場合によっては、ビューを反転させた後、現在のビューの背面に表示されます。情報ボタンには、ライトとダークの 2 つのスタイルがあります。アプリのデザインに合ったスタイルを選び、画面上で見失わないようにしてください。

開発者向けのガイダンスとしては、UIButton のボタンタイプである UIButtonTypeInfoLight と UIButtonTypeInfoDark を参照してください。

連絡先追加ボタン #

ユーザーは連絡先追加ボタンをタップして、既存の連絡先のリストを参照し、テキストフィールドやその他のビューに挿入する連絡先を選択できます。例えば、Mail では、メッセージの To フィールドにある Add Contact ボタンをタップすると、連絡先のリストから受信者を選択できます。

連絡先追加ボタンに加えて、キーボード入力を可能にする。 「連絡先の追加」ボタンは、連絡先情報を入力するための代替手段を提供するものです。既存の連絡先を追加するためのショートカットとして提供するのは問題ありませんが、キーボードでも連絡先情報を入力できるようにしましょう。

開発者向けのガイダンスとして、UIButton のボタンタイプ「UIButtonTypeContactAdd」を参照してください。

Controls - Color Wells #

https://developer.apple.com/design/human-interface-guidelines/ios/controls/color-wells/

カラーウェル #

カラーウェルをタップすると、システムに用意されたカラーピッカーが表示されます。このカラーピッカーを使って、テキスト、図形、マーキングツールなどの色を選択することができます。

カラーピッカーのタブ式インターフェースでは、グリッドやスペクトルから色を選択したり、RGB 値を選択したりすることができます。また、スポイトボタンをタップしたり、ルーペを使って画面上の任意の場所に表示されている色を抽出したりして色を選択することもできます。

システムが提供するカラーピッカーを使用して色を選択することをお勧めします。 内蔵のカラーピッカーを使用すると、一貫したユーザーエクスペリエンスが得られるだけでなく、カラーセットを保存してどのアプリケーションからでもアクセスできるようになります。また、システムで定義されたカラーピッカーを使用すると、Mac 版の iPad アプリケーションで macOS ユーザーに慣れ親しんだ操作感を提供することができます。

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

Controls - Context Menus #

https://developer.apple.com/design/human-interface-guidelines/ios/controls/context-menus/

コンテキストメニュー #

iOS 13 以降では、コンテクストメニューを使うことで、インターフェースを煩雑にすることなく、画面上のアイテムに関連する追加機能にアクセスできるようになります。

コンテキストメニューは Peek and Pop と似ていますが、2 つの重要な違いがあります。

コンテキストメニューは、iOS 13 以降を搭載したすべてのデバイスで利用でき、Peek and Pop は 3D Touch をサポートするデバイスでのみ利用できます。
コンテキストメニューには、コンテキストに関連するコマンドがすぐに表示されますが、Peek and Pop では、コマンドを表示するために上方向にスワイプする必要があります。

コンテキストメニューを表示するには、システムで定義されているタッチ＆ホールドジェスチャーまたは 3D Touch を使用できます（3D Touch では、コンテキストメニューをよりすばやく表示できます）。コンテキストメニューを開くと、項目のプレビューが表示され、その項目に対応するコマンドが一覧表示されます。ユーザーは、コマンドを選択したり、アイテムを別のエリア、ウィンドウ、アプリにドラッグしたりすることができます。

コンテキストメニューを一貫して採用する。 ある場所ではアイテムにコンテキストメニューを提供し、別の場所では提供しない場合、人々はどこでその機能を使用できるかわからず、アプリに問題があると思われる可能性があります。

アイテムに適用される最も一般的に使用されるコマンドのみを含めるようにします。 たとえば、Mail メッセージのコンテキストメニューに、返信やメッセージの移動のコマンドを含めることは意味がありますが、フォーマットやメールボックスのコマンドを含めることは意味がありません。あまりにも多くのコマンドを列挙すると、人々を圧倒してしまいます。

コンテキストメニューの各コマンドには、グリフを付けます。 グリフはコマンドの意味を強調し、その機能を即座に理解するのに役立ちます。SF シンボルを使用すると、コマンドを表す既存のシンボルを選択したり、関連するシンボルを編集してカスタムグリフを作成したりすることができます。コンテキストメニューにサブメニューが含まれている場合は、追加コマンドの存在を示すシステム提供のシェブロン記号が自動的に表示されるので、そのためのグリフは必要ありません。

サブメニューを使って複雑さを管理する。 サブメニューとは、論理的に関連したコマンドのセカンドメニューを表示するコンテキストメニューアイテムのことです。サブメニューには、その内容を説明する直感的なタイトルを付けることで、サブメニューのコマンドを明らかにすることなく予測できるようになります。また、簡潔で行動に即したタイトルをつけることで、現在の状況では必要のないサブメニューをスキップすることができます。

サブメニューはひとつのレベルにとどめる。 サブメニューは、コンテキストメニューを短くし、ユーザーが実行できるコマンドを明確にすることができますが、サブメニューのレベルが 1 つ以上になると、エクスペリエンスが複雑になり、ユーザーがナビゲートするのが難しくなります。

使用頻度の高いアイテムをメニューの一番上に配置する。 コンテキストメニューを開くとき、人はそのメニューの一番上の領域に焦点を当てます。よく使うアイテムをメニューの一番上に配置することで、目的のアイテムを見つけやすくなります。

セパレーターを使って関連するメニュー項目をグループ化する。 視覚的なグループ分けをすることで、メニューをより早く見てもらうことができます。例えば、アイテムの編集に関連するアクションをグループ化するためのセパレーターと、アイテムの共有に関連するアクションをグループ化するためのセパレーターを使用することができます。通常、1 つのコンテキストメニューには 3 つ以上のグループは必要ありません。

同じアイテムにコンテキストメニューと編集メニューを用意することは避けてください。 同じアイテムで両方の機能が有効になっていると、ユーザーが混乱し、システムが意図を検出するのが難しくなります。詳しい説明は、「編集メニュー」を参照してください。

アイテムのプレビューを開くアクションボタンを用意しないでください。 人々はプレビューしているアイテムをタップして開くことができるので、通常、明示的な「開く」ボタンを提供する必要はありません。

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

Controls - Edit Menus #

https://developer.apple.com/design/human-interface-guidelines/ios/controls/edit-menus/

編集メニュー #

テキストフィールド、テキストビュー、ウェブビュー、イメージビューでは、要素をタッチ＆ホールドしたり、ダブルタップしたりすることで、コンテンツを選択したり、コピーやペーストなどの編集オプションを表示したりすることができます。

現在のコンテキストに適したコマンドを表示します。 デフォルトでは、Cut、Copy、Paste、Select、Select All、Delete の各コマンドが表示されますが、いずれもオプションで無効にすることができます。何も選択されていない場合、メニューには Copy や Cut などの選択を必要とするオプションは表示されません。同様に、すでに何かが選択されている場合は、メニューに「選択」オプションを表示しないようにします。

必要に応じて、編集オプションの配置を調整します。 デフォルトでは、メニューは利用可能なスペースに応じて、挿入ポイントや選択範囲の上または下に配置され、関連するコンテンツへのポインタが含まれています。メニューの形状は変更できませんが、その位置は設定可能なので、重要なコンテンツやインターフェイスの一部を隠さないようにすることができます。

エディットメニューと同じ機能を持つコントロールは実装しないでください。 操作を開始する方法が複数あると、ユーザーエクスペリエンスに一貫性がなく、混乱の原因になります。例えば、コンテンツをコピーするためにメニューを使用する場合は、コピーボタンを実装しないでください。

潜在的に有用な非編集可能テキストを選択してコピーできるようにする。 メールやメモ、ウェブ検索に、画像ラベルやソーシャルメディアのステータスなどの静的なコンテンツを追加したい場合がよくあります。

ボタンに編集オプションを追加しないでください。 これを行うと、オプションを表示しようとした人が、代わりにボタンを作動させてしまいます。

編集操作を元に戻せるようにする。 メニューでは、操作を行う前に確認を取る必要がありません。操作を実行した後に誰かが気を変える可能性があるので、必ずアンドゥとリドゥのサポートを実装してください。

便利なカスタムコマンドで編集の選択肢を広げる。 アプリ固有のコマンドを追加で提供することで、価値を高めることができます。標準コマンドと同様に、カスタムコマンドは選択されたテキストやオブジェクトを操作する必要があります。

システムが提供するコマンドの後にカスタムコマンドを表示します。 よく知られていて頻繁に使用されているシステム提供のコマンドと、カスタムコマンドを一緒に表示しないでください。

カスタムコマンドの数は最小限にしてください。 選択肢が多すぎて人々を圧倒しないようにします。

カスタムコマンドの名前は短くしてください。 コマンド名は、実行する動作を簡潔に表す動詞または短い動詞句にしてください。タイトル形式の大文字を使用してください。冠詞、調整用接続詞、4 文字以下の前置詞を除くすべての単語を大文字にしてください。

開発者向けのガイダンスとしては、Text Programming Guide for iOS の Copy, Cut, and Paste Operations や UIMenuController を参照してください。

Controls - Labels #

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

ラベル #

ラベルは、画面上のインターフェース要素を説明したり、短いメッセージを伝えるものです。人間はラベルを編集することはできませんが、ラベルの内容をコピーすることはできます。ラベルには、任意の量の静的なテキストを表示できますが、短くすることをお勧めします。

ラベルを読みやすくする。 ラベルには、プレーンテキストとスタイル付きテキストがあります。ラベルのスタイルを調整したり、カスタムフォントを使用したりする場合は、読みやすさを犠牲にしないように注意してください。ユーザーがデバイス上でテキストサイズを変更しても、ラベルがきれいに見えるように、ダイナミックタイプを採用することをお勧めします。詳しくはダイナミックタイプをご覧ください。また、太字などのアクセシビリティオプションを有効にしてラベルをテストする必要があります。詳しくは「アクセシビリティ」をご覧ください。

テキストについては、「文字列プログラミングガイド」を参照してください。スタイル付きテキストの作成については、「属性付き文字列プログラミングガイド」を参照してください。ラベル開発者向けのガイダンスについては、UILabel を参照してください。

Controls - Page Controls #

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

ページコントロール #

ページコントロールは、フラットリスト内の各ページを表すインジケーターイメージの列を表示します。ページコントロールは、階層化されたページや非線形配列のページを視覚化したり、ナビゲートしたりするのには役立ちません。ページコントロールは、任意の数のページを扱うことができるので、ユーザーがカスタムリストを作成する場合に特に役立ちます。

ページコントロールでは、インジケータの外観を調整して、リストに関する詳細な情報を提供することができる。例えば、コントロールは、現在のページのインジケータをハイライトして、リスト内でのページの相対的な位置を推測できるようにする。インジケータの数がスペースに収まらない場合、コントロールは両側のインジケータを縮小して、より多くのページが利用可能であることを示唆することができる。

ページコントロールの操作は、タップまたはスクラブで行います（スクラブは、コントロールをタッチして左右にドラッグします）。iPadOS では、ポインタを使って特定のインジケータを指定することもできますが、現在のページインジケータの先頭または末尾をタップすると、次のページまたは前のページが表示されます。また、コントロールの前縁または後縁を越えてスクラブすると、最初のページや最後のページに素早く到達できます。

開発者ノート

API では、タップは個別のインタラクションであるのに対し、スクラブは連続的なインタラクションです。

特に長いリストの場合は、ページコントロールに加えてリストビューを提供することを検討してください。 ページのリストを表示するには、通常、スワイプして次のページまたは前のページを表示しますが、このジェスチャーは、リストが長くなると疲れることがあります。ページコントロールをスクラブすることは、各ページをスワイプするよりも速くて簡単ですが、人々はそれがオプションであることに気づかないかもしれません。リスト表示にすることで、目的のページを見つけるための別の方法を提供し、リストの順序を変更することもできます。

ページコントロールでは、タップしたときとスクラブしたときの視覚的なフィードバックが異なります。タップして次のページや前のページを表示するときには、ページをスワイプしたときに見られるページスクロールのアニメーションが使われます。スクラブすると、ページ遷移のアニメーションを使わずに瞬時に新しいページが表示されます。

スクラビング中にページ遷移をアニメーション化しないでください。 スクロールアニメーションをすべての遷移に使用すると、アプリが遅延したり、視覚的なフラッシュが発生したりします。スクロールのアニメーション遷移は、タップ時にのみ使用してください。

ページコントロールには、インジケータの視覚的なコントラストを提供する半透明の四角い丸い背景を含めることができます。背景のスタイルは、次のいずれかを選択できます。

自動 - コントロールが操作されたときのみ背景を表示します。このスタイルは、ページコントロールが UI の主要なナビゲーション要素でない場合に使用します。
目立つ - 常に背景を表示します。コントロールが画面内の主要なナビゲーショナルコントロールである場合にのみ、このスタイルを使用します。
ミニマル - 背景を表示しません。このスタイルは、リスト内の現在のページの位置を表示するだけで、スクラブ中に視覚的なフィードバックを提供する必要がない場合に使用します。

開発者向けのガイダンスとしては、backgroundStyle をご覧ください。

最小の背景スタイルを使用する場合は、スクラブをサポートしません。 最小限のスタイルでは、スクラブ中の視覚的なフィードバックが提供されません。アプリ内のページのリストをスクラブする場合は、自動または著名な背景スタイルを使用してください。

ページコントロールを画面の下に配置する。 ページコントロールがどこにあるかを常に把握できるようにするには、水平方向に中央に配置し、画面の下部付近に配置します。

インジケータ画像のカスタマイズ #

デフォルトでは、ページコントロールはシステムが提供するドットグリフをすべてのインジケータに使用しますが、特定のページを識別できるように独自の画像を表示することもできます。例えば、「Weather」では、location.fill のシンボルを使用して、現在の場所のページを識別しています。

アプリを改良する場合は、カスタム画像を提供してすべてのインジケータのデフォルト画像として使用したり、特定のページに異なる画像を提供することもできます。開発者向けのガイダンスとして、preferredIndicatorImage および setIndicatorImage(_:forPage:)を参照してください。

カスタムインジケータの画像は、シンプルでわかりやすいものにしてください。 複雑な形状は避け、ネガティブスペース、テキスト、内側の線などは入れないでください。これらの詳細はグリフを濁らせ、非常に小さいサイズでは判読できなくなります。インジケータにはシンプルな SF 記号を使用するか、独自のグリフをデザインしてください（ガイドは「グリフ」を参照）。

デフォルトのインジケータ画像をカスタマイズするのは、ページコントロールの全体的な意味を高める場合のみにしてください。 例えば、すべてのページにしおりが含まれている場合は、デフォルトのインジケータ画像として bookmark.fill シンボルを使用することができます。

1 つのページコントロールで 2 つ以上の異なるインジケータ画像を使用することは避けてください。 リストに特別な意味を持つページ（Weather の現在地ページなど）が含まれている場合、そのページに固有のインジケータ画像を与えることで、そのページを見つけやすくすることができます。これに対して、いくつかの重要なページを示すために複数のユニークなイメージを使用するページコントロールは、それぞれのイメージの意味を覚えなければならないため、使いにくいものです。また、2 種類以上のインジケータ画像を表示するページコントロールは、それぞれの画像が明確であっても、ゴチャゴチャした無秩序な印象を与えがちです。

インジケータ画像の着色は避けてください。 カスタムカラーは、カレントページのインジケータを区別し、ページコントロールを画面上で見えるようにするためのコントラストを低下させる可能性があります。ページコントロールが使いやすく、さまざまな状況で見栄えがするようにするために、システムが自動的にインジケータを着色するようにしてください。

Controls - Pickers #

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

ピッカー #

ピッカーは、スクロール可能な値のリストを 1 つまたは複数表示し、そこから選択することができます。iOS 14 以降では、日付ピッカーは、カレンダー表示で日を選択したり、テンキーを使って日付や時刻を入力したりするなど、値を選択するための追加の方法をサポートしています（詳細は「日付ピッカー」を参照してください）。どちらのタイプのピッカーも、単一または複数の値を選択することで、情報の入力を容易にします。

中程度の長さのリストを表示する場合は、ピッカーの使用を検討してください。 かなり短い選択肢のリストを表示する必要がある場合は、ピッカーではなくプルダウンメニューの使用を検討してください。ピッカーを使うと、多くの項目を素早くスクロールできますが、短い項目のリストでは視覚的な重みが大きくなりすぎてしまいます。一方、非常に多くの項目を表示する必要がある場合は、リストやテーブルの使用を検討してください。リストやテーブルは高さを調整することができ、テーブルにはインデックスを含めることができるため、リストの一部を素早く表示することができます。詳しくは、「テーブル」をご覧ください。

予測可能で論理的な順序の値を使用する。 スクロール可能なリストが静止していると、ピッカーの多くの値が隠れてしまうことがあります。アルファベット順の国別リストのように、隠された値が何であるかを予測できると、素早く項目を移動することができます。

ピッカーを表示するために画面を切り替えるのは避けましょう。 ピッカーは、編集中のフィールドの下や近くに表示されると効果的です。ピッカーは通常、画面の下部またはポップオーバーで表示されます。

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

日付ピッカー #

日付ピッカーは、タッチ、キーボード、ポインティングデバイスを使って、特定の日付、時刻、またはその両方を選択するための効率的なインターフェースです。日付ピッカーは、次のいずれかのスタイルで表示できます。

インライン - リストやテーブルの行のような小さなスペースに収まる編集可能なフィールドで、展開すると編集ビューが表示されます。
コンパクト - モーダルなコンテキストで編集ビューを表示するために拡張されるラベル。
ホイール - スクロールする伝統的なホイールのセット

また、自動スタイルを選択すると、システムが現在のプラットフォームと日付選択モードを使用して適切な表示スタイルを決定します。

デートピッカーには 4 つのモードがあり、それぞれが異なる選択可能な値を表示します。

日付月、日、年を表示します。
時刻時、分、（オプションで）AM/PM を表示します。
日付と時刻 日付、時間、分、そして（オプションで）AM/PM を表示します。
カウントダウンタイマー 時間と分を表示し、最大で 23 時間 59 分まで表示します。このモードは、コンパクトスタイルにはありません。

日付ピッカーに表示される値とその順序は、ユーザーのロケールによって異なります。

スペースが限られている場合は、コンパクトな日付ピッカーを使用してください。 コンパクトなスタイルでは、折りたたむと、アプリのアクセントカラーで現在の値を示すボタンが表示されます。ユーザーがボタンをタップすると、日付ピッカーがモーダルビューに展開され、使い慣れたカレンダースタイルのエディタと時間ピッカーにアクセスできます。モーダルビューの中で、ユーザーは日付や時刻を何度も編集することができ、ビューの外をタップして選択を確認することができます。

分を指定する際の粒度を小さくすることを検討します。 デフォルトでは、分リストには 60 個の値（0 ～ 59）が含まれています。分の間隔は、60 で均等に分割される限り、任意に増やすことができます。例えば、4 分の 1 時間間隔（0、15、30、45）で指定することもできます。

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

Controls - Progress Indicators #

https://developer.apple.com/design/human-interface-guidelines/ios/controls/progress-indicators/

プログレス・インディケーター #

アプリケーションがコンテンツをロードしたり、長時間のデータ処理を実行したりするのを、静止した画面を見ながら待たせるのはやめましょう。アクティビティインジケータやプログレスバーを使用して、アプリが停止していないことや、待ち時間の目安を知らせるようにしましょう。

「Loading」も参照してください。

アクティビティインジケータ #

アクティビティインジケータは、複雑なデータの読み込みや同期など、数値化できないタスクが実行されている間、回転します。タスクが完了すると消えてしまいます。アクティビティインジケータは非対話型です。

アクティビティ指標よりもプログレスバーを優先する。 アクティビティが数値化できる場合は、アクティビティ指標の代わりにプログレスバーを使用すると、何が起きているのか、どれくらいの時間がかかるのかをより正確に把握することができます。

アクティビティインジケータは常に動かし続ける。 アクティビティインジケータが止まっていると、プロセスが停滞していると思われます。何かが起こっていることがわかるように、常に回転させてください。

役に立つのであれば、タスクが完了するのを待つ間に有益な情報を提供しましょう。 アクティビティインジケータの上にラベルを貼り、コンテキストを追加します。読み込みや認証などの曖昧な用語は、通常何の付加価値もないので避けましょう。

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

プログレスバー #

プログレスバーには、左から右へと流れていくトラックが含まれており、既知の期間を持つタスクの進行状況を示します。プログレスバーはインタラクティブではありませんが、対応する操作をキャンセルするためのボタンが付いていることが多いです。

常に正確な進捗状況を報告する。 アプリを忙しく見せるために、不正確な進捗情報を表示してはいけません。プログレスバーは、数値化できるタスクにのみ使用してください。それ以外の場合は、アクティビティインジケータを使用してください。

期間が明確なタスクにはプログレスバーを使用します。 プログレスバーは、タスクの状態を表示するのに適しています。特に、タスクが完了するまでの時間を伝えるのに役立ちます。

ナビゲーションバーやツールバーでは、トラックの未記入部分を隠す。 デフォルトでは、プログレスバーのトラックには、塗りつぶした部分と塗りつぶしていない部分があります。ナビゲーションバーやツールバーで使用する場合、ページの読み込みを示す場合などは、トラックの未記入部分を隠すようにプログレスバーを設定する必要があります。

アプリに合わせてプログレスバーの外観をカスタマイズすることを検討してください。 プログレスバーの外観は、アプリのデザインに合わせて調整できます。たとえば、トラックと塗りつぶしの両方にカスタムの色調や画像を指定できます。

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

ネットワークアクティビティインジケータについて＊ #

ネットワークアクティビティインジケータは、iOS 13 および edge-to-edge ディスプレイを搭載したデバイスでは非推奨となっています。iOS 12 以前およびエッジツーエッジディスプレイを搭載していないデバイスでは、ネットワーク接続が行われると、画面上部のステータスバーにネットワークアクティビティインジケータが回転します。ネットワーク接続が完了すると、このインジケータは消えます。このインジケータは、アクティビティインジケータと同じように見え、非インタラクティブです。

このインジケータは、数秒以上のネットワーク操作の場合にのみ表示されます。 このインジケータは、その存在に気付いたり、何を伝えようとしているのかを理解する前に消えてしまう可能性があるため、短時間のネットワーク操作では表示しないでください。

Controls - Pull-Down Menus #

https://developer.apple.com/design/human-interface-guidelines/ios/controls/pull-down-menus/

プルダウンメニュー #

iOS 14 以降では、ボタンにプルダウンメニューを表示することができます。プルダウンメニューには、ユーザーが選択できるアイテムやアクションがリストアップされます。プルダウンメニュー（または単にメニュー）は、ボタンのアクションに直接関連するアイテムを提供したり、現在のコンテキストで有用なアクションのリストを提供したりするために使用できます。

メニューには、アクションシートやコンテキストメニュー、ポップオーバーと比べていくつかの利点があります。例えば、以下のようなものです。

メニューは、それを表示するボタンのすぐ近くで開くので、人々はメニューのアイテムと実行中のアクションの関係を即座に理解することができます。
メニューには、アクションのリストだけでなく、そのアクションに影響を与えるための選択項目も用意されています。
メニューはすばやく表示され、表示されたときに画面が暗くならないので、移行と全体的な体験の両方に軽快さが感じられます。

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

すべてのアクションをメニューに入れないでください。 メニューを使えば、インターフェースを混乱させることなく、さまざまなアイテムを提供できます。しかし、すべてのアクションをメニューに入れると、何かをするのに最低でも 2 回タップしなければならなくなります。引き続き、最も重要なアクションはメインインターフェイスに配置し、メニューは補助的なアイテムを提供するために使用します。例えば、メッセージの作成は最も一般的な操作なので、メインインターフェイスには「作成」ボタンを大きく配置しています。メッセージでは、便利な編集オプションを提供するために、メインインターフェースにオプションを表示する代わりに、「編集」ボタンにメニューを付けています。

メニューは、あるアクションに直接関連するオプションを表示するために使います。 メニューを使うと、メインインターフェイスにボタンを追加することなく、アクションの対象を明確にしたり、動作をカスタマイズしたりすることができます。例えば、次のような場合です。

アプリの「追加」ボタンをタップすると、メニューが表示され、追加したいアイテムを指定することができます。
ソート機能を備えたアプリでは、ソートする属性を選択できるメニューを表示することができます。
複数の場所を移動できるアプリでは、メニューを使って特定の場所に移動できるようにすると、各ステップを辿る必要がなくなります。

アプリの副次的なアクションを提供するためにメニューを使用する。 アプリに、メインインターフェイスに属さない重要なアクションがある場合、これらのアクションをメニューにまとめることができます。例えば、Files では、コンテンツの表示やソートのオプションに加えて、フォルダの追加やドキュメントのスキャンなどのアクションを提供するためにメニューを使用しています。

メニューを表示するために More ボタンを追加することを検討してください。 More ボタンは、ほとんどのインターフェースと調和し、一般的には追加機能へのアクセスを提供するものと理解されています。円形のボタンの中に省略記号を入れることで、「もっと見る」ボタンを作ることができます（記号について詳しくは、「SF 記号」を参照してください）。また、既存のボタンに対して特定のジェスチャーを行うことで、メニューを表示させることもできます。例えば、iOS 14 以降の Safari では、タブボタンをタッチ＆ホールドするジェスチャーに反応して、「新しいタブ」や「すべてのタブを閉じる」など、タブに関連するアクションのメニューが表示されます。

セパレーターを使って、関連するメニュー項目を視覚的にグループ化する。 視覚的なグループ分けをすることで、メニューをより早く見やすくすることができます。例えば、Files アプリの「More」メニューでは、コンテンツに影響を与えるアクションと、表示やソートに関連するアイテムを区別するためにセパレータを使用しています。メニューに 3 つ以上のグループを使用すると、解析が困難になる可能性があります。

また、メニュー項目が破壊的であることを伝え、その意図を確認してもらいます。 メニューでは、破壊的な可能性があると判断したアクションを赤文字で表示します。ユーザーが破壊的なアクションを選択すると、システムはアクションシート（iOS）またはポップオーバー（iPadOS）を表示し、ユーザーが選択を確認したりアクションをキャンセルしたりできるようにします。アクションシートは、メニューとは別の場所に表示され、意図的に取り消す必要があるため、誤ってデータを失うことを防ぐことができます。

メニューアイテムにグリフを添えるのは、それが価値をもたらす場合です。 メニューの意味を明確にする必要がある場合は、タイトルの後にグリフや画像を表示することができます。その際、SF 記号を使用すると、どのような縮尺でも記号がテキストと一致するようにしながら、親しみやすさを提供することができます。

メニューのタイトルが意味を持つ場合は、そのタイトルを表示します。 ほとんどの場合、人々はボタンをタップして何かを実行したときに即座にメニューが表示されるため、メニューのアイテムのコンテキストを理解しています。必要に応じて、メニューの上部に簡潔なタイトルを表示することができます。

Controls - Refresh Content Controls #

https://developer.apple.com/design/human-interface-guidelines/ios/controls/refresh-content-controls/

リフレッシュコンテンツコントロール #

リフレッシュコントロールは、次の自動コンテンツ更新を待たずに、テーブルビューなどのコンテンツを即座に再読み込みするために手動で起動されます。リフレッシュコントロールは特殊なタイプのアクティビティインジケータで、デフォルトでは非表示になっており、リロードされるビュー上で下にドラッグすると表示されます。例えば、メールでは、受信トレイのメッセージのリストを下にドラッグすると、新しいメッセージを確認することができます。

コンテンツの自動更新を行う。 ユーザーは、コンテンツの更新をすぐに行うことができることに感謝していますが、定期的に自動更新が行われることも期待しています。毎回の更新をユーザーに任せるのはやめましょう。定期的に更新することで、データの鮮度を保つことができます。

短いタイトルは、付加価値がある場合にのみ付けるようにします。 リフレッシュコントロールには、タイトルを付けることができます。ほとんどの場合、コントロールのアニメーションがコンテンツの読み込み中であることを示しているので、これは不要です。タイトルを付ける場合は、リフレッシュの実行方法を説明するためには使用しないでください。代わりに、リフレッシュされるコンテンツに関する価値のある情報を提供します。例えば、Podcast のリフレッシュコントロールでは、タイトルを使用して、最後の Podcast の更新がいつ行われたかを伝えます。

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

Controls - Segmented Controls #

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

セグメント化されたコントロール #

セグメント化されたコントロールとは、2 つ以上のセグメントが直線的に組み合わされたもので、それぞれのセグメントが相互に排他的なボタンとして機能します。コントロール内では、すべてのセグメントの幅は同じです。ボタンと同様に、セグメントにはテキストやイメージを含めることができます。セグメント化されたコントロールは、異なるビューを表示するためによく使われます。たとえば、マップでは、セグメントコントロールを使って、マップ、トランジット、サテライトの各ビューを切り替えることができます。

使い勝手を良くするために、セグメントの数を制限します。 幅の広いセグメントはタップしやすくなります。iPhone では、セグメントコントロールのセグメント数は 5 つ以下にします。

セグメントのコンテンツサイズを一定に保つようにします。 すべてのセグメントの幅は同じなので、一部のセグメントにコンテンツが入り、他のセグメントに入らないと見栄えが悪くなります。

セグメントコントロールでは、テキストとイメージの混在は避けてください。 個々のセグメントにはテキストや画像を含めることができますが、1 つのコントロールにこの 2 つを混在させると、断絶した混乱したインターフェイスになります。

カスタムセグメントコントロールのコンテンツを適切に配置する。 セグメント化されたコントロールの背景の外観を変更する場合は、コンテンツが美しく表示され、位置がずれていないことを確認してください。

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

Controls - Sliders #

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

スライダー #

スライダーとは、サムと呼ばれるコントロールが付いた水平方向のトラックのことで、指でスライドさせることで、画面の輝度レベルやメディア再生時の位置など、最小値と最大値の間を移動させることができます。スライダーの値が変化すると、最小値とサムの間のトラックの部分が色で塗りつぶされます。スライダーには、最小値と最大値の意味を示す左右のアイコンを表示することができます。

スライダーの外観をカスタマイズして、付加価値を高めることができます。 トラックの色やサムネイル、左右のアイコンなど、スライダーの外観は、アプリのデザインとの調和や意図を伝えるために調整できます。例えば、画像のサイズを調整するスライダーでは、左に小さな画像アイコンを、右に大きな画像アイコンを表示することができます。

オーディオの音量調整にスライダーを使用しないでください。 アプリで音量を調整する必要がある場合は、カスタマイズ可能なボリュームビューを使用してください。ボリュームビューには、音量レベルのスライダーと、アクティブなオーディオ出力デバイスを変更するためのコントロールが含まれています。ボリュームビューの実装方法については、「MPVolumeView」を参照してください。

また、開発者向けには、UISlider をご覧ください。

Controls - Steppers #

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

ステッパー #

ステッパーは、2 つのセグメントで構成されるコントロールで、値を増減させることができます。デフォルトでは、ステッパーの一方のセグメントにはプラスのシンボルが、もう一方のセグメントにはマイナスのシンボルが表示されます。これらのシンボルは、必要に応じてカスタムイメージで置き換えることができます。

ステッパーの影響を受ける値を明らかにする。 ステッパー自体には値が表示されないので、ステッパーを使用する際には、どの値を変更するのかがわかるようにしてください。

大きな値の変更がありそうなときはステッパーを使わない。 ステッパーは、数回タップするだけの小さな変化に適しています。例えば印刷画面では、印刷枚数を大きく変えることはあまりないので、ステッパーを使って設定することに意味があります。一方で、ページの範囲を選択するためにステッパーを使用することは、妥当なページ範囲であっても多くのタップを必要とするため、意味がありません。

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

Controls - Switches #

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

スイッチ #

スイッチとは、互いに排他的な 2 つの状態（オンとオフ）を視覚的に切り替えるものです。

アプリのスタイルに合わせてスイッチを着色することも検討してみましょう。 アプリでうまく機能する場合は、オンとオフの状態でスイッチの色を変えることができます。

スイッチは、テーブルの行でのみ使用してください。 スイッチは、オンとオフを切り替えることができる設定のリストなど、表での使用を目的としています。ツールバーやナビゲーションバーで同様の機能が必要な場合は、代わりにボタンを使用し、状態を伝える 2 つの異なるアイコンを用意してください。

スイッチの値を説明するためにラベルを追加することは避けてください。 スイッチはオンかオフのどちらかです。これらの状態を説明するラベルは冗長であり、インターフェースを煩雑にします。

スイッチを使用して、関連するインターフェイス要素の可用性を管理することを検討してください。 スイッチは、画面上の他のコンテンツに影響を与えることがよくあります。例えば、「設定」の「機内モード」スイッチを有効にすると、「セルラー」や「パーソナルホットスポット」などの他の設定が無効になります。また、「設定」→「Wi-Fi」で Wi-Fi スイッチを無効にすると、利用可能なネットワークやその他のオプションが表示されなくなります。

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

Controls - Text Fields #

https://developer.apple.com/design/human-interface-guidelines/ios/controls/text-fields/

テキストフィールド #

テキストフィールドとは、1 行で高さが固定されたフィールドで、角が丸くなっていることが多く、ユーザーがタップすると自動的にキーボードが表示されます。メールアドレスなどの少量の情報を入力する場合には、テキストフィールドを使用します。

テキストフィールドにヒントを表示して目的を伝えやすくする。 テキストフィールドには、“Email “や “Password “などのプレースホルダーテキストを入れることができますが、フィールドに他のテキストが入っていない場合は、プレースホルダーテキストを入れないでください。プレースホルダーテキストで十分な場合は、テキストフィールドの説明に別のラベルを使用しないでください。

適切な場合には、テキストフィールドの右端にクリアボタンを表示します。 この要素があると、タップするとテキストフィールドの内容がクリアされるので、Delete キーを何度もタップする必要がなくなります。

必要に応じて安全なテキストフィールドを使用する。 パスワードなどの機密データの入力を求めるアプリでは、必ず安全なテキストフィールドを使用してください。

画像やボタンを使用して、テキストフィールドをわかりやすく機能的に表示します。 カスタム画像をテキストフィールドの左端または右端に表示したり、ブックマークボタンなどのシステム提供のボタンを追加したりできます。一般的に、テキストフィールドの左端はフィールドの目的を示し、右端はブックマークなどの追加機能の有無を示すために使用します。

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

ヒント

複数行、複数スタイルのテキストを入力する場合は、テキストビューを使用します。関連項目：テキストビュー。

キーボード #

適切なキーボードタイプを表示する。 iOS には複数の異なるキーボードタイプが用意されており、それぞれが異なるタイプの入力を容易にするように設計されています。データ入力を効率化するためには、テキストフィールドの編集時に表示されるキーボードが、フィールド内のコンテンツの種類に適している必要があります。例えば、電子メールアドレスの入力を求めるアプリでは、電子メールアドレスのキーボードを表示する必要があります。利用可能なキーボードの種類の一覧は、UITextInputTraits の UIKeyboardType 定数を参照してください。

関連するガイダンスについては、「カスタムキーボード」を参照してください。