エンジニア向けの余白の基礎 / Spacing

Webサイト、アプリ、資料などの品質を上げたいと思っているかたに向けた、余白（スペーシング）の基礎についての資料です。 関連記事：8の倍数ルールでデザインする理由とメリット・デメリット https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/ 以下、2020年8月24日に追記しました。 この資料を見ていただいた方、コメントをくださった方、ありがとうございます。「目がチカチカする」、「なぜ正方形の余白だと整った印象になるのか？」などのアドバイスや質問をいただけました。いただいたアドバイスを元に以下の点をアップデートしました。 - 資料全体のコントラストを下げました。以前より目の負担が軽減されるように背景色を調整しました。 - 余白の大きさ指定に正方形を使う理由を追記しました。余白の大きさを指定する際に正方形の余白を使

[SUZUSHIRO]

目がチカチカするスライドだな

[threeMonths]

具体的でわかりやすい

[chiroruxx]

全然わからん。なんで正方形の余白だと整った印象になるの？なんで正方形じゃない場合は不安定な印象になるの？これだけだとただコンテンツの位置が移動しただけにしか見えないよ。

[ouest]

余白大切

[hokorobi]

良さげ

[mallowlabs]

余白に関する具体的なテクニックが満載でわかりやすい

[repon]

具体的だ

[fa11enprince]

よくない例とよい例が客観的に本当に良くない例なのか判断がつかない。よい例は無駄な空白が入ってるように見えてまとまりの単位がわからんって意見はないのだろうか？

[yarumato]

“デザインでは余白は残りでなく、意図的。情報を見つけやすく（脳に易しく）する。余白の作りかた：正方形の幅で統一する。その幅は要素（文字）幅が最小幅。ボタンのpaddingは縦に1.25倍。横に2-3倍”

[mitaro]

やっぱりこういうデザインはプロの仕事だと思うのよ（フロント寄りのこともするけどUIデザイン苦手マンなのでプロを呼べないならなんかのフレームワークに乗っかりたいマン）/あとエンジニアとは（といういつものアレ

[tohokuaiki]

へー。正方形ってのと、1.25ってのはなかなかすぐ使える。

[s2kw]

最近画面デザインの本を２冊読んで「余白の形をデザインすれば良い」と解釈した直後なのでと、より深くポイントを理解できた。ありがたい。

[njgj]

ほー。

[longroof]

背景の白が白すぎて初老には辛い(´；ω；｀)… #余白

[treby006]

なるほど

[ardarim]

デザインあっぽい

[yogasa]

余白がありすぎる……

[door-s-dev]

何か基準を持っておくのは良さそう。リンクされているブログのデザインは、個人的には文字間の余白がありすぎて間延びしているように感じた

[heavenward]

エンジニア向けというだけあって具体的な方法論で良い