[Material Design Guidelines]レイアウトの3つの原則を独自にまとめてみた。

2022年3月27日 22:32

Material Design Guidelinesの下記の記事では、コンポーネントごとにレイアウトを解説していました。しかし今回のnoteは、該当の記事と少し構成を変えて、該当の記事に記載していたレイアウトに関する3つの原則がどういうことかという視点でまとめてみました。

では本題に入って、ガイドラインでは以下の3つが原則と定義されています。

＜原則＞
1：レスポンシブであること
2：一貫性があること
3：予測可能であること
※ガイドラインとは意図的に順番を変更

以降ではではレイアウトの3原則がそれぞれどういうことかを記事を参考にしながら自分なりにまとめてみました。

1. レスポンシブについて

参照：https://material.io/design/layout/understanding-layout.html

例
①アプリバー
②ナビゲーション
③body

各画面幅のブレークポイント一覧。下記に合わせてレスポンシブ対応行うことがレイアウトの3つの原則のうちの1つ。

参照：https://material.io/design/layout/understanding-layout.html

マージンとは、下記の図の32dpのところにあたる。

参照：https://material.io/design/layout/understanding-layout.html

参照：https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

上記図1の「体液」とはFluidの訳で、つまり他の要素によって可変的に決まる部分。

bodyのFluid= (画面サイズ-広義のマージン*(カラム数+1))/カラム数

↓だったら、(600-32*9)/8=39pxが幅になる。

参照：https://material.io/design/layout/understanding-layout.html

画面幅が600dp未満の場合、ナビゲーションは、モーダルナビゲーションドロワーで表示する。
※このときbodyよりも奥行きが手前（上）にあること

参照：https://material.io/design/layout/understanding-layout.html

＜レスポンシブについてのまとめ＞
グリッドレイアウトで、画面幅に応じて幅を決め、各ブレークポイントによってデザインする。例えば画面幅が小さければモーダル等で出現させ、奥行きを考慮してレイアウトする。

1のレスポンシブのように、グリッドやマージン等で（つまりグリッドレイアウトで）一貫して、レイアウトすること。

まず、記事では「予測可能であること」を次のように説明。

> 一貫性のあるUI領域と空間構成を備えた、直感的で予測可能なレイアウトを使用します。

以後では、"直感的で予測可能なレイアウト"に注目して意見をまとめる。"直感的で予測可能なレイアウト"とは大きく2つの特徴から構成されています。

1.関連する要素を互いに近づけてグループ化
下記のように同じグループの要素を、同じように見えるためにグループ化する。これはデザイン4原則の俗にいう「近接・Proximity」にあたる。

参照：https://material.io/design/layout/understanding-layout.html#composition

また参考までに間隔値としては、アイコンなどの小さな要素は4px、コンポーネントは8px刻みでレイアウトを組むことがガイドラインでは推奨されている。

2.アウトラインまたは標高レベルを追加
先述のレスポンシブのブレークポイントでのナビゲーションバーの取り扱いで説明したように、パーツに応じて、ぼかしをつけて奥行きを考慮する。それが直感的で予測可能なレイアウトのうちの1つにあたる。

参照：https://material.io/design/layout/understanding-layout.html

以上、Material Design Guidelinesの「レイアウトを理解する」の記事のレイアウトに関する3つの原則がどういうことかを個人的な見解をまとめてみました。