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

デザインハーネスの縛りは段階で変える:発想段階はゆるく、作り込みで厳しく(DSと設計思想だけは最初から)

いちばん効いたのは「いいデザインの作り方」ではなく「勝手にやらせない」制約だった、という実践記録。

@kgsi · 2026-11-10
#AI×デザイン#デザインハーネス#デザインシステム#制約#プロンプト#レビュー

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

AIの画面案は何パターン出ても、情報の強弱・グルーピング・視線の流れが同じで「整っているのに設計されていない」。一方でルールを細かくしすぎると、思いつかなかった見せ方が出なくなる。両方を避けるための締め具合の決め方。

関連: デザインハーネスは4段階で育てる:作れる→意図どおり→他職種→記録で改善、ガイド:AIエージェントに守らせるデザインシステム・DESIGN.md

やり方

  1. 渡す情報を抽象から具体まで言語化する:デザインシステム、デザインの制約、設計思想、ユーザー像、アクセシビリティ(なぜ・何を・誰に・どう届けるか)。
  2. 「勝手にやらせない」制約を書く。例:
    • デザインシステムで定義したコンポーネント以外は極力使わない。新しく必要なものは必ず確認する。
    • デザインに関することで、指示した以外のことはやらない。
  3. 段階で締め具合を変える(上に行くほど厳しいピラミッドのイメージ):
    • 発想段階:なぜ・何を・誰に、程度だけ渡して数を出させ、案を広げる。
    • 作り込み段階:ルールを厳しくする。
    • ただしデザインシステムと設計思想は最初から渡す(ここがぶれると別のプロダクトに見える)。
  4. 基準を自分で決めた部分(UX・UI)は、出てきたものを見ればずれが分かる。決めていない部分はレビューしても分からないので、確認したい範囲は先に基準を書いておく。

注意点

  • プロンプトの差や「これでいこう」と判断するラインは人・職種で違い、ハーネスには書ききれない。チームで使うと品質に差が出る。
  • 締めすぎると発想が出なくなる。どの段階でどこまで決めるかも設計対象。

出典

  • @kgsi の紹介 @kgsi · 2026-11-09
  • 記事:Fugo「デザインハーネスを組んだら、AIのデザインが変わった」 note.com
X の元の投稿を開く