最近、多くのPdM仲間と話していて、共通の大きなテーマになっているのが「生成AIをどうプロダクトに組み込むか?」という問い。ChatGPTやMidjourneyの衝撃的な登場から数年が経ち、生成AIはもはや「面白いおもちゃ」ではなく、プロダクトのコアバリューを左右する重要な技術になりました。
しかし、その一方で以下のような声も後を絶ちません。
- 「とりあえずAIチャットを載せてみたけど、全然使われない」
- 「どんなUI/UXにすればユーザーに価値が届くのか分からない」
この記事の要約
- 生成AIがもたらした「指示ベース」から「意図ベース」へのパラダイムシフトを理解し、PdMが今何を考えるべきかを調べてまとめてみたのでその成果物がこの記事です
- ChatGPTやGitHub Copilotなどの成功事例に共通する、40以上の具体的なUI/UXパターンを「入力」「出力」「絞り込み」「信頼」の4つのカテゴリーに分けみて、網羅的に紹介
- 単なるパターン紹介に終わらず、それらをどう戦略的に組み合わせるか、そしてその根幹にある「ユーザーの達成したいジョブ(JTBD)」から逆算してみる
なぜ今、PdMは「生成AIのUX」を学ぶべきなのか?
これまでのプロダクトは、基本的に「インストラクションベース」(指示ベース)で動いていました 。ユーザーは、ボタンを押し、メニューを選び、フォームに正確な情報を入力するという「具体的な指示」をシステムに与えることで、目的を達成していました。UI/UXデザインの役割は、その指示をいかに迷わず、スムーズに行えるようにするか、という点にありました。
しかし、生成AIは「インテントベース」(意図ベース)の対話を可能にします 。ユーザーはもはや「〇〇という名前のボタンを押す」といった具体的な指示を出す必要はありません。「来月の出張、いい感じにまとめておいて」といった、曖昧で漠然とした「意図」を伝えるだけで、AIがその意図を汲み取り、フライト予約、ホテル確保、旅程作成といった一連のタスクを自律的に実行してくれる。そんな世界が現実のものとなりつつあります。
この変化は、PdMにとって何を意味するのでしょうか?
それは、僕たちの仕事の中心が「機能の設計」から「対話の設計」へとシフトするということです。ユーザーの曖昧な意図をいかに正確に引き出し、AIの能力を最大限に発揮させ、そして最終的なアウトプットをユーザーが信頼し、活用できる形にどう整えるか。この一連の体験、つまりUXこそが、生成AIプロダクトの成功を左右する最大の鍵となるのと僕は考えています。
「AIをどう使うか」ではなく、「AIとどう対話するか」をデザインすること。これこそが、僕たちPdMに突きつけられた課題ではないでしょうか。
失敗しないための「AI統合戦略」2つの視点
「よし、じゃあ早速UIパターンを見ていこう!」と逸る気持ちを抑えて、少しだけ立ち止まってみましょう。具体的なUIパターンを選ぶ前に、プロダクト全体に関わる、より大きな戦略的決定を下す必要があります。これを怠ると、どんなに優れたUIパターンを実装しても、プロダクト全体としてちぐはぐな体験になってしまいます。
ここでは、プロダクトの根幹を定める2つの重要な視点、「統合のスペクトラム」と「エージェンシーの連続体」について考えていきます。
視点1:統合のスペクトラム – AIはプロダクトのどこに住む?
まず考えるべきは、「AI機能をプロダクトのどこに、どのように配置するか?」という問いです。これにはいくつかの段階があり、プロダクトの成熟度や戦略によって最適な場所は変わってきます 。
表1:AI統合モデルの戦略的比較
モデル名 | 説明 | 代表例 | ユーザーワークフローへの影響 | 開発の複雑性 | 主な戦略的利点 | 主なリスク |
完全分離 | AIが主要UIから独立したスタンドアロンツールとして機能する。 | 別ウィンドウでChatGPTを開いて作業する | 大(コンテキスト切替が必須) | 低 | 迅速な市場投入、低リスクでの実験が可能 | ユーザーのワークフローに統合されず、定着しにくい |
影響型 | AIがユーザーのコンテキストを観察し、関連性の高い支援を提供するが、UIを直接変更しない。 | Slack AIの要約機能 | 小 | 中 | 既存のワークフローを妨げずに価値を提供できる | AIの支援が限定的で、大きなインパクトを与えにくい |
統合機能 | AIがコア機能としてUIにシームレスに組み込まれ、ネイティブなワークフローの一部となる。 | Notion AI | 中 | 高 | ユーザーの生産性を直接的に向上させ、高いエンゲージメントを生む | 既存のUI/UXとの調和が難しく、実装コストが高い |
生成機能 | AIがUIレイアウトや動的コンテンツなど、体験の重要部分を積極的に生成する。 | CanvaのMagic Design | 大(体験が動的に変化) | 非常に高い | 究極のパーソナライゼーションを提供し、競合との差別化を図る | ユーザーのコントロール感が低下し、体験の予測可能性が損なわれる |
この表から分かるように、AI統合の道のりは、多くの場合「完全分離」のような低リスクな形から始まり、ユーザーの信頼とビジネス価値が証明されるにつれて、より深く統合された形へと進化していきます 。
視点2:エージェンシーの連続体 – AIは「道具」か「代理人」か?
次に決めるべきは、AIとユーザーの力関係です。つまり、AIはユーザーが駆使する万能な「道具」なのか、それともユーザーに代わってタスクを遂行する有能な「代理人」なのか、という問いです。
-
- 拡張(コパイロット):AIはあくまでユーザーの能力を「拡張」する存在。コードの提案をするGitHub Copilotのように、AIが提案し、最終的な判断とコントロールは人間が握ります 。創造性や正確性が求められるハイステークスなタスクに適しており、ユーザーにコントロール権を残すことで信頼を醸成します 。
-
- 自動化(エージェント):ユーザーが「面倒だ」と感じる反復的、あるいは時間のかかるタスクを、AIが「自動化」して代行します 。価値提案は効率化と認知的負荷の軽減にあります。しかし、これには高いレベルの信頼が必要で、AIが失敗したときのリスクも大きくなります。
PdMは、ユーザージャーニーのどの部分が「拡張」に適し、どの部分が「自動化」に適しているかを慎重に見極めなければなりません。コパイロット(提案・支援)のためのUIと、エージェント(指揮・監視)のためのUIは、根本的に異なるからです。
生成AIのUI/UXパターンカタログ
さて、戦略的な大枠が決まったところで、いよいよ具体的なUI/UXパターンの世界に飛び込んでいきましょう。ここでは、数あるパターンの中から特に重要で汎用性の高いものを、「入力」「出力」「絞り込み」「信頼」の4つのカテゴリーに分けて紹介します 。
① 意図を引き出す「入力」パターン
すべての対話は入力から始まります。ここでの最大の課題は、ユーザーの頭の中にある漠然とした「意図」を、AIが理解できる具体的な「指示」にどう変換するか、です。
-
- 生テキスト入力 (Raw Text Input):おなじみの自由形式のテキストボックスです。ChatGPTが代表例ですね。最大の柔軟性を提供しますが、ユーザーのプロンプト能力に結果が大きく左右され、「何を書けばいいか分からない」という白紙の状態問題 (Blank Canvas Problem)を引き起こしがちです。
-
- 構造化プロンプト (Structured Prompts):フォームやテンプレート形式でユーザーの入力をガイドするパターンです。「ペルソナを作ってください」と漠然と指示するのではなく、「ターゲット層」「課題」「ゴール」といった項目を埋めてもらうことで、出力の質を劇的に向上させます。ユーザーの労力を削減し、良いプロンプトの型を自然に学ばせる効果もあります 。
-
- インラインアクション (Inline Action):ページ上の既存の要素(ハイライトしたテキストや選択した画像など)を起点に、文脈に応じたAI操作を可能にするパターンです 。Notion AIでテキストを選択すると「要約する」「翻訳する」といったメニューが表示されるのが良い例です。コンテキストを説明する手間を省き、非常にスムーズな体験を提供します。
-
- メモリ(文脈的想起)(Memory):過去の対話やユーザーの情報を記憶し、現在の対話に活用するパターンです。何度も同じ説明をする必要がなくなり、高度にパーソナライズされた「魔法のような」体験を生み出します。一方で、プライバシーへの懸念が非常に強いため、ユーザーによる明示的な同意と、記憶内容をいつでも確認・削除できるコントロール機能が不可欠です。
② 価値を届ける「出力」パターン
AIからの応答を、いかにユーザーにとって理解しやすく、信頼でき、そして「使える」ものにするか。出力の提示方法は、AIプロダクトの価値を決定づける重要な要素です。
-
- 結果のバリエーション (Result Variations):一つのプロンプトに対し、複数の異なる結果を提示するパターンです。Midjourneyが一度に4つの画像を生成するように、ユーザーに選択肢を与えることで、AIの不確実性を「選ぶ楽しさ」というポジティブな体験に転換できます。
-
- 引用/出典の表示 (Citations / Show Sources):生成された情報の根拠となった情報源を明記する、信頼性向上のための最重要パターンです。PerplexityやGoogle SGEがこのパターンを徹底していることで、ユーザーはAIの回答を鵜呑みにせず、ファクトチェックを行うことができます。これは、特に情報の正確性が求められる領域では必須と言えるでしょう。
-
- 免責事項/注意喚起 (Disclaimers / Caveats):「この情報は2023年までのデータに基づいています」「AIは間違いを犯す可能性があります」といった注意書きを表示するパターンです。ユーザーの期待値を適切に管理し、AIへの過信を防ぐことで、長期的な信頼関係を築きます。
-
- 結果に対するアクション (Result Actions):生成された結果に対して、文脈に応じた次のアクション(「コピーする」「共有する」「コードを実行する」など)をボタンとして提供するパターンです。これにより、生成されたコンテンツが単なるテキストの塊ではなく、すぐにワークフローに組み込める「素材」へと変わります。
③ 対話を促す「絞り込み」パターン
AIとのインタラクションは一度きりで終わることは稀です。最初の出力から、いかに効率的に理想のアウトプットに近づけていくか。この「対話」のプロセスをデザインすることが、ユーザーの満足度を大きく左右します。
-
- 部分的な再生成 (Partial Regeneration):出力全体ではなく、特定の部分だけを選択して再生成させるパターン。例えば、生成された文章の一文だけが気に入らない場合に、そこだけを書き直させることができます。すべてをやり直すよりもはるかに効率的で、ユーザーのコントロール感を高めます。
-
- パーソナルな声/トーン制御 (Personal Voice / Tone Control):ユーザーが独自のブランドボイスや文体を定義し、AIが一貫してそれに従うようにするパターンです。コピーライティングツールJasper AIなどで見られるように、毎回トーンを指示する手間を省き、一貫性のあるアウトプットを実現します。
-
- ユーザーフィードバック (User Feedback):出力に対する高評価/低評価ボタンなどが代表例。これはモデルの改善に役立つだけでなく、ユーザーに「自分もこのプロダクトを育てている」という主体性を感じさせ、エンゲージメントを高める効果があります。
④ 普及を支える「信頼」パターン
どんなに高機能でも、ユーザーに「信頼」されなければプロダクトは使われません。特にAIは、その仕組みがブラックボックスであるがゆえに、信頼の構築が極めて重要になります。
-
- データプライバシー制御 (Data Privacy Controls):ユーザーが自身のデータをどのように扱われるかを管理するための専用UIです。自分のデータがAIの学習に使われるかを選択できるオプトイン/オプトアウト機能や、対話履歴を削除する機能などが含まれます。ユーザーにコントロール権を与えることが、信頼の礎となります。
-
- 人間の代替手段 (Human Fallbacks):AIがタスクを完了できなかったり、ユーザーがAIの対応に満足できなかったりした場合に、スムーズに人間のサポートへ切り替えられる経路を用意するパターンです。これは「最終的には人間が助けてくれる」という安心感を提供し、特に重要なタスクを扱うサービスにおいて不可欠です。
-
- ウォーターマーク (Watermarks):AIが生成したコンテンツ(特に画像や動画)に、それがAIによる生成物であることを示す識別子を付与するパターン。これにより、フェイクニュースなどの悪用を防ぎ、情報生態系全体の健全性を保つことに貢献します。
成功事例から学ぶ「パターンの戦略的組み合わせ」
ここまで様々なパターンを見てきましたが、最も重要なのは「どのパターンを、なぜ、どのように組み合わせるか」という戦略です。成功しているプロダクトは、自らが解決すべきユーザーの達成したいジョブ(Jobs-to-be-Done, JTBD)を深く理解し、その達成のためにUI/UXパターンを巧みに組み合わせています。

ChatGPT:対話による「創造性の拡張」
- JTBD:「アイデアの壁打ち相手が欲しい」「文章の草稿を素早く作りたい」「複雑な概念を分かりやすく説明してほしい」
- 戦略:ユーザーの創造的な探求を最大限に支援するため、「拡張(コパイロット)」モデルを採用。
- 主要パターン:
- 入力:柔軟性を最大化する「生テキスト入力」を核としつつ、過去の文脈を活かす「メモリ」で対話の連続性を担保。
- 出力:一つの答えに縛られないよう「結果のバリエーション」(Regenerate response)を提供することも。
- 絞り込み:対話を続けながら精度を上げるため、「ユーザーフィードバック」やプロンプトの再編集機能を重視。
ChatGPTのUIは、特定のタスクを効率化するのではなく、自由な対話の中からユーザー自身が価値を発見していく「サンドボックス(砂場)」として設計されています。だからこそ、UIは極限までシンプルなのです。
GitHub Copilot:ワークフローに溶け込む「生産性の拡張」
-
- JTBD:「コーディングの時間を短縮したい」「定型的なコードを書く手間を省きたい」「知らない言語やライブラリを素早く使いたい」
- 戦略:開発者の集中を妨げずに生産性を最大化するため、「統合機能」かつ「拡張(コパイロット)」モデルを採用。
主要パターン:
-
- 入力:開発者が最も時間を過ごすエディタ内にAIを常駐させる「インラインアクション」が中核z。ユーザーはコンテキストを説明する必要がなく、AIがコードを読んで意図を先読みします。
-
- 出力:思考の流れを止めないよう、補完候補を「ゴーストテキスト」としてインラインで提示。
- 絞り込み:提案が気に入らなければ無視して入力を続けるだけ。受け入れるならTabキー一つ。この低摩擦な「絞り込み」体験がキモです。
- 信頼:あくまで提案であり、最終的なコードの責任は開発者にあるという「人間の代替手段」ならぬ「人間が主役」の思想を貫いています。
Copilotの成功は、AIが開発者のワークフローの外から邪魔をするのではなく、中に溶け込み、まるで熟練のペアプログラマーのように振る舞うUXを実現した点にあります。
Perplexity:出典明記で信頼を勝ち取る「情報収集の自動化」
- JTBD:「複数のサイトを見比べずに、信頼できる答えが欲しい」「情報のソースをすぐに確認したい」
- 戦略:検索という情報収集タスクを「自動化」し、その結果に対する信頼性を極限まで高める戦略。
- 主要パターン:
-
- 入力:「生テキスト入力」だが、検索に特化しているためユーザーの意図は明確。
- 出力:AIの回答の信頼性を担保するため、「引用/出典の表示」を最も目立つ形で実装。各文章に情報源へのリンクが紐付いており、ユーザーはいつでも一次情報に当たれます。また、情報を「構造化フォーマット」(リストや表)で提示し、消化しやすくしています。
- 信頼:プロダクトのコアバリューそのものが「信頼性」であり、UI全体がそのために奉仕しています。
-
Perplexityは、生成AIの最大の弱点である「ハルシネーション(もっともらしい嘘をつくこと)」に、UXデザインの力で見事に対抗している好例と言えるかもしれません。
AIファーストではなく「ユーザーニーズファースト」で考えよう
ここまで、生成AIプロダクトのUI/UXについて、戦略から具体的なパターン、そして成功事例までを駆け足で見てきました。
様々なパターンや概念が登場しましたが、僕がPdMとして最も重要だと考えているメッセージは、たった一つ。
それは、「AIファースト」ではなく、「ユーザーニーズファースト」で考える、ということ。
僕たちはつい、最新のAI技術や派手なUIパターンに目を奪われ、「この技術を使って何ができるか?」という発想に陥りがちです。
でも、「ユーザーが本当に達成したいことは何か?(JTBD)」を徹底的に深掘り、そのジョブを達成する上で、既存のやり方のどこに非効率や不満、満たされない欲求があるのかを突き止めた上で初めて、「この課題を解決するために、AIは最高のパートナーになり得るか?」と問いかけるのです。
今日から実践できるアクション
- 既存のユーザージャーニーにAIの視点を持ち込む
担当プロダクトの主要なユーザージャーニーマップ(課題を明記)を取り出し、「もしこの課題に対してAIアシスタントがいたら?」という視点で各ステップを見直してみましょう。「拡張」できるポイント(例:入力補助)や「自動化」できるポイント(例:レポート作成)が見つかるかもしれません。 - 競合のAI機能を「パターン言語」で分解する
競合他社や、あなたが普段使っているAI搭載プロダクトのUIを、この記事で紹介した「パターン言語」を使って分析してみてください。「この入力方法は構造化プロンプトだな」「ここは引用パターンで信頼性を担保しているのか」と分解することで、各社の戦略的な意図が見えてくるはずです。 - GPTsで「超高速プロトタイピング」を試す
まずはGPTsやv0などを使って、あなたのアイデアを数時間でプロトタイプにしてみましょう。「特定のタスクを自動化するエージェント」や「専門的な回答をしてくれるコパイロット」など、簡単なもので構いません。実際に動くものを使ってユーザーに触れてもらうことで、机上では得られないリアルなフィードバックが得られます。

Q&A
- Q1. AIのハルシネーション(もっともらしい嘘)が怖くて、プロダクトに導入できません。どうすればいいですか?
- A1. ハルシネーションをゼロにすることは現在の技術では困難ですが、UXの力でリスクを管理することは可能です。Perplexityのように「引用/出典の表示」パターンを徹底し、ユーザーが常にファクトチェックできる状態にすることが基本です。また、「免責事項/注意喚起」でAIの限界を正直に伝え、ユーザーの期待値をコントロールすることも重要です。特に医療や金融などハイステークスな領域では、最終的な判断は必ず人間が行うというフローを設計に組み込むべきです。
- Q2. 何から手をつければいいか、全く分かりません。最初の一歩としておすすめはありますか?
- A2. まずは、既存のユーザー体験を壊さずに価値を追加できる「影響型」モデルから始めるのがおすすめです。例えば、ユーザーが閲覧しているページの内容に基づいて関連情報を提示する、といった機能です。あるいは、特定の入力フォームに限定して、AIによる入力補助(拡張)機能を小さく試してみるのも良いでしょう。重要なのは、小さく始めてユーザーの反応を見ながら、徐々に統合のレベルを上げていくことです。
- Q3. 開発リソースが限られています。コストを抑えつつ効果的なAI機能を実装するコツはありますか?
- A3. 全く新しい体験をAIで作り出す「生成機能」は非常にコストがかかります。リソースが限られている場合は、既存のワークフローの中で最もユーザーが手間だと感じている、あるいは間違いやすい、ごく一部のタスクに狙いを定めましょう。そのタスクを解決するための「統合機能」としてAIを組み込むのが効果的です 1。例えば、「複雑な設定画面の入力を、自然言語で指示できるようにする」といった具合です。課題がシャープであればあるほど、実装はシンプルになり、ユーザーへの価値も伝わりやすくなります。
参考情報
- AI UX Patterns – https://www.aiuxpatterns.com/
- Exploring Generative AI UX patterns: defining the rules of interaction – https://blog.appliedinnovationexchange.com/exploring-generative-ai-ux-patterns-defining-the-rules-of-interaction-a6d5aeb80d3b
- Design Patterns For AI Interfaces – https://www.smashingmagazine.com/2025/07/design-patterns-ai-interfaces/“
- 20+ GenAI UX patterns, examples and implementation tactics – https://uxdesign.cc/20-genai-ux-patterns-examples-and-implementation-tactics-5b1868b7d4a1
- LLMs for UI/UX Design: A Survey – https://arxiv.org/html/2507.04469v1
- A New Frontier in LLM Applications: The Patterns for Building LLM-powered Systems – https://eugeneyan.com/writing/llm-patterns/
- 14 AI Patterns For Designing Seamless AI Experiences – https://www.koruux.com/ai-patterns-for-ui-design/
- Shape of AI: Design Patterns – https://www.shapeof.ai/
- GitHub Copilot – https://github.com/features/copilot
- From chaos to clarity: Using GitHub Copilot agents to improve developer workflows – https://github.blog/ai-and-ml/github-copilot/from-chaos-to-clarity-using-github-copilot-agents-to-improve-developer-workflows/
- How to use Perplexity AI in your UX design process – https://www.uxdesigninstitute.com/blog/perplexity-ai-and-design-process/
- Midjourney UX Audit: What We Can Learn From Low-UI Products – https://adamfard.com/blog/midjourney-ux-audit
- Exploring Generative AI UX patterns: defining the rules of interaction – https://blog.appliedinnovationexchange.com/exploring-generative-ai-ux-patterns-defining-the-rules-of-interaction-a6d5aeb80d3b
- How to build a gen AI application with a delightful end-user experience – https://cloud.google.com/blog/products/ai-machine-learning/how-to-build-a-genai-application
コメント