【20260127 AI×DevOps Study #3】UI/UXの開発フレームワーク 2/2 - 評価と自動化

■AI×DevOps Study #3 の概要
2026年1月27日に開催した「AI×DevOps Study」第3回の勉強会資料です。

「AI×DevOps Study」は、AI駆動開発やそこに関係するマイクロサービスについて理解を深める場になります。
株式会社ScalarではAIを使ったチーム開発を進めており、参画しているメンバーや協力会社の方から、具体的なAI駆動開発を実施する方法、その中で生まれたマイクロサービスアーキテクチャを使用したAI駆動開発の事例や実際に使えるエージェントについてお話頂き、参加者の皆様と知識の共有や交換を目的としています。
（弊社製品であるScalarDBも絡んだお話も一部出てきますが、汎用的な内容となっておりますのでフラットにお楽しみいいただけます）

■今回のテーマ
「UI/UXの開発フレームワーク 2/2 - 評価と自動化」

第2回は、実装後のフェーズに焦点を当て、クライアントからのフィードバック反映、UX評価、ドキュメント作成といった「評価・運用」プロセスをAIによって自動化・効率化する手法を紹介します。

1. イントロダクション
AI活用の深化：実装だけでなく、その後の「評価」や「ドキュメント化」といった周辺業務においてもAIエージェントを活用し、プロジェクト全体の品質とスピードを向上させる方針を提示。
フェーズの拡張：要件定義・実装（第1回）に続き、クライアントの要望反映から多言語化、チームでの運用ルールに至るまでの実践的なワークフローを紹介。

2. フィードバックの即時反映と改善
会議のマルチモーダル集約：Googleの「NotebookLM」を活用し、会議の録音データと実際の画面キャプチャ（スクリーンショット）をソースとして読み込ませることで、精度の高い要件抽出とタスク分解を自動化。
即時実装フロー：抽出した要件をAIエージェントに渡し、その場でコード修正から動作確認（devサーバー起動）までを行うことで、会議中に改善案を提示できるスピード感を実現。

3. AIエージェントによるUX評価
評価の自動化：Vercel製の「agent-browser」を利用し、AIがブラウザを操作してユーザー行動をシミュレーションすることで、コストと時間を抑えたUX評価を実施。
ペルソナとジャーニーの生成：プロジェクト資料からAIが「ペルソナ」と「ユーザージャーニーマップ」を定義し、それに基づいた視点でサイトを巡回・評価することで、客観的な改善提案（アクセシビリティやユーザビリティ）を出力。

4. ドキュメント生成の自動化と運用ルール
ドキュメントとテストの同期：AIエージェントがアプリケーションを探索し、E2Eテスト（Playwright）の実装、スクリーンショットの撮影、そして操作マニュアル（MDX）の執筆までを一貫して自動で行う仕組みを構築。
多言語化とチーム規約：モノレポ構成による翻訳リソースの一元管理で工数を削減しつつ、AI活用においては「人のレビューを怠らない」「プロンプトを疑う」といったチーム内の運用ルールを徹底することの重要性を強調。

■登壇者情報（敬称略）
箱崎一輝
株式会社NewWizのバックエンドエンジニア。PHP/Laravelでの開発経験を経て、2025年4月からClineでAI駆動開発を開始。2025年7月よりClaude Codeに移行し、現在はAIを活用したバックエンド開発を専門としている。チーム開発におけるAI活用の課題を解決するため、Claude CodeのSkillsを活用した開発支援テンプレートを作成・運用中。

■勉強会動画
UI/UXの開発フレームワーク 2/2 - 評価と自動化【20260127 AI×DevOps Study #3】
https://www.youtube.com/watch?v=44VaUiEBOpc

Transcript

1. UI/UXにおけるAI駆動開発の実践 評価と⾃動化 #2 2026/01/27 株式会社マーベリックス 箱崎 ⼀輝
2. ⾃⼰紹介 • 株式会社マーベリックス（札幌の会社） • Webエンジニア（主にフロントエンド） 5~6年⽬ • Zenn（https://zenn.dev/hako_hako） • AI活⽤歴：約2年 ◦ Cursor / Claude（Claude Code）/ Figma ◦ Google AI Pro（Gemini, Antigravity） 2

3. • 要件の整理からUI設計、実装まで、チームでAIを効果的に使う事例の紹介 • AIを単なる“個⼈のコーディング補助”として使うのではなく、 プロジェクト全体の”認識ズレの解消” や チーム全体の”コード品質の統⼀”のためにどう活⽤したかを全2回で紹介 • 簡易的な社内備品管理システムをデモ環境として 活⽤例をお⾒せします 今回のテーマ 3

4. デモ⽤の社内備品管理システムについて • 社員が備品（プロジェクター、モニター等）の検索‧申請を⾏い 情報システム部が承認‧貸出を管理するためのWebアプリケーション
5. 1. 業務システムUI開発における、AI活⽤の全体像 2. 前回の内容の振り返り 3. 評価や⾃動化に関する効果的なAI活⽤例の紹介 4. AI活⽤時の注意点について 今回お話しすること 5

6. 業務システムUI開発における、AI活⽤の全体像 6

7. 前回の内容紹介 2026/01/20（火）に実施した勉強会の内容
8. • 開発フェーズごとのAI活⽤例 ◦ 要件整理 ▪ ドメインストーリーテリングを⽤いて エンジニア以外にも伝わる「可視化」を⾏ったこと ◦ 設計‧実装 ▪ AIエージェントと相性の良いコンポーネント設計（Atomic Design）を採⽤ • 判断基準をルール化することで、AIによる⾃動実装の精度と再利⽤性を向上 ▪ Claude Code：どうやるかをSkillsとして定義し、ベストプラクティスを形式知化 • コードレビューや規約遵守を⾃動化し、属⼈化を防ぎつつ保守性を担保 • 汎⽤的なUI/UXフレームワークの紹介、デモ 第⼀回：チーム開発におけるAIの実践的活⽤ 8

9. • ドメインストーリーテリングとは、 会話を通じてドメイン知識を可視化するモデリング⼿法の⼀つ 複雑な業務の流れを物語（ストーリー）とし、 関係者と会話しながらその場で可視化する。 • AIと対話し整理することで、素早く共通認識を構築 要件整理：ドメインストーリーテリングの活⽤ 9

10. 以下の流れをプロンプトとし 対話形式で物語のストーリーを固める 1. 物語の舞台設定（スコープの決定） 2. 物語の開始（アクターと最初の⾏動） 3. 物語の展開 4. 物語の確認（レビュー） 5. 例外ケースの確認 6. 可視化（シーケンス図の⽣成） 7. クロージング 要件整理：ドメインストーリーテリングの活⽤ 10

11. 要件整理：ドメインストーリーテリングの活⽤ プロンプト例 これまでのやり取りで作成してもらった以下のシーケンス図画像を Nano Banana Proで生成してください。 ITシステムのシーケンス図のイラスト。白い背景。上部にアクターを表現するア イコンが水平に並んでいる。
12. 要件整理：ドメインストーリーテリングの活⽤
13. • React + shadcn/uiベースのプロトタイプ⽣成ツールを使⽤し、 構築イメージの具体化 • Claude CodeのSkillsやCommandsによる品質の統⼀ ◦ FE設計スキル ◦ AtomicDesign分割スキル ◦ コードレビュー⽤のカスタムコマンド UI設計‧実装 13

14. コンポーネント分割にAtomic Designを採⽤ AIエージェントとの相性の良さ Atomic Design に従ったコンポーネント設計 ルールを策定。 →コンポーネント分割の仕組み化 再利用性・保守性の向上、 ヒトの分割判断のズレをなくす
15. Figma MCPを利⽤したコンポーネント実装 プロンプト例 これらの1個のデザインを Figmaから実装して。 @https://www.figma.com/design/~~~
16. 第⼆回 評価や⾃動化に関する効果的なAI活⽤例の紹介
17. 今回の内容 1. UI実装後のクライアントの要望内容をその場で反映する仕組み 2. AIエージェントによるUX評価 3. ドキュメントサイトの⾃動⽣成 4. 多⾔語化対応
18. NotebookLMで 会議集約‧即時改善 クライアントの要望内容をその場で反映する仕組み
19. 改善フェーズ時の課題 • 議事録の整理から実装‧反映までにタイムラグが⽣じ、 フィードバックサイクルを回すのに時間がかかっていた • ⼝頭やテキストベースの合意形成だけでは、開発者とクライアント間で完成イ メージの認識のズレが⽣じ、⼿戻りが頻発していた • 会議中にその場で修正案を提⽰‧反映することが難しく、 確認のために持ち帰りが発⽣し、合意形成のスピードが上がらなかった
20. NotebookLMで会議集約‧即時改善 • 議事録から要件を抽出し、プロンプトを作成する流れを⾃動化 • なぜNotebookLMなのか ◦ 話し合う画⾯を画像にし、ソースとして追加できる（マルチモーダル対応） ◦ こちらの仕組みを実施した、2025夏時点で、⼀番精度が良かったため
21. ユーザー参加型ワークショップの実施概要 1. ページごとに要望などの会話内容を録音（Macの標準ボイスメモ機能） 2. NotebookLMで、会話内容 をプロンプトとして AIエージェントに解析依頼 3. AIエージェント が議事録まとめからタスク分解、優先順位決定 4. タスクを選択し、AIエージェントに実装を依頼⇨人による反映確認
22. NotebookLM：会話内容を追加
23. NotebookLM：会話内容を要約
24. Claude Code：要望を反映
25. Claude Code：要望を反映
26. CCサブエージェント：live‒feedback • 役割：クライアントの要望を迅速にUIに反映する • ワークフロー概要 1. 抽出：議事録からUI変更点を特定し、要件表を出⼒ 2. 計画：designing-frontendスキル参照し実装⽅針を提⽰ 3. 実装：Atomic Design遵守‧デザイントークン適⽤ 4. 確認：devサーバー起動→動作確認依頼→停⽌
27. CC スキル：designing-frontend • コンポーネント設計から実装‧テストまでを統合的にガイドするスキル ◦ 以下の分割されたドキュメントを段階的に開⽰ ▪ Atomic Designの階層定義と判断フロー ▪ 業務システム向けUI美学とガイドライン ▪ CSS変数、セマンティックカラー、Tailwind統合 • Primary/Secondary/Muted/Accent/Destructiveのセマンティックカラー。 直接⾊指定禁⽌（bg-blue-600 × → bg-primary ◯） ▪ インタラクションテストパターン • Given-When-Thenパターン必須、セマンティッククエリ使⽤（getByRole, getByLabelText）。⾮同期はfindByを使⽤
28. この活⽤例のまとめ • 会議の会話ログから修正要件や実装計画をAIが即座に⾃動⽣成し、 その場でコードへ反映‧修正が可能になった • 要望の持ち帰り→実装→確認→合意のサイクルがスムーズになった ◦ 会議の休憩中にAIエージェントが要望反映するようになり より有意義な会議になる
29. AIエージェントによるUX評価 agent-browser を活用した自動UX評価の仕組み
30. UX評価におけるこれまでの課題 • 評価者によって⼿順、参加者、課題設定がバラバラ ◦ 評価者のスキルレベルや主観に依存する、再現性がない → 評価基準の属⼈化によって品質のばらつきを⽣む • コストや時間の制約 ◦ 規模によるが被験者との諸々調整（⽇程やインタビュー、レポート作成など）はなかなか⼤変 → 予算⾯で厳しいプロジェクトは、外部に依頼するのも厳しい • ⼀度の評価で終わり、継続的な改善サイクルを作りずらい ◦ リリース前や⼤規模改修時に⼀度だけテストを実施→改善 ◦ 定期的な運⽤は様々な制約で厳しいのがあるある
31. agent-browserとは？ • Vercelが開発したAIエージェント向けのCLIブラウザ操作ツール ◦ CLIはRust⾔語で開発されているため、Node.js製のツールと⽐べて起動速度が速い ◦ Playwright MCPと⽐べて、約93%少ないコンテキストで同じタスクを完了できるとのこと → Webページの情報をLLMに渡す際、不要なHTMLタグ等を削除してトークン数を削減
32. agent-browser を利⽤したUX評価 ペルソナ定義 → ユーザージャーニー作成 → UX 評価 をワンストップで実⾏ • ペルソナ定義：サービスに即した架空のユーザー情報を AI で⽣成‧設定 • ユーザージャーニー：ユーザーの⾏動、感情、ニーズなどを AI で⽣成 • UX評価：ユーザーがサービスやアプリを使った時の体験がどの程度良いかをAI によって計測 ◦ 定量評価とペルソナ特性による定性評価 ◦ Core Web Vitals やアクセシビリティ指標など
33. AIによるUX評価の精度について 「AIで作成されたペルソナ‧ユーザージャーニーが、有効性があるものなのか？」 アメリカの研究では、ペルソナ作成のためのAI実験が⾏われ、 約2時間ほどユーザーへの質疑応答やウェブサイトの巡回ログを与えると、 AIエージェントが85%の確率で⼈間と同じ⾏動を取るといった結果が出ている arXiv.「Generative Agent Simulations of 1,000 People」.https://arxiv.org/pdf/2411.10109. かなり近しい⾏動を取る、コストや時間を踏まえると有効性は⼗分ある
34. デモ：UX評価の開始
35. デモ：UX評価 - 評価観点などの決定
36. • ユーザーのあいまいな質問に対してClaude Codeが適切な選択肢を⽣成し、 ユーザーがその中から選ぶ形で回答できるような Claude Codeが提供するツール。 • CLAUDE.mdに以下記述 ## ユーザー確認ポリシー PlanModeに限らず、重要な判断や複数の選択肢がある場合は、 **AskUserQuestionツールを使用**してユーザーに確認してください。 不明点がなくなるまで AskUserQuestionツールで繰り返し質問してください。 ただし、以下の条件に該当する場合は確認をスキップできます : - ユーザーが既に明確な指示を出している - プロジェクトの既存パターンから判断が明白 - 軽微な変更で影響範囲が限定的 AskUserQuestionとは？
37. デモ：AIエージェントによるUX評価 1. プロジェクトの分析とペルソナ定義 a. README.md等を読み込み、サービスの概要を理解 b. ペルソナ⽤のテンプレートmdファイルを参照し2~3名のペルソナを作成 i. 基本情報、課題‧ペインポイント、ニーズと期待、ITリテラシーレベル 2. ユーザージャーニーマップ作成 3. agent-browserでWebページ巡回とスナップショット取得 4. ペルソナ視点でのUX評価実施 5. 評価結果の保存とサマリー作成
38. デモ：プロジェクトの分析とペルソナ定義
39. デモ：UX評価 1. プロジェクトの分析とペルソナ定義 2. ユーザージャーニーマップ作成 a. テンプレートmdファイルを参照し、 各ペルソナに対し以下4フェーズでユーザージャーニーマップを作成 i. 認知・関心、検討・評価、導入・利用開始、継続利用・拡大 3. agent-browserでWebページ巡回とスナップショット取得 4. ペルソナ視点でのUX評価実施 5. 評価結果の保存とサマリー作成
40. デモ：ユーザージャーニーマップ作成
41. デモ：ユーザージャーニーマップ作成
42. デモ：ユーザージャーニーマップ作成
43. デモ：UX評価 1. プロジェクトの分析とペルソナ定義 2. ユーザージャーニーマップ作成 3. agent-browserでWebページ巡回とスナップショット取得 a. agent-browser⽤のskillを参照し、CLIベースでページアクセス‧巡回 b. ユーザージャーニーに沿ったページ遷移を⾏う 4. ペルソナ視点でのUX評価実施 5. 評価結果の保存とサマリー作成
44. デモ：UX評価 1. プロジェクトの分析とペルソナ定義 2. ユーザージャーニーマップ作成 3. agent-browserでWebページ巡回とスナップショット取得 4. ペルソナ視点でのUX評価実施 a. テンプレートmdファイルを参照し、評価を実施 i. 第一印象・全体評価、情報の見つけやすさ、ナビゲーション・構造、デザイン・ビジュアル、 操作性、ペルソナ別ニーズ充足度 b. 改善提案と緊急度別に分類 5. 評価結果の保存とサマリー作成
45. デモ：ペルソナ視点でのUX評価実施
46. デモ：UX評価 1. プロジェクトの分析とペルソナ定義 2. ユーザージャーニーマップ作成 3. agent-browserでWebページ巡回とスナップショット取得 4. ペルソナ視点でのUX評価実施 5. 評価結果の保存とサマリー作成 a. 指定場所に保存
47. デモ：評価結果の保存とサマリー作成
48. デモ：評価結果の保存とサマリー作成
49. デモ：評価結果の保存とサマリー作成
50. CCサブエージェント：ux-evaluator • 役割：⼈間中⼼設計に基づくUX評価を⾏う • ワークフロー概要 1. 情報収集：README.md読み込み 2. ペルソナ作成：2〜3名のペルソナ定義 3. ユーザージャーニー作成：4フェーズのジャーニーマップ 4. Webページ巡回：agent-browser でスナップショット取得 5. UX評価：ペルソナ視点で評価‧改善提案 6. 結果保存：指定ディレクトリに保存
51. 効果 • 評価者のスキルや主観に依存せず、定義したペルソナに基づきある程度の精度 で⼈間と⼀致する再現性の⾼い評価が可能になった • 被験者の調整やレポート作成の⼿間をAIで効率化 ◦ 低コストで迅速に実施できるため、 開発サイクル内での定期的な運⽤として取り⼊れやすくなった
52. AIエージェントによる ドキュメントサイト⽣成 agent-browser を活用した自動生成の仕組み
53. ドキュメントサイトの実装‧運⽤時の課題 • 機能実装や改修のスピードにドキュメントの更新が追いつかず、 情報が古くなり形骸化しやすい • 操作マニュアルやE2Eテストコードの作成は⼿作業で⾏うため⼯数がかかり、 開発者の⼤きな負担となっている • 画⾯UIが変わるたびにスクリーンショットの撮り直しや⼿順の書き換えが発⽣ し、保守‧運⽤コストが⾼い
54. agent-browser を利⽤したドキュメントサイト⽣成 Markdownベースのジェネレータ（Nextra）を使⽤し、ドキュメントサイトを⽣成 1. agent-browserでテストコードを作成 2. agent-browserで実⾏‧キャプチャ取得 3. AIエージェントがMDXを記述
55. デモ：ドキュメントの⾃動⽣成
56. デモ：⾃動⽣成フロー
57. デモ：計画フェーズ
58. デモ：画⾯の探索
59. デモ：ドキュメントサイト⽤ファイルの⽣成
60. デモ：E2Eテストの⾃動実装
61. デモ：ドキュメント⾃動⽣成動作確認
62. • 役割：E2Eテスト兼エンドユーザー向け操作マニュアルを作成する • ワークフロー概要 1. 情報収集：対象URL‧保存先を確認 2. 探索：agent-browser でアプリを巡回 3. 報告：主要機能⼀覧‧ガイド構造案を提⽰ 4. 計画作成：writing-guides スキルのテンプレ参照 5. ドラフト：MDXファイルを作成 6. メディア取得：Playwrightでスクリーンショット‧動画録画 CCサブエージェント：guide-writer
63. 効果 • agent-browserがWebアプリケーションを探索して操作マニュアルとテスト コードを⾃動⽣成するため、⼯数を⼤幅に削減できる • 実装の変更に合わせてドキュメントも⾃動的に追従‧⽣成されるため、 常に最新の状態を維持し、形骸化を防げる • スクリーンショットの取得やMDXファイルの記述まで⾃動化されることで、属 ⼈化を防ぎつつ⾼い保守性を担保できる
64. その他AI活⽤例の紹介 多言語化対応の実装
65. 多⾔語化対応：⼯数の⼤幅削減 • モノレポ構成による多⾔語化のアーキテクチャ ◦ 共通パッケージによる⼀元管理 ▪ メインアプリケーションとドキュメントサイトで同じ翻訳リソースを利⽤可能 ▪ アプリケーション共通/プロジェクト固有のもので名前空間を分けることが可能 • common：ボタンラベル（保存, 開く, 削除...）など
66. AI活⽤時の注意点について
67. AI活⽤時の注意点について 個⼈タスクでの考え⽅ • ⼈のレビューを怠らない ◦ AIによる⽣成コードを必ず読む • AIによる出⼒精度を疑う前に、⾃分のプロンプト/設定を疑う ◦ 改善した⽅が良いものについてはチームに共有する習慣、共有しやすい空気を作る チーム開発での考え⽅ • 調査タスクに複数⼈で時間をかけ、実装タスクはなるべく⼈が被らないようにする • AIのルールは慎重に取り⼊れて評価 ◦ 外部プロジェクトの最適化設定は、このプロジェクトに最適とは限らない ◦ 例：Claude CodeのSkillなど • 定期的な内部振り返り‧キャッチアップの習慣化
68. 68 まとめ
69. 本⽇のまとめ • フィードバックサイクルの効率化 ◦ NotebookLM等で会議内容を即座に要件化‧実装し、その場で動く画⾯を確認 ◦ ⼿戻りの原因となる認識ズレを会議中に解消し、合意形成のスピードを最⼤化 • UX評価の⾃律化 ◦ AIエージェントがペルソナとして振る舞い、サイトを⾃動巡回してユーザビリティを評価 ◦ ⼈間にはコストの⾼い網羅的なテストを代⾏させ、客観的な品質改善を効率化 • 保守‧運⽤の⾃動化 ◦ アプリケーションの探索結果に基づき、操作マニュアルやE2Eテストコードを⾃動⽣成 ◦ 実装変更への追従を⾃動化することで、ドキュメントの形骸化を防ぎつつ保守性を担保
70. 全2回のまとめ • 開発の進め⽅やチームのあり⽅そのものを、AI前提で作り変える ◦ AIを単なる個⼈のコーディング補助からチーム開発の基盤へと再定義 ◦ プロジェクト全体の認識ズレを解消し、属⼈化を防ぐための共通⾔語として活⽤ • ⼈とAIの役割分担 ◦ AIには実⾏と提案を任せ、⼈は定義（ルール作り）と判断（レビュー）に集中 ◦ チーム固有のSkillsやプロンプトを育て続けることが、 これからの開発組織の最⼤の資産になる • プロセス全体の⼀貫性のための取り組みの紹介 ◦ 要件‧設計‧実装では可視化とルール化により、⼿戻りを防ぎ合意形成を加速 ◦ 実装‧評価‧保守ではエージェントによる⾃動化で、品質維持と効率化を両⽴