基本原則
近接・整列・反復・対比。どんな画面もこの4つの上に成り立つ。トークン(配色・形・余白・文字)はこの原則を実現するための道具で、迷ったときは必ずここに戻る。
近接 — 関係の近さは距離で表す
関連する情報は近くに、無関係な情報は遠くに置く。区切り線で分ける前に、まず余白の差でグループを作る。
フロントエンドエンジニア株式会社サンプル
那覇市正社員月給 25万円
職種名と会社名は gap-0.5 でひとつの塊、メタ情報同士は gap-2、塊と塊の間は gap-4。アイコンとラベルも gap-0.5 で「1語」として読める。区切り線は1本も使っていない。
整列 — 見えない線を1本に
テキストとフォームは左端の1本の線に揃える。中央揃えは空状態や完了画面などの独立した場面だけ。表の数値は右揃えで桁を比べられるようにする。
ラベル・入力欄・ボタンが左端の同じ線から始まる。ラベルを入力欄の左に置く2カラム配置は、揃える線が増えるモバイルでは使わない。
反復 — 同じ役割は同じ形
同じ種類の情報は同じ構造・同じ余白・同じ書式で繰り返す。1件目で覚えた読み方が全件に効くようにする。
調理スタッフ
那覇市 / 正社員
NEW
営業・企画営業
浦添市 / 正社員
NEW
Web デザイナー
沖縄市 / 契約社員
NEW
3件とも同じ Item コンポーネント(メディア → 内容 → バッジ)の繰り返し。構造を1件ごとに工夫しない。
対比 — 重要度の差をはっきりつける
主役と脇役を曖昧にしない。サイズ・ウェイト・色の3つで差をつけ、迷ったら差を大きくする方に倒す。
月給 25万円〜賞与年2回 / 昇給あり / 残業月10時間以下
主情報は text-2xl の太字、補足は text-xs の muted。ボタンも primary と ghost で重みが対になる。中間の強さを増やすと対比は消える。