AIが生成するUIの落とし穴。事業価値を高めるプロダクトへ引き上げる“AIと人間の役割分担”

AIツールにより、誰でも数分でUIを作れる時代になりました。

アイデア検証のスピードが飛躍的に上がった一方、一見綺麗に見えても「AIっぽさ」が拭えなかったり、ユーザー体験（UX）が考慮されていなかったりと、本番開発や顧客提案に使える品質にならないというケースも少なくありません。

AIは骨組みやドラフトをスピーディーに作る「作業の効率化」に長けていますが、実用レベルのプロダクトに必要なユーザーが迷わない導線設計やプロダクト独自の世界観の表現といった「価値の磨き上げ」には、人間の判断が不可欠です。

AIでUIを生成する際に重要なのは、目的に応じた「体験のクオリティ」を見極めることです。AIを活用してプロトタイプを迅速に生成しつつ、事業価値を高めるプロダクトへ昇華させるための段階的なプロセスを、実際の画面を例に解説します。

AIで生成したUIが製品レベルの品質にならない理由

AIを使えば、パッと見は「それっぽい」完成度の高いUIが一瞬ででき上がります。ですが、実際に操作してみると、「なんだか使いにくい」「実務のフローに合わない」という漠然とした違和感が残ります。

その背景には、AI（LLM）特有の“学習のクセ”による2つの課題があります。

課題①：ユーザーの信頼を損なう「無難な平均化（AI Slop）」

私たちがよく使うAI（Gemini、Claude、ChatGPTなど）はLLM（大規模言語モデル）をベースにしています。LLMは世の中に大量に存在するコンテンツを学習し、「最も失敗しない平均的な成果物」を出力する傾向があります。その結果、どこかで見たことのある既視感のあるデザイン（AI Slop）が生まれます。

※Slopは、もともと「残飯」などを意味する英単語。近年では、生成AIによって大量生産される低品質なコンテンツを指す意味でも使われています。

どのプロダクトも似たり寄ったりの見た目になり、自社ブランド独自の価値や、プロフェッショナルな信頼感が伝わりません。競合比較された際に「他社と変わらない」「独自性がない」と判断され、ユーザーに対する訴求力を落とすリスクに繋がります。

課題②：リリース後の致命的な手戻りを生む「エッジケースの想定抜け」

もう1つの課題は、AIのデータ設計にあります。AIは「最も綺麗に見える完璧なサンプルデータ」を前提に画面を作ります。そのため、実際の運用で起こり得る例外処理（エッジケース）を想定しないクセがあります。

文字数が長くなってレイアウトが崩れる、データがない時にユーザーが次に何をすればいいかわからないなど、実際のユーザーが使った際にトラブルが発生します。

【検証】AIで生成したUIの品質を引き上げる方法

ここからは、SaaSのダッシュボード画面UIを題材に、AIが生成したドラフトから人間の手でデザインのクオリティを引き上げる実際のプロセスを検証します。

今回作成するプロトタイプの前提条件

検証に入る前に、今回作成するプロダクトと画面の詳細設定を整理しておきます。

• プロダクト概要
  • マーケティング分析プラットフォームSaaS『PulseMark』
• 特徴
  • 流入トラフィック（PV）、リード獲得数（CV）、進行中の広告施策（キャンペーン）、そして最終的な売上貢献（MRR）のデータを一覧で把握できる
• 対象画面
  • 主要データを1画面で確認・分析できるメインダッシュボード

ステップ①：AIに丸投げ

上記の前提条件と以下のプロンプトを入力しました。

• HTML、CSS、JavaScriptを単一のHTMLファイル内にすべて内包して実装してください。

（※使用ツール：Cursor Version 3.9.16 / 使用モデル：Composer 2.5Fast）

典型的なAI生成のUIが出力されました。

過剰なグラデーションやカラフルな色使いにより、画面がごちゃついて数値に集中できない点など、UIとしてのクオリティが高いとは言えません。

しかし、「こんなマーケティングツールどうかな？」と思いついたアイデアを短時間で可視化し、社内チームでディスカッションしたい場合など、スピード最優先のシーンでは十分なケースも多いでしょう。

ステップ②：AI Slop禁止プロンプト適用画面

上記と同じプロンプトに、基本思想や禁止事項のルールを追加します。ステップ①に出てきたデザインを元に、AI Slopに陥っている箇所をまとめ、それらの要素を出力しないよう指示しました。 

プロンプトはGeminiを活用し、以下の3つのステップで作成しました。

1. AI丸投げ画面（ステップ①）の問題点を洗い出す
   • まず、ステップ①で出力された画面を観察し、派手な装飾やエッジケースの考慮漏れといった修正ポイントを洗い出します。
2. プロダクトのあるべき姿とトーン＆マナーを整理
   • 次に、「ユーザーが迷わず実務で使えるシンプルなツールにしたい」「信頼感のあるブルーで統一したい」といった、プロダクトが本来目指すべき世界観や目的を言語化しました。
3. ルールの構造化はAIに丸投げする
   • 洗い出した問題点と目指す世界観をGeminiに渡し、「これらを元にCursor用のプロンプトを作って」と依頼しました。

最終的に出力されたプロンプトは以下の通りです。

ステップ①にあった過剰なAIっぽさが大きく削ぎ落とされました！

上長や社内の他部署に「この企画で進めたい」とプレゼンする程度であれば、このように少しプロンプトを工夫するだけでも十分なケースが多いでしょう。

ステップ③：人間の手で修正した画面

ステップ②の画面をベースに、デザイナーが情報構造の整理とトーン＆マナーの緻密な磨き込みを行いました。 

最も意識したのは、ユーザーが一瞬で欲しい情報を把握できることと、プロの道具にふさわしい精密さと洗練された使い勝手の両立です。

ステップ②でAIにルールを適用させた画面も、一見すると十分に整ったUIに見えていました。しかし、実際のマーケティング業務の文脈に立ち返り、人間の思考を介することで、単なる「綺麗に整理された画面」から「実務で判断がしやすいプロダクト」へと変わりました。

ステップ③で実施した手動での手直しとそれによるユーザー体験の変化は以下の通りです。

1. 常時表示されていたヘッダーを削り、検索バーやアカウントをサイドメニューへ格納しました。
   • →画面の表示領域が広がったことで、スクロールをしなくてもファーストビューで重要な数値が目に入るようになりました。
2. カードの枠線・全体の背景色を少し濃くして差を強調し、さらにラベルと重要な情報のフォントサイズや太さに差をつけました。
   • →形状や文字にメリハリが生まれたことで、重要な数値の意味を即座に理解しやすくなりました。また、BtoBツールらしい落ち着きと信頼感が演出されています。

実際にユーザーに見せてテストする場合や、製品として開発を進めるための本番デザインであれば、やはりこの水準までクオリティを上げる必要があると言えるでしょう。

検証結果

今回の検証を通して、プロンプトやデザインガイドライン（rules等）を工夫することで、AI Slop化を大幅に抑え、一見すると綺麗に整ったUI（ステップ②）を出力させることは十分に可能だと分かりました。 

しかし、一歩踏み込んで「実際のユーザーが毎日ストレスなく使えるか？」という視点で見ると、AIが出力した画面には課題が残されていました。

1. 目的に応じた情報構造の設計
   AIは仕様通りの要素を画面に並べることは得意ですが、「この画面でユーザーが最優先で達したい目的は何か」を解釈して不要な情報を削ぎ落とす引き算の思考は苦手です。画面ごとの利用目的や文脈を理解し、ノイズを減らしてユーザーを迷わせない情報構造へ再設計するのは、人間の役割です。 
2. ユーザーの迷いを防ぐ微細な配慮
   メインアクションとナビゲーションの見た目のバッティングを防ぐ色の使い分けや、プロダクトの世界観を伝える細やかなトーン＆マナーの調整など、ユーザーが無意識のうちに感じる違和感を排除する工夫は、人間の視点だからこそ気づく領域です。

まとめ

誰もが簡単にUIを作れる時代になったからこそ、プロダクトの最終的なクオリティの差は「言語化しきれないコンテキストを理解している人間による細部の作り込み」で決まるようになっています。

AIによって初期構築の時間が大幅に短縮されたからこそ、「プロダクトの価値最大化」や「ユーザーが迷わない体験設計」という、事業成長に直結するコアな部分にリソースを集中できるようになりました。

AIによる効率化と、人間による丁寧な品質向上。i3DESIGNは、この2つの適切な役割分担こそが、事業成長に繋がるプロダクトを生み出す確実な一歩になると考えています。

i3DESIGNでは、AIを活用したUX/UI改善によるモバイルアプリ、SaaSプロダクト、業務アプリケーションやECサイトなど、幅広いプロダクトの価値向上を行っています。

UX/UI改善サービスの詳細を見る