Alexa Stylesとリソース

Note: Submit your skill and see it come to life.

Alexa Stylesとリソース

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

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

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

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

以下は、ドキュメントのimportsセクションの例です。

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

{
  "import": [
    {
      "name": "alexa-styles",
      "version": "1.2.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

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`	デフォルト

不透明度のリソース

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

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

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

テキストのリソース

テキストリソースは、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

行の高さ

これらの数値リソースを使って、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"
}

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

リソース名	定義	デフォルト	テレビ
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とリソース

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

色のリソース

基本の色リソース

UI要素の色リソース

不透明度のリソース

テキストのリソース

フォントファミリー

フォントのウエイト

フォントサイズ

行の高さ

文字のスペース

スペースのリソース

影のスタイル

形状のリソース

テキストのスタイル

関連トピック