Background

Backgroundコンポーネントは、ほかの画面要素の背面に表示されます。カスタムの色、画像、ビデオを使用できます。

backgrounds across devices

背景の使用方法

背景の色、画像、ビデオの上にテキストを追加する場合、テキストを読みやすくするためにオーバーレイ処理が必要になることがあります。テキストの色が背景の一部と似た色の場合は、レイヤーの色を変更して十分なコントラスト比を維持する必要があります。次のセクションで、最適な背景色について詳しく説明します。

デフォルトの背景

ほとんどのViewportプロファイルでは、デフォルトの背景は、グラデーションオーバーレイとノイズオーバーレイを使用した濃い青色です。

デフォルトの背景

ほとんどのViewportプロファイルでは、デフォルトの背景は、グラデーションオーバーレイとノイズオーバーレイを使用した濃い青色です。

デフォルトのテレビの背景

テレビのデフォルトの背景は、全画面の場合は均一の濃い青色です。部分的な画面の場合、背景の不透明度は90%です。

スケーリング

背景の画像とビデオは、best-fillまたはbest-fitに設定できます。

best-fill

best-fillを使うと、Viewportプロファイルの背景が完全に覆われるように、画像のサイズを均一に拡大または縮小します。ほとんどの背景画像・ビデオにbest-fillを使用することをお勧めします。

best-fit

best-fitを使うと、Viewportプロファイル内に画像全体が収まるように、画像のサイズを均一に拡大または縮小します。best-fitは背景画像をぼかして複製します。

配置

背景画像・ビデオの位置は、次の方法でカスタマイズできます。

bottom

最下部に水平中央揃えで配置します。

bottom-left

左下隅に配置します。

bottom-right

右下隅に配置します。

center

水平方向および垂直方向の中央に配置します。

left

左側に垂直中央揃えで配置します。

right

右側に垂直中央揃えで配置します。

top

最上部に水平中央揃えで配置します。

top-left

左上隅に配置します。

top-right

右上隅に配置します。

オーバーレイのオプション

オーバーレイには検討が必要なオプションがいくつかあります。

ぼかし

ぼかしを使用して画像を不鮮明にすることで、テキストが読みやすくなります。ぼかしは、カラーオーバーレイと組み合わせるか、拡大すると解像度に問題がある画像に使用してください。

カラーオーバーレイ

カラーオーバーレイを使用すると、コントラストが高まり、読みやすさが向上します。

グラデーションオーバーレイ

グラデーションオーバーレイを使用すると、画面下部のコントラストが高まり、テキストが読みやすくなります。

良い例

horizontal divider line

テキストが画面の端にある場合は、グラデーションオーバーレイの使用をお勧めします。

良い例

horizontal divider line

グラデーションオーバーレイまたはカラーオーバーレイを使用して、コンテンツと背景のコントラストを上げます。

ビデオの背景

自動再生のオン/オフを切り替えたり、ビデオのリピート再生回数を設定したりできます。ビデオはエクスペリエンスを補助するもので、目を引くダイナミックなものではありません。この例では、Alexaの音声がメインで、ビデオがサブです。

アクセシビリティ

背景にオーバーレイ要素を追加すると、背景の上にあるテキストが読みやすくなります。テキストを読みやすくするには、選択した背景とテキストのコントラスト比が4.5:1になるようにします。Amazonでは、すべての背景パレット色が白字のテキストを使用できるようにデザインされています。ほかの背景色でも、テキストが読みやすい4.5:1のコントラスト比になっていることをテストする必要があります。たとえば、暗い背景に黒字のテキストを配置する場合、背景とテキストの間のレイヤーに対照的な色を選択して4.5:1のコントラスト比を維持するようにしてください。

試してみる

APLドキュメントの作成と編集を参照してください。

開発者向けドキュメント