Lists



List

Listテンプレートはユーザーが表示、比較、選択、詳細表示できる項目一式を表示します。

Layoutsパッケージ

このガイドでのデザイン推奨事項は、Layoutsパッケージを参照しています。Layoutsパッケージとは、スキルで使用するために読み込みが必要な追加のプロパティセットのことです。詳細については、Alexa Layoutsパッケージを参照してください。

Listテンプレートの使用方法

Listを使うと、コンテンツをテキストリストの構成に整理することができます。Listレスポンシブ対応テンプレートを使うと、リストをさまざまなデバイスモードに応じて拡大・縮小できます。すべてのリストを有効にして、ユーザーが音声またはタッチでリストの項目を選択できるようにしてください。

Text list

2台のハブデバイスでDividerを使用してテキストリストの項目を区切った例

テキストリストは検索結果(名前やタイトル)、連絡先、やることリストなどに適しています。各項目の左側にはリスト内の項目の順序を示す番号が表示され、右側には説明が表示されます。各リスト項目間にDividerを使用すると、長いリストの場合にリストコンテンツが読みやすくなります。

テキストリストの項目は、リスト内の位置を示す番号、第1テキスト、第2テキスト、第3テキストで構成されます。画像が利用できないときに使用してください。そうしないと、ユーザーが項目を選ぶときに迷ってしまいます。テキストリストは量の多いコンテンツなので、各リスト項目の間に水平のDividerを使用して読みやすくしてください。

各リスト項目の説明は、Alexaが読み上げる音声による項目説明を簡潔にまとめた内容にします。これにより、ユーザーは音声で項目を選びやすくなります。たとえば、スキルが買い物リストを表示した場合、第1テキストには「バナナ」などの項目名を設定します。「有機バナナ特価50円」といった覚えにくい説明や繰り返しなどは設定しないでください。

Listコンポーネント

ヘッダーはリストのナビゲーション情報をサポートします。リストのヘッダーには3つの要素があります。タイトル、アトリビューション、ナビゲーションです。いずれも小型のデバイスモードでは表示されません。

Text list item

Text list itemは、各リスト項目の説明などのコンテンツを表示します。番号、第1テキスト、第2テキスト、第3テキストなどの要素からなります。

Background

応答には、任意で背景色や画像を選択することができます。画像にはオーバーレイが自動的に適用されるため、テキストが読みやすくなります。カスタム背景を使う場合は、さまざまなデバイスモードでリストと背景をテストし、コンテンツが4.5:1のコントラスト比で表示されることを確認してください。

Ordinal

Ordinalはリスト内の項目の番号を表示します。

Page Counter

ページカウンターは、総ページ数に対する現在のページ番号を表示します。たとえば、1 | 5は、ユーザーが5ページ中1ページ目にいることを表します。

ベストプラクティス

  • リストの各項目は一意(重複なし)である必要があります。項目は簡潔にして、ユーザーが音声で項目を選ぶ際に発音しやすいようにしてください。
  • 各リスト項目の要点をAlexaが読み上げるようにします。タイトルは常に読み上げますが、会話で応答するのに必要な場合のみ、2番目の文章を読み上げます。
  • リストから2~5個の結果をAlexaに読み上げさせることをお勧めします。コンテンツ、エンティティのタイトルの長さ、タイトルの音声への親和性、読み上げる要素の合計にユーザーがどれだけなじみがあるかどうかに応じて、この数字を調整します。
  • すべてのリスト項目は、ユーザーが音声でもタッチでも選択できるようにしてください。

その他のリソース

先頭に戻る