AIが即座にUIを作れる時代、デザイナーに求められる「3つの判断力」

はじめに — 「作れる」と「作るべき」は違う

Cursor、v0、Bolt、Lovable。AIプロトタイピングツールが次々と登場し、自然言語で指示するだけで動くUIが数分で生成される時代になった。

個人開発者にとって、これは革命的な変化だ。デザインからコードへの変換コストがほぼゼロになり、アイデアを即座に形にできる。しかし、この「即時具体化」の力は、新たな問いを突きつけている。

即時具体化できるからこそ、「何を具体化するか」の勘所と、評価が重要になる。

これは単なる思いつきではない。NN/g（Nielsen Norman Group）の実証研究、学術論文、UX実務家のフレームワークなど、複数の文献が同じ結論に収束している。本記事では6つの文献を横断し、AI時代のデザインプロセスを再設計するフレームワークを提案する。

---

問題提起 — AI生成UIの「3つの罠」

AIツールでプロトタイプを作ること自体は簡単になった。問題は、その簡単さが引き起こす3つの罠だ。

罠1: 「何でも作れる」が判断を鈍らせる

プロンプトを書けば即座にUIが出てくる。だから「とりあえず作ってみよう」が癖になる。しかし、目的なく作られたプロトタイプは検証にも探索にも使えない中途半端なものになりがちだ。

罠2: きれいなUIが構造的問題を隠す

心理学で「審美的ユーザビリティ効果（Aesthetic-Usability Effect）」と呼ばれる認知バイアスがある。Tractinsky et al.（2000）の研究が示したのは、見た目が美しいインターフェースは、実際のユーザビリティが低くても高く評価されてしまうという事実だ。

AI生成のプロトタイプは、見た目はプロフェッショナルだ。色使い、余白、タイポグラフィ——表面的な品質は高い。だからこそ、情報構造の破綻やナビゲーションの矛盾といった本質的な問題が見えにくくなる。

罠3: ユースケースが増えると破綻する

AIは「1画面」を作るのは得意だが、ユースケースが増えて画面間の関係性が複雑になると途端に破綻する。ユースケースベースで画面を足していくと、似た機能が散在し、データモデルとUIの整合が取れなくなる。

---

文献が示す解決策 — 6つの知見

これらの罠に対して、実務家と研究者はすでに答えを出し始めている。6つの文献から得られた知見を紹介する。

知見1: 「詳細なプロンプト」が品質を決める — NN/g実証研究

📄 NN/g「Good from Afar, But Far from Good: AI Prototyping in Real Design Contexts」（2025年10月） https://www.nngroup.com/articles/ai-prototyping/

Nielsen Norman Groupが実際のプロジェクト（NN/gのプロフィールページ再設計）を題材に、複数のAIプロトタイピングツールを評価した実証研究。

3段階のプロンプト詳細度で比較した結果：

プロンプト	内容	結果
Prompt 1（曖昧）	大まかな目的と文脈のみ	出力がバラつき、品質も低い
Prompt 2（詳細）	コンポーネント、デザイン言語、インタラクション状態を明示	人間のデザインに近い出力
Prompt 3（視覚素材付き）	スケッチやデザインモックアップを添付	最も高品質だが、準備コストも高い

核心的な発見: AIプロトタイピングツールは「大まかな方向」は正しいが、デザイントレードオフの判断ができない。つまり、「ここは情報密度を下げてでも分かりやすさを優先する」「このボタンは目立たせるが、あのボタンは控えめにする」といった優先順位の判断は、人間が事前に行う必要がある。

タイトルの「Good from Afar, But Far from Good（遠くから見るといいが、近づくとダメ）」が全てを物語っている。

知見2: 「意図の明示」がVibe Codingの罠を防ぐ — Intent Prototyping

📄 Yegor Gilyov「Intent Prototyping: A Practical Guide to Building with Clarity」Smashing Magazine（2025年10月） https://www.smashingmagazine.com/2025/10/intent-prototyping-practical-guide-building-clarity/

UXデザイナーのYegor Gilyovが提唱する「Intent Prototyping」は、AIに指示を出す前に設計意図を3つの形式で明示する手法だ。

1. スケッチ — 画面レイアウトの骨格（Excalidrawなどでラフに）
2. コンセプチュアルモデル — 情報構造とオブジェクト間の関係
3. フロー図 — ユーザーの導線とステップ

この3点セットをAIに渡すことで、「何を作りたいか」の解像度が格段に上がる。Gilyovはこれを「Vibe Codingの罠」への解毒剤と位置づけている。

Vibe Codingの問題は「AIが悪い」ことではない。意図が曖昧なまま作り始めることだ。

特に重要なのは「コンセプチュアルモデル」の部分で、これは後述するOOUI/OOUXの考え方と直結する。

知見3: 画面の前にオブジェクトを設計する — OOUX

📄 Sophia Prater「OOUX: A Foundation for Interaction Design」A List Apart https://alistapart.com/article/ooux-a-foundation-for-interaction-design/ 📄 OOUX公式 https://ooux.com/

Sophia Praterが体系化した**OOUX（Object-Oriented UX）**は、画面設計の前にシステムの「オブジェクト」を定義するアプローチだ。日本では上野学氏の著書『オブジェクト指向UIデザイン』で知られる「OOUI」と同じ思想的系譜にある。

OOUXのORCAプロセス：

ステップ	内容	例（タスク管理アプリ）
Objects	システムの核となるオブジェクトを特定	プロジェクト、タスク、メンバー
Relationships	オブジェクト間の関係を定義	プロジェクトはタスクを持つ、タスクにメンバーをアサイン
CTAs	各オブジェクトに対するアクションを定義	タスクを作成、完了、削除
Attributes	各オブジェクトの属性を定義	タスク名、期限、ステータス

なぜAI時代にOOUXが重要か：

ユースケースベースで画面を足していく設計（「タスク一覧画面」「タスク作成画面」「メンバー管理画面」……）は、ユースケースが増えると画面が増殖し、似た機能が散在する。AIにプロンプトで指示するときも、「この画面を作って」と画面単位で依頼すると、画面間の整合性が取れなくなる。

オブジェクトモデルを先に設計すれば、AIへの指示も「プロジェクトオブジェクトの一覧・詳細・編集ビューを生成して」と構造的になる。結果として、ユースケースが増えても破綻しない。

知見4: 効率と内省の緊張関係 — 学術論文

📄 Hancheng Cao et al.「Vibe Coding for Product Design」arXiv:2509.10652（2025年9月、2026年2月改訂） https://arxiv.org/abs/2509.10652

22人のプロダクトチームメンバーへのインタビューに基づく質的研究。Vibe Codingのワークフローを4段階に整理した上で、重要な緊張関係を発見している。

Vibe Codingの4段階ワークフロー：

1. アイデア出し（Ideation）— 自然言語で構想を練る
2. 生成（Generation）— AIがコード/UIを生成
3. デバッグ（Debugging）— 問題の修正
4. レビュー（Review）— 品質の評価

核心的な発見 — 2つの方向性の衝突：

方向性	意味	リスク
「正しいデザインを意図する」 （intending the right design）	効率重視。素早く形にして検証する	構造的な問題を見落とす
「正しい意図をデザインする」 （designing the right intention）	内省重視。何を作るべきかを深く考える	速度が落ちる

この論文は、AI時代のデザインが「速く作れること」と「深く考えること」のバランスを常に要求することを実証的に示した。さらに、deskilling（スキル退化）、所有感の喪失、創造性の保護といったリスクも報告されている。

知見5: 並列プロトタイピングの力 — AI-in-the-Loop UCD

📄 Purdue大学「AI-in-the-Loop UCD」arXiv（2025年7月） https://arxiv.org/abs/2507.21012

交通データ分析インターフェースの設計を題材にした実証研究。AIをユーザー中心設計（UCD）のループに組み込んだ場合の効果を検証している。

主な知見：

• AIで複数のバリエーションを同時生成（並列プロトタイピング）→ ユーザー評価の質が向上
• ドメイン専門家とのリアルタイム共同セッションでAIプロトタイプを生成・修正 → 暗黙知の引き出しに有効
• 動くプロトタイプでコミュニケーション齟齬を減らす

この研究が示すのは、プロトタイプの価値は「完成品に近づけること」だけではないということだ。ユースケースの解像度を上げるための道具としても機能する。曖昧な要件を「見て触れる形」にすることで、ステークホルダーから「これは違う」「こういうケースもある」というフィードバックを引き出せる。

知見6: 美しさが判断を歪める — 審美的ユーザビリティ効果

📄 Tractinsky, N., Katz, A. S., & Ikar, D. (2000)「What is beautiful is usable」Interacting with Computers 📄 参考: https://en.wikipedia.org/wiki/Aesthetic%E2%80%93usability_effect

1990年代から蓄積されてきた認知心理学の知見。見た目が美しいUIは、ユーザビリティの問題があっても許容されやすく、問題が発見されにくい。

AI生成のプロトタイプにこの効果が特に危険な理由：

• AIは「見た目の品質」を高水準で出せる（トレーニングデータが洗練されたUIだから）
• 結果として、情報設計の破綻やナビゲーションの矛盾が見えにくくなる
• 評価者が「なんとなく良さそう」で通してしまうリスクが高い

---

フレームワーク — AI即時具体化の3ステップ

6つの文献から得られた知見を統合すると、以下のフレームワークが浮かび上がる。

Step 1: 意図の明示（何を具体化するか）

対応する知見: NN/g実証研究、Intent Prototyping、OOUX

AIにプロンプトを書く前に、3つの要素を整理する：

要素	問い	ツール・手法
オブジェクトモデル	システムの「もの」は何か？関係は？	OOUXのORCAプロセス
検証したい仮説	このプロトタイプで何を確かめたいか？	Intent Prototypingの3点セット
ユーザーの文脈	誰が、どんな状況で、何を達成したいか？	ペルソナ、ジョブ理論

重要なポイント: オブジェクトモデルを先に設計することで、AIへの指示が「画面単位」から「構造単位」に変わる。これがユースケース増加時の破綻を防ぐ。

Step 2: 目的を持った生成（プロトタイプの二重目的）

対応する知見: NN/g実証研究、AI-in-the-Loop UCD

プロトタイプには2つの目的がある。目的によってAIへの指示の仕方が変わる：

目的	プロンプトの特徴	期待する出力
探索 — ユースケースの解像度を上げる	曖昧・広い指示	多様なバリエーション
検証 — 構造の妥当性を確かめる	詳細・具体的な指示	構造的に正確な1案

探索フェーズでは、あえて曖昧なプロンプトで複数のバリエーションを同時生成（並列プロトタイピング）し、ステークホルダーからフィードバックを引き出す。検証フェーズでは、OOUXで設計したオブジェクトモデルに基づく詳細なプロンプトで、構造的な妥当性を確認する。

Step 3: 多層的な評価（惑わされない目、活かす直感）

対応する知見: 審美的ユーザビリティ効果、Vibe Coding論文

AI生成のプロトタイプを評価するときは、3つのレンズを使い分ける：

レンズ	見るもの	注意点
焦点的評価	事前に決めた評価軸（例: 初回ユーザーが3ステップ以内に目的を達成できるか）	評価軸を事前に決めておかないと、「なんとなく良い」で終わる
全体的評価	違和感、意外な発想、「何か引っかかる」感覚	言語化できない直感も重要なシグナル
構造的評価	UI表現を超えた情報設計の妥当性（オブジェクト間の整合、データフロー）	見た目に惑わされず、lo-fi版でも確認する

焦点的評価と全体的評価のバランスが重要だ。目的に絞りすぎると想定外の発見を見逃し、開きすぎると評価が曖昧になる。 これはVibe Coding論文が指摘する「効率と内省の緊張関係」そのものだ。

---

個人開発者のための実践ガイド

今日から試せる3つのアクション

1. 「画面」ではなく「オブジェクト」から始める

次にAIでUIを作るとき、「ログイン画面を作って」ではなく、まずシステムのオブジェクト（ユーザー、プロジェクト、タスク……）を書き出してみよう。OOUXのORCAプロセスを簡略化して、紙に書くだけでもいい。

2. プロンプトに「検証したいこと」を書く

「かっこいいダッシュボードを作って」ではなく、「ユーザーが最初に見るべき情報は◯◯で、△△のアクションに3クリック以内でたどり着けるダッシュボードを作って」と書く。NN/gの研究が示すように、プロンプトの詳細度が出力品質を決める。

3. 評価前に「何を見るか」を決める

プロトタイプを見る前に、評価軸を1〜3個メモしておく。「情報の優先順位は適切か」「初見で迷わないか」「オブジェクト間の移動は自然か」など。見た目の美しさに引っ張られないための防御線になる。

---

まとめ — AI時代に価値が上がる3つの判断力

AIがUIを即座に生成できる時代、デザイナーや個人開発者に求められるのは「画面を作るスキル」ではなく、3つの判断力だ。

判断力	内容	対応する文献
何を具体化するかを決める力	オブジェクトモデル設計、仮説の明示	OOUX, Intent Prototyping
目的に応じて作り分ける力	探索用と検証用でプロンプトを変える	NN/g, AI-in-the-Loop
本質を見抜く評価力	見た目に惑わされず、構造を評価しつつ直感も活かす	審美的ユーザビリティ効果, Vibe Coding論文

AIは「手を動かす」部分を圧倒的に加速した。だからこそ、「頭を使う」部分——何を作るか、なぜ作るか、どう評価するか——の価値が相対的に上がっている。

作れるようになったからこそ、作る前に考える。そのバランス感覚こそが、AI時代のデザインプロセスの核心だ。

---

参考文献

• NN/g「Good from Afar, But Far from Good: AI Prototyping in Real Design Contexts」2025年10月 — https://www.nngroup.com/articles/ai-prototyping/
• Yegor Gilyov「Intent Prototyping: A Practical Guide to Building with Clarity」Smashing Magazine, 2025年10月 — https://www.smashingmagazine.com/2025/10/intent-prototyping-practical-guide-building-clarity/
• Sophia Prater「OOUX: A Foundation for Interaction Design」A List Apart — https://alistapart.com/article/ooux-a-foundation-for-interaction-design/
• Hancheng Cao et al.「Vibe Coding for Product Design」arXiv:2509.10652, 2025年9月 — https://arxiv.org/abs/2509.10652
• Purdue大学「AI-in-the-Loop User-Centered Design」arXiv, 2025年7月 — https://arxiv.org/abs/2507.21012
• Tractinsky, N., Katz, A. S., & Ikar, D.「What is beautiful is usable」Interacting with Computers, 2000年

---