Alexa Stylesとリソース

Note: Sign in to the developer console to build or publish your skill.

Alexa Stylesとリソース

Alexa Stylesパッケージを使うと、どんなデバイスに対しても統一感のある表示を作成できます。このパッケージは、さまざまなタイプのデバイスで適切に機能するようデザインされた名前付きのリソースとスタイルを提供します。

独自にリソースやスタイルを定義する方法について詳しくは、APL resourcesとAPL Stylesを参照してください。

Alexa Stylesパッケージを読み込む

Alexa Stylesパッケージを使用し、そのすべての値にアクセスできるようにするには、ドキュメントのimport配列にalexa-stylesパッケージを追加します。alexa-stylesパッケージの最新バージョンは1.6.0です。

ドキュメントのimportセクションの例を以下に示します。

クリップボードにコピーされました。

{
  "import": [
    {
      "name": "alexa-styles",
      "version": "1.6.0"
    }
  ]
}

色のリソース

Alexaの色のリソースでは、色のセットを定義します。APLコンポーネントのcolorプロパティでこれらの値を使用するには、「@」リソース構文を使います。たとえば、次のようになります。

{
    "type": "Text",
    "color": "@colorText"
},
{
    "type": "Frame",
    "backgroundColor": "@colorBackground",
    "borderColor": "@colorRed800"
}

ヒント： デザインのガイダンスについては、スタイルガイドを参照してください。

基本の色リソース

これらのリソースでは、色名のセットを定義します。これらの色の多くは、以下のUIの色リソースでも使用されます。

リソース名	デフォルト
`colorBlack`	#000000
`colorBlackTVSafe`	#0F0F0F
`colorBlue800`	#232F3E
`colorGray100`	#FAFAFA
`colorGray200`	#EBEDED
`colorGray300`	#D6DBDB
`colorGray400`	#ABB8B8
`colorGray500`	#879496
`colorGray600`	#6B7878
`colorGray700`	#383D3D
`colorGray800`	#1E2222
`colorGreen800`	#34581B
`colorOrange800`	#652718
`colorPurple800`	#3E3F68
`colorRed800`	#65151E
`colorSalmon800`	#652E2C
`colorTeal800`	#0A655E
`colorWhite`	#FFFFFF
`colorWhiteTVSafe`	#F0F0F0
`colorYellow800`	#986300

次の例は、alexa-stylesに定義されている基本の色リソースをそれぞれ表示します。

UI要素の色リソース

これらの色リソースは、テキストや背景など、特定のAPLドキュメント要素で推奨される色を定義します。一部のリソースでは、基本の色リソースで定義された色を使用しています。

ほとんどのviewportでは、デフォルトの値が使用されます。tvLandscapeXLarge Viewportプロファイルに該当するViewportでは、テレビの値が使用されます。

リソース名	説明	デフォルト	テレビ
`colorAccent`	UIコンポーネントを強調表示したいときに使用します。	#00C9FF	デフォルト
`colorBackground`	基本の背景色に使用します。	`@colorBlue800`	デフォルト
`colorBackgroundOverlay`	画像上のテキストが読みやすくなるように、画像の上にオーバーレイとして使用する色です。	`@colorBlack`	`@colorBlackTVSafe`
`colorBackgroundReversed`	基本の背景色に使用します。	`colorGray200`	デフォルト
`colorComponent`	デフォルト状態のコンポーネントに使用する第1の色です。たとえば、ボタンのデフォルト色などに使用される色です。	`@colorGray100`	#DADADA
`colorComponentReversed`	デフォルト状態のコンポーネントに使用する第1の色です。たとえば、ボタンのデフォルト色などに使用される色です。	`@colorGray800`	デフォルト
`colorText`	テキスト要素に使用されるデフォルトの色です。	`@colorGray100`	#DADADA
`colorTextDisabled`	第1テキストか第2テキストかを問わず、あらゆるdisabledの状態のテキストに使用します。	`@colorGray100`	#DADADA
`colorTextDisabledReversed`	disabledの状態のテキストを、背景と著しく異なるカラー値の要素の上に表示するときに使用します。	`@colorGray800`	デフォルト
`colorTextReversed`	標準テキストの要素を、背景と著しく異なるカラー値の要素の上に表示するときに使用します。	`@colorGray800`	デフォルト
`colorTextSecondary`	メタデータのテキストを目立たせないようにするために使用します。	`@colorWhite`	`@colorWhiteTVSafe`
`colorTextSecondaryReversed`	背景と著しく異なるカラー値の要素の上に表示されるメタデータのテキストに使用します。	`@colorGray800`	デフォルト

次の例は、alexa-stylesに定義されているUI要素の色リソースをそれぞれ表示します。

不透明度のリソース

不透明度のリソースは、コンポーネントのopacityプロパティの設定に使用する数値を定義します。プロパティでこれらの値を使用するには、「@」リソース構文を使います。たとえば、次のようになります。

{
  "type": "Text",
  "text": "このテキストはdisabled状態で表示されます。",
  "opacity": "@opacityDisabled"
}

リソース名	説明	値
`opacityDisabled`	disabled状態で表示するようコンポーネントをフェードさせます。	0.3
`opacityBackgroundOverlay`	コンポーネントの上に表示されるテキストが十分読みやすくなるようコンポーネントをフェードさせます。この不透明度レベルは背景画像によく使用されます。	0.6
`opacityNonResponse`		0.5
`opacitySecondary`	フェードさせることで、このコンポーネントがページの二次情報であることを示します。たとえば、`AlexaHeader`レスポンシブ対応コンポーネントでは、アトリビューションの画像とテキストにこの不透明度が使用されます。	0.8

次の例は、alexa-stylesで定義されている各不透明度リソースを設定したFrameを表示します。

テキストのリソース

テキストのリソースは、TextコンポーネントやEditTextコンポーネントのプロパティの設定に使用する値を定義します。テキストのプロパティにこれらの値を設定するには、「@」リソース構文を使います。たとえば、次のようになります。

{
    "type": "Text",
    "fontFamily": "@fontFamilyRomanSans",
    "fontWeight": "@fontWeightBold",
    "fontSize": "@fontSizeMedium",
    "lineHeight": "@lineHeightExpanded",
    "letterSpacing": "@letterSpacingNormal"
}

ヒント： デザインのガイダンスについては、スタイルガイドを参照してください。

フォントファミリー

これらの文字列リソースは、APL TextコンポーネントやAPL EditTextコンポーネントのfontFamilyプロパティを設定するために使用します。

リソース名	説明	値
`fontFamilyRomanSans`	英語および英語に近い言語（ラテン文字、ギリシア文字、キリル文字で書かれた言語）で使用されるsans serif書体が該当します。	Amazon Ember Display
`fontFamilyRomanSerif`	英語および英語に近い言語（ラテン文字、ギリシア文字、キリル文字で書かれた言語）で使用されるserif書体が該当します。	Bookerly
`fontFamilyCompact`	中国語、日本語、韓国語の文字言語が該当します。大きめの字体にはスペースが追加で必要になる場合があります。	Noto Sans CJK

フォントのウエイト

これらの文字列リソースは、APL TextコンポーネントやAPL EditTextコンポーネントのfontWeightプロパティを設定するために使用します。

リソース名	説明	値
`fontWeightLight`	ほとんどの短いテキストとすべての長いテキストに使用します。	300
`fontWeightRegular`	karaokeテキストと18dp以下のサイズのテキストに使用します。	400
`fontWeightMedium`	タイトルのラベルテキストに使用します。	500
`fontWeightBold`	コントラストを付けたり数字やフレーズの一部を強調したりするときに使用します。	700
`fontWeightHeavy`	極端なコントラストを付けるために使用します。	900

フォントサイズ

これらのディメンションリソースは、APL TextコンポーネントやAPL EditTextコンポーネントのfontSizeプロパティを設定するために使用します。これらのリソースはレスポンシブ対応です。このため、ユーザーのデバイスのviewportに基づいてサイズ調整されます。ここに記載されている数値はdp単位です。

hubRoundSmall、hubLandscapeSmall、hubLandscapeMediumの各Viewportプロファイルに該当するViewportには、デバイスのデフォルト値が使用されます。hubLandscapeLargeプロファイルに該当するViewportには、デバイス、横長の値が使用されます。tvLandscapeXLarge Viewportプロファイルに該当するViewportでは、テレビの値が使用されます。

リソース名	定義	デフォルトのデバイス	デバイス、横長	テレビ
`fontSize5XLarge`	時刻や曜日を表す頭字語や大きな数字など、一目ですぐに読めるテキストに適用します。	106	148	96
`fontSize4XLarge`	小さめの表示サイズで、時刻や曜日を表す頭字語や大きな数字など、一目ですぐに読めるテキストに適用します。	80	112	64
`fontSize3XLarge`	短いテキストを表示するときに使用します。たとえば、離れた場所から読んでもらう必要のあるリスト項目やインラインタイトルなどです。	66	92	48
`fontSize2XLarge`	短いテキストを表示するときに使用する小さめの表示サイズです。たとえば、離れた場所から読んでもらう必要のあるリスト項目やインラインタイトルなどです。	53	64	32
`fontSizeXLarge`		48	48	24
`fontSizeLarge`	表示サイズのテキストと共に表示されるテキストに適用します。たとえば、映画の題名に添えられる短い説明文などです。	40	40	20
`fontSizeMedium`	長い形式のコンテンツに使用します。たとえば、本のあらすじなどです。	32	32	16
`fontSizeSmall`	タイトルに添えられるデータに使用します。たとえば、映画の時間に関する追加メタデータを表示する場合などです。	28	28	14
`fontSizeXSmall`	ナビゲーションやページ、セクションヘッダーに適用します。たとえば、ヘッダーに表示するフライト情報などです。	24	24	12
`fontSize2XSmall`		20	20	10

次の例は、alexa-stylesで定義されているフォントサイズリソースをそれぞれ表示します。

行の高さ

これらの数値リソースは、APL TextコンポーネントのlineHeightプロパティを設定するために使用します。これらのリソースはレスポンシブ対応です。このため、ユーザーのデバイスのviewportに基づいてサイズ調整されます。

リソース名	定義	値
`lineHeightNormal`	テキストの行間の標準距離です。	1.25
`lineHeightExpanded`	テキストの行間のスペースを増やします。	1.6
`lineHeightCondensed`	テキスト行間のスペースを減らします。	0.9

文字のスペース

これらの数値リソースは、APL TextコンポーネントのletterSpacingプロパティを設定するために使用します。これらの値は、文字間のスペースを増減します。

リソース名	定義	値
`letterSpacingCondensed`	文字間のスペースを減らします。	0.8
`letterSpacingExpanded`	文字間のスペースを増やします。	2.0
`letterSpacingNormal`	文字間に余分なスペースはありません。	0

スペースのリソース

スペースのリソースは、paddingやspacingのプロパティの設定に使用するディメンションの値を定義します。設定には、「@」リソース構文を使用します。

すべてのコンポーネントで利用可能なpaddingプロパティ
Containerコンポーネントの子コンポーネントのspacingプロパティ

ディメンションはdp単位で表します。

次に例を示します。

{
    "type": "Container",
    "paddingLeft": "@spacingMedium",
    "paddingRight": "@spacingMedium"
}

ほとんどのデバイスviewportには、デバイスの値を使用します。hubLandscapeLarge Viewportプロファイルに該当するViewportでは、デバイス、横長、大の値が使用されます。tvLandscapeXLarge Viewportプロファイルに該当するViewportでは、テレビの値が使用されます。

Viewportの左右のマージンには、marginHorizontalを使用します。

リソース名	デバイス	デバイス、横長、大	テレビ
marginHorizontal	64	80	48
spacing3XSmall	8	8	4
spacing2XSmall	12	12	6
spacingXSmall	16	16	8
spacingSmall	24	24	12
spacingMedium	32	32	16
spacingLarge	48	48	24
spacingXLarge	56	56	28
spacing2XLarge	64	64	32
spacing3XLarge	72	72	36

影のスタイル

影のスタイルは、任意のコンポーネントのstyleプロパティに適用できます。これらのスタイルは、コンポーネントの4つの影のプロパティを設定します。

スタイル名	色	水平方向のオフセット	垂直方向のオフセット	半径
`shadowMedium`	00000020	0	デバイス： 16、テレビ： 8	デバイス： 32、テレビ： 16
`shadowSmall`	00000020	0	デバイス： 10、テレビ： 5	デバイス： 20、テレビ： 10

形状のリソース

形状のリソースは、borderRadiusプロパティの設定に使用するディメンションの値を定義します。次のコンポーネントのborderRadiusプロパティでこれらの値を使用するには、「@」リソース構文を使います。

これにより、画像やフレームの角を切り取ることができます。次に例を示します。

{
    "type": "Image",
    "borderRadius": "@shapeRoundedRect"
}

リソース名	定義	デフォルト	テレビ
shapeRoundedRect	画像の角を丸くします。	4dp	2dp
shapeCircle	画像を円形に切り取ります。画像を円形に切り取るのに十分な数値になるよう、viewportの幅いっぱいに設定します。	100vw	100vw

テキストのスタイル

Alexa Textスタイルは、APL Textコンポーネントのstyleプロパティを設定するために使用します。これらのスタイルには、color、fontFamily、fontSizeなど、複数のテキストアトリビュートが組み合わされています。これらのスタイルはレスポンシブ対応として定義されているため、さまざまなデバイスで適切に機能します。

ほかのコンポーネントにもstyleプロパティはありますが、これらのスタイルはTextコンポーネントのプロパティを制御することに特化しているため、Textコンポーネントで使用した場合にのみ効果的に機能します。

ヒント： デザインのガイダンスについては、スタイルガイドを参照してください。

Textコンポーネントにスタイルを割り当てるには、次の例のように、コンポーネントのstyleプロパティにスタイル名を割り当てます。

{
    "type": "Text",
    "style": "textStyleDisplay4",
    "text": "このテキストはtextStyleDisplay4を使用しています。"
}

alexa-stylesパッケージは、次のTextプロパティをすべて設定する基本スタイル（textStyleDisplayBase）を定義します。

{
  "color": "@colorText",
  "fontFamily": "@fontFamilyRomanSans",
  "fontStyle": "normal",
  "lineHeight": "@lineHeightXLarge",
  "fontWeight": "@fontWeightRegular",
  "letterSpacing": "@letterSpacingNormal",
  "opacity": 1
}

残りのすべてのスタイルは、この基本をもとに設定されます。

スタイル名	説明
`textStyleDisplayBase`	基本のテキストスタイルです。ほかのスタイルによって拡張できます。
`textStyleDisplay1`	時刻や曜日を表す頭字語や大きな数字など、一目で読めるテキストに適用します。
`textStyleDisplay2`	`textStyleDisplay1`より小さいサイズです。時刻や曜日を表す頭字語や大きな数字など、一目で読めるテキストに適用します。
`textStyleDisplay3`	短いテキストを表示するときに使用します。たとえば、離れた場所から読まれるリスト項目などです。
`textStyleDisplay4`	`textStyleDisplay3`より小さいサイズです。短いテキストを表示するときに使用します。たとえば、離れた場所から読まれるリスト項目などです。
`textStyleDisplay5`	項目と共に表示されるテキストに使用します。たとえば、映画の短い説明文やあらすじなどです。
`textStyleDisplay6`	段落や本文のコピーのヘッドラインテキストに使用します。
`textStyleKaraoke`	karaokeエクスペリエンスでテキストを強調するために使用します。
`textStyleBody`	長い形式のコンテンツに使用します。たとえば、本のあらすじなどです。
`textStyleHint`	ヒントテキストやアクションヒントテキストに使用します。
`textStyleCallout`	補助的なテキストに使用します。たとえば、グリッド表示の画像のタイトルです。
`textStyleActionHint`	ボタンがユーザーの音声で選択可能なことを示すボタンのテキストに使用します。
`textStyleTitle`	ボタンやアクションを実行できるタッチコントロールに使用します。
`textStyleMetadata`	`textStyleCallout`のタイトルに添えられるデータに使用します。たとえば、映画の時間に関する追加メタデータを表示できます。
`textStyleCaption`	オプションのUI要素の表示に使用します。たとえば、進捗バーに表示される経過時間などです。

次の例は、alexa-stylesで定義されているテキストスタイルをそれぞれ表示します。

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2025 年 10 月 02 日

Alexa Stylesとリソース

Alexa Stylesパッケージを読み込む

色のリソース

基本の色リソース

UI要素の色リソース

不透明度のリソース

テキストのリソース

フォントファミリー

フォントのウエイト

フォントサイズ

行の高さ

文字のスペース

スペースのリソース

影のスタイル

形状のリソース

テキストのスタイル

関連トピック