Background
Backgroundは、画面全体に色や画像を設定する全画面のレスポンシブ対応コンポーネントです。カスタムの色、画像、ビデオをほかの画面要素の背面に表示します。オーバーレイ要素を追加して選択した背景に対するコントラスト比を4.5:1にすることで、背景上のテキストが読みやすくなります。背景パレットの色はすべて、白いテキストに合わせてデザインされています。ほかの色を使用する場合は、4.5:1のコントラスト比が維持されて読みやすいかどうかをテストしてください。
このガイドでのデザイン推奨事項は、Layoutsパッケージを参照しています。Layoutsパッケージとは、スキルで使用するために読み込みが必要な追加のプロパティセットのことです。詳細については、Alexa Layoutsパッケージを参照してください。
Backgroundコンポーネントの使用方法
デフォルトでは、colorBackground設定を使用して、背景は濃い青に設定されていますが、スキルに関連のある任意の色、画像、ビデオを使ってカスタマイズできます。最適な色の一覧については、背景パレットを参照してください。
画像とビデオ：背景に色を使う代わりに、コンテキストと関連する画像やビデオをスキルの背景として使うことができます。レイアウトに画像を使う場合は、前景および背景の両方に画像を配置します。背景に配置する画像には、backgroundBlur設定にぼかしフィルターを追加して、ユーザーの注意が前景に集中するようにします。画像は可能な限り大きく、解像度の高いものを使ってください。解像度とサイズの詳細については、画像サイズ表を参照してください。
背景のオーバーレイ
背景の画像やビデオの上にテキストを追加する場合、テキストを読みやすくするためにオーバーレイ処理が必要になることがあります。テキストの色が背景の一部と似た色の場合は、レイヤーの色を変更して十分なコントラスト比を維持する必要があります。たとえば、暗い背景に黒字のテキストを配置する場合、背景とテキストの間のレイヤーに対照的な色を選択して4.5:1のコントラスト比を維持するようにしてください。
colorOverlay
この処理によりコントラストの必要なセクションの色が暗くなります。背景画像全体をブロックする必要はありません。オーバーレイ色は#000000に設定し、不透明度は60%に設定します。
backgroundBlur
この処理は、画像が複雑すぎて、テキストが読みにくい場合に使用します。この設定によりぼかし効果を入れることで、前景にあるコンポーネントへの影響を少なくします。また、背景に使用した画像が小さく、サイズを拡大すると解像度の問題でアンバランスに見えてしまうといった場合にも、有効な方法です。
overlayGradient
色なしでoverlayGradientを使うと、グラデーションは下から上に向かって適用されます。
