Displayテンプレートのベストプラクティス



Displayテンプレートのベストプラクティス

Fire TV Cube、Echo Show、Echo Spot、Fire HD 8、Fire HD 10など、Displayテンプレートを使用して画面付きのAlexa搭載デバイスのスキルを開発する場合は、以下のベストプラクティス、デザインガイドライン、推奨事項を考慮してください。

 

関連トピック：

スキルの開始時間

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

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

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

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

画面表示の手順に従わない場合でも、Alexaアプリ用に提供したカードをユーザーが使用していれば、画面付きデバイスではそのカードが表示されます。そのため、画面で表示する方法を考えておく必要があります。画面を使用しないスキルに合わせてデザインしたカードは、サポートされているAlexa搭載デバイスでは、BodyTemplate1テンプレートで表示されます。

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

関連トピック：

画面ありモードと画面なしモード向けのスキルをデザインする

次のセクションで説明しているとおり、スキルサービスは画面付きデバイスの種類を区別できませんが、デバイスでサポートされるインターフェースを判断し、ユーザーのデバイスで画面表示するかどうかを判断できます。最高のユーザーエクスペリエンスを提供するためには、Amazon Echoのような「画面のない」デバイスを使用するユーザーと、画面付きのAlexa搭載デバイスを使用するユーザーの双方が快適に使用できるよう、スキル開発者は開発の際に条件文のワークフローを作成する必要があります。Fire HD 8とFire HD 10を使用するユーザーは、この2つのモードを切り替えることができます。

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

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

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

Amazon Echoデバイス用のDisplay.RenderTemplateなどの場合にはこれらのインターフェースがサポートされず、画面付きのAlexa搭載デバイス用の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"
    }
  }
}

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

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

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

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

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

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

画像は特定のデバイス専用のサイズにしないでください。専用サイズにしてしまうと他のデバイスでは正しく表示されない場合があります。

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

テンプレートを使用する

以下のガイドラインに従い、サポート対象のすべての画面付きのAlexa搭載デバイスでスキルが正しく表示されるようにしてください。

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