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

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

August 8, 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

Views - Action Sheets #

https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets/

アクションシート #

アクションシートは、現在の状況に関連した 2 つ以上の選択肢を提示する、特定のスタイルのアラートです。小さな画面では、アクションシートは画面の下からスライドするように表示され、大きな画面では、アクションシートはポップオーバーとして一度に表示されます。

破壊される可能性のある操作を行う前に確認を求めるには、アクションシートを使用します。 非破壊的なタスクに関連するアイテムやアクションの選択肢を与えるために、プルダウンメニューを使用することができます。

破壊的な操作を再考させるためのキャンセルボタンを用意する。 キャンセルボタンは、アクションシートの下部に表示する。

破壊的な選択を目立つようにする。 破壊的な行為や危険な行為を行うボタンには赤を使い、アクションシートの一番上に表示します。

アクションシートをスクロールさせない。 アクションシートの選択肢が多すぎると、すべてを見るためにスクロールしなければなりません。スクロールすると、選択するのに余分な時間がかかり、不用意にボタンをタップしないようにするのが難しくなります。

開発者向けのガイダンスとして、UIAlertController.Style.actionSheet.ActionSheet を参照してください。


Views - Activity Views #

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

アクティビティビュー #

アクティビティとは、コピー、お気に入り、検索など、現在のコンテキストで有用なタスクのことです。アクティビティは、開始するとすぐにタスクを実行することもできますし、タスクを実行する前に詳細情報を確認することもできます。アクティビティは、デバイスや方向に応じてシートまたはポップオーバーで表示されるアクティビティビューで管理されます。アクティビティを使用して、アプリが実行できるカスタムサービスやタスクへのアクセスをユーザーに提供できます。

システムには、「プリント」「メッセージ」「AirPlay」など、数多くの組み込みアクティビティが用意されています。これらのタスクは、アクティビティビューで常に最初に表示され、順序を変更することはできません。これらのビルトインタスクを実行するカスタムアクティビティを作成する必要はありません。アクティビティビューには、他のアプリケーションの共有やアクションの拡張機能も表示されます。詳しくは「共有とアクション」をご覧ください。

カスタムアクティビティを表現するためのシンプルなテンプレート画像を作成します。 テンプレート画像は、マスクを使用してアイコンを作成します。適切な透過性とアンチエイリアシングを施した白黒の画像を使用し、ドロップシャドウは付けないでください。テンプレート画像は、70px×70px 程度の大きさで、中央に配置してください。

アクティビティのタイトルは、タスクを端的に表すものにしてください。 タイトルは、アクティビティビューのアイコンの下に表示されます。タイトルは短い方がよいでしょう。タイトルが長すぎる場合、iOS はまずテキストを縮小し、さらにタイトルが長すぎる場合は切り詰めます。一般的に、タイトルに会社名や製品名を含めないようにしましょう。

アクティビティが現在の状況に適しているかどうかを確認します。 システムが提供するタスクをアクティビティ内で並び替えることはできませんが、アプリに適用できない場合は除外することができます。例えば、画像を印刷できないようにするには、Print アクティビティを除外することができます。また、どのカスタム タスクをいつでも表示するかを特定することもできます。

アクティビティビューを表示するには、「アクション」ボタンを使用します。 人々は、アクションボタンをタップしてシステムが提供するアクティビティにアクセスすることに慣れています。同じことをするための別の方法を提供することで、人々を混乱させないようにしてください。

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


Views - Alerts #

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

アラート #

アラートは、アプリケーションやデバイスの状態に関連する重要な情報を伝え、多くの場合、フィードバックを要求します。アラートは、タイトル、オプションのメッセージ、1 つまたは複数のボタン、および入力を収集するためのオプションのテキストフィールドで構成されます。これらの設定可能な要素を除いて、アラートの視覚的な外観は静的であり、カスタマイズすることはできません。

アラートを最小限に抑える。 アラートはユーザーの利便性を損なうため、購入や削除などの破壊的な行為の確認や、問題の通知など、重要な場面でのみ使用してください。アラートの頻度が低いと、ユーザーが真剣に受け止めることができます。各アラートが重要な情報と有用な選択肢を提供するようにしてください。

アラートの表示を両方の方向でテストしてください。 ランドスケープモードとポートレートモードでは、アラートの表示が異なる場合があります。アラートのテキストを最適化し、どの方向から見てもスクロールせずによく読めるようにします。

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

アラートのタイトルとメッセージ #

アラートのタイトルは、短く、説明的で、複数の単語で構成されています。 画面上で読まなければならないテキストは少ない方が良いでしょう。メッセージとして余分なテキストを追加しないようにタイトルを作成してください。一語のタイトルでは有益な情報が得られないため、質問をしたり、短い文章を使ったりすることを検討してください。可能な限り、タイトルは 1 行にまとめます。タイトルが完全な文章である場合は、文語体の大文字と適切な終止符を使用します。タイトルが文章の断片である場合は、タイトルスタイルの大文字を使用し、最後の句読点は付けません。

メッセージを伝えなければならない場合は、短い完全な文章を書いてください。 スクロールしないように、メッセージは 1 ~ 2 行に収まるようにしてください。大文字小文字を区別し、適切な句読点を使用してください。

告発的、判断的、または侮辱的な表現は避けてください。 人々は、アラートが問題や危険な状況を知らせてくれることを知っています。フレンドリーなトーンであれば、ポジティブで斜に構えた表現よりも、ネガティブでダイレクトな表現の方が良いでしょう。you、your、me、my などの代名詞は、時に侮辱的、恩着せがましいと解釈されるので避けましょう。

アラートボタンの説明を避ける。 アラートテキストとボタンのタイトルが明確であれば、ボタンが何をするのかを説明する必要はありません。まれに説明が必要な場合は、tap という単語を使い、ボタンを参照する際には大文字を使用し、ボタンのタイトルを引用符で囲まないようにしてください。

アラートボタン #

一般的には、2 ボタンのアラートを使用します。 2 つのボタンによる警告は、2 つの選択肢の中から簡単に選ぶことができます。シングルボタンのアラートは、情報を提供しますが、状況をコントロールすることはできません。3 つ以上のボタンを持つアラートは複雑で、スクロールが必要になることもあり、これは悪いユーザーエクスペリエンスです。2 つ以上の選択肢が必要な場合は、アクションシートの使用を検討してください。詳しくはアクションシートをご覧ください。

アラートボタンには、簡潔で論理的なタイトルをつけましょう。 最適なボタンのタイトルは、ボタンを選択した結果を説明する 1 つか 2 つの単語で構成されています。すべてのボタンのタイトルと同様に、タイトルスタイルの大文字を使用し、最後の句読点は使用しないでください。可能な限り、アラートのタイトルやメッセージに直接関連する動詞や動詞句を使用してください。たとえば、「すべてを見る」、「返信する」、「無視する」などです。単純な承諾には OK を使います。Yes と No の使い分けは避けてください。

ボタンは人が期待する場所に配置する。 一般的に、人々がタップする可能性の高いボタンは右側に配置します。キャンセルボタンは常に左に配置してください。

キャンセルボタンには適切なラベルを付けてください。 アラートの動作をキャンセルするボタンには、必ず「キャンセル」と表示してください。

破壊的なボタンを識別する。 アラートボタンが、コンテンツの削除などの破壊的なアクションにつながる場合は、ボタンのスタイルを Destructive に設定し、システムで適切なフォーマットが行われるようにします。開発者向けのガイダンスとしては、UIAlertAction の UIAlertActionStyleDestructive 定数を参照してください。さらに、Cancel ボタンを用意して、人々が破壊的なアクションから安全に脱退できるようにします。デフォルトのボタンとしてマークすることで、Cancel ボタンを太くします。

ホーム画面に移動してアラートをキャンセルできるようにします。 アラートが表示されているときにホーム画面にアクセスすると、アプリが終了します。また、[キャンセル]ボタンをタップしたのと同じ効果が得られるはずです。つまり、何もせずにアラートが解除されます。アラートに[キャンセル]ボタンがない場合は、誰かがアプリを終了したときに実行されるキャンセルアクションをコードに実装することを検討してください。


Views - Collections #

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

コレクション #

コレクションは、写真などのコンテンツの集合を管理し、カスタマイズ可能で視覚的に優れたレイアウトで表示します。コレクションは厳密には直線的なフォーマットではないので、サイズの異なるアイテムを表示するのに適しています。一般的にコレクションは、画像ベースのコンテンツを表示するのに適しています。背景やその他の装飾的な表示は、アイテムのサブセットを視覚的に区別するためにオプションで実装できます。

コレクションは、インタラクティブ性とアニメーションの両方に対応しています。デフォルトでは、タップで選択、タッチ&ホールドで編集、スワイプでスクロールが可能です。アプリケーションが必要とする場合は、カスタムアクションを実行するためのジェスチャーを追加できます。コレクション内では、アイテムの挿入、削除、並べ替えの際にアニメーションを有効にすることができ、カスタムアニメーションにも対応しています。

標準的な行やグリッドのレイアウトで十分なのに、急に新しいデザインを作るのは避けましょう。 コレクションは、ユーザーエクスペリエンスを向上させるものであり、注目の的になるものではありません。アイテムの選択が容易であること。コレクションの中のアイテムをタップするのが難しいと、人々は不満を感じ、目的のコンテンツに到達する前に興味を失ってしまいます。コンテンツの周りに適度なパディングを施すことで、レイアウトをきれいに保ち、コンテンツが重ならないようにします。

テキストには、コレクションではなくテーブルの使用を検討してください。 一般的に、テキスト情報はスクロール可能なリストで表示された方が、シンプルで効率的に見ることができます。

動的にレイアウトを変更する場合は注意が必要です。 コレクションのレイアウトは、いつでも変更することができます。人々がコレクションを見たり操作したりしている間にレイアウトを動的に変更する場合は、その変更が意味のあるものであること、そして追跡が容易であることを確認してください。やる気のないレイアウト変更は、アプリを予測不能で使いにくいものにしてしまいます。レイアウトの変更によって文脈が失われると、人々は自分がコントロールできなくなったように感じるでしょう。

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


Views - Image Views #

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

イメージビュー #

イメージビューは、透明または不透明な背景の上に、1 枚の画像または一連の画像のアニメーションを表示します。イメージビューでは、イメージを引き伸ばしたり、拡大・縮小したり、サイズを合わせたり、特定の場所に固定したりすることができます。デフォルトでは、イメージビューはインタラクティブではありません。

可能であれば、アニメーションシーケンス内のすべての画像のサイズを統一するようにしてください。 理想的には、画像はビューに合わせてあらかじめスケーリングされており、システムがスケーリングを行う必要はありません。システムがスケーリングを行う必要がある場合は、すべての画像が同じサイズと形状であることが望ましい結果を得るための最も簡単な方法です。

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

注意

テンプレート画像として設定されている画像は、その色が破棄され、周囲の画像ビューに適用されている色合いが採用されます。詳しくは「カスタムアイコン」をご覧ください。開発者向けガイダンスは、UIImage の UIImageRenderingModeAlwaysTemplate を参照してください。


Views - Pages #

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

ページ #

ページビューコントローラは、ドキュメント、ブック、メモ帳、カレンダーなどのコンテンツのページ間の直線的なナビゲーションを実装する方法を提供します。ページビューコントローラは、ナビゲーション中のページ間の遷移を管理するために、スクロールまたはページカールという 2 つのスタイルのうちの 1 つを使用します。スクロール遷移には特定の外観はなく、ページは流動的に次から次へとスクロールします。ページ・カール・トランジションは、画面をスワイプするとページがカールして、物理的な本のページのように回転します。

必要に応じて、非線形に移動する方法を実装します。 ページビューコントローラを使用している場合、ページは順番に流れ、結合していないページ間を移動する方法はありません。アプリ内でページに順番にアクセスする必要がある場合は、この機能を提供するカスタムコントロールを実装してください。

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


Views - Popovers #

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

ポップオーバー #

ポップオーバーとは、コントロールやエリアをタップしたときに、画面上の他のコンテンツの上に表示される一時的なビューのことです。通常、ポップオーバーには、表示された場所を示す矢印が表示されます。ポップオーバーには、非モーダル型とモーダル型があります。非モーダル型のポップオーバーは、画面の他の部分またはポップオーバー上のボタンをタップすると解除されます。モーダルなポップオーバーは、ポップオーバー上の「キャンセル」などのボタンをタップすると解除されます。

ポップオーバーは、大画面に適しており、ナビゲーションバー、ツールバー、タブバー、テーブル、コレクション、画像、マップ、カスタムビューなど、さまざまな要素を含むことができます。ポップオーバーが表示されているとき、他のビューとのインタラクションは、通常、ポップオーバーが解除されるまで無効になります。ポップオーバーは、画面に表示されているコンテンツに関連するオプションや情報を表示するために使用します。例えば、多くの iPad アプリケーションでは、アクションボタンをタップすると、共有オプションのポップオーバーが表示されます。

iPhone ではポップオーバーを表示しないようにしましょう。 一般的に、ポップオーバーは iPad アプリでの使用に限定すべきです。iPhone アプリでは、ポップオーバーではなく、フルスクリーンのモーダルビューで情報を表示して、利用可能なスクリーンスペースをすべて活用してください。関連するガイダンスとして、「モーダル」を参照してください。

「閉じる」ボタンは、確認や案内のためにのみ使用してください。 キャンセル」や「完了」などの「閉じる」ボタンは、変更を保存して終了するのか、保存しないで終了するのかなどを明確にするために設置する価値があります。一般的に、ポップオーバーは、その存在が不要になったときに自動的に閉じるべきです。ほとんどの場合、ポップオーバーは、誰かがその境界の外側をタップしたり、ポップオーバー内のアイテムを選択したりすると閉じます。複数の項目を選択できる場合は、誰かが明示的にポップオーバーを解除するか、境界の外側をタップするまで、ポップオーバーは開いたままにしておきます。

非モーダルなポップオーバーを自動的に閉じるときは、必ず作業を保存してください。 画面の他の部分をタップすることで、意図せずに非モダルなポップオーバーを消してしまうことがあります。誰かが明示的な「キャンセル」ボタンをタップした場合にのみ、作業を破棄してください。

ポップオーバーは画面上の適切な位置に配置してください。 ポップオーバーの矢印は、それを表示した要素にできるだけ直接向けるべきです。ポップオーバーは画面内でドラッグすることができないため、ポップオーバーを使用している間に人々が見る必要のある重要なコンテンツをポップオーバーが覆ってはいけません。また、ポップオーバーは、ポップオーバーを表示するためにタップされた要素を覆うべきではありません。

一度に表示するポップオーバーは 1 つにしましょう。 複数のポップオーバーを表示すると、インターフェースが煩雑になり、混乱の原因となります。ポップオーバーのカスケード表示や階層表示は避けてください。新しいポップオーバーを表示する必要がある場合は、まず開いているポップオーバーを閉じてください。

ポップオーバーの上に別のビューを表示しないでください。 アラートを除き、ポップオーバーの上には何も表示しないでください。

可能な限り、ユーザーが 1 回のタップでポップオーバーを閉じ、別のポップオーバーを開くことができるようにします。 いくつかの異なるバーボタンがそれぞれポップオーバーを開く場合、余分なタップを避けることは特に望ましいことです。

ポップオーバーを大きくしすぎない。 ポップオーバーは画面全体を覆うべきではありません。内容が表示され、元の場所がわかる程度の大きさにしましょう。ポップオーバーが画面に収まるようにシステムがサイズを調整することがありますのでご注意ください。

カスタムポップオーバーがポップオーバーらしく見えるようにしてください。 ポップオーバーの多くの外観をカスタマイズすることができますが、ポップオーバーとして認識されないようなデザインは避けてください。ポップオーバーは、標準的なコントロールやビューを含んでいる場合に、最も効果的に機能します。

ポップオーバーのサイズを変更する際には、スムーズな移行を行ってください。 ポップオーバーの中には、同じ情報を凝縮して表示するものと、拡大して表示するものがあります。ポップオーバーのサイズを変更する場合は、その変更をアニメーションで表現し、古いポップオーバーが新しいポップオーバーに置き換わったような印象を与えないようにしてください。

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


Views - Scroll Views #

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

スクロールビュー #

スクロールビューでは、ドキュメントのテキストや画像の集合体など、表示領域よりも大きなコンテンツを閲覧することができます。ユーザーがスワイプ、フリック、ドラッグ、タップ、ピンチなどのジェスチャーをすると、スクロールビューはそのジェスチャーに追従し、自然な感じでコンテンツを表示したり、ズームしたりすることができます。スクロールビュー自体に外観はありませんが、ユーザーの操作に応じて一時的なスクロールインジケータが表示されます。スクロールビューは、ページングモードで動作するように設定することもできます。この場合、スクロールすると、現在のページを移動するのではなく、まったく新しいページが表示されます。

ズーム動作を適切にサポートする。 アプリで意味がある場合は、ピンチやダブルタップでズームイン/アウトできるようにしましょう。ズームを有効にする場合は、意味のある最大および最小のスケール値を設定してください。たとえば、1 文字が画面いっぱいになるまでテキストをズームインすることは、ほとんどのアプリでは意味がありません。

スクロールビューがページングモードの場合は、ページコントロール要素の表示を検討します。 ページコントロールは、利用可能なページやスクリーンなどのコンテンツの数を表示し、現在表示されているページを示します。スクロールビューでページコントロールを表示する場合は、混乱を避けるために、同じ軸でスクロールインジケータを無効にしてください。その他のガイダンスについては、「ページコントロール」を参照してください。

スクロールビューを他のスクロールビューの中に入れないでください。 スクロールビューの中に別のスクロールビューを配置すると、コントロールが難しい予測不可能なインターフェイスになります。

一般的には、一度に 1 つのスクロールビューを表示します。 人はスクロールするときに大きなスワイプのジェスチャーをすることが多く、同じ画面上で隣のスクロールビューとのやりとりを避けるのは難しいでしょう。1 つの画面に 2 つのスクロールビューを表示する必要がある場合は、1 つのジェスチャーが 2 つのビューに影響を与えないように、異なる方向にスクロールできるようにすることを検討してください。例えば、iPhone が縦向きの場合、「Stocks」アプリでは、縦方向にスクロールする株価情報と横方向にスクロールする企業情報が表示されます。

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


Views - Split Views #

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

スプリットビュー #

スプリットビューは、アプリのトップレベルにある階層的なコンテンツの表示を管理します。スプリットビューは、2 列または 3 列のインターフェースで構成されており、プライマリカラム、オプションのサプリカラム、コンテンツのセカンダリペインが表示されます。プライマリカラムが変更されると、オプションの補助カラムも変更され、コンテンツ自体にも影響を与えます。スプリットビューは、Mail のメールボックスとメッセージを横断して各メッセージを表示するように、コンテンツ階層の複数のレベルをナビゲートするのに便利です。

スプリットビューには様々なコンテンツを表示することができますが、メールなどのシステムアプリの多くは、スプリットビューを使ってサイドバーベースのインターフェースを実現しています。このタイプのインターフェースでは、主要な列にサイドバーが表示され、オプションの補助列にはリストビューが表示され、副次的なコンテンツペインには選択したコンテンツの詳細が表示されます。関連するガイダンスについては、「サイドバー」を参照してください。

iPad では、タブバーの代わりにスプリットビューを使用します。 スプリットビューでは、タブバーと同様のクイックナビゲーションが可能で、大きなディスプレイを有効に活用できます。

カラムの種類ごとに適切なスタイルを選択します。 サイドバーを表示する主要なカラムには、サイドバーの外観を使用します。この外観は、アプリケーションレベルのナビゲーションや、Mail のメールボックスのようなコレクションのリストに適しています。リストビューを表示する補助的な列には、プレーンサイドバーの外観を使用します。この外観は、メールボックス内のメッセージのように、個々のコンテンツのリストに適しています。開発者向けのガイダンスとしては、UICollectionLayoutListConfiguration.Appearance を参照してください。

一次および補助列でアクティブな選択を永続的に強調表示する。 二次ペインのコンテンツは変更されることがありますが、常に他の列の明確に識別できる選択に対応していなければなりません。この選択は、人々が列の関係を理解し、自分の方向性を保つのに役立ちます。

必要に応じて、コンテンツを列間でドラッグ&ドロップできるようにします。 分割表示では、複数の階層にアクセスできるため、列間でアイテムをドラッグ&ドロップすることで、アプリのある部分から別の部分へコンテンツをすばやく移動できます。関連するガイダンスについては、「ドラッグ アンド ドロップ」を参照してください。

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


Views - Tables #

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

テーブル #

テーブルは、データをスクロールする 1 列のリストとして表示し、セクションやグループに分割することができます。テーブルを使用すると、大量または少量の情報をリスト形式できれいに効率よく表示することができます。一般的に、テーブルはテキストベースのコンテンツに適しており、分割ビューの片側にナビゲーション手段として表示され、反対側には関連コンテンツが表示されることが多いです。詳しくは、「分割表示」を参照してください。

iOS には、プレーン、グループ化、グループ化されたインセットの 3 つのスタイルのテーブルがあります。

プレーン 行をラベル付きのセクションに分け、表の右端にインデックスを垂直に表示することができます。セクションの最初の項目の前にはヘッダーを、最後の項目の後にはフッターを表示できます。

グループ 行はグループで表示され、グループの前にはヘッダーがあり、後にはフッターがあります。このスタイルのテーブルは、常に少なくとも 1 つのグループを含み、各グループは常に少なくとも 1 つの行を含みます。グループ化された表には、インデックスは含まれません。

インセットグループ 行は、角が丸くなったグループで表示され、親ビューの端から挿入されます(上の画像の右側のように)。このスタイルのテーブルには、常に少なくとも 1 つのグループが含まれ、各グループには常に少なくとも 1 つの行が含まれ、前にはヘッダーが、後にはフッターが続きます。グループ化されたインセットテーブルは、インデックスを含みません。グループ化された挿入スタイルは、通常の幅の環境で最もよく機能します。コンパクトな環境ではスペースが少ないため、特にコンテンツがローカライズされている場合、差込式グループ化テーブルではテキストの折り返しが発生する可能性があります。

テーブルの幅について考えてみましょう。 薄いテーブルは、切り捨てや折り返しの原因となり、遠くから見ても読みにくく、素早くスキャンすることができません。幅の広いテーブルも読みにくく、コンテンツのスペースを奪ってしまう可能性があります。

テーブルのコンテンツを素早く表示する。 広範囲のテーブルコンテンツが読み込まれるのを待たずに、何かを表示しましょう。画面上の行にはすぐにテキストデータを表示し、画像などの複雑なデータは利用可能になってから表示します。この手法により、ユーザーは有益な情報をすぐに得ることができ、アプリの応答性が向上すると考えられます。場合によっては、新鮮で新しいデータが届くまで、古くなったデータを表示することが有効な場合もあります。

コンテンツの読み込み時に進捗状況を伝える。 表のデータの読み込みに時間がかかる場合は、プログレスバーや回転するアクティビティインジケータを表示して、アプリがまだ動作していることを人々に安心させます。

コンテンツの鮮度を保つ。 新しいデータを反映させるために、表のコンテンツを定期的に更新することを検討してください。ただし、スクロールの位置は変えないようにしましょう。その代わりに、表の最初か最後にコンテンツを追加し、人々が準備ができたときにスクロールするようにします。アプリの中には、新しいデータが追加されるとインジケーターが表示され、そこからすぐにジャンプできるようになっているものもあります。また、いつでも手動で更新できるように、更新コントロールを用意しておくとよいでしょう。関連項目: コンテンツの更新コントロール。

インデックスと、右揃えの要素を含むテーブル行との組み合わせは避けてください。 インデックスは、大きくスワイプするジェスチャーで操作します。開示インジケータなどの他のインタラクティブな要素が近くにある場合、ジェスチャーが発生したときにユーザーの意図を見極めるのが難しくなり、誤った要素がアクティブになってしまう可能性があります。

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

テーブルの行 #

標準のテーブルセルスタイルを使用して、テーブル行のコンテンツの表示方法を定義します。

ベーシック(デフォルト) 行の左側に任意の画像を表示し、その後に左揃えのタイトルを表示します。補助的な情報を必要としない項目を表示するのに適したオプションです。開発者向けのガイダンスとしては、UITableViewCell の UITableViewCellStyleDefault 定数を参照してください。

サブタイトル 左揃えのタイトルを 1 行に、左揃えのサブタイトルを次の行に配置します。このスタイルは、行が視覚的に類似している表の場合に有効です。追加のサブタイトルは、行をお互いに区別するのに役立ちます。開発者向けのガイダンスとしては、UITableViewCell の定数 UITableViewCellStyleSubtitle を参照してください。

Right Detail(バリュー 1) 左揃えのタイトルと右揃えのサブタイトルを同じ行に表示する。開発者向けのガイダンスとしては、UITableViewCell の UITableViewCellStyleValue1 定数を参照してください。

Left Detail(バリュー 2) 右揃えのタイトルに続いて、同じ行に左揃えのサブタイトルを表示する。開発者向けのガイダンスとしては、UITableViewCell の定数である UITableViewCellStyleValue2 を参照してください。

標準的なテーブルセルのスタイルはすべて、チェックマークや開示インジケータなどのグラフィック要素も使用できます。もちろん、これらの要素を追加すると、タイトルやサブタイトルのためのスペースが減少します。

クリッピングを避けるために、テキストは簡潔にまとめてください。 切り捨てられた単語やフレーズは、スキャンして解読するのが難しくなります。テキストの切り詰めは、すべてのテーブルセルスタイルで自動的に行われますが、使用するセルスタイルや切り詰めが発生する場所によって、問題が大きくなったり小さくなったりします。

削除ボタンにカスタムタイトルを使用することを検討してください。 行が削除をサポートしていて、わかりやすくするためには、システムが提供する[削除]タイトルをカスタムタイトルに置き換えます。

選択されたときにフィードバックを提供する。 行の内容がタップされたときに、行が短くハイライトされることが期待されます。その後、新しいビューが表示されるか、選択が行われたことを示すチェックマークが表示されるなど、何かが変わることを期待します。

標準的でない表行のために、カスタムの表セルスタイルをデザインする。 標準的なスタイルは、さまざまな一般的なシナリオでの使用に適していますが、コンテンツやアプリ全体のデザインによっては、テーブルの外観を大幅にカスタマイズする必要がある場合があります。独自のセルを作成する方法については、「Customizing Cells in Table View Programming Guide for iOS」を参照してください。

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


Views - Text Views #

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

テキストビュー #

テキストビューは、複数行のスタイル付きテキストコンテンツを表示します。テキストビューの高さは自由に設定でき、コンテンツがビューの外にはみ出した場合はスクロールが可能です。デフォルトでは、テキストビュー内のコンテンツは左揃えになり、システムフォントが黒で使用されます。テキストビューが編集可能な場合、ビュー内をタップするとキーボードが表示されます。

テキストの読みやすさを保つ。 複数のフォント、色、配置をクリエイティブに使いこなすことはできますが、コンテンツの読みやすさを維持することは不可欠です。ダイナミックタイプを採用すると、ユーザーがデバイス上で文字サイズを変更しても、テキストがきれいに表示されるのでおすすめです。また、太字などのアクセシビリティオプションを有効にしてコンテンツをテストすることも必要です。詳しくは「アクセシビリティ」をご覧ください。

適切なキーボードタイプを表示する。 iOS には、それぞれ異なるタイプの入力を容易にするために設計された、複数の異なるキーボードタイプが用意されています。データ入力を効率化するためには、テキストビューの編集中に表示されるキーボードが、フィールド内のコンテンツの種類に適している必要があります。利用可能なキーボードタイプの完全なリストについては、UITextInputTraits の UIKeyboardType 定数を参照してください。

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


Views - Web Views #

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

ウェブビュー #

Web ビューは、埋め込み HTML や Web サイトなどのリッチな Web コンテンツをアプリ内に直接読み込んで表示するものです。Mail では、メッセージ内に HTML コンテンツを表示する場合などに Web ビューを使用します。

必要に応じて、前方および後方へのナビゲーションを有効にする。 ウェブビューは前方および後方へのナビゲーションをサポートしていますが、この動作はデフォルトでは無効になっています。ウェブビューを使用して複数のページを閲覧する場合は、順方向および逆方向のナビゲーションを有効にし、これらの機能を起動するための対応するコントロールを提供してください。

Web ブラウザを構築するために Web ビューを使用することは避けてください。 ウェブビューを使用して、アプリケーションのコンテキストを離れることなくウェブサイトに簡単にアクセスすることは問題ありませんが、iOS でウェブを閲覧する主な手段は Safari です。アプリケーションで Safari の機能を再現しようとすることは不要であり、推奨されません。

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