リストと表
リストとテーブルは、データを 1 つ以上の行の列に表示します。
表またはリストは、グループまたは階層に編成されたデータを表すことができ、選択、追加、削除、並べ替えなどのユーザー操作を可能にします。すべてのプラットフォームのアプリとゲームは、表を使用してコンテンツとオプションを表示できます。多くのアプリでは、リストを使用して全体的な情報階層を表現し、ナビゲーションを可能にします。たとえば、iOS の設定ではリストの階層を使用して人々がオプションを選択できるようにし、いくつかのアプリ (iPadOS や macOS の メール など) では 分割ビュー内で スプリットビュー を使用します。
場合によっては、人々は複数列の表やスプレッドシートで複雑なデータを操作する必要があります。生産的なタスクを可能にするアプリは、多くの場合、表を使用して、データのさまざまな特性や属性を個別の、並べ替え可能な列に表します。
ベストプラクティス
リストまたは表にテキストを表示することが望ましいです。 表にはあらゆる種類のコンテンツを含めることができますが、行を基礎とした形式は、テキストを簡単にスキャンして読みやすくするのに特に適しています。サイズが大きく異なるアイテムがある場合、または多数のイメージを表示する必要がある場合は、代わりに コレクション の使用を検討してください。
意味があれば人々が表を編集できるようにします。 アイテムを追加または削除できない場合でも、リストを並べ替えることができることを人々は高く評価します。iOS および iPadOS では、人々は表の項目を選択する前に編集モードに入らなければなりません。
人々がリスト項目を選択したときに、適切なフィードバックを提供します。 フィードバックは、項目を選択すると新しいビューが表示されるか、項目の状態が切り替わるかによって異なります。一般に、階層を介したナビゲーションを可能にする表では、選択された行が常に強調表示され、人々がたどっている経路が明確になります。対照的に、オプションを一覧表示する表では、項目が選択されていることを示すイメージ (チェックマークなど) を追加する前に、行を短時間だけ強調表示することがよくあります。
コンテンツ
行の内容が読みやすいように、項目のテキストは簡潔にして下さい。 短く簡潔なテキストは、切り捨てや折り返しを最小限に抑えるのに役立ち、テキストを読みやすく、スキャンしやすくします。各項目が大量のテキストで構成されている場合は、大きすぎる表の行を表示しないようにする代替手段を検討してください。たとえば、項目のタイトルのみを一覧表示して、人々が項目を選択してその内容を詳細ビューに表示できるようにします。
切り取られたり切り捨てられたりするテキストの読みやすさを維持する方法を検討してください。 表が狭い場合 (たとえば、人々がその幅を変えられる場合) は、コンテンツを認識しやすく、読みやすくする必要があります。場合によっては、テキストの途中に省略記号を付けると、コンテンツの最初と最後の両方が保持されるため、項目を区別しやすくなります。
複数列の表では、説明的な列の見出しを使用します。 タイトルスタイルの先頭を大文字にする方法で名詞または短い名詞句を使用し、末尾に句読点を追加しないでください。単一列の表のビューに列見出しを含めない場合は、ラベルまたはヘッダーを使用して、人々がコンテキストを理解できるようにします。
スタイル
データとプラットフォームに合わせて表またはリストのスタイルを選択します。 一部のスタイルでは、視覚的な詳細を使用して、グループ化と階層を伝えたり、特定の体験を有効にしたりします。たとえば、iOS および iPadOS では、グループ化されたスタイルは、ヘッダー、フッター、および追加のスペースを使用してデータのグループを分離します。watchOS で利用可能な楕円形のスタイルは、人々がスクロールするときにアイテムが丸い表面から転がり落ちている場合にアイテムを表示します。また、macOS では、大きな表を使いやすくするために、交互に行の背景を使用するボーダースタイルが定義されています。開発者向けガイダンスについては、ListStyle を参照してください。
表示する必要がある情報に適した行スタイルを選択します。 たとえば、行の先頭に小さなイメージを表示し、その後に簡単な説明ラベルを表示すべきだとします。一部のプラットフォームでは、iOS、iPadOS、および tvOS でリストの行、ヘッダー、およびフッターにコンテンツをレイアウトするために使用できる UIListContentConfiguration (UIListContentConfiguration) API など、リストの行にコンテンツを配置するために使用できる組み込みの行スタイルが提供されています。
プラットフォームの考慮事項
iOS、iPadOS
情報ボタンは、行のコンテンツに関する詳細情報を表示する場合にのみ使用してください。 情報ボタン (リスト行に表示される場合は 詳細開示ボタン と呼ばれます) は、階層の表またはリスト全体のナビゲーションを有効にしません。人々がリストまたは表の行のサブビューを繰り返し練習できるようにする必要がある場合は、開示インジケータアクセサリコントロールを使用します。開発者向けガイダンスについては、disclosureIndicator を参照してください。
行の末尾に開示インジケータなどのコントロールを表示する表には、インデックスを追加しないでください。 インデックス は通常、アルファベットの文字で構成され、リストの末尾に垂直に表示されます。人々は、対応するインデックス文字を選択することで、リスト内の特定のセクションにジャンプできます。インデックスと開示インジケータなどの要素の両方がリストの末尾に表示されるため、人々は一方の要素をアクティブにせずに他方の要素を使用するのは難しい場合があります。
macOS
価値がある場合は、人々に列見出しをクリックさせて、その列に基づいてテーブルビューを並べ替えさせます。 人々が並べ替え済みの列の見出しをクリックした場合は、データを逆方向に並べ替えます。
人々に列のサイズを変更できるようにします。 表のビューに表示されるデータの幅はさまざまです。列のサイズを変更して、別の領域に焦点を当てたり、切り取られたデータを表示できることを人々は高く評価します。
複数列の表では、行の色を交互に使用することを検討してください。 交互の色は、特に幅の広い表で、列全体の行の値を人々が追跡するのに役立ちます。
表のビューの代わりにアウトラインビューを使用して、階層データを表示します。 アウトラインビュー は表のビューのように見えますが、入れ子にされたレベルのデータを公開するための開示三角が含まれています。たとえば、アウトラインビューには、フォルダとそこに含まれるアイテムが表示されます。
tvOS
各行が強調表示され、焦点が合うとサイズがわずかに大きくなるため、表の近くのイメージが適切に見えることを確認します。 焦点の合った行の角も丸くなり、イメージの両側の外観に影響を与える可能性があります。イメージを準備するときにこの効果を考慮し、角を丸くするために独自のマスクを追加しないでください。
watchOS
可能であれば、行数を制限してください。 短いリストはスキャンしやすいですが、アイテムの長いリストを期待する人々もいます。たとえば、人々が多数のポッドキャストを購読している場合、すべての項目を表示できない場合、何かがおかしいと考える可能性があります。最も関連性の高い項目をリストし、人々がより多くの項目を閲覧できるようにすることで、長いリストをより管理しやすくすることができます。
垂直方向のページを基礎としたナビゲーションをサポートしたい場合は、詳細ビューの長さを制限します。 人々は、垂直方向のページを基礎としたナビゲーションを使用して、異なるリスト行の詳細項目間を垂直方向にスワイプします。この方法でナビゲートすると、人々は新しい詳細項目をタップするためにリストに戻る必要がないため、時間を節約できますが、詳細ビューが短い場合にしか機能しません。詳細ビューがスクロールすると、人々は垂直方向のページを基礎としたナビゲーションを使用してそれらの間をスワイプできなくなります。
リソース
関連
開発者用文書
List — SwiftUI (List)
Tables — SwiftUI (Tables)
UITableView — UIKit (UITableView)
NSTableView — AppKit (NSTableView)
ビデオ
SwiftUI のスタック、グリッド、およびアウトライン
WWDC 2020