TH01-03
デザイン初心者の方が陥りやすい落とし穴があります。
それは、すべての要素の間隔を「20px」や「30px」といった同じ数値で揃えてしまうことです 。
一見、きれいに整っているように見えますが、実はこれが情報の伝達を妨げることになってしまっています 。
目次
なぜ「均等な余白」がいけないのか
すべてが同じ距離で並んでいると、人間の脳は「どこが情報の区切りなのか」を瞬時に判断できなくなります 。
- 均等な配置： すべてがバラバラ、あるいはすべてがひとつの巨大な塊に見える 。
- 強弱のある配置： 視線が動いた瞬間に「これはタイトル、これは本文、ここからが次の話題」と構造が頭に入る 。
余白に強弱がないデザインは、句読点のない文章を読まされているのと同じストレスをユーザーに与えてしまうのです。
マージンを「3段階」でルール化する
実務で迷わないためには、余白を「感覚」ではなく「ロジックに基づく3つの役割」で使い分ける必要があります 。
スクロールできます
| 余白の種類 | 役割 | 具体的な対象 |
| 小（要素内） | セットとして認識させる | 見出しと本文、アイコンとラベル |
| 中（要素間） | 繰り返しの区切り | 記事カード同士、リスト項目同士 |
| 大（セクション間） | 話題の切り替え | サービス紹介から価格表への遷移など |
ロジックを数値化する「8pxグリッド」の推奨
「小・中・大」を何ピクセルにするか迷ったときは、8pxの倍数で設計することをおすすめします 。
- 小：8px（密接な関係）
- 中：24px（明確な区切り）
- 大：64px（コンテンツの大きな転換）
このように「大は小の数倍」という明確な比率を持たせることで、画面全体に論理的なリズム（反復）が生まれます 。
余白は「数値」で管理
「なんとなく空いているスペース」をなくし、すべての余白に「情報の親子関係を示す」という役割を持たせましょう 。
20pxの均等な余白を捨て、8pxと32pxを使い分ける。
それだけで、デザインから「素人臭さ」を消すことができます。