管理画面や社内ツールを作っていると、「機能は動くのに、なぜか使いにくい」と言われることがあります。デザイナーが不在のプロジェクトでは、この「なぜか」を解消するのはエンジニアの仕事になりがちです。実は、UIの見た目の8割は少数の原則で説明できます。センスではなく、コードに落とせるルールとして押さえておけば十分に戦えます。
この記事では、余白・視覚的階層・揃え・近接という4つの基礎を、CSSにどう反映するかという視点で整理します。
余白は「8pxグリッド」で機械的に決める
UIが素人っぽく見える最大の原因は、余白の値がバラバラなことです。ある場所は10px、別の場所は13px、と場当たり的に決めていると、画面全体に一貫性がなくなります。対処法はシンプルで、余白を8の倍数（4, 8, 16, 24, 32, 48…）に限定することです。迷ったら選択肢が数個しかないので、判断も速くなります。
CSSカスタムプロパティでスケールを定義しておくと、チーム全体で強制できます。
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
}
.card {
padding: var(--space-3);
margin-bottom: var(--space-4);
}「詰まって見える」と感じたら、まず余白を1段階増やすのが定石です。要素を減らすより先に、余白を疑ってください。
視覚的階層はサイズ・太さ・色の3変数で作る
ユーザーは画面を読むのではなく、まず「眺めて」重要な情報を拾います。このとき視線を誘導するのが視覚的階層です。使える変数は主に3つです。
- サイズ: 重要なものを大きく。ただし段階は3〜4種類まで
- 太さ: 見出しやキー数値はfont-weight 600〜700、本文は400
- 色の濃淡: 主要テキストは濃く、補足は薄いグレーに
ありがちな失敗は、すべてを目立たせようとして全部太字・全部大きい文字にすることです。階層は相対的なものなので、目立たせたい要素以外を控えめにする方が効果的です。「本文をグレーにしたら見出しが立った」というのはよくある改善パターンです。
揃え（アライメント）は見えない線を意識する
要素の左端がわずかにズレているだけで、画面は雑然として見えます。原則は「すべての要素は、画面上のどれかの線に揃っている」状態を作ることです。実装面では、個別のmarginで位置調整するのをやめて、レイアウトを親要素のgridやflexboxに任せるのが近道です。
.form-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--space-2) var(--space-3);
align-items: center;
}ラベル幅を固定してグリッドで並べれば、フォーム全体の揃えが自動的に保証されます。子要素側で位置を微調整し始めたら、レイアウト設計を見直すサインです。
近接の原則：関係の近さを距離で表す
近接の原則とは、「関連する要素は近くに、関連しない要素は遠くに置く」というルールです。たとえばラベルと入力欄の間隔（4〜8px）は、フォーム項目同士の間隔（16〜24px）より必ず狭くします。これが逆転すると、ラベルがどの入力欄のものか一瞬迷うUIになります。
- グループ内の余白 < グループ間の余白、を常に守る
- セクションの区切りは罫線より余白で表現する方がすっきりする
- margin-bottomを要素側に持たせず、親のgapで統一すると崩れにくい
まとめ
UIデザインの基礎は、余白は8pxグリッド、階層はサイズ・太さ・色の3変数、揃えはgrid/flexboxで構造的に、近接は「グループ内＜グループ間」の余白ルール、という形でコードに落とせます。どれも今日のコミットから適用できるものばかりです。センスに頼らず、まずルールで7割の品質を確保する。そこから先の微調整は、必要になったときに考えれば十分です。
