レイアウトを理解
原則
- 予測可能な
- 一貫性のあるUI領域と空間構成を備えた、直感的で予測可能なレイアウトを使用します。
- 一貫性のある
- グリッド、キーライン、およびパディングを一貫して使用する必要があります。
- レスポンシブ
- レスポンシブレイアウトは適応性があります。これらは、ユーザー、デバイス、および画面要素からの入力に反応します。
レイアウト構造
大画面レイアウト（PC）には、次の3つの主要な領域があります。
- アプリバー
- ナビゲーション
- 本体（ボディー）
本体領域
本体領域は、アプリのほとんどのコンテンツを表示するために使用されます。通常、リスト、カード、ボタン、画像などのコンポーネントが含まれています。
ナビゲーション領域
ナビゲーション領域には、ナビゲーションドロワーやナビゲーションレールなどのナビゲーションコンポーネントと要素が含まれます。
ナビゲーション領域は、拡張時に256dpの一貫した幅を維持します。折りたたんだときは72dpです。
レイアウトのマージンが48dp未満の場合（たとえば、画面の幅が600dpから839dpの間）、ボディ領域の幅は、ナビゲーション領域に対応するためにサイズを小さくすることができます。
画面幅が600dp未満の場合、モーダルナビゲーションドロワーがナビゲーション領域を埋めることができます。引き出しは体の領域よりも高くなっているように見えます。
構成
視覚的なグループ化
同様のコンテンツまたは機能を持つレイアウト内の要素をグループ化し、オープンスペース、タイポグラフィ、および仕切りを使用して他の要素から分離することができます。
封じ込め
視覚的なグループ化に続いて、次に考慮すべきグループは、画像とそのキャプションまたはサポート情報など、共有コンテキストを介して関連する要素です。これらのコンテキストに関連する要素は、封じ込めの概念を使用してグループ化できます。
1.暗黙的な封じ込め
関連する要素を互いに近づけ、グループの外側のスペース増やすことで、明確な概念上の境界を作成します。
2.明示的な封じ込め
関連する要素のグループにアウトラインまたは標高レベルを追加します。
テキストによるスケーリング
テキストの理想的な行の長さは40〜60文字です。これにより、テキストを含むカードなどの要素をスケーリングするときに読みやすさが維持されます。
アンカーと制約
コンポーネントまたはレイアウトコンテナをスケーリングするときは、それらの位置と配置をどのようにスケーリングするかを検討してください。内部要素は、親コンテナのスケーリングに応じて、左、右、または中央に固定できます。 コンポーネントの内部構成は、コンポーネントが表示されるデバイスの人間工学的ニーズに対応する必要があります。たとえば、モバイルの横向きのカードは、正方形に適しています。
マテリアル測定
マテリアルデザインのレイアウトが視覚的にバランスが取れていることを確認するために、ほとんどの測定値は8dpに揃えられます。 アイコンなどの小さな要素は4dpグリッドに揃えることができます。 タイポグラフィのベースラインは、隣接する線から4dp刻みで間隔が空けられます。
画素密度
密度の独立性
密度の独立性とは、密度の異なる画面にUI要素を均一に表示することです。
密度に依存しないピクセル
dp（「ディップ」と発音）と表記される密度に依存しないピクセルは、どの画面でも均一な寸法になるように拡大縮小する柔軟な単位です。これらは、プラットフォーム間で設計に対応するための柔軟な方法を提供します。
Dpsと画面密度
dpは、密度160の画面上の1つの物理ピクセルに相当します。
dp =（ピクセル単位の幅* 160）/画面密度
スケーラブルピクセル（sp）
フォント用です。spのデフォルト値は、dpのデフォルト値と同じです。
spとdpの主な違いは、spがユーザーのフォント設定を保持することです。
iOSのピクセル密度
iOSは、単位をポイントで測定する論理解像度を使用して密度を決定します。
論理解像度では、ポイントは、デバイスのネイティブ解像度（ピクセル単位）にマップされるネイティブスケール係数を使用してスケーリングされます。 たとえば、iPhone X用に設計する場合、375 x812ポイントの論理解像度用に設計します。
レンダリングされると、要素はグラフィックハードウェアによって処理され、iPhoneXの1125x2436ピクセルの画面に表示されます。
Web上のピクセル密度
デバイスの画面解像度に合わせて調整されるデバイスの論理解像度を使用します。
Web用に設計する場合は、dpをpx（ピクセル用）に置き換えます。
レスポンシブレイアウトグリッド
列、側溝、および余白
レスポンシブレイアウトグリッドは、列、ガター、マージンの3つの要素で構成されています。
◉注意！
ガターを大きくしたり、柱と同じ幅にしたりしない。
列
レスポンシブレイアウトでは、列幅は固定値ではなくパーセンテージで定義されます。
グリッドに表示される列の数は、ブレークポイントの範囲、つまり所定の画面サイズの範囲によって決まります。ブレークポイントは、モバイル、タブレット、またはその他の画面タイプに対応できます。
ガター
ガターは、コンテンツを分離するのに役立つ列間のスペースです。
ガター幅は、各ブレークポイント範囲での固定値です。特定の画面サイズによりよく適応するために、ガター幅をさまざまなブレークポイントで変更できます。
マージン
マージンは、コンテンツと画面の左端および右端の間のスペースです。
マージン幅は、各ブレークポイント範囲で固定値またはスケーリング値を使用して定義されます。画面にうまく適応するために、マージン幅はさまざまなブレークポイントで変更できます。余白を広くすると、コンテンツの周囲により多くの空白が作成されるため、より大きな画面に適しています。
ブレークポイント
間隔の方法
ベースライングリッド
すべてのコンポーネントは、モバイル、タブレット、およびデスクトップ用の8dpの正方形のベースライングリッドに揃えられます。
アイコン、タイプ、およびコンポーネント内の一部の要素は、4dpグリッドに揃えることができます。
間隔
- パディング
- 寸法
- 配置
パディング
パディングとは、UI要素間のスペースを指します。パディングはキーラインの代替間隔方法であり、8dpまたは4dpの増分で測定されます。
寸法
寸法とは、構成要素の幅と高さを指します。
アプリバーやリストなどの一部のコンポーネントは、要素の高さの輪郭のみを示します。これらの要素の高さは、8dpグリッドに揃える必要があります。ビューポートの幅に反応するため、幅は指定されていません。
配置
配置とは、コンポーネント内の要素の配置です。
キーライン
キーラインは、要素を外部に一貫して配置できるようにする位置合わせツールです。
これらは、要素がグリッドに整列していないときに要素が配置される場所を示す垂直線です。キーラインは、画面の端からの各要素の距離によって決定され、8dpの増分で測定されます。
ブレークポイント範囲ごとに調整可能です。
コンテナと比率
コンテナ
コンテナは、囲まれた領域を表すために使用される形状です。コンテナは、画像、アイコン、サーフェスなどのUI要素を保持できます。
元の画像サイズをトリミングするコンテナや元の画像サイズを保持するように拡大縮小するコンテナがあります。
アスペクト比
アスペクト比は、要素の高さに対する幅の比率です。アスペクト比は幅：高さとして記述されます。
UI全体で使用するには、次のアスペクト比をお勧めします。
16：9 3：2 4：3 1：1 3：4 2：3
レスポンシブクロッピング
1つの比率を維持する
画像のサイズ設定では、ブレークポイントの範囲全体で1つの固定比率を保持できます。
さまざまな比率に適応する
画像の比率は、さまざまなブレークポイント範囲に適応することで変更できます。
画像の高さを修正
画像のサイズ変更により、ブレークポイント範囲全体および範囲内で一定の高さと流体幅を維持できます。
タッチターゲット
タッチターゲットは、タッチ入力と非タッチ入力の両方を受け取るすべてのデバイスに適用されます。情報密度と使いやすさのバランスをとるために、タッチターゲットは少なくとも48 x 48 dpで、ターゲット間に少なくとも8dpのスペースが必要です。
注：iOSでは、44 x 44dpが推奨されるタッチターゲットです。
密度の適用
「密度の適用」の注意！
- タスクとアラートベースのコンポーネントは密度を上げない。
- スナックバーやダイアログなど、変更をユーザーに警告するコンポーネントの密度を上げない。
- 密度の高いコンポーネントは、密度のマージンとガターを低くする必要がある。高密度のレイアウトグリッドは使用しない。
- 密度を上げすぎてコンポーネントを壊さない。
- コンポーネント密度を単独で調整しない。
コンポーネントに密度を適用
密度を一貫して適用して、まとまりのあるコンポーネントセットを作成します。1つのコンポーネントの密度を調整するときは、その変更がアプリ内の他のコンポーネントにどのように影響するかを考慮してください。
密度スケール
密度スケールを使用すると、必要に応じて個々のコンポーネントの密度を制御できます。
密度スケールには、コンポーネントのデフォルト密度の0から始まる番号が付けられています。スペースが減少すると、スケールは負の数（-1、-2、-3）に移動し、密度が高くなります。各増分は、コンポーネントの高さが4dps減少することを表します。
