Alexa Stylesとリソース

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のプロパティの設定に使用するディメンションの値を定義します。設定には、「@」リソース構文を使用します。

ディメンションは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要素の表示に使用します。たとえば、進捗バーに表示される経過時間などです。