グリッド



グリッド

デザインにグリッドを使うと、レイアウトに一貫したユーザーエクスペリエンスを実現できます。

Viewportプロファイルパッケージ

このガイドでのデザイン推奨事項は、Viewportプロファイルパッケージを参照しています。Viewportプロファイルパッケージとは、スキルで使用するために読み込みが必要な追加のプロパティセットのことです。詳細については、Alexa Viewportプロファイルパッケージを参照してください。

グリッド要素

グリッドには以下の3つの要素があります。

  1. マージン
  2. カラム
  3. ガター
各要素のコールアウト付きのグリッド画像

マージン

マージンは、デバイスの左右の端との間のスペースです。ディスプレイの端とコンテンツを離すことで読みやすさが向上します。


デバイスクラス Viewport幅(dp) マージン(dp)
Hub, Round, Small(デバイス、円、小) 480 64
Hub, Landscape, Medium(デバイス、横長、中) 1024 64
Hub, Landscape, Large(デバイス、横長、大) 1280 80
TV, Landscape, X-Large(テレビ、横長、特大) 960 48

カラム

カラムは、コンテンツの統一性を保ちながら配置するためのガイドラインとして使います。デバイスグループをガイドラインとして使用すると、グリッドのカラム数を設定しやすくなります。

5つのサイズ(xs、s、m、lg、xl)と指定できるカラム数を左から順に表したグリッドの図


使用形態

  • ブレークポイントはデバイスの横幅(DP)で決まります。
  • グリッドカラム数はデバイスグループによって決まります。
  • カラム数は固定ではありません(デバイスを回転させるとカラム数が増減します)。
ブレークポイント 極小(xs) 小(s) 中(m) 大(lg) 極大(xl)
グリッドカラム数 4 8 12 12 12

: 画面の横幅が1024 dpのデバイスと中のブレークポイントでは、12カラムのグリッドが使われます。

小サイズ、4カラム、ハブ

小サイズのデバイスのページにカラム間隔を表す赤線が引かれたレイアウト

中サイズ、8カラム、ハブ

中サイズのデバイスのページにカラム間隔を表す赤線が引かれたレイアウト

大サイズ、12カラム、テレビ

大サイズのテレビのページにカラム間隔を表す赤線が引かれたレイアウト

ガター

ガターはグリッドのカラム間の間隔を表します。ガターのサイズはデバイスモードの視聴距離によって決まります。遠くからの視聴を想定しているコンテンツの場合は、コンテンツを区切って遠くからでも読みやすくするために、大きなガターが必要です。

デバイスモード ガターサイズ
ハブ 32dp
TV 16dp

Hub, Landscape, Large(デバイス、横長、大)
12カラムグリッドに合わせた画像の横並びリスト

横長モードの大画面での12カラムグリッドレイアウト

Hub, Landscape, Large(デバイス、横長、大):
12カラムグリッドに合わせた画像の横並びリスト

横長モードの大画面での12カラムグリッドレイアウト

その他のリソース


先頭に戻る