テック技報最新号へ →
デザイン

AIのデザインを「それっぽい」から「納得できる」へ：5つの納得と、デザインハーネスの4ステップ

良さを「コンセプト・コンテキスト・言葉・レイアウト・色」の5点で言葉にし、制約→参照→スクショ確認→修正の仕組みでAIに再現させる。

@kgsi · 2026-10-13
#AIデザイン#デザインハーネス#レビュー#デザインの基準#ClaudeCode

どんな問題を解決するか / いつ使うか

AIで作ったUIやLPが「パッと見は良いが、触ると違和感がある」状態で止まるとき。何回直せば良いのか、何を基準に直すのかが曖昧なとき。こぎそ（@kgsi）さんの登壇資料「このスロップ時代に良きデザインをつくるには？」の要点。

やり方

  1. 「それっぽい」と「納得できる」を区別する。 前者はパッと見良いが何か違う／触ると違和感がある。後者は何度も直してたどり着く。AIの初稿は前者だと考え、直す前提で進める。
  2. 5つの「納得」でチェックする。
    • コンセプト：ブレないコンセプトを決め、それに沿ったサービス・画面にする
    • コンテキスト：誰が、どのように使い、どの順番で操作・読むかを考える
    • 言葉：案内やメッセージを、人に伝わる言葉にする
    • レイアウト：視覚的なリズムを作り、ルールを持って一定に保つ
    • 色：意図を正しく伝え、錯覚させない
  3. デザインハーネスで量産と安定を仕組みにする。
  4. 役割を分ける。 ハーネスは「すでにある良さ」を再現するもの。新しい良さを定義するのは人の役割なので、良し悪しを判断する「眼」を育てる（基礎を学ぶ／良いデザインを眺める／使う場面を想定してテストする／たくさん作って壊す）。
  5. 見る・渡す参照先の例（資料で紹介）：デジタル庁デザインシステム、inspora.design、typeui.sh の design-skills、bestdesignsonx.com、Pinterest、cosmos.so。

注意点

  • ハーネスは「答えを知っている前提」で効く。参照もルールもない状態では、AIは平均的な見た目に寄る。
  • 5つの納得はチェックリストとして、レビュー用プロンプトや自己採点の観点に入れると使いやすい。
  • 登壇の質疑では「違和感のないデザインまでは基礎と仕組みでかなり作れる。最後に何を良しとするかの判断がセンスで、それも作って直した回数で育つ」と補足されている。

出典

X の元の投稿を開く