Displayテンプレートのリファレンス
このリファレンスでは、スキルの応答に含めるとAlexaスキルの画面表示を作成できるDisplayテンプレートについて、具体的な情報をお伝えします。画面表示に対応したスキルを作成する方法については、画面付きのAlexa搭載デバイス用のスキルの作成を参照してください。Displayインターフェースの詳細については、Displayインターフェースのリファレンスを参照してください。
BodyテンプレートとListテンプレートは、さまざまな表現をサポートするよう設計されています。以下の動作は各テンプレートで共通です。
-
textContent
フィールドには、primaryText
、secondaryText
、tertiaryText
を記載します。 -
各Listテンプレートには、リスト項目を少なくとも1つ含める必要があります。
-
BodyTemplate2
、BodyTemplate6
、ListTemplate2
には、Hint
ディレクティブを用いてヒントを含めることができます。Hintディレクティブを参照してください。 -
Echo ShowとFire TV Cubeでは、各テンプレートに戻るボタンがデフォルトで表示されますが、非表示にすることもできます。Echo Spotでは戻るボタンは表示されませんが、左から右へ大きくスワイプすることで同じ操作を行うことができます。戻るボタンオブジェクトを参照してください。
以下に示す画像はスケール調整されていないため、実際にデバイスで見る画像とは完全には一致しない可能性があります。
タイトルが表示されるときは、通常はヘッダーとして表示され、テンプレートまたはデバイスによって左揃えか中央揃えになります。
シンプルテキストと画像表示用のBodyTemplate1
BodyTemplate1の構文
{
"type":"BodyTemplate1",
"token": "string",
"backButton": "VISIBLE"(default) | "HIDDEN",
"backgroundImage": Image,
"title": "string",
"textContent": TextContent
}
BodyTemplate1のガイダンス
- このテンプレートでは、フルワイドの前景画像はサポートされません。こうした画像を使用する場合は、BodyTemplate7を使用してください。
- サイズが異なるデバイスでは、デフォルトフォントサイズ7での行の長さが違うため、テキストの折り返し方が異なります。
- スクロールが必要な場合は、本文のテキストはタッチしてスクロールするようにし、スキルアイコンとヘッダーテキストは固定されます。
BodyTemplate1のデバイスごとの違い
Echo ShowおよびFire TV Cube
- 左揃えのタイトルテキスト
- スキルアイコン
- フルワイドのテキストビュー、左上揃え、デフォルトのフォントサイズは7、スクロール可能(必要な場合)
- 小さいインライン画像を利用可能
- 背景画像(オプション)
Echo Spot
- 中央揃えのタイトルテキスト
- スキルアイコン
- テキストビュー、左上揃え、デフォルトのフォントサイズは7、スクロール可能(必要な場合)
- 小さいインライン画像を利用可能
- 背景画像(オプション)
デバイスごとの表示の比較 – BodyTemplate1
Echo ShowとEcho Spotに表示されるスキル


BodyTemplate1のワイヤフレーム表示
Fire TV Cube
![]() | ![]() |
Echo Show
![]() |
![]() |
Echo Spot
![]() |
![]() |
画像表示と短い中央揃えテキスト用のBodyTemplate2
BodyTemplate2の構文
{
"type": "BodyTemplate2",
"token": "string",
"backButton": "VISIBLE"(default) | "HIDDEN",
"backgroundImage": "Image",
"title": "string",
"image": Image,
"textContent": TextContent
}
BodyTemplate2のガイドライン
- BodyTemplate2は、画像に少量のテキストを付記する場合に使用します。
- コンテンツは短く簡潔にし、VUIの代わりではなく、あくまで補足として使用してください。
- Echo ShowとFire TV Cubeで左右に並べて表示されるコンテンツは、Echo Spotでは上下に並べて表示されます。画像が背景になり、テキストがその上に重ねられます。
- Echo Spotではヒントは表示されません。
- BodyTemplate2ではテキストが自動で中央揃えになる点を除き、Echo SpotでのBodyTemplate2とBodyTemplate3の表示形式は同じです。
- スクロールが必要な場合、タッチするとスキルアイコン、ヘッダーテキスト、本文を含む画面全体がスクロールされます。
- 背景画像に商標などの重要な情報を含めないでください。
表示内容
Echo ShowおよびFire TV Cube | Echo Spot |
---|---|
|
|
デバイスごとの表示の比較 – BodyTemplate2
Echo ShowとEcho Spotに表示されるスキル


BodyTemplate2のワイヤフレーム表示
Fire TV Cube
![]() |
![]() |
Echo Show
![]() |
![]() |
Echo Spot
![]() |
![]() |
画像表示と短い左揃えテキスト用のBodyTemplate3
BodyTemplate3の構文
{
"type": "BodyTemplate3",
"token": "string",
"backButton": "VISIBLE"(default) | "HIDDEN",
"backgroundImage": "Image",
"title": "string",
"image": Image,
"textContent": TextContent
}
BodyTemplate3のガイドライン
- Echo ShowとFire TV Cubeで左右に並べて表示されるコンテンツは、Echo Spotでは上下に並べて表示されます。画像が背景になり、テキストがその上に重ねられます。
- Echo SpotではBodyTemplate2とBodyTemplate3の表示形式は同じです。BodyTemplate3ではテキストが左揃えになります。
- スクロールが必要な場合、タッチするとスキルアイコン、ヘッダーテキスト、本文を含む画面全体がスクロールされます。
- 背景画像に商標などの重要な情報を含めないでください。
表示内容
Echo ShowおよびFire TV Cube | Echo Spot |
---|---|
|
|
デバイスごとの表示の比較 – BodyTemplate3
Echo ShowとEcho Spotに表示されるスキル


BodyTemplate3のワイヤフレーム表示
Fire TV Cube
![]() |
![]() |
Echo Show
![]() |
![]() |
Echo Spot
![]() |
![]() |
テキストとオプションの背景画像用のBodyTemplate6
表示内容
Echo ShowおよびFire TV Cube | Echo Spot |
---|---|
|
|
BodyTemplate6の使用ガイドラインは次のとおりです。
- Echo Spotではヒントは表示されません。
- Echo Spotでは、背景画像はアスペクト比に応じて縮小され、利用可能な表示領域の中央に表示されます。たとえば、Echo Showで1024 x 600ピクセルの背景画像は、Echo Spotでは819 x 480ピクセルに縮小されます。このため、Echo Spotでは背景画像の一部が表示されない場合があります。
- Echo Spotでスクロールが必要な場合、タッチするとスキルアイコン、ヘッダーテキスト、本文を含む画面全体がスクロールされます。
BodyTemplate6の構文
{
"type": "BodyTemplate6",
"token": "string",
"backButton": "VISIBLE"(default) | "HIDDEN",
"backgroundImage": Image,
"image": "Image",
"textContent": TextContent
}
デバイスごとの表示の比較 – BodyTemplate6
Echo ShowとEcho Spotに表示されるスキル


BodyTemplate6のワイヤフレーム表示
Fire TV Cube
![]() |
Echo Show
![]() |
Echo Spot
![]() |
スケール調整可能な前面画像とオプションの背景画像用のBodyTemplate7
表示内容
Echo ShowおよびFire TV Cube | Echo Spot |
---|---|
|
|
BodyTemplate7の使用ガイドラインは次のとおりです。
- BodyTemplate7は、画面付きAlexa搭載デバイスのスケール調整可能な前景画像をサポートしています。
- Echo Spotでは、前景画像は元のアスペクト比を維持したまま適切にスケール調整され、表示領域内の中央に表示されます。
BodyTemplate7の構文
{
"type": "BodyTemplate7",
"token": "SampleTemplate_3476",
"backButton": "VISIBLE",
"title": "Sample BodyTemplate7",
"backgroundImage": {
"contentDescription": "テクスチャ加工された灰色の背景",
"sources": [
{
"url": "https://www.example.com/background-image1.png"
}
]
},
"image": {
"contentDescription": "マウントへレンズ山の風景",
"sources": [
{
"url": "https://example.com/resources/card-images/mount-saint-helen-small.png"
}
]
}
}
デバイスごとの表示の比較 – BodyTemplate7
Echo ShowとEcho Spotに表示されるスキル


前景画像が透過されている場合は視覚効果が異なり、以下のようになります。

BodyTemplate7のワイヤフレーム表示
Fire TV Cube
![]() |
Echo Show
![]() |
Echo Spot
![]() |
箇条書きとオプション画像用のListTemplate1
表示内容
Echo ShowおよびFire TV Cube | Echo Spot |
---|---|
|
|
ListTemplate1の使用ガイドラインは次のとおりです。
- このテンプレートは、画像が主要コンテンツではないリストに使用します。
- リスト項目は、タッチで選択可能にし、かつ第1テキストまたは序数を使用して音声で選択可能にするようにしてください。
- サムネイル画像を使用する場合、テキスト領域が縮小されます。
- 画面に表示しきれないテキストがある場合、省略記号が表示されます。
ListTemplate1の構文
{
"type": "ListTemplate1",
"token": "string",
"backButton": "VISIBLE"(default) | "HIDDEN",
"backgroundImage": "Image",
"title": "string",
"listItems": [
{
"token": "string",
"image": Image,
"textContent": TextContent
},
...
...
{
"token": "string",
"image": Image,
"textContent": TextContent
}
]
}
デバイスごとの表示の比較 – ListTemplate1
Echo ShowとEcho Spotに表示されるスキル


ListTemplate1のワイヤフレーム表示
![]() |
![]() |
![]() |
画像リストとオプションテキスト用のListTemplate2
表示内容
Echo ShowおよびFire TV Cube | Echo Spot |
---|---|
|
|
ListTemplate2の使用ガイドラインは次のとおりです。
- このテンプレートは、画像が主要コンテンツであるリストに使用します。
- リスト項目は、タッチで選択可能にし、かつ第1テキストまたは序数を使用して音声で選択可能にするようにしてください。
- リスト項目のコンテンツ内でアクションリンクを入れ子にしないでください。入れ子にすると、アクションリンクを選択できなくなります。また、Echo Spotで表示されなくなる可能性があります。
- 特にEcho Spotではテキストの一部が切れるため、ユーザーに選択内容がわかるよう、画面に表示される第1テキストは具体的なものにしてください。
- 1度に画面に表示されるリスト項目は1つのみです。
- 現状では、テキストは前景画像の前面に下揃えで表示されます。
- Echo Spotではヒントは表示されません。
- 画面に表示しきれないテキストがある場合、省略記号が表示されます。
ListTemplate2の構文
{
"type": "ListTemplate2",
"token": "string",
"backButton": "VISIBLE"(default) | "HIDDEN",
"backgroundImage": "Image",
"title": "string",
"listItems": [
{
"token": "string",
"image": Image,
"textContent": TextContent
},
...
...
{
"token": "string",
"image": Image,
"textContent": TextContent
},
]
}
デバイスごとの表示の比較 – ListTemplate2


![]() |
![]() |
![]() |
Displayテンプレートの要素
次の表に、Displayテンプレートで使用するすべての要素を示します。ただし、テンプレートによっては一部の要素のみを使用します。
要素 | 説明 | 値/例 |
---|---|---|
type | テンプレートの名前 | BodyTemplate1 BodyTemplate2 BodyTemplate3 BodyTemplate6 BodyTemplate7 ListTemplate1 ListTemplate2 |
token | スキルサービスコード内の選択可能要素を追跡するために使用します。値には任意のユーザー定義の文字列を設定できます。 | Dog-List-2 1212323312 |
backButton | 戻るボタンをDisplayテンプレートに配置するために使用します。 | HIDDEN VISIBLE |
backgroundImage | 背景画像をDisplayテンプレートに含めるために使用します。 |
|
title | Displayテンプレートのタイトルを指定するために使用します。値には任意のユーザー定義の文字列を設定できます。 | "犬のメリーゴーラウンド" "ケーキのレシピいろいろ" |
textContent | primaryText 、secondaryText 、tertiaryText を記載します。 |
|
primaryText |
type (PlainText またはRichText を指定)およびtext (文字列を指定)を入力します。文字数の上限は8,000文字です。 |
|
secondaryText |
type (PlainText またはRichText を指定)およびtext (文字列を指定)を入力します。文字数の上限は8,000文字です。 |
|
tertiaryText |
type (PlainText またはRichText を指定)およびtext (文字列を指定)を入力します。文字数の上限は8,000文字です。 |
|
image |
画像を参照し、説明を入力します。画像には複数のソースを指定できます。「backgroundImage」と「image」の書式は同じです。 |
|
listItems | リスト項目のテキストと画像を記載します。 |
|
その他のリソース
テンプレート関連の情報については、以下を参照してください。
- 適切なテンプレートの選択と実装に関するガイダンスについては、表示に適したテンプレートの選択を参照してください。
- テンプレートで使用できる文字数の詳細については、Displayテンプレートの最大文字数を参照してください。
- テンプレートごとに適した画像サイズと形状の詳細については、各テンプレートの表示画像サイズを参照してください。
画面表示に対応したスキルを開発するには、以下を参照してください。
-
画面をサポートするAlexaスキルの作成に関するクイックスタートガイドについては、画面付きのAlexa搭載デバイスでAlexaスキルをビルドする方法を参照してください。
-
デザインガイダンスについては、画面付きのAlexa搭載デバイス向けスキルデザインのベストプラクティスを参照してください。
-
デバイスの表示と動作の仕様については、画面付きのAlexa搭載デバイスの表示と動作の仕様を参照してください。
-
Displayインターフェースの使用方法については、Displayインターフェースのリファレンスを参照してください。