List

テキストまたは画像の連続したグループや、特定の文脈から抽出された一連の項目を並べるときに使用します。

基本パターン

Listは、取り扱う情報やアクションによってパターンが分かれます。 Listの種類を把握し、正しくListコンポーネントを使用しましょう。

リンクリスト

メニューがリスト上に並んだリンクリストの例

リストアイテムの内容が遷移先のページのタイトルまたは見出しとなっている。

例: 汎用的なメニュー、等。

アクション付き情報リスト

設定画面のようなメニューにトグルスイッチが並んでいる画面と、クリックすると開閉するメニューがリスト上に並んだアクション付き情報リストの例

リストアイテムの情報を表示し、それに対するアクションを表示する。

例: ToggleSwitchのある設定画面、開閉メニュー、等。

アクションリスト

記事リストが4件並び、その下に「もっと見る」のラベルがついたアクションリストがある例

リストアイテムのラベルがアクション名となっており、左の見出しに対して右のアイコンが関連付いている。

例: もっと見る、等。

情報リスト

項目名と、項目ごとの情報が一対になったリストアイテムが並ぶ情報リストの例

リストアイテムから遷移やアクションができず、リストアイテム内で情報が完結している。

例: データテーブルビュー、等。

概要リスト

記事詳細に遷移する記事リストの例

リストアイテムの内容が遷移先のコンテンツの概要となっている。

リストに置かれる要素

サムネイルや、アイコンList内に置かれる様々なオブジェクトは、Listの左右どちらに置かれるかによってユーザーの認知を大きく左右します。

情報が左から右に流れるのを表したイメージ。アフィリエイト商品画像サムネイルが左、次に商品名、価格、報酬表示が並ぶ

Listの主題となるものを左、主題に対してオプションとして置かれる要素を右へと置くようにします。

アイコンを左に�置く場合、オブジェクトの振る舞いを表す。右に置く場合、オブジェクトに対するアクションを表す

画像を左に置く場合、画像をコンテンツの本質でテキストが画像を修飾する。右に置く場合は、テキストがコンテンツの本質で画像がテキストを修飾する

Collection List(表示系リスト)

ある主題に対して一貫性のある情報を羅列した画面をCollection Listと呼びます。

Normal

見出しに対して遷移を行えるだけの一番シンプルなリストです。

ラベルとリンク遷移を表す右矢印のついたシンプルなリストの例

Class Icon

左にアイコンが付くことによって、リストの示す内容をより分かりやすく表示されたリストです。

見出しでリストの示す内容が十分にわかる場合は必要ありません。

戦闘に記事を表すアイコンが付いた記事リスト��の例

Instance Icon

Thumbnailを付けることによって、リストの示す内容をさらに具体的にしたリストです。

記事のサムネイル画像は左に配置された記事リストの例

Data Table View

遷移が行われないリストで、List内で情報が完結しています。見出しに対して右のラベルが解を返すような構造になっています。

左にアクセス数というラベルが表示されており、右にアクセス数が表示されているだけのリストの例

Collection List(操作系リスト)

リスト自体に遷移以外のアクションが付随するリストです。

Toggle

スイッチをその場で切り替える状況において使用するトグルスイッチのついたリストです。

トグルスイッチのついたリストの例

Radio Button

複数項目からいずれか一つを選択するときはラジオボタンのついたリストを使用してください。

複数選択にチェックマークのアイコンが右側についたリストの例

Checkbox

同時に複数の選択をする時はチェックボックスを使用してください。文脈によってレイアウトが変わります。

複数のCheckboxが付いたリストの例

Selection

ドロワーメニューのように、選択状態を維持したいリストです。

選択・非選択状態は、色以外のborderの太さや背景スタイルなどで変化をつけるようにします。

参考: 1.4.1 色だけで伝えない - Ameba Accessibility Guidelines

選択状態が表現された、罫線があるリストの例

選択状態が表現された、罫線がないリストの例

選択状態が表現された、アイコンが先頭についたリストの例

Visited

未読既読コンテキストを強調したいテキストリンクのみ適用します。

リスト上で既読・未読を表現した例

Add

タップによって、リスト前後にある要素を「〜に追加する」というアクションを行うリストです。

プラスアイコンがついているリストの例

Delete

リストをスライドして削除するインターフェースは、スワイプ操作に依存せず、代替操作ができる前提で使用してください。

リストに対して直接スワイプ操作をすることでリストアイテムを削除できることを示唆した例 リストに対して直接スワイプ操作をすることでリストアイテムが削除されてされていく表現を説明した例

左上の「編集」ボタンを押すことでリストを編集モードにし、リストアイテムのタップで削除対象を選ぶ例 選択したリストアイテムが削除されてされていく表現を説明した例

Transition

見出しがなく、ほぼボタンのように使用される遷移専用のリストです。

リストの最下部に「もっと見る」のラベルで遷移できることを示唆した例

Accordion

Listを展開、折り畳むことによって省スペース化を図るためのListです。

タップすると小リストが開閉するリストの例 リスト最下部の「もっと見る」の操作で、下にリストアイテムが追加される例

レイアウト

Listにおける余白やサイズ、構成要素の規定です。

Height

Listの高さは内部要素に比例して変更されます。高さは原則として4の倍数にしてください。

テキストの行ごとに適した高さになっていない例

Flexible Height

内容が可変し、かつ全てのテキストを掲載する必要がある場合は、リストの高さも固定値ではなく可変にする必要があります。

内容物の高さは定まって��おらず、上下のpaddingで余白と高さを定義した例

Padding

Listは同じ構成要素が反復するため、適度な余白を維持しないと可読性や情報取得のテンポが悪くなります。要素によって最適な余白を取るようにしてください。

テキストの上下にpaddingを確�保したリストアイテムの例

画像の上下にpaddingを確保したリストアイテムの例

アイコンの上下にpaddingを確保したリストアイテムの例

内容に応じた上下の余白が適切ではない例

Border

Borderは情報の区切りを明瞭にするため使用します。 しかし、情報量が過密にならないよう、必要十分なBorderを意識して配置してください。

テキスト等内容が1行分で、なおかつ十分な余白が確�保できる例

Borderがサムネイルやアイコンの隙間に入り込まないように内側に入れ込んだ例

情報の連続性を断ち切るために画面端まで通ったborderを使用する例

Text

Listを構成する要素として最も代表的なものがテキストであり、グルーピングを意識して配置する必要があります。

見出しと本文のテキストサイズの比率を120%〜150%の範囲で考えた例

見出しと本文をグルーピングし、リスト中央に集約した例

アクセシビリティ

操作

ジェスチャー操作の機能には代替手段を用意する

リストをスライドして削除する、ドラッグ&ドロップで順序を入れ替えるインターフェースでは、代替手段を用意する必要があります。

参考: 2.1.1 キーボード、タッチデバイスで操作できる - Ameba Accessibility Guidelines

色とコントラスト

テキスト色、アイコン色と背景色のコントラスト比を高くする

テキスト、アイコンの視認性を高めるため、背景色に対してそれぞれ下記のコントラスト比を担保しましょう。

  • テキスト、画像中のテキストは4.5:1以上
  • アイコン色は3:1以上

SpindleのSurface ColorとText Color・Object Colorの組み合わせを適切に利用することで、コントラスト比が十分に担保されます。

参考: 1.4.3 テキストや文字画像のコントラストを確保する - Ameba Accessibility Guidelines

レイアウト

テキスト・アイコンが拡大縮小できる

テキストやアイコンサイズは、200%まで拡大できるようにします。

ロービジョンのユーザーは、小さなテキストを読むことが困難です。そのため、テキストサイズを大きく設定していたり、一時的に画面をズームして表示したりすることがあります。 遷移が行われないリストや、アクションを促すリストでは、リストのテキスト全てが表示されている必要があります。拡大縮小した際に、テキストラベルが見切れて表示され、読めないことのないように設計しましょう。また、拡大してもアイコンだけが小さいままだと、ロービジョンのユーザーはアイコンを見逃してしまうかもしれません。

参考: 1.4.4 テキストサイズを拡大縮小できる - Ameba Accessibility Guidelines

ライティング

何が起きるか、捜査の結果や遷移先の内容が予測できるラベルをつける

操作や遷移先の内容が予測できるように明確にしましょう。押すと何が起きるのかが曖昧だと、ユーザーが怯えて押せなくなってしまうかもしれません。

参考: 2.4.4 リンクの目的を理解できるようにする - Ameba Accessibility Guidelines

実装

表示中のリストアイテムの順序でフォーカスできる

リストの各要素に、想定通りの順序でフォーカスできることを確認しましょう。

たとえばAccordionリストのように、ユーザーの操作でコンテンツが追加で表示されるリストでは、追加したコンテンツにフォーカスする必要があります。そうでないと、スクリーンリーダーではコンテンツが追加されたことに気づくことできません。

また、押せない(disabledな)リストアイテムには、スクリーンリーダーでも操作できなくなることを確認しましょう。

参考: 2.4.3 適切なフォーカス順序にする - Ameba Accessibility Guidelines

アイコンに代替テキストを設定する

アイコンに代替テキストがないと、スクリーンリーダーでアイコンファイル名が読み上げられます。 特に、アイコンだけでState(選択中、Accordionを開いている、など)を伝える場合、スクリーンリーダーにはそのStateがわからなくなってしまいます。装飾目的ではないアイコンには代替テキストを設定しましょう。

ステータスメッセージを通知する

リスト要素の追加、削除など、ユーザーの操作結果をスクリーンリーダーでも通知されることを確認しましょう。視覚的にはアニメーションを使って削除されたことがわかっても、音声で認識していると削除が完了したというステータスがわかりません。

参考: 4.1.3 コンテンツの変更をユーザーに知らせる - Ameba Accessibility Guidelines