デザインの4原則 04 AI への指示とレビューチェックリスト

更新日:

生成 AI が作る UI は「それっぽいが、全部同じ強さ・同じ間隔」になりがち。4原則で直すと見違える。

AI への指示テンプレート

作る時

[ページ/部品] を作って。デザインは次の4原則に従うこと:
- 近接: 関連する要素は gap-1〜2、グループ間は gap-6 以上で、余白でグループを表現する
- 整列: 基本は左揃え。中央揃えはヒーローの見出しだけ
- 反復: 既存の components/ui の部品とトークン(bg-primary 等)だけを使い、同じ役割は同じ見た目に
- 対比: 1画面で一番伝えたいのは「◯◯」。主要ボタンは1つだけ。補足は text-muted-foreground

直す時

このページを4原則(近接・整列・反復・対比)でレビューして、問題点を原則ごとに箇条書きで挙げて。
その後、スクリーンショットを撮って比較しながら修正して。

目的も伝える(UX)

このページを見た人に最終的に「◯◯」してほしい。そのための優先順位で情報を並べて。

レビューチェックリスト

近接

  • 関連する情報(画像と名前、ラベルと入力)が近くにまとまっている
  • グループ内の間隔 < グループ間の間隔になっている
  • 見出しは下の本文に近い(上の段落から離れている)

整列

  • 左端(または中心線)が揃っている
  • 揃え方が混在していない、長文の中央揃えがない
  • 数値は右揃え・等幅

反復

  • 同じ役割のボタン・見出し・カードは同じ見た目
  • トークン以外の色・任意の余白値(p-[13px])がない
  • アイコンのスタイルが統一されている

対比

  • 一番押してほしいボタンが一目で分かる(1画面1つ)
  • 見出しと本文、主要と補足の差がはっきりしている
  • 強調が多すぎない
  • グレースケール・目を細めて見ても優先順位が分かる

共通

  • スマホ幅でも4原則が保たれている
  • コントラスト比・alt・フォーカス表示

発注者・非デザイナーとしての使い方(元資料の趣旨)

  • 4原則を知っていると、デザイナーや AI への指示が具体的になり、成果物の質が上がる
  • 「なんか見にくい」ではなく「商品名と画像の距離が遠い(近接)」「購入ボタンが目立たない(対比)」と言える

関連

このノートを参照しているノート