下記をお勉強させていただいた。
人間の脳は複雑な情報よりも単純化された情報を処理しやすい。
余白は情報を整理するための空間であり、結果的にすっきりと整理された情報はわかりやすく、印象がよくなる。という寸法だ。
余白を正方形で統一する
![](https://isaxxx.com/wp-content/uploads/2021/02/75f12b3f9bb8decd5ccc5799b7c3bb9a-1024x567.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/cb43a2f1796811e58a8d24b20874a695-1024x564.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/a693cec3c3241614608c1757679f91ae-1024x558.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/e468e860f582270f5f986cdee9bb9d98-1024x563.png)
正方形は縦横の幅が同じであるため、余白の統一感ができる。
形状が統一された状態を人間の脳は安定していると解釈するため、整理されていると錯覚させる効果がある。
![](https://isaxxx.com/wp-content/uploads/2021/02/aaa0d267b55918b52986d32aa7414951-1024x552.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/02d48fa597b10dfa7a87f85bcfd144f9-1024x543.png)
余白の大きさは要素の短辺以上を基本とする
![](https://isaxxx.com/wp-content/uploads/2021/02/ca8be7938b98cdd29a91f23dd24fca95-1024x560.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/36b50ba109d78738d2594e4bf00ba52a-1024x545.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/5a53a30708bd38583b7b84e131ab519c-1024x558.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/26b1b3e7dfd14928cf30c642f1819579-1024x554.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/c24633803025c46bd5a049631a30c886-1024x553.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/cd0591437e947ce5f1007ef580581aea-1024x566.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/237fce8a2c5664a7f0b1d489aba42da9-1024x552.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/9c153c44fee024d8be2eaa41afdebbc7-1024x546.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/14bb1142d8cfca1a3f4717f4631a2d00-1024x547.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/6f61d02e53c2c3e3359f078483068822-1024x557.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/e495cc636ce76155b3c1e00bcbee4226-1024x566.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/ccb35f8c29b918ba372a63e003349a90-1024x557.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/447530b334f2390bdeb8916d8b45e1b9-1024x557.png)
要素と要素の関係性の強さで決める
![](https://isaxxx.com/wp-content/uploads/2021/02/2b2e57e5e35aadedfbe45f9f4276d54d-1024x557.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/532baf844d221e034145dcf5a7301522-1024x544.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/396518ebab05651a2d0adfc8f7643299-1024x550.png)
![](https://isaxxx.com/wp-content/uploads/2021/02/3082cc92eb062fb8316e0e9fcc3c9128-1024x550.png)
より簡単に考えるのであれば、要素の2倍程度の大きな余白を取ってみて、詳細に設計するみたいな感じでもいい。
あまり深く考えすぎると進まず、よい感情を持つデザインにもならない。