グリッド
Note: Sign in to the developer console to build or publish your skill.
グリッド
デザインにグリッドを使うと、レイアウトに一貫したユーザーエクスペリエンスを実現できます。
Viewportプロファイルパッケージ
このガイドでのデザイン推奨事項は、Viewportプロファイルパッケージを参照しています。Viewportプロファイルパッケージとは、スキルで使用するために読み込みが必要な追加のプロパティセットのことです。詳細については、Alexa Viewportプロファイルパッケージを参照してください。
グリッド要素
グリッドには以下の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 |
カラム
カラムは、コンテンツの統一性を保ちながら配置するためのガイドラインとして使います。デバイスグループをガイドラインとして使用すると、グリッドのカラム数を設定しやすくなります。
使用形態
- ブレークポイントはデバイスの横幅（DP）で決まります。
- グリッドカラム数はデバイスグループによって決まります。
- カラム数は固定ではありません（デバイスを回転させるとカラム数が増減します）。
| ブレークポイント | 極小（xs） | 小（s） | 中（m） | 大（lg） | 極大（xl） |
|---|---|---|---|---|---|
| グリッドカラム数 | 4 | 8 | 12 | 12 | 12 |
例： 画面の横幅が1024 dpのデバイスと中のブレークポイントでは、12カラムのグリッドが使われます。
小サイズ、4カラム、ハブ
中サイズ、8カラム、ハブ
大サイズ、12カラム、テレビ
ガター
ガターはグリッドのカラム間の間隔を表します。ガターのサイズはデバイスモードの視聴距離によって決まります。遠くからの視聴を想定しているコンテンツの場合は、コンテンツを区切って遠くからでも読みやすくするために、大きなガターが必要です。
| デバイスモード | ガターサイズ |
|---|---|
| ハブ | 32dp |
| TV | 16dp |
例
Hub, Landscape, Large（デバイス、横長、大）
12カラムグリッドに合わせた画像の横並びリスト
Hub, Landscape, Large（デバイス、横長、大）：
12カラムグリッドに合わせた画像の横並びリスト
