こんにちは！UIデザイナーのharuです。私は最近、プロジェクトで「生成AI」を使ったプロダクトのデザインをしています。
ChatGPTの登場以降、生成AIを使ったプロダクト（サービス）が次々と出てきていますが、実際にUIを考えるとなると、一般的なデジタルプロダクトを作るときとは異なる点に注意する必要があることが分かってきました。とはいえ、「生成AI×UIデザイン」という分野は先行する知恵もあまりありません。ここ3カ月ほどは手探りでUIを模索してきました。
そんな経験を生かして、今回は生成AIを使ったプロダクトを初めてつくるデザイナー向けに、私が思う「生成AIならではの注意点と考慮すべきポイント」をまとめてみました。
AIプロダクトのUIを考えるときにぶつかった壁
生成AIの魅力や価値というのは、ユーザーがAI側に自然言語で指示を出せば、目的となる成果物を自動で生成してくれる点です。しかし、それは裏を返せば、以下のような点がハードルとなり得ることだと考えています。
- AIは、ユーザーの期待に反する結果を返すことが多い
- AIは、実行ごとに異なる結果を生成する（同じ結果にならない）
- 大抵の人にとって、フリーテキストでプロンプト（指示）を書くのは難しい
- 制作物の一部だけをAIで編集したい場合、AIとの作業範囲の棲み分けが難しい
こうした特徴は当然、UIを考える際にも影響します。ユーザーにとっての「使いにくさ」につながるポイントをどうUIで解消すればいいか──その解決策を考えるため、私はしばらく世の中のAIプロダクトのUIを観察しました。
いろいろな事例を俯瞰的に見ていく中で、まず「生成AIプロダクトと人がどこで接点を持つのか」を整理し、各タッチポイントで起こり得る問題を想定すると対策が考えやすくなりそうだ、と考えました。
生成AIとユーザーの「6つの接点」
さまざまな生成AIプロダクトを見た結果、AIと人のインタラクションが起きるポイントは、大まかに以下の6つに分類できそうだと考えています。
- AI機能を認識する
- AIに情報を渡して指示する
- AIの生成結果を確認する
- AIの出力方法を調整する
- AIの生成結果をレビュー/修正する
- AIの生成結果を評価する
これら6つの接点に分けて考えることで、生成AIプロダクトの体験が俯瞰できるようになり、それぞれの接点で「どんなUIの考慮が必要なのか」なども見えてきました。
それぞれの接点での考慮ポイント
1. AI機能を認識する
最初の接点は、ユーザーが生成AI機能を認識するタイミングです。
ChatGPTやMidjourneyなど生成AIを前提にしたプロダクトであれば、ユーザーは利用する前から「AIを使うぞ」と認識しています。
一方、そうではなく、例えば既存のツールのアップデートとして生成AIを使った機能が追加されることもあります。この場合、生成AI機能は他の機能と異なり、得られる結果の精度が不確実だったり、期待に反する挙動をすることがあります。そのため、ユーザーには前もって「この機能は生成AIを使うのか」と認識してもらう工夫が必要です（プロダクトや機能によっては、AI自体を意識させないことを狙うパターンもあります）。
🌟考慮ポイント：AI機能をどうやって認識してもらうか
AI機能の存在をどう表現しているかに注目して、さまざまなプロダクトを見てみました。
例えばCanvaのアクションメニューでは、生成AIを使った機能だけに色がついており、明らかに他と違う表現になっています。
他には、今年の9月にリニューアルされたNotion AIでは、AI機能のシンボルとなる「フェイスアイコン」が登場しており、このアイコン（キャラクター）がいる場所にAI機能が置かれるようになりました。
いろいろ見てみた結果、AI機能を認識させるための表現方法は、以下が今のスタンダードになっているように思います。
- 「✨」アイコンを使う
- プロダクト内でAIを示すカラーを決め、そのカラーを使う（紫またはグラデーションが多い）
- 「AI〇〇」「生成〇〇」「マジック〇〇」などAIっぽい機能の名称にする
- AIを示す独自のモチーフ（アイコンやロゴ）を決め、そのモチーフを使う
中でも「✨（キラキラ／Sparkle）」アイコンは多くのプロダクトで使われており、UIデザインの領域では「AI」を意味する慣用表現となりつつあります。どこで「✨」が使われ始めたかは分かりませんが、これまでUIデザインでは一般的に使われてこなかったアイコンが新たに意味を獲得したと捉えると面白いなと思いました。
2. AIに情報を渡して指示する
次に考えたい接点は、生成AIに指示したり、処理してほしい情報を渡すタイミングです。
チャット形式でAIと対話するものもあれば、1つのプロンプトだけを打ち込むもの、画像をアップロードするもの、メニューからアクションを選択するものなど、さまざまなパターンが考えられます。
🌟考慮ポイント：2回目以降の指示をどうするか
このインタラクションを考える上で意外と重要になるのが「2回目以降の指示をどう入力するか」という問題です。
例えば、Canvaの「マジック作文」機能では、お題を伝えるとAIが文章を生成してくれます。ここまではシンプルですが、さらに繰り返しAIに指示して内容を修正していくこともでき、この場合のUIは以下のようになっています。
生成結果を修正したい場合は、下部にある「この文章を少し修正する」をクリックします。クリックするとテキストフィールドが表示され、ここに「もう少し〜〜な表現にして」といった追加指示を打ち込みます。
最初のポップアップ画面で入力するプロンプトは「0→1の文章生成」に使われるのに対し、追加指示欄に打つプロンプトは「すでにある生成結果のブラッシュアップ」の用途で使われます。このようにプロンプト入力欄のUIは、初回の指示をするためのものと、2回目以降に追加指示するためのものでUIが異なる場合もあります。
3. AIの生成結果を確認する
3つ目の接点は、AIの生成結果を確認するタイミングです。
例えば、対話型のAIチャットの結果表示では、会話しているかのようにピコピコと回答が表示されるものが主流です。画像生成AIでは、複数の候補を生成して結果を見せ、その中から最も理想に近い画像を選べるものが多いです。
🌟考慮ポイント：過去の生成結果へのアクセス
AIの生成結果は一定ではないので、何度も生成を繰り返して理想的な結果に近づけていくことが多いと思います。そうした場合、「1つ前の生成結果の方が良かった」といったことが起こり得るので、過去の生成結果にどうアクセスできるかが重要になってきます。
例えば、Adobe Fireflyの結果表示画面では、テキストフィールドの上部にタブのようなUIがあり、ここに直近生成した画像が時系列に並びます。このタブがあることで、過去の生成結果を簡単に遡ることができ、比較検討して最終案を選ぶことができるというわけです。
4. AIの出力方法を調整する
4つ目の接点は、AIから狙った通りの結果を得るために出力方法を調整するタイミングです。
完成度の高いアウトプットをAIにしてもらうために「とりあえず生成してみて、結果を見ながら調整して……」と試行錯誤を繰り返したことのある人が多いのではないでしょうか。
例えば、出力する画像の雰囲気を指定したり、テキストの分量を調整したり、AIが考える際の「独創性」のレベルを設定したり、調整する変数は目的によってさまざま。何度も繰り返す作業になる分、UIがもたらす影響も大きくなるポイントです。
🌟考慮ポイント：出力調整のためのUIを設けるかどうか
AIの出力結果の調整も、プロダクトによって実にさまざまです。
Illustratorの「生成ベクター」ツールでは、多様な角度からAIの出力方法を調整できます。例えば、生成したいものが「シーン」なのか「被写体」なのか「アイコン」なのかを選択できたり、どれぐらいの精密さにするかや、効果、トーンを調整することができます。
これと対照的なのは、Discord内で提供されている画像生成AIのMidjourneyです。
Midjourneyでは、Discordの制約上プロンプトを書いて送信することしかできないので、自分が思ったとおりの絵を出力するには、描きたいものを詳細に正しくプロンプト（文章）に書き起こすことが必要です。
このように出力の調整について考えるときは、「新たにGUIを設けて簡単に調整できるようにする」という選択肢と、「UIは増やさずユーザーのプロンプトの調整に任せる」という選択肢を両方考慮できると良さそうです。
5. AIの生成結果をレビュー/修正する
5つ目の接点は、AIの生成結果をユーザーが判断し、修正したり承認や拒否などをするタイミングです。
AIの生成結果は一定ではなく、正しさも保証できないため、最後は人が判断して修正をすることが多いです。そのため、生成結果が出たあとも、それを修正したり本番環境に適用してよいか確認するためのUIが重要になります。
🌟考慮ポイント：AIの生成結果をどうマージするか
コードエディターのCursorでは、画面の右側にAIチャットを開き、AIチャットに壁打ちしながらコードの生成を行って、その結果を左側のエディター画面に反映することができます。特徴的なのが、「作成中のコードに、AIの生成結果を追加してよいか」という確認操作がかなり丁寧に置かれていることです。
Cursor上のAIチャットでコードを生成すると、生成結果の右上に「Apply（適用）」というボタンが出てきます。これを押すと、AIの生成結果が元のコードに反映された状態を確認できます。その画面上でさらに「Accept（承認）」をすると変更が確定し、コードが正式に書き変わります。
Cursorのように、ユーザーが時間をかけて作成している情報をAIを使ってアップデートする場合は、「今まで作っていたものを意図せずAIに変更されてしまった」「どこが変更されたか分からなくなった」という状態を避けるべきでしょう。一見面倒に思える確認操作も、生成AIのプロダクトでは、丁寧に置いておくほうがユーザーフレンドリーだと考えることもできます。
6. AIの生成結果を評価する
最後の接点は、生成結果が正しかったか、理想通りだったかどうかを評価するタイミングです。ユーザーから「Good／Bad」などでフィードバックをとることで、AIをさらに学習させることができます。
🌟 考慮ポイント：AIの学習につながる評価機能
「Bad」の評価がついた場合は、なぜ悪いのかをユーザーに聞くことが重要です。
例えばClaudeでは、Badボタンを押すとダイアログが表示され、フリーテキストで評価を送ることができます。
ChatGPTでは、Badボタンを押すと下部にバナーが表示され、低評価の理由を選択式でフィードバックできます。
生成結果の評価機能を置く場合は、「ユーザーがフィードバックしやすいか」という点と、「どんなフィードバックを取ればAIの学習に生かせるか」という点を両方考えられると良さそうです。
まとめ：生成AIならではのUIの考慮ポイント
🌟 AI機能をどうやって認識してもらうか
🌟 2回目以降の指示をどうするか
🌟 過去の生成結果へのアクセス
🌟 チューニングのためのUIを設けるかどうか
🌟 AIの生成結果をどうマージするか
🌟 AIの学習につながる評価機能
以上、生成AIのUIデザインを模索しながら見つけた考え方の一部をご紹介しました。もうすぐ年の瀬。2025年も引き続き「AIのUI研究」を続けていこうと思います！
グッドパッチでは、新たなサービス創出を目指すパートナー企業とともに、AI技術を活用したサービス作りに取り組んでいきたいと考えています。AIを使った新規事業を検討していたり、自社事業にAIを取り入れたいと考えている企業様に、デザインの力で並走できれば幸いです。お問い合わせはこちらから。
