スキルカードデザインのベストプラクティス



スキルカードデザインのベストプラクティス

カードを追加すると、Alexaのエクスペリエンスが格段に向上します。カードにより、音声エクスペリエンスを視覚的に補強することができるため、開発者は、音声でのやり取りに関連した、ユーザーが確認する必要のある付加価値の高いコンテンツを提供することができます。

カードの表示形式については多くの考慮事項があります。ホームカードはiOS/Android/Fire OS用のAmazon Alexaアプリで表示されます。Fire TVではユーザーがAlexaと対話する際に画面に表示されます(日本未対応)。Echo ShowとEcho Spotでは、スキル開発者がその画面用にスキルをデザインしていなければデフォルトのフォーマットのカードが表示され、していればその画面用に設計された表示テンプレートの形式のカードが表示されます。

このガイドでは、シンプルなカードおよび標準的なカードをデザインする際のベストプラクティスを紹介します。

スキルの応答にカードを追加する方法の詳細については、スキルの応答にカードを追加するを参照してください。Echo ShowとEcho Spotで使用する表示テンプレートの作成方法については、Displayインターフェースのリファレンスを参照してください。

カードの種類

カードには主に2つの種類があります。

  • シンプルなカードはプレーンテキストを表示できます。カードのタイトルとコンテンツのテキストだけを指定します。
  • 標準的なカードはテキストと画像を表示できます。カードのタイトルとコンテンツに加えて、画像のURLを指定します。

Alexaアプリに表示するカード

プレーンテキストが表示されるシンプルなカードをAlexaアプリで見た場合
プレーンテキストが表示されるシンプルなカードをAlexaアプリで見た場合
テキストと画像が表示される標準的なカードをAlexaアプリで見た場合
テキストと画像が表示される標準的なカードをAlexaアプリで見た場合

Echo ShowまたはEcho Spotに表示するカード

表示テンプレートがスキルに明示的に含まれておらず、そのスキルがEcho ShowまたはEcho Spotで使用される場合、そのスキルで使用されるカードは、Alexaアプリに似た外観にするBodyTemplate1を使用して表示されます。

Fire TVに表示するカード(日本未対応)

プレーンテキストが表示されるシンプルなカードをFire TVで見た場合
プレーンテキストが表示されるシンプルなカードをFire TVで見た場合
テキストと画像が表示される標準的なカードをFire TVで見た場合
テキストと画像が表示される標準的なカードをFire TVで見た場合

一般

カードを追加するタイミングと頻度

カードを表示するタイミングと頻度は重要です。

  • カードの数を制限します: カードの数が多いとユーザーが音声に集中できなくなります。絶対に必要な場合を除いて、毎回の応答にカードを追加するのは避けてください。
  • 必須の手順として使用してはいけません: ユーザーが操作を続行するために、音声でのやり取りを中断して、Alexaアプリを確認しなければならないといった状況は避けてください。Echo ShowとEcho Spotでは、音声は最初の対話方法のままにし、できるかぎり音声だけでユーザーがスキルを操作できるようにする必要があります。

ユーザー: 「アレクサ、ピザパレスで最後に注文したものはなに?」

良い例 悪い例

ピザパレス: 「ペパロニとハムのピザをソース増量で注文しました。」
(この対話ではカードが表示されません。音声の応答でAlexaアプリを見るように指示することもありません。)

ピザパレス: 「Alexaアプリに、前回の注文内容を送信しました。ご確認ください。」
(この応答では、ユーザーに音声操作を中断して、質問に答えるよう指示しています。)

詳細情報にカードを使用する

カードは、音声イベントの追加の情報や詳細を共有することで音声エクスペリエンスを補強できます。

  • 適切な詳細情報を強調します: 音声では製品名だけしか表示されていない、または説明がわずかしかない商品について、評価をするユーザーをサポートします。たとえば、商品について、レビュー、画像、評価、寸法などを共有します。
  • コンテキストを追加します: 音声のやり取りにコンテキスト情報を追加します。たとえば、ギフト券を使って購入するというリクエストには、ギフト券の残額(使用する額に制限がある場合)を表示するカードを追加できます。

ユーザー: モダンタキシードについてもっと教えて。
Alexa: こちらのモダンタキシードは、プレミアムな軽量素材でできていて、黒とグレーの色展開をしています。レンタル料金は15,000円からです。こちらのタキシードのレンタルについての詳細をご覧になりますか?

詳細を表示するカードの例
詳細を表示するカードの例

Alexa: お買上げありがとうございます。ギフト券の残高が500円未満です。

(音声による対話はここで完了します。スキルは、この対話の内容を詳しく説明するために、ギフト券の残高についての詳細が書かれたカードを送信しますが、必須ではありません。)

追加のコンテキスト情報を提供するカードの例
追加のコンテキスト情報を提供するカードの例

完結した内容を表示する

Alexaモバイルアプリにはスクロールして表示できる履歴がありますが、Fire TVはスキルカードの履歴をサポートしていません(Fire TVは日本未対応)。そのため、カードを1回限りで個別に使用することが重要です。

  • カードを個別のエクスペリエンスとして使用します: ユーザーがアクセスできないことがあるため、スキルで前後のカードを使用しないでください。
  • ユーザーがカードの情報を保存することを想定しないでください: カードは保存できません。ユーザーがカードのデータを保存して後で参照することを想定しないでください。たとえば、取引の詳細をカードとして表示できることは便利ですが、カードは保存できないため取引の領収書にすることはできません。また、ユーザーは以前のカードを検索することはできません。

ユーザーの操作をサポートする

カードは操作の途中で分からなくなってしまったユーザーを正しい操作に戻すのに効果的です。またユーザーにできることを表示して自分で操作を完了させることもできます。

  • ガイドを提供します: 操作が途中で分からなくなってしまっても、いったん終了することなく、操作を続行するのに十分な詳細情報を提供します。
  • ヘルプが必要なときにサンプル発話を提案します: AMAZON.HelpIntentがトリガーされるときにサンプル発話を提案します。
  • 常にタイミングとコンテキストを考慮します: 現在のコンテキストでは使用できないサンプル発話を提案しないでください。たとえば、ユーザーのカートに商品が入っていない場合には、レジに進むサンプル発話を提案しないようにします。

ユーザー: これはどう使うの?
ピザパレス: ピザパレスでできる操作は、注文をする、住所を変更する、配送状況を確認するなどです。
(この対話では、サンプル発話を提案するカードを送信します。)

スキルのヘルプとサンプル発話を提供するカード
スキルのヘルプとサンプル発話を提供するカード

テキストの使用法

テキストの量と階層

カードは、効果的なプレゼンテーションにおけるスライドのようなものと捉えてください。

  • 簡潔に、必要な情報を明確に伝えます: カードのテキストは簡潔にまとめ、必要な情報を網羅した文章または箇条書きにします。商品の詳細をまとまりのない文章で書くことは避けてください。
  • テキストの段落は短くまとめます: カードは長い段落のテキストを記載するものではありません。詳細は最小限にまとめ、ユーザーが一目でカードを確認できるようにします。
  • 適宜改行を入れます: 住所、商品詳細、商品情報などは改行を入れます。ただし、番地部分を分けるために連続して改行を入れることは避けてください。
  • リンクはクリックできないため、代わりに明確な指示を追加します: カード内のURLはクリックできないため、他のサイトにアクセスするためのURLを表示するだけにはしないでください。ユーザーには指示を表示します。たとえば、「(ウェブサイト名)の設定画面を参照してください」などとAlexaに発話させます。
良い例 悪い例

情報を示す良いカードの例

テキストが多すぎるカード

テキストの大文字小文字

テキストには、カードに表示するのに適した大文字小文字の使い分けがあります。

  • 読みやすくします: 本文で英文を使用する場合は、文頭のみ大文字にし、見出しでは語頭を大文字にして、読みやすくします。
  • 見出しを目立たせます: 本文で英文を使用する場合は、見出しが分かりやすいように、本文では語頭をすべて大文字にすることは避けます。
  • 大げさにしません: 本文で英文を使用する場合は、見出しや本文をすべて大文字にすることは避けましょう。
  • 文法チェックをします: 読みやすく、文法の誤りのないテキストを記述しましょう。
良い例 悪い例

大文字小文字を使い分けたテキストの良い例

大文字小文字の使い分けの悪い例

Fire TVでの大文字小文字の使い分けの悪い例

画像の使用法

カードで使用できる画像は1枚のみです。Alexaが使えるデバイスで、さまざまな表示範囲のサイズの画像が表示されます。そのため、詳細がすべて表示されないこと、大小さまざまな画面に応じて画像サイズが最適化されて表示されることを考慮することが重要です。

画像の簡素化と最適化

  • シンプルで高画質な画像を使います: シンプルな形状で数センチ~数メートル離れたところからでも詳細が確認できる画像を使います。次のことを考慮します: Fire TVとモバイルの違い。(Fire TVは日本未対応)72 dpiで保存してください。
  • 大小の画像を使用します: 小さい画像は720 px x 480 pxです。大きい画像は1200 px x 800 pxです。大きい画像を提供しない場合、Fire TVではデフォルトで小さい方の画像が使用され、画像はぼやけたり変形したりします。(Fire TVは日本未対応)
  • 画像にはテキストを使用しません: 画像が縮小されてもカードの字を読みやすくするには、画像にテキストを使用しないことが鉄則です。
  • クレジット表記を入れます: Alexaカードにテキストとして画像のクレジット表記/出典を入れます。(画像内にはクレジットを入れないでください)インターネットから入手した画像や使用許諾を得ていない画像を使用しないでください。
良い例 悪い例

画像の良い使用例

画像の悪い使用例

複数のデバイスや画面で使用する場合(Fire TVは日本未対応)

Fire TVは画面のサイズが大きく固有のデザイン要素があるため、使用できるカードのバリエーションが豊富です。

  • 画像の表示方法が異なります: カードで使用する画像は、前景のカードに加えて、Fire TVカードの背景に表示されます。
  • 重要な情報に優先順位をつけます: ユーザーはすべてのテキストをスクロールして読まない可能性もあるため、必読の情報はカードの先頭に配置します。
  • Fire TVを使用してカードをテストします: 制約を理解して、Fire TVのユーザーのことも考慮してカードを最適化します。
  • テキストを長い文章にしません: Fire TVでたくさんのテキストをスクロールして読まなければいけないと、ユーザーは煩わしく感じます。
  • 履歴がないことに留意します: 個別のエクスペリエンスとしてカードを使用します。ユーザーが前後のカードに簡単にアクセスできない可能性も考慮して、前後のカードに頼らないようにします。
良い例 悪い例

Fire TVで正しく表示される画像の例

Fire TVで正しく表示されない画像の例

エクスペリエンスへの工夫

カードは取引の領収書としては使えませんが、エクスペリエンスの一部としては非常に有用です。対話全体で独自のエクスペリエンスを提供しましょう。

  • 読みやすくする工夫: ユーザーのAlexa対話をカードにそのまま書き出さないようにします。すばやく簡単に理解できる文章を作成します。
  • 喜ばせる工夫: ちょっとした驚きや喜びのひとときを提供します。たとえば、4AFartスキルでは、音声を再生すると、カードに愉快なフレーズが表示されます。
  • 興味を引く見た目: 関連性の高い部分には、ユーザーが聞く内容に応じて異なる画像やテキストを表示します。どのカードでも同じ画像を使うことは極力避けましょう。
  • 細かい点にも気を配ります: 画像や補足情報を追加すると、エクスペリエンスが生き生きとします。たとえば、ユーザーがチューリップを注文したら、チューリップの花束の写真を表示します。

エクスペリエンスを強化するカードの例

情報を追加したカード
ユーザーの注文に関連したカード 愉快なフレーズを表示した4AFartのカード

次のステップ