画面付きEchoデバイス向けスキルデザインのベストプラクティス



画面付きEchoデバイス向けスキルデザインのベストプラクティス

Echo ShowとEcho Spot向けのスキルを作成する際は、以下のベストプラクティス、デザインガイドライン、アドバイスに留意してください。

関連トピック:

スキルの開始時間

Echo ShowとEcho Spotの画面表示を使用するスキルは、起動後2秒以内に開始する必要があります。特に、読み込みに時間がかかる画像はスキルの速度を低下させる場合があります。

スキルの一部として外部の画像を読み込む場合、この推奨時間に合わせるために画像なしでスキルを開始するよう設計できます。

インターフェースサポートを使用したAlexaスキルと使用しないAlexaスキル

スキルを開発する際、画面表示のためのDisplayなどの特定のインターフェースをサポートするかどうかを選択できます。スキルのユーザーがEcho ShowまたはEcho Spotを持っていれば、Amazon Echoなどの画面のないデバイスを使用する場合と同じようにスキルを使用できるようにしなければなりません。そのため、画面エクスペリエンスがスキルの主機能ではない場合でも、よく検討してください。

画面表示の手順に従わない場合でも、Alexaアプリ用に提供したカードをユーザーが使用していれば、画面付きデバイスではそのカードが表示されます。そのため、Echo ShowとEcho Spotがどのようにサポートされるかを知っておく必要があります。画面を使用しないスキル向けに設計されたカードはEcho ShowとEcho Spotでは、BodyTemplate1テンプレートを使用して表示されます。

リストから特定の画像を選択する機能や、ビデオを再生する機能など、画面を使用するメリットを最大限に活用するには、コードで明確に画面表示をサポートする必要があります。

関連トピック:

画面ありモードと画面なしモード向けのスキルを設計する

次のセクションで説明しているとおり、スキルサービスはEcho ShowとEcho Spotを区別できませんが、デバイスでサポートされるインターフェースを判断し、ユーザーのデバイスで画面表示するかどうかを判断できます。最高のユーザーエクスペリエンスを提供するためには、Amazon Echoのような「画面のない」デバイスを使用するユーザーにとっても、Echo ShowやEcho Spotを使用するユーザーにとっても快適に使用できるよう、スキル開発者はスキルを開発する際に条件文のワークフローを作成する必要があります。

画面対話やタッチ対話を追加して既存のスキルを拡張する場合、スキルのワークフローを再考してみてください。通常、ユーザーがスキルの使用中に画面を見るかどうかによって、スキルに対する反応やアクションが変わってきます。スキルサービスのコードは、そうしたさまざまな反応に対応し、2種類の対話を考慮している必要があります。

現在のデバイスでサポートされるインターフェースを決定する

スキルサービスは、デバイスでサポートされるインターフェースを判断するために、デバイスからのリクエストを解析する必要があります。event.context.System.device.supportedInterfaces.Displayの値は、サポートされるインターフェースを示します。以下の例では、JSON形式のサンプルリクエストの解析により、supportedInterfacesAudioPlayerDisplayVideoAppが含まれていることがわかります。これらの値のいずれかがSupportedInterfaceとして表示されない場合は、そのインターフェースはそのデバイスではサポートされません。

スキルサービスのコードは、Amazon Echoデバイス用のDisplay.RenderTemplateなどの場合にはこれらのインターフェースがサポートされず、Echo Showデバイス用のDisplay.RenderTemplateなどの場合にはこれらのインターフェースがサポートされるなど、条件に応じて対応できる必要があります。

{
  "version": "1.0",
  "session": {
    "new": false,
    "sessionId": "amzn1.echo-api.session.<value>",
    "application": {
      "applicationId": "amzn1.ask.skill.<value>"
    },
    "attributes": {
      "previousPage": "the proposal"
    },
    "user": {
      "userId": "amzn1.ask.account.<value>"
    }
  },
  "context": {
    "System": {
      "application": {
        "applicationId": "<value>"
      },
      "user": {
        "userId": "amzn1.ask.account.<value>"
      },
      "device": {
        "supportedInterfaces": {
          "Display": {},
          "AudioPlayer": {},
          "VideoApp": {}
        }
      }
    }
  },
  "request": {
    "type": "IntentRequest",
    "requestId": "amzn1.echo-api.request.<value>",
    "timestamp": "2017-06-10T11:03:15Z",
    "locale": "ja-JP",
    "intent": {
      "name": "AMAZON.StopIntent"
    }
  }
}

この例では、実際のリクエストがsessionIdapplicationIduserIdrequestIdの実際の値を持ちます。スキルサービスのコードは、Amazon Echoデバイスなどの場合にはこれらのインターフェースがサポートされず、画面付きEchoデバイスなどの場合にはこれらのインターフェースがサポートされるなど、条件に応じて対応する必要があります。

表示テンプレートの使用に関するデザインガイドライン

画面付きEchoデバイスでスキルが適切に表示されるよう、設計の際は以下のガイドラインに忠実に従ってください。

  • テキストを縦に整列させるために改行を使用しないでください。Echo Showでは予想通りに表示されるかもしれませんが、Echo Spotではレイアウトがくずれる可能性があります。
  • フォントサイズの変更は慎重に行ってください。推奨の距離でもっとも読みやすくなるよう、すべてのテンプレートにはデフォルトのフォントサイズが設定されています。
  • 太字、イタリック、下線などのマークアップは、デバイスでのコンテンツ表示が見やすくなる場合にのみ使用してください。
  • アクションリンクには下線をつけず、音声でアクセスできるようにする必要があります。
  • 重要なテキストは、新しいテキストアラインメント関連のアトリビュートを使用して、選択して整列させてください。テキストアラインメントを変更するとデバイスの種類ごとに表示が変更されることに留意してください。リッチテキストを使用したテキストアラインメントをご覧ください。

表示テンプレートで画像を使用する

Echo Showで見栄えが良くなる場合でも、背景画像を前景のコンテンツとして使用しないでください。Echo Spotでは背景画像のトリミングやサイズが変わる場合があります。背景画像は、ユーザーに重要な情報を伝えるためではなく、テンプレートを華やかにするための壁紙として使用してください。画像を使用してユーザーに重要な情報を伝える場合は、BodyTemplate7で前景の画像を使用してください。

画像はEcho Show専用のサイズにしないでください。専用サイズにしてしまうとEcho Spotでは正しく表示されない場合があります。

画像とテキストのコントラストを最適にするため、背景画像には不透明度70%の黒いレイヤーを重ねることをお勧めします。

テンプレートを使用する

以下のガイドラインに従い、すべての対応する画面付きEchoデバイスでスキルが正しく表示されるようにしてください。

  • すべての画面付きEchoデバイスでコンテンツが正しく表示されるよう、一度テンプレートを使用してデザインしてみてください。
  • リスト項目でアクションリンクを入れ子にしないでください。音声で選択しにくくなるためです。入れ子にすると、Echo Spotではリスト項目でドリルダウンできないため、タッチして選択したときに思うような結果が得られません。
  • テキストを含んだ背景画像ではなく、ヘッダーテキストとヒントディレクティブを使用して適宜テキストコンテンツを提供してください。
  • 音声ユーザーインターフェースはすべてのデバイスで一貫性を持たせてください。他のユーザビリティの問題が生じる可能性があるため、特定のデバイス用にVUIを最適化しようとせず、「画面をタッチしてください」などのテキストや音声の指示を含めてください。
  • 前景のコンテンツとしてフルスクリーン画像を使用する場合は、新しいBodyTemplate7を使用してください。このテンプレートは画像のみをサポートするテンプレートであり、(必要があれば)背景画像とは区別して、前景の画像コンテンツを読み込むために使用されます。

Echo SpotとEcho Showのデザイン仕様

どちらのデバイスにも画面とタッチ機能がありますが、音声ファーストでデザインされています。

Echo Spot

  • 画面解像度は480x480ピクセルで、画面が円形にトリミングされます。
  • 背景画像は黒色#000000、不透明度70%に設定されています。

Echo Showの仕様と比較してみましょう。

  • 画面解像度は1024x600で、画面は長方形です。

Echo ShowとEcho Spotの画面の違い

この2つのデバイスでテンプレートがどのように画面表示されるかの比較については、表示テンプレートの要素をご覧ください。

Echo ShowとEcho Spotの両方で1つの同じデザインにしてください。画面表示をデザインする際は、以下の特定の表示動作に留意してください。

以下の表示動作はEcho Spotのものであり、Echo Showとは異なります。

  • ヒントは、Echo Spotのテンプレートでは表示されません。ヒントがEcho Showテンプレートの一部である場合、Echo Spotでは自動で非表示になります。
  • 横型のリスト(ListTemplate2)のリスト項目画像は、リストコンテンツが一番上になるように、背景内に表示されます。
  • 背景画像は、アスペクト比を維持したまま短辺(多くの場合高さ)が480ピクセルまで小さくなります。次に、使用できる表示領域の中央に画像が配置されます。つまり、背景画像の縁がトリミングされる場合があるということです。
  • ヘッダーテキストは2行までになり、そのあと楕円形に切り取られます。
  • BodyTemplate2やListTemplate2など、Echo Spotではヘッダーテキストを表示しないテンプレートもあります。詳細については、以下のテンプレートの説明をご覧ください。
  • Echo SpotはEcho Showよりも画面サイズが小さいため、必然的にテキストの折り返しが多くなります。テキストの折り返しによって行の長さが思いどおりにならない場合がありますが、これは仕様です。デフォルトのフォントサイズを変更すると全デバイスに影響するため、フォントサイズは変更しないことをお勧めします。
  • 戻るボタンはありません。

Echo ShowとEcho Spotのフォントサイズマッピング

Echo ShowとEcho Spotのフォントサイズは、以下の更新されたフォントサイズ表に基づいて、自動的に調整されます。各テンプレートには、主要コンテンツがもっとも読みやすくなるようにデフォルトのフォントサイズが設定されています。これらのデフォルトサイズは、以下の値を使用して変更できます。

フォントサイズEcho Showの画面サイズEcho Spotの画面サイズ
サイズ76848
サイズ54838
サイズ33232
サイズ22828