デザインの4原則

近づける、揃える、繰り返す、差をつける。整って見える画面は、この4つの操作でできています。

図を大きく見る

図の中身を文字で読む

• 近接　間隔の差でグループを作る　整列　見えない線でつなぐ
• ✕ 全部おなじ間隔　○ 詰める／離す　✕ 端がばらばら　○ 左端を1本に
• 反復　同じ役割は同じ扱い　対比　差は思い切ってつける
• ✕ 扱いがページごとに違う　○ 形と色を固定　✕ 1.2倍だと事故に見える　○ 2.5倍以上

ひと目で#

近接

関係のあるものは寄せ、ないものは離す。線も枠も要らない。距離だけで組が見える

整列

すべての端を、見えない1本の線に揃える。離れた要素どうしがつながる

反復

同じ役割には同じ見た目。ページをまたいでも同じサイトに見える

対比

差をつけるなら思い切って。中途半端な差は、揃え損ねに見える

4つは独立していません。近接で組を作り、整列で組どうしをつなぎ、反復で全体を1つにし、対比で読む順序を与えます。手を入れる順もこの順です。

使い分け#

複数が疑わしいときは、近接から順に手を入れます。組がないうちは揃える線が決まらず、揃っていないうちは差が事故に見えるからです。

図を大きく見る

図の中身を文字で読む

• 1 近接　2 整列　3 反復　4 対比
• 距離で組を作る　端を1本の線に乗せる　同じ役割は同じ見た目に　主役にだけ差をつける
• 強調は1つだけ
• 前の操作が次の操作の土台になる。組がないうちは揃える線が決まらず、揃っていないうちは差が事故に見える。

間違えやすいところ#

• ✕近接とは余白を広げること広げるのではなく、差をつけること。組の中はむしろ詰める
• ✕8の倍数で揃えたから全部16px値は揃っても近接が死ぬ。刻みは候補の集まりで、同じ値を使う理由ではない
• ✕中央揃えにしたから整列した中央揃えは行ごとに端が動く。基準になる線が生まれない
• ✕章ごとにアクセント色を変えたその瞬間に反復が切れる。別のサイトに見える

図を大きく見る

図の中身を文字で読む

• ✕ 中央揃え　○ 左揃え
• 行ごとに端が動き、基準の線が生まれない　すべての行が同じ線から始まり、離れた要素もつながる
• 中央揃えは短い見出しにだけ使う。行が増えるほど端の揺れが大きくなり、揃え損ねに見えてくる。

前後を見比べる#

料金と説明が並ぶ小さなレイアウトを1つ用意し、直す前と直した後を同じ場所で切り替えられるようにしました。使ったのは4つの操作だけです。

実装#

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

ピアノ教室の体験レッスン案内です。日時・場所・料金・申し込み方法の4項目が、どれも同じ余白・同じ太さで縦に流れ、ラベルは中央揃え、締切だけ赤字にした結果「全部目立って全部沈む」状態になっています。

手を入れる順は決まっています。まず近接。ラベルと値を --space-2 まで寄せ、項目どうしを --space-8 に離すと、4つの組が線を引かずに見えてきます。次に整列。中央揃えをやめ、ラベルも値も左端の1本に乗せます。反復では4つのラベルを同じ見た目に揃え、最後の対比で、申し込み締切の1か所だけを残して赤字を外します。装飾を足した工程は1つもありません。距離と位置を直しただけです。

確認する#

• 組の中の余白より、組と組の余白のほうがはっきり広い
• 離れた見出しどうしの左端が、定規を当てた1本の線に乗る
• 強調が1画面に1つで、2つ目の主役がいない

使えるパターン#

• 縦スタック
• 料金プランの比較カード

このページで扱う語#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は並べる・揃えるにまとめてある。逆引きには全188件。

出典#

• Robin Williams『ノンデザイナーズ・デザインブック』
• Laws of UX「Law of Proximity」

関連#

• ゲシュタルト近接や類似が効く仕組み
• 視覚階層対比で読む順序を作る
• 余白近接を数値に落とす
• グリッド整列を仕組みで保証する