ユースケースを検討してUIを作っても、ユーザーが実際にそのUIを使えるか、期待したUXを感じてくれるかは別問題です。開発者自身がテストしても、自分は意図を知っているので「伝わっていない」ことには気づきにくい。

この問題に対して、開発者の意図を知らない誰かにUIだけを見て使ってもらえれば検証できるのでは、と考えました。その「誰か」をAIのペルソナに担わせられないかと考えたのがui-narrative-probeです。

Claude Codeのプラグインとして動作し、対象のWebアプリをPlaywrightで操作して、UIからユーザーが認知できる情報だけを入力にペルソナを構築します。そのペルソナ自身の視点でアプリを使うナラティブ（利用物語）を生成し、ペルソナが「これがやりたいのにできない」とぶつかった場面を改善のヒントとして記録します。
出力がテストケースやチェックリストではなく「物語」なのは、ユーザーの思考や行動の流れをイメージしやすくするためです。物語を読めば、想定通りの使い方をしているか、想定した機能を見つけられているか、といったことがストーリーの中から読み取れます。

このプラグインは、記載のToDoアプリでのみ試している状態です。AIが演じるペルソナが実際のユーザーと同じ行動をする保証はなく、あくまで「こういう使い方をする人がいたら、何が起きそうか」を想像するための材料として捉えています。

テスト対象と環境

以前の記事でも使ったテスト用のToDoアプリ（コード）を使用しました。

ログイン可能なユーザーは、固定で以下を用意しています
- 織田信長（ID: oda / PASS: nobunaga）
- 豊臣秀吉（ID: toyotomi / PASS: hideyoshi）
- 徳川家康（ID: tokugawa / PASS: ieyasu）
機能: タスクの追加・編集・削除・完了切替、フィルター（All/Active/Completed）

確認環境:

Windows 11 Professional 25H2
WSL2 (Ubuntu 24.04 LTS)
Claude Code (Claude Opus 4.6)

インストール

Claude Codeで以下を実行します。

/plugin marketplace add two-pack/ui-narrative-probe
/plugin install ui-narrative-probe@ui-narrative-probe
/reload-plugins

ブラウジングツール（playwright-cli等）が使える状態にしておく必要があります。
今回はplaywright-cliを使用しています。

使い方

対象アプリを起動した状態で、以下のように実行します。

/ui-narrative-probe:run http://localhost:3000

第2引数で言語を指定できます（省略時は日本語）。

実行の流れ

3つのPhaseに分かれていて、各Phase間で人間の確認を入れます。例では特に修正は挟まず、そのままの結果で進めています。

Phase 1: アプリ探索

explore-agentがブラウザで実際にアプリを操作し、画面構成・機能・ドメイン概念を調査します。探索自体はDOMやアクセシビリティツリーも使って網羅的に行いますが、その結果を記録する段階では、撮影したスクリーンショットを見てユーザーが視覚的に認知できる情報だけを app-understanding.md に残します。

今回のToDoアプリでは以下が記録されました。

3画面構成（ログイン画面、タスク管理画面、アクセスエラー画面）
タスクのCRUD操作とフィルター機能
発見しにくい機能として「ブラウザ言語による自動多言語切替（UIに切替手段なし）」なども検出

ここで結果を確認して、OKなら次へ進みます。

Phase 2: ペルソナ構築

app-understanding.md を基にペルソナを構築します。UIから読み取れる情報だけで思考するルールなので、開発者しか知らない内部仕様は使いません。

今回はアプリに存在する3アカウント（戦国武将）をそのままペルソナの土台にして、それぞれ異なる利用スタイルを持つ結果になりました。

ペルソナ	利用スタイル	特徴
織田信長	攻めの利用者	高頻度、大量タスク、即断即決。Activeフィルター常用
豊臣秀吉	管理志向	フィルター使い分け、タスク名の編集を活用、振り返り重視
徳川家康	堅実な利用者	低頻度、少数精鋭、削除は使わない、Allフィルターのまま

ここでも確認が入るので、ペルソナの追加・削除・調整ができます。

Phase 3: ナラティブ生成

3ペルソナ分のnarrative-agentが並列で起動し、それぞれがブラウザでアプリを操作しながらナラティブを書きます。各エージェントは自分のペルソナとして振る舞い、一人称でストーリーを紡ぎます。

参考までに、今回の実行にかかった時間とトークン使用量は以下の通りです（メイン会話のオーケストレーション分は含みません）。

Phase	所要時間	トークン数
Phase 1: アプリ探索	約6分	約52,000
Phase 2: ペルソナ構築	約30秒	約15,000
Phase 3: ナラティブ生成（信長）	約5分	約36,000
Phase 3: ナラティブ生成（秀吉）	約15分	約78,000
Phase 3: ナラティブ生成（家康）	約13分	約67,000
合計	約20分（Phase 3は並列）	約248,000

各エージェントがPlaywrightでブラウザを操作するため、スクリーンショットの画像トークンを含む分、テキストだけの作業より消費量は多めです。シンプルなToDoアプリでこの量なので、複雑なアプリではさらに増えることを想定しておいた方がよさそうです。

生成されたナラティブ（抜粋）

実際に生成されたナラティブから一部を紹介します。
生成された全体は、以下のコミットで確認できます。
https://github.com/two-pack/todo-app-for-testing/commit/f5c489cb1f481966178641d075cf8acc2b3f6926

織田信長 — S3: 勢い余って

明智光秀への書状は先ほど不要と判断して削除した。あれは意図的だった。だが問題はその後だ。

Activeフィルターで残りのタスクを眺めながら、素早く処理を進めていた。「南蛮渡来の地球儀を受け取る」のすぐ隣にある削除の操作を、完了と間違えて押してしまった。一瞬のことだった。確認も何もなく、タスクが消えた。

消えた。

取り消す手段がない。

高速操作ユーザーが確認なし即時削除で誤操作する場面です。「消えた。」の一行が、手順書では出てこない感情を伝えています。

徳川家康 — S5: 取り返しのつかぬ一手

このアプリでは、削除を実行すると確認なしに即座にタスクが消える。取り消す手段もない。（中略）この不安があるからこそ、私は削除をほとんど使わない。

慎重派のユーザーは「誤操作が怖いから削除機能自体を避ける」という行動を取ります。同じ「確認ダイアログがない」という一つの問題が、信長には「勢いで消してしまう事故」として、家康には「怖くて機能を使えない」として現れる。ペルソナの違いによって影響の出方がまったく異なるのは、物語形式だからこそ見えてくる部分だと思います。

検出されたギャップ（gaps.md）

ナラティブの中でペルソナが壁にぶつかった場面が gaps.md に記録されます。今回は6件検出されました。

#	ギャップ	関連ペルソナ
1	削除のUndo/確認機能がない	信長、家康
2	タスク優先度の設定・表示がない	信長
3	完了済みタスクの一括削除がない	信長、秀吉
4	パスワードリセット機能がない	家康
5	ログイン状態の保持オプションがない	家康
6	編集時の保存・キャンセルが近接	秀吉

複数のペルソナから同じギャップが出てくるもの（#1、#3）は、より優先度が高い改善ポイントと言えそうです。

成果物

.ui-narrative-probe/ ディレクトリに以下が生成されます。

.ui-narrative-probe/
├── app-understanding.md              # アプリ理解ドキュメント
├── screenshots/                      # 探索時のスクリーンショット
├── personas.md                       # ペルソナ定義
├── gaps.md                           # 改善示唆
└── narratives/                       # ナラティブ

所感

やってみてわかったこと

シンプルなToDoアプリでは、UIで基本的なユースケースは確認できてしまうので、「意図が伝わっていない」という発見には至りにくいです。もう少し複雑なアプリや、あえてわかりにくいUIで試してみたいところです。

一方で、削除のUndo問題のように、ペルソナの違いによって同じ機能から異なる問題が浮かび上がる点は収穫でした。改善示唆が単なるリストではなく、ナラティブの中に「なぜそれが問題なのか」の文脈が残っているので、対応の優先度を判断する材料になりそうだと感じています。
ただこれも、提示された改善提案を対応してみてから、もう一度実行してみる必要があるなと考えています。

ペルソナの安定性について

今回の固定アカウントの表示名が戦国武将だったため、ペルソナがそれに引きずられて「戦国武将がToDoアプリを使う」という世界観になりました。これはこれで読み物として面白いのですが、実行するたびに同じペルソナやナラティブが生成されるわけではありません。戦国武将とは関係ないペルソナが出てくることもありました。

この記事はClaude Codeと一緒に書きました。