配色と文字の最小ルールで画面を整える
機能は動いているのに、画面がなんとなく素人っぽく見える。個人開発でよくある悩みですが、原因の多くはセンスではなく、ルールが決まっていないことにあります。色が画面ごとに増え、文字サイズがばらつき、余白が場所によって違う。それだけで画面は雑然と見えます。
この記事では、デザイナーがいなくても画面を整えられる、配色・文字・余白の最小ルールを決めます。凝った装飾は不要です。決めて、守るだけで効きます。
原則：選択肢を先に減らす
整った画面の共通点は、使われている色・文字サイズ・余白の種類が少ないことです。毎回その場で選ぶのをやめ、最初に選択肢を固定します。
色は役割ごとに決めて、合計を絞る
文字サイズは数段階だけ用意する
余白は決まった刻みだけを使う
以降は、この3つを順に決めていきます。
色は4つの役割で決める
色をたくさん選ぶ必要はありません。役割で4つだけ決めます。
背景色：白または白に近い色。まずは1色で十分です
文字色：真っ黒ではなく、背景と十分な差のある濃い色
主要色：ボタンやリンクなど「押せるもの」に使う色。1色に絞ります
注意色：エラーや削除など、注意を引く場面だけの色
守るルールは2つです。第一に、主要色を飾りに使わない。押せるものだけに使うことで、色自体が操作の手がかりになります。第二に、文字と背景のコントラストを確保する。WCAG（Webアクセシビリティの標準）では、通常サイズの文字と背景に4.5対1以上のコントラスト比が求められています。コントラスト比は無料のオンラインチェッカーで数値を確認できるので、感覚ではなく数値で決めます。
薄いグレーの文字は洗練されて見えますが、読めなければ意味がありません。迷ったら濃くします。
文字はサイズ3段階と太さ2種類
文字の種類が多いほど画面はうるさくなります。最初は次で足ります。
本文：16pxを基準にする。スマホで読むことを考えると、これより小さくしない
見出し：本文よりはっきり大きく（たとえば1.5倍）。ページに1つの大見出しと、必要ならセクション見出し
補足：日付や注釈など。本文よりわずかに小さく、色をやや薄く
太さは「普通」と「太字」の2種類だけ。斜体や装飾フォントは使いません。フォント自体も、OS標準のシステムフォントから始めれば読みやすさは十分確保できます。行間は本文で1.5〜1.8程度にすると、詰まった印象が消えます。
余白は8の倍数だけ使う
余白のばらつきは、雑然と見える最大の原因です。ルールは1つ、8pxの倍数だけを使う（8、16、24、32…）。
関係が近い要素の間は小さく（8〜16px）、遠い要素の間は大きく（24〜32px）
同じ役割の場所には同じ余白を使う。カードの内側は全部16px、セクションの間は全部32px、のように統一する
迷ったら広めにとる。窮屈さは安っぽく見え、余白は高く見えます
「近いものは関係が深く見え、離れているものは別のグループに見える」。これだけで、線や枠で区切らなくても画面は整理されて見えます。
決めたルールを1枚のメモにする
決めた色・文字・余白を、コードとは別に1枚のメモにします。
背景色、文字色、主要色、注意色の値
本文・見出し・補足のサイズと太さ
使ってよい余白の刻み
新しい画面を作るときはこのメモから選ぶだけにして、メモにない値を使いたくなったら、その場しのぎで増やさずメモ側を更新します。CSSではこれらを変数として定義しておくと、あとからの調整が一箇所で済みます。
次に読む記事
画面の構成そのものは小さなプロダクトの画面を迷わず設計するで決めます。整えた画面をスマホでも成立させる方法はスマホ対応をレスポンシブの基本から始める、誰にとっても使える状態にする確認はアクセシビリティを最初の一歩から始めるへ進んでください。