Skip to content
Published on

AIプロダクトデザイン完全ガイド: generative UI、trust、feedback、streaming UI、agent UX、韓国文化特化 (2025)

🇰🇷KO🇺🇸EN🇯🇵JA
Split View필사 모드
Authors

Season 4 Ep 12 — Ep 11までが「エンジニアリングが安定するフェーズ」だったとすれば、Ep 12はユーザーに愛されるフェーズ。モデルがどれほど優れていてもUXが足りなければプロダクトは成立しない。

Prologue — 「良いAIプロダクト = 良いUX」ではない

2023年の多くのAIプロダクトは「ChatGPTの包装紙」だった。テキスト入力欄 + 応答欄 + 👍/👎。2025年現在、このフォーマットだけを持つプロダクトは大半が失敗したか、特定のニッチでのみ生き残っている。

理由:

  • ChatGPT本家が強くなり続けている → 単純なラッパーでは差別化できない
  • ユーザーがAIの弱点(幻覚、遅延、突然の拒否)を認識し始めた → trustのデザインが必要
  • 非技術ユーザーに「プロンプトを上手く書け」と要求できない

だから2025年のAIプロダクトデザインは:

「制約の中でtrustを作るUX設計」

この記事ではその具体的パターンを整理する。

第1章 · deterministic UI vs generative UI

1.1 deterministic UI

  • ボタン、フォーム、タブ、メニュー — 結果が予測可能
  • 学習曲線が緩やか、ミスの修正が容易
  • 80年のHCI伝統による最適化

1.2 generative UI

  • AIがその場でボタン、カード、チャート、フォームを生成
  • Tailwind / デザインシステムのtokenと連動
  • 文脈に応じてUIが変形 — 非常に強力だが予測が困難

1.3 ハイブリッドパターン

  • 骨格はdeterministic、コンテンツはgenerative(リスト、要約、引用)
  • 生成結果をdeterministicなコンポーネントとしてレンダリング(JSONからCard、Markdownから安全なHTML)
  • Actionable Chip: モデルが提案し、ユーザーがタップすると確定したアクションが動作

1.4 例

  • Notion AIのスラッシュコマンド: deterministic + generative
  • Perplexity: deterministicなレイアウトの中に生成された要約・引用
  • Cursor: IDEのdeterministicな枠組み + インラインのgenerativeなコード提案

「generationが自由であるほど、deterministicなガードレールが必要」

第2章 · trustのデザイン

2.1 なぜtrustが核心か

  • AI出力は確率的である。ユーザーは毎回「本当に合っているのか?」と心の中で問う
  • 一度大きなミスを出すと、正しい答えすら疑われる
  • trust ≠ 正解。trust = ユーザーがAIの限界を予測できること

2.2 7つのパターン

  1. Citation(引用): 根拠文書、ページ、区間を表示
  2. 不確実性の表示: 「85%確信」「情報不足」のような言葉
  3. 編集可能: 応答をその場で修正・削除・再生成
  4. 出典の視覚的区別: AI生成領域はアイコンや背景で区別
  5. Show work(詳細表示): 推論過程や検索結果を展開可能
  6. 更新周期の明示: 「最新データ: 2025-04-10」
  7. 拒否の礼儀: 「これはお手伝いできません」+ 代替案の提示

2.3 trustを壊すもの

  • 出典のない自信満々の回答
  • 幻覚を「それらしく」並べる
  • 失敗を静かに隠す(エラーメッセージなし)
  • 過度なgenerative UIによるインターフェースの毎回の変形

第3章 · feedback UX

3.1 収集

  • 👍/👎 ボタン: 即時feedback
  • 選択式の理由(チェックボックス): 「不正確」「不完全」「危険」「スタイルが合わない」
  • 自由記述: 稀だが深い洞察
  • 修正された応答自体がfeedback(再生成・編集)

3.2 活用

  • 👎ケース → 回帰評価セットの候補
  • 👍ケース → Preference学習データ (Ep 4 DPO)
  • 修正diff → スタイル・フォーマットの学習

3.3 UX配置

  • インラインボタンは「ダッシュボードへ移動」方式より参加率が5〜10倍高い
  • feedback即時に「ありがとうございます」の確認
  • 個人データがどう使われるかを透明に公開

第4章 · streaming・遅延・進行UX

4.1 streaming UI vs バッチ

  • streaming UI: 視覚的に速く、長い応答でも飽きない
  • バッチ: フォーマットが複雑(表・JSON)だったり、結果を一度に検証する必要がある時

4.2 遅延の処理

  • Skeleton UI: レイアウトだけ先に
  • Typing indicator: 「考え中...」/ 点三つ
  • Progressive content: タイトル → 要約 → 本文を順次表示
  • Budget表示: 「残り予想時間5秒」
  • キャンセル・待機: ユーザーが中断可能

4.3 進行状態

  • agent作業: 「検索中」「分析中」「要約作成中」のステップ表示
  • Todoチェックリスト: Claude Code式。各ステップの完了にチェック
  • Replay: 完了後に過程を振り返れる

4.4 退屈の防止

  • 長い待機にはマイクロインタラクション(アニメーション、楽しいメッセージ)
  • ただし過度なユーモアは専門性を損なう

第5章 · agent UX

5.1 3大課題

  1. 進行の可視性: 今、何をしているのか
  2. 承認・中断: 危険な動作の前で止まる
  3. 復旧・リプレイ: 失敗しても収拾できる

5.2 進行の可視性

  • Timeline: tool callと結果を時系列で
  • Todo: 「1. ファイルを開く ✓ 2. 修正中... 3. テスト実行待ち」
  • Cost/Timeメーター: 想定コスト・時間の表示

5.3 承認ゲート

  • 機微な動作(決済・削除・外部送信)には人間確認のポップアップ
  • ショートカット: 「次回も自動承認」オプション(明示的に)
  • 一括承認の濫用を防止

5.4 失敗UX

  • 明確なエラー理由 + リトライボタン
  • agentが自ら諦めた場合は「理由と次の代替案」を提示
  • ユーザーが「お手伝いしましょうか?」で合流可能

5.5 リプレイと共有

  • agent作業をリンクで共有(内部)
  • シミュレーション・デバッグ
  • 新メンバーの学習資料

第6章 · voice UX (Ep 9の延長)

6.1 デザイン原則

  • 短く明確な応答(Ep 9の12原則の要約)
  • turn-takingの尊重(途切れ・割り込みを自然に)
  • 不確実性を言葉にする(「私の理解では...」)
  • エスカレーショントリガー(数回失敗したら人へ)

6.2 マルチモーダル統合

  • 音声 + 画面: 音声で案内 + 画面にカード・リンク
  • Apple CarPlay / Android Autoとの統合
  • スマートホーム / ウェアラブル: ディスプレイなし → 純粋なvoice UX

6.3 アクセシビリティ

  • 字幕(リアルタイム)・テキスト代替を標準提供
  • 速度・サイズの調整
  • 静かな環境への対応(TTS音量の自動調整)

第7章 · データと学習のUX

7.1 ユーザーデータの公開

  • 「自分のデータがどこで使われるか」を平文で
  • 学習に使われるか、どれくらい保存されるか、削除方法
  • プライバシーポリシーは短い要約 + 詳細へのリンク

7.2 feedback → 学習ループ

  • ユーザーの修正がいつ学習に反映されるかの期待値を設定
  • 個人モデル vs 共有モデルの区別

7.3 On/Offスイッチ

  • 「この会話は学習に使わない」トグル
  • 企業設定: 組織全体で学習opt-out

第8章 · onboarding・第一印象

8.1 最初の30秒

  • 「これで何ができるか」3〜5の例
  • データ権限・認証の明確化(OAuth等)
  • 「サンプル質問」ボタン: 一つ押すだけで動作

8.2 Progressive disclosure

  • 機能を一度に全部見せず、使いながら伝える
  • 新機能ツールチップ、履歴ベースの推薦

8.3 エラー体験

  • 最初の失敗は致命的 — 最も頻繁な失敗に対する復旧UXをonboardingの段階で用意
  • ユーザー教育: 「なぜこう答えたのか」をインタラクティブに

第9章 · アクセシビリティ・包摂

9.1 多様な能力

  • 視覚: スクリーンリーダー・ハイコントラスト・フォントサイズ
  • 聴覚: 字幕・テキスト代替・バイブレーション
  • 運動: キーボードのみ・音声のみ
  • 認知: シンプルな言葉・短い応答・チェックリスト

9.2 言語・文化

  • 多言語サポート(UI + 応答)
  • 現地の慣用句・数値フォーマット・日付・通貨
  • 文化的な機微への配慮(祝祭・ジェンダー・挨拶)

9.3 経済的アクセス

  • 無料 / 低価格ティア
  • オフラインモード(ローカルLLM)
  • 低スペック端末への対応

第10章 · 倫理・責任

10.1 透明性

  • AIが作成したことを明示
  • 人間とAIの境界を区別(特に会話で)

10.2 バイアス・公平性

  • 特定集団に不利な結果を検知・補正
  • テストセットの多様性(性別・年齢・地域・職業)

10.3 労働・経済

  • AIに置き換えられる職務に対する社会的責任
  • データラベラー・評価者の労働条件

10.4 環境

  • 大型モデル・長いcontextのエネルギー消費
  • キャッシング・ルーティング・小型モデルによる削減

第11章 · 韓国語・韓国文化への特化

11.1 トーン・敬語

  • デフォルトは敬語、文脈に応じて柔らかくタメ口を混在可能
  • 「〜します」体 vs 「〜です/ます」体のスタイル一貫性

11.2 呼称

  • 「お客様」「ユーザー様」「OO様」など、ブランドごとのルール
  • 実名・ニックネーム設定を許可

11.3 文化的文脈

  • 祝祭(ソルラル・チュソク)、祝日、季節の挨拶
  • 年齢・学年・キャリアに関する質問の機微
  • 職業・出身地に触れる際の配慮

11.4 法的文言

  • 利用規約・個人情報・マーケティング同意: 明確に区別
  • 金融・医療・法律アドバイスの拒否文言

11.5 韓国語モバイルUX

  • 韓国語キーボード・音声入力の混在
  • 短い回答 + 長い回答のトグル
  • 絵文字・ミームの活用とバランス

第12章 · 実戦ケース 5つ

12.1 AIコーディングプロダクト (Cursor型)

  • インライン提案 + チャット + Todoリスト
  • 編集の受諾/拒否をワンキーで
  • Replay: agentが行ったこと全体のdiff

12.2 カスタマーサポート (Zendesk AI等)

  • 顧客メッセージとAI回答ドラフトとオペレーターの修正
  • 引用・ナレッジベースリンクの明示
  • 「自動送信」vs「修正後送信」のトグル

12.3 ライティング(例: Grammarly、Notion AI)

  • 文のハイライトに基づく修正提案
  • スタイル・トーンのスライダー
  • 「原文を表示」で戻す

12.4 検索・リサーチ(Perplexity型)

  • 引用・出典の強調
  • Follow-up質問の自動提案
  • トピック別コレクション・ノート

12.5 agent (Manus、Devin型)

  • Taskボード + Replay + 外部統合
  • 危険ステップの承認
  • 成果物のダウンロード・共有

第13章 · アンチパターン10選

13.1 プロンプトボックスが単独で置かれている

onboarding・サンプル・推薦なし。白紙恐怖。

13.2 進行表示なし

長いagent作業中にユーザーが離脱。

13.3 引用のない応答

trustの崩壊。

13.4 幻覚応答に自信満々

False confidenceは最悪のUX。

13.5 feedback収集だけ、反映の痕跡なし

ユーザーがすぐに疲れてやらなくなる。

13.6 エラーを静かに飲み込む

何が失敗し、次の試行は何なのかが不明。

13.7 自動動作に承認ゲートがない

事故の源。

13.8 アクセシビリティを後回しに

結局スケジュール・機能に押されて入らない。

13.9 AI表示の欠落

規制違反 + ユーザーの欺瞞。

13.10 韓国文化を無視したグローバルトーン

敬語・呼称・文脈が不自然。

第14章 · チェックリスト — AIプロダクトデザイン、ローンチ前12項目

  • generative / deterministic UIの境界を明示
  • 引用・不確実性・編集可能UX
  • streaming + 進行状態の表示
  • agent作業にTodo・承認ゲート・Replay
  • feedback(👍/👎)+ 理由オプション + 反映経路
  • 失敗・エラー復旧UX
  • onboarding 30秒 サンプル・権限・期待値
  • アクセシビリティ(視覚/聴覚/運動/認知)
  • データ利用の透明性 + on/offスイッチ
  • AI識別の明示(法・倫理)
  • 韓国語・文化への特化(敬語・呼称・法的文言)
  • バイアス・多様性テスト

第15章 · 次回予告 — Season 4 Ep 13 (フィナーレ): 「生成AI時代のビジネスモデル」

技術も、運用も、デザインも整理した。最後の問いは**「これでどう稼ぐか?」**

  • 価格モデル (Subscription / Usage / Hybrid / Seat / Outcome)
  • コスト構造とマージン (API依存 vs 自社モデル)
  • GTM (B2C / B2B / Enterprise / Prosumer)
  • データフライホイールとモート(堀)の作り方
  • 「AI wrapper」批判を超える方法
  • 規制・評判リスクがビジネスに与える影響
  • 投資の地形(VC・企業型・公共)
  • M&Aと統合
  • 韓国スタートアップのグローバル進出
  • Season 4全体の振り返り
  • Season 5予告(例: 「データエンジニアリングの再発明」)

「技術がいかに優れていても、ビジネスモデルがなければ一年で終わるプロダクト」。Season 4最後の記事は、技術・運用・デザインを「お金」という軸で縫い合わせる。

次回、お会いしよう。

まとめ: AIプロダクトデザインとは、trustを制約の中で設計する仕事である。deterministic / generative UIの境界、引用・不確実性・編集の7-trustパターン、streaming・feedback・失敗UX、agentの進行・承認・リプレイ、voiceのturn-taking、データ透明性、onboarding 30秒、アクセシビリティ、倫理、韓国語・文化特化。「良いAIプロダクト = 制約の中でユーザーと対話するプロダクト」。モデルは始まりに過ぎず、プロダクトの品質はUXが仕上げる。

Discuss on Twitter • View on GitHub