Chaos and Order

💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

プロローグ・AIが考えている間、ユーザーは何を見ているのか

2022年末の ChatGPT から2年、AI プロダクトの UX は大きく3つに分化した。

Chatbot UX (2022-2023): チャット欄だけ。「何を聞こうか?」で止まる
Agentic UX (2023-2024): Tool Use で外部アクションを実行。UI は依然としてチャット
Generative UI (2024-2025): AI が UI 自体を生成する。カード・フォーム・チャートが対話中に現れる

2025年の AI プロダクトはこの3世代が混在する。最も優れたプロダクトは Generative UI + 確かなフィードバックループ + 信頼できる UX の組み合わせだ。

「AI プロダクトの価値は応答そのものではなく、応答を待つ間・応答の後の体験で決まる。」

今回はその設計法について。

第1章・AI UX の本質的な難しさ

一般的な UX と異なる4つの点

(1) 応答時間のばらつき

クエリごとに 0.5秒 ~ 30秒の差
ローディングスピナーだけ見せるのは最悪

(2) 結果の不確実性

同じ入力でも異なる出力
「この答えは合っているのか?」という疑いがデフォルト

(3) Hallucination リスク

自信満々に間違った情報を提示
信頼の階層化が必要

(4) タスクの長期性

Agent が複数ステップを実行
中間ステップをどう見せるかが UX の半分

だから必要なもの

Progressive Feedback(段階的フィードバック)
Correction Paths(キャンセル・修正の経路)
Attribution(出典・根拠の提示)
Uncertainty Viz(信頼度の可視化)
User Control(ユーザーの制御権)

第2章・Streaming UI — トークン単位の段階的レンダリング

なぜ Streaming なのか

LLM はトークンを1つずつ順次生成する。全体で10秒かかる応答も、最初のトークンから露出すれば体感速度が劇的に速くなる。

ChatGPT が「答えが徐々に現れる」UX で示した核心の発見:

完成までの時間が同じでも、TTFT(first token までの時間)が短ければユーザーは「速い」と感じる
読む速度と生成速度が合うのが最適

技術スタック

(1) Server-Sent Events (SSE)

HTTP の片方向ストリーム
最も広く使われ、ブラウザ標準でサポート

(2) WebSocket

双方向。複雑な Agent・協調型アプリに適する

(3) HTTP/2・HTTP/3 Streaming

多重ストリーム・ヘッダ圧縮

(4) React Server Component Streaming

Next.js・RR7 で組み込みサポート
<Suspense> 境界で断片を転送

Vercel AI SDK(2024-2025 の標準)

'use client';
import { useChat } from 'ai/react';

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

サーバー:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model: openai('gpt-4o'), messages });
  return result.toDataStreamResponse();
}

重要な UX ディテール

タイピングカーソルの点滅(生成中を示す)
部分的な Markdown レンダ — 未完成のコードブロックも先にレンダ
自動スクロール(ユーザーが読んでいる位置なら触らない)
Stop ボタン — ユーザーが停止できる
Regenerate — 望まない答えをやり直す

第3章・Tool Use と Generative UI のレンダリング

伝統的な Tool Use の UX

LLM が JSON の tool call → サーバーが実行 → 結果をテキストとして挿入
画面は相変わらず「テキスト」

Generative UI の UX

tool 結果を UI コンポーネントとしてレンダ
例:「天気を教えて」→ 天気カードコンポーネント
例:「フライトを検索して」→ 航空便リスト・フィルタ

Vercel AI SDK - RSC 方式

// app/action.ts
'use server';
import { createAI, createStreamableUI } from 'ai/rsc';
import { WeatherCard } from './weather-card';

async function submit(input: string) {
  'use server';
  const ui = createStreamableUI(<LoadingCard />);
  (async () => {
    const weather = await fetchWeather(/* ... */);
    ui.done(<WeatherCard data={weather} />);
  })();
  return ui.value;
}

export const AI = createAI({ actions: { submit } });

ユーザーがメッセージを送ると、テキストではなく React コンポーネントがストリームされる。

長所

ユーザーがインタラクションできる(天気カードをクリック → 詳細)
情報密度がはるかに高い
ブランド一貫性(自社のデザインシステムを使える)

短所

実装の複雑さが増す
モデルがいつどの UI を呼ぶかを Prompt 設計で規定する必要
Fallback UI が必須(エラー・tool 失敗時)

第4章・Tool Use ステートの可視化

Agent が複数の tool を順次・並列に呼ぶとき、ユーザーに何をしているのかを見せる必要がある。

3段階の可視化

(1) Planning 段階

「あなたの質問を3ステップに分けて解決します」
チェックリストスタイル

(2) Execution 段階

「現在ステップ2を実行中: web search」
ステップごとのスピナー、完了でチェック

(3) Completion 段階

「5件の結果が見つかりました」
結果要約 + 詳細展開

実際のパターン

ChatGPT Search / Deep Research

上部に「使用した source X 件」
中間に進捗(検索中・推論中・作成中)
完了後に出典リンク

Perplexity

ステップごとのタイムライン表示
インライン引用の脚注 [1] [2]

Cursor

ファイル編集時の diff view
承認・却下ボタン

Claude (Anthropic)

Artifacts: 長いコードや文書を別パネルに
最近の Projects・Deep Research 機能

核心原則

絶対にブラックボックスにしない — 10秒以上何も見えないとユーザーは離脱
キャンセル可能性 — 「この Agent を停止」
ステップごとのプレビュー — 完了前でも中間結果を露出

第5章・不確実性・Hallucination の可視化

信頼度の3段階

(1) 確実

出典が明確、検証された事実
通常のテキスト

(2) 推定

AI の解釈・要約
イタリック or 薄い色
「AI の解釈です」バッジ

(3) 不確実/警告

最新情報がない、または信頼度が低い
警告アイコン・色(オレンジ/赤)
「正確性を検証してください」の文言

出典表示

インライン脚注

[1] [2] スタイル、クリックで出典
Perplexity・You.com の標準

Hover Card

リンクにホバーするとプレビュー

Source Sidebar

応答の横に別パネル

Hallucination 防御 UX

出典のない主張を強調(背景色を変える)
「知らない可能性がある」の公式表現:「確認されていませんが...」
数字・日付・固有名詞の別ハイライト(hallucination が多い領域)

第6章・対話型インターフェースの設計

2022-2023 は「誰もがチャット UI」だった。2025 は目的に合った UX に分化している。

チャット UI が合う場合

探索的な質問(リサーチ・学習)
コンテキストが長く積み上がる作業
答えが不明確な質問

チャット UI が合わない場合

定型ワークフロー(フォーム + AI 支援)
頻繁な反復作業(ショートカット UX)
正確な命令(agent CLI)

2025年の主要 UX パターン

(1) Composer + Chat

Cursor・Claude Code スタイル
エディタ・ファイルツリー + サイドの AI パネル

(2) Inline AI

Notion AI・Linear・GitHub Copilot
テキストカーソル位置から / やショートカットで呼び出し

(3) Canvas / Artifacts

Claude Projects, ChatGPT Canvas
左: 会話、右: 編集可能な成果物
長文作成・コード作業に最適

(4) Agent Console

Devin・OpenHands
ファイルシステム・ブラウザ・ターミナルを全部見せる
「AI と肩越しに覗き込む」感覚

(5) Command Palette

Cmd+K スタイル(Linear・Arc・Raycast)
素早い AI コマンド入力

第7章・Feedback と Correction パターン

AI プロダクトの成熟度は**「間違えたときにどう直すか」**で決まる。

基本のフィードバック3種

thumbs up / down
Regenerate(再試行)
Copy(コピー)

上級フィードバック

Edit Response — AI の答えをユーザーが修正
Explain why — なぜそう答えたかを AI が説明
Change tone — より簡潔に・より詳細に
Continue writing — 続きを書く

Correction UX の原則

(1) キャンセル・戻るが容易

ローカルの Ctrl+Z、またはチャット内の Edit・Delete

(2) 間違った部分だけを直す

全体再生成 vs 部分修正のオプション
コードなら diff review UI

(3) 学習のためのフィードバック

「何が間違っていましたか?」という構造化フィードバック
モデル改善・評価データとして活用

代表的な実装

Cursor

ファイル編集時の「Accept / Reject / Reject All」
部分採用が可能

Linear Magic

AI が草稿生成 → インライン編集 → 確定
フィールドごとに受容・却下

Notion AI

「Continue・Improve・Shorter・Longer」オプション
ブロック単位の修正

第8章・Human-in-the-loop Agent UX

なぜ HITL が重要か

Agent が自律的に決定・実行すると危険:

決済・削除・外部呼び出し = 不可逆
アクセス権限・機微情報
Hallucination が実被害に

解決策: 重要な決定に人間の承認を挟む。

承認 UX のパターン

(1) Preview + Confirm

「メールをこう送ろうとしています」→ 確認・修正・キャンセル
基本の構造

(2) Graduated Trust

最初は全アクションの承認、信頼が溜まれば自動化を拡大
ユーザーの選択権

(3) Policy-Gated

特定カテゴリ(決済・削除・外部)だけ承認が必要
安全な作業は自律

(4) Interrupt and Resume

Agent が作業中断 → ユーザーが介入 → 再開

実戦実装(LangGraph 例)

const graph = new StateGraph(State)
  .addNode('plan', plannerNode)
  .addNode('human_approval', humanApprovalNode)  // 待機ノード
  .addNode('execute', executorNode)
  .addEdge('plan', 'human_approval')
  .addConditionalEdges('human_approval', (state) =>
    state.approved ? 'execute' : 'plan'
  );

2025 のトレンド

Model Context Protocol (MCP) の標準化 → Claude・Cursor・Codex CLI で共通
Anthropic Computer Use(2024年10月) — Agent がブラウザ・デスクトップを操作、承認ゲート必須
OpenAI Operator(2025 年初) — 同種の機能、安全装置・異常検知を強化

第9章・Progressive Disclosure と AI

情報を必要なときに展開して見せる伝統的 UX パターン。AI と出会って強力になる。

例

Claude Artifacts

会話は軽い要約
詳細な成果物は別パネル(展開して見る)

Perplexity Sources

応答は本文、脚注クリックで出典を展開

GitHub Copilot Chat

コード提案時は簡潔な表示、詳細説明は「Why?」クリック

原則

要約が基本、詳細はオプション
段階的な深さ: 初心者 → 上級者の経路
密度の制御: 一画面に全てを入れない

第10章・エラー UX と復旧

エラーの種類

(1) Rate Limit / Usage Limit

「今日の使用量を超えました」 — 明確な案内 + アップグレードリンク

(2) Tool Execution Failure

「web search に失敗しました。再試行しますか?」
部分成功を表示(一部 tool は成功)

(3) Content Policy Violation

「このリクエストは処理できません」 — 理由を簡潔に、代替案を提示

(4) Model/Network Timeout

「タイムアウトしました。より簡単な質問でお試しください」

Retry UX

自動 retry(1-2回)をデフォルト + ユーザー手動
モデル fallback(GPT-4 → Claude → 小型モデル)
状態保持(以前の会話が失われない)

エラー防止

Input Validation: 短すぎる・曖昧すぎる入力を警告
Token Budget 警告: 「この長いファイルを処理するには...」
Cost Preview: 「想定コスト: 0.05 USD」

第11章・2025 年 AI プロダクト UX ベンチマーク

ChatGPT (OpenAI)

Streaming・Canvas・Search・Memory・Voice
最も広い機能、やや重い
Deep Research モードを 2025 年初に導入

Claude (Anthropic)

Artifacts で作業を分離
Projects でコンテキスト管理
Style matching でトーンを合わせる
開発者・ライターのファンが多い

Perplexity

Answer Engine ポジショニング
インライン出典・サイドバーの source
Pro Search・Focus(Academic・YouTube・Reddit)

Cursor (IDE AI)

Composer による多ファイル編集
Tab 予測の正確度が最高
shadcn 水準の「コピーして使う」方向性

Claude Code (Anthropic CLI)

ターミナルベースの agent
CLAUDE.md・MCP 標準化
シニア開発者の生産性革命

Notion AI

インライン呼び出し・ブロック単位操作
ワークスペース全体の検索と結合

Linear Magic

チケットの自動作成・整理・優先順位付け
作業フローとの自然な統合

v0 by Vercel

プロンプト → UI 生成
shadcn コンポーネントでそのまま出力
デザイン → コードのギャップを解消

Bolt.new / Lovable

プロンプト → フルスタックアプリの自動生成
デプロイまで一気に

Granola・Otter・Fireflies

会議の自動要約・Action Item
統合プラグインでカレンダー連携

第12章・Generative UI 実戦 — 「映画推薦チャットボット」

要件

ユーザー「SF 映画を推薦して」
AI が映画5件をカードで応答
各カードをクリックで詳細(tool の2次呼び出し)
詳細に「予告編を見る」ボタン

設計

Step 1: tool の定義

const tools = {
  searchMovies: {
    description: 'Search movies by genre/query',
    parameters: z.object({ query: z.string() }),
    execute: async ({ query }) => await tmdbSearch(query),
  },
  getMovieDetails: {
    description: 'Get movie details by id',
    parameters: z.object({ id: z.string() }),
    execute: async ({ id }) => await tmdbDetails(id),
  },
};

Step 2: UI コンポーネントのマッピング

function renderToolResult(name: string, result: any) {
  if (name === 'searchMovies') return <MovieGrid movies={result} />;
  if (name === 'getMovieDetails') return <MovieDetails data={result} />;
  return null;
}

Step 3: streaming 統合

const result = streamText({
  model: openai('gpt-4o'),
  messages,
  tools,
  toolChoice: 'auto',
});

Step 4: UX ディテール

tool 実行中の skeleton カード
画像の lazy load
カード hover で簡易プレビュー
「他の推薦も見る」の follow-up ボタン

第13章・次回予告 — Season 6 Ep 4「Motion・アニメーションの新時代」

UI 要素が生まれる方法を論じたなら、次は UI が動く方法だ。Ep 4 は 2025 年のモーションデザイン。

View Transitions API 実戦(Chrome・Safari・Firefox 2024-2025)
Motion One, Framer Motion, GSAP の比較
Svelte Motion・Solid Motion
CSS Animations 2025(scroll-driven, timeline-scope)
アニメーションのアクセシビリティ(reduced-motion)
性能・60fps・GPU・CSS Containment
モバイルジェスチャーアニメーション(React Spring, Motion Layout)
Apple/Google のデザイン言語における Motion の役割
韓国サービスの Motion 文化(Toss の事例)
AI 生成アニメーションツール

「止まった UI は死んだ UI。適切な motion がプロダクトを生かす。」

次の記事でお会いしましょう。

エピローグ・チェックリスト12

AI 応答は streaming でトークン単位にレンダされているか?
**TTFT(first token までの時間)**は1秒未満か?
Stop・Regenerate・Edit が全ての応答に提供されているか?
Tool Use の結果が Generative UI コンポーネントとしてレンダされているか?
Agent 実行中の進捗が視覚的に表れているか?
出典・信頼度が明確に表示されているか?
機微アクション(決済・削除)に Human-in-the-loop 承認があるか?
部分修正・再生成の UX が提供されているか?
エラー・Timeout の復旧経路が明確か?
モバイルでも同等の品質の UX を提供しているか?
アクセシビリティ(キーボード・スクリーンリーダー・reduced-motion)が考慮されているか?
フィードバックデータがモデル改善・評価に活用されているか?

「AI は道具であり、UX はその道具を人間が使えるようにするもの。 最高の AI プロダクトは『魔法のよう』に感じられるが、実は無数の UX ディテールの集積だ。」

— Season 6 Ep 3, Fin.