画像



画像

静的な表示画像を効果的に使った没入感の高いエクスペリエンスもあれば、テキストやアイコンだけを使ったエクスペリエンスもあります。表示する画像のデザインと入手方法は、いくつかあります。

2台のハブデバイスで、NASAが提供した3枚のラベル付き惑星画像のリストを表示している例(ヘッダー、フッターあり)

画像の使用方法

コンポーネントを画像の前面に配置する場合は、オーバーレイを使って色付きの不透明なレイヤーを画像の上に適用すると、コンテンツの読みやすさとアクセシビリティが向上します。画像を目立たせないようにする場合、不透明度を変更して効果に変化をつけることもできます。

背景:背景画像を使用すると、主役のコンテンツを邪魔することなく、視覚エクスペリエンスを高めることができます。画面に表示されるメインコンテンツのアクセントとして、レイアウトの背景に画像を配置します。

サムネイル:サムネイルを使うと、検索結果を確認したり、TextコンポーネントとImageコンポーネントを組み合わせたりして、選択肢にコンテキストを追加できます。

アイコン:小さな画像で三次的なコンテンツを提供します。たとえば、評価を表す星などに使います。

エンプティステート:エンプティステートやデフォルトステートのレイアウトに画像を追加すると、レイアウトが整います。エンプティステートに画像を追加すると、単純な応答にも楽しさやコンテキストをプラスできます。

画像の形式

サポートされている画像の形式は次のとおりです。

形式 拡張子 詳細
JPEG .jpeg、.jpg ベースとプログレッシブがサポートされます
PNG .png アルファチャンネルがサポートされます

画像をAlexaに適用するには、6つの主な密度クラスに対応するアセットを用意する必要があります。たとえば、中密度(mdpi)ベースライン画面用の340 x 260ピクセル画像の場合には、 サイズ255x195、340x260(ベースライン)、510x390、680x520、1,020x780、1,360x1,040の同画像を用意する必要があります。

左から順に最小から最大サイズまでの犬の写真

画像サイズ表

画像サイズの例 倍率 分類 PPI
255 x 195 px 0.75x ldpi ~120 ppi以下
340 x 260 px(ベースライン) 1x mdpi ~160 ppi
510 x 390 px 1.5x hdpi ~240 ppi
680 x 520 px 2x xhdpi ~320 ppi
1,020 x 780 px 3x xxhdpi ~480 ppi
1,360 x 1,040 px 4x xxxhdpi ~640 ppi

サイズ変更

best-fill

上半分のみが切り取られた犬の写真(小サイズのデバイス上で大きな画像を均一に拡大した場合の例)

best-fill)を使うと、バウンディングボックスが完全に覆われるように、画像のサイズを均一に拡大または縮小します。

best-fit

デバイスの画像サイズの最大仕様よりも画像が小さい場合に画像の周りにパディングが入れられた犬の写真

best-fit)を使うと、バウンディングボックス内に画像全体が収まるように、画像のサイズを均一に拡大または縮小します。

none

パディングされたウィンドウ内の犬の写真

none)を使うと、バウンディングボックス内で画像の拡大・縮小が行われません。バウンディングボックスからはみ出た画像は切り捨てられます。

ビューより大きな画像は、ビューに収まるように均一に縮小されます。best-fillとnoneではいずれも、画像の寸法がビューの寸法に一致しない場合に背景色が見えるようにすることができます。

その他のリソース

先頭に戻る