あなたのAlexaダッシュボード 設定

スキルカード設計のベストプラクティス

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

カードの表示形式については多くの考慮事項があります。ホームカードは、iOS/Android/Fire OS用のAmazon Alexaアプリで表示します。

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

スキルの応答にカードを追加する方法については、スキルの応答にカードを追加するを参照してください。

カードの種類

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

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

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

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

概要

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

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

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

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

良い例 悪い例

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

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

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

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

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

ユーザー:モダン・タキシードについてもっと教えて
Alexa: こちらのモダン・タキシードは、プレミアムな軽量素材でできていて、黒とグレーの色展開をしています。レンタル料金は$150より。こちらのタキシードのレンタルについて、もっと教えましょうか?

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

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

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

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

完結した内容を表示する

Alexaのモバイルアプリではスクロールして履歴を確認できますが、1回で完結するエクスペリエンスとしてカードを使用することが重要です。

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

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

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

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

ユーザー: 「どうやって使うの?」
ピザ・パレス: 「ピザ・パレスで可能な操作は例えば、注文をする、住所を変更する、注文の履歴。」
(このやり取りでは、サンプル発話を提案するカードを送信します。)

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

テキストの使用法

テキストの量と階層

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

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

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

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

テキストの大文字小文字

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

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

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

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

画像の使用法

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

画像の簡素化と最適化

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

画像の良い使用例

画像の悪い使用例

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

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

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

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

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

次のステップ