今回はレイアウト一般の話をしてみます。
デザインの原則である近接・整列・反復・コントラストがとくに大事になってくるため、原則編とやや被る内容はありますが、レイアウトを考える上での基本について考えてみます。
余白にビビらない
原則編でもお話しましたね。
余白も重要な要素の一つです。余白があることで、伝えたい情報の無駄が削ぎ落とされ、伝えたい本質の輪郭がより明確にあらわれます。
たとえば下の画像をご覧ください。
なにやらクセが強そうな人々がたくさん並んでいますね。これを見たとき、おそらく「特定の人」よりも「横に並んだ人々」として画像を認識していると思います。
画像で伝えたい情報が「黒い人」だとして、黒い人の周りに余白をとってみましょう。
黒い人だけ存在感が急に出てきましたね。位置関係を変えただけで、黒い人だけ特別な存在のように見えてきます。
この際、余計な人を全部とっぱらってみましょう。
決して要素が大きいわけでもなく、さっきまでいた人に比べて特別クセが強いわけでもありません。しかしこの黒い人の存在感はとてつもないように感じます。
この存在感、つまり黒い人を引き立てているのが余白です。
何がいいたいかと言うと、余白だって立派な要素なんだからビビらなくていいんだよ、というわけです。
余白のルール
余白のとり方にもルールを取ってあげると統一感が出て、全体的に安心感のあるデザインができます。
Web の世界では基本的に、 8の倍数 (px) で余白をとってあげることが多いです。
All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
Material Design
レイアウトは「カタマリ」を意識しよう
原則編でも軽くお伝えしましたが、レイアウトの基本は「役割の似たものをカタマリとみる」ことです。
このカタマリを見えない箱として捉えて、見えない箱を組合せてレイアウトをしていくといい感じに決まります。
画像のアスペクト比
画像のアスペクト比（縦横比）についても、Material Design では推奨されているアスペクト比があります。次の画像のように 16:9 , 3:2, 4:3, 1:1, 3:4, 2:3 です。
影の使い方
最後に影の使い方についてです。 CSS では box-shadow というプロパティを使って影を適用させてあげます。
影の使い方については、原則を Material Design の Elevation に則ってルールを決めてあげるといい感じに決まります。
Material Design は原則的に物理法則のメタファなので、迷ったら実際に紙を用意して自然な影の写り方を考え再現するとよいです。
影はつけすぎると重くなるので、最低限使う必要がある箇所に適用してあげると良いです。