【20260120 AI×DevOps Study #2】UI/UXの開発フレームワーク 1/2 - デザインと実装

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

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

■今回のテーマ
「UI/UXの開発フレームワーク 1/2 - デザインと実装」

チーム開発における要件定義の可視化と実装プロセスの自動化.

第1回は、AIを個人のコーディング補助からプロジェクト全体の「認識ズレ解消」と「品質統一」へ拡張する手法にフォーカスします

1. イントロダクション
AI活用の全体像： AI活用の目的を「個人の作業効率化」から、チーム全体の「要件の認識ズレ解消」や「コード品質の統一」へと引き上げる方針を提示
開発フローの変革： 要件定義からUI設計、実装、テストに至るまで、AIエージェントを組み込んだ新しい開発フローの全体像を共有

2. 要件定義と共通認識の形成
ドメインストーリーテリング： 複雑な業務フローを可視化するため、Geminiをファシリテーターとして対話を行い、関係者間の共通認識（物語）を作成
可視化プロセス： 対話からシーケンス図を生成し、さらに画像生成AI（Nano Banana Pro）を用いて直感的なイラスト化を行うことで、エンジニア以外にも伝わる合意形成を実現

3. 実装とデザインシステム
Atomic Designの採用： AIエージェントとの相性を考慮し、コンポーネント設計にAtomic Designを採用して分割判断のズレを排除
実装の自動化： Claude CodeやCursorを用い、策定したコンポーネント設計ルール（Atoms, Molecules等の責務定義）に基づいた自動実装を行うことで、開発効率と再利用性を向上

4. コード品質とスキルの形式知化
自動コードレビュー： Claude CodeのSkills機能を用い、Atomic Designの違反やアンチパターン（UI内での直接fetch等）を検出するレビューを自動化
ベストプラクティスの資産化： 開発の「どうやるか（How）」をMarkdown形式のSkillsとして定義し、AIに参照させることで、属人化を防ぎつつ保守性の高いコードベースを維持

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

■勉強会動画
UI/UXの開発フレームワーク 1/2 - デザインと実装【20260120 AI×DevOps Study #2】
https://www.youtube.com/watch?v=v7pNANEFwd0

Transcript

1. UI/UXにおけるAI駆動開発の実践 #1 デザインと実装 2026/01/20 株式会社マーベリックス 箱崎 ⼀輝
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を単なる“個⼈のコーディング補助”として使うのではなく、 プロジェクト全体の”認識ズレの解消” や チーム全体の”コード品質の統⼀”のためにどう活⽤したかを紹介 • 実際に紹介する⽅法を実演し 簡易的な社内備品管理システムのUI開発をお⾒せする 3

4. 1. 業務システムUI開発における、AI活⽤の全体像 2. AI活⽤例：要件整理 3. AI活⽤例：UI設計 4. AI活⽤例：UI実装 5. 汎⽤的 UI/UXフレームワークの紹介 今回お話しすること 4

5. 業務システムUI開発における AI活⽤の全体像 5
6. 業務システムの⼀般的なUI開発の流れ（⼀例） 6

7. AIを活⽤した業務システムUI開発の流れ 7

8. 8 AI活⽤例：要件整理
9. よくある問題 9

10. • ドメインストーリーテリングとは、 会話を通じてドメイン知識を可視化するモデリング⼿法の⼀つ 業務の流れを、関係者と会話しながらその場で可視化し、物語（ストーリー）として整 理する。 • 誰が（アクター）、何を（ワークオブジェクト）、どうする（操作）を アイコンと⽮印でつないで可視化する（シーケンス図やピクトグラムなど）ことで、 プロジェクト関係者の共通認識をスムーズに作ることができる ドメインストーリーテリングによる業務フローの可視化 10

11. ドメインストーリーテリングによる業務フローの可視化 • どのようにAI活⽤? ◦ 議事録や要件メモをもとに、AIとの対話を⾏い物語を考える ◦ 物語からシーケンス図を出⼒し、最終的にイメージ画像を⽣成する • 重要なこと ◦ 関係者（⼈間）と会話を繰り返し、ドメイン理解を深めていくこと ◦ このモデリングは、あくまでも議論を進める上の叩き台感覚で利⽤することを意識すること • AIを活⽤し、素早く視覚化を⾏うことができる ◦ 共通認識を作ることで、認識のズレを防ぐことができる
12. ドメインストーリーテリングによる業務フローの可視化 12
 https://github.com/wfukatsu/Prompt-Templates/blob/main/system-design/domain-storytelling.md
13. デモ：業務フローの可視化 13
 1. Geminiで対話を行う a. 先ほどのプロンプトをカスタム指示にしたGem作成済み b. 抽象的な表現でやり取りを進める 具体的な表現が入ると前提知識を与えないといけないため、 そもそもの要件整理という目的が達成できない 2. 生成されたシーケンス図を確認 3. シーケンス図の画像をNano Banana Proで生成 a. プロンプト例 これまでのやり取りで作成してもらった以下のシーケンス図画像を Nano Banana Proで生成してください。 ITシステムのシーケンス 図のイラスト。白い背景。上部にアクターを表現するアイコンが水平に並んでいる。 4. 全体像画像をNano Banana Proで生成 a. プロンプト例 これまでのやり取りを踏まえ、一枚の画像を生成してください。 注意 日本語を用いること。 抽象化してわかりやすく、初めて見る人にも伝わるようなと内容、単語や情報量などに注意すること。 具体的なテキストなどを用いることでわかりやすい図解を生成すること。
14. プロンプト例 これまでのやり取りで作成してもらった以下のシーケンス図画像を Nano Banana Proで生成してください。 ITシステムのシーケンス図のイラスト。白い背景。上部にアクターを表現するア イコンが水平に並んでいる。 デモ：業務フローの可視化
15. デモ：業務フローの可視化
16. 16 AI活⽤例：UI設計
17. 初期UI/簡易モック作成 • bolt.newやv0を使⽤して簡易モックを作成 ◦ React + shadcn/uiベースのプロトタイプ⽣成ツールを使⽤し、構築イメージの具体化
18. 簡易モックとFigmaの連携 1. プロトタイプ⽣成ツールをローカル検証 2. Figma拡張機能（html.to.design）でローカル起動中の内容を Figmaデザインデータとしてエクスポート 3. Figma側でバリアントやプロパティを調整 4. 定義したコンポーネントをもとにFigma MCPを活⽤し本実装へ
19. Figmaとの連携 デジタル庁デザインシステムを参考に、 デザイントークンの作成とコンポーネント設計を実施
20. 20 AI活⽤例：UI実装
21. これまで：従来のUI実装フローの課題 21
 反復的作業による開発効率の低下
22. UI開発内の実装⼯程の⾃動化 22
 ⾃動テスト ‧テストコード⾃動実装 ‧テスト失敗した場合、  通るまで⾃動修正 これまで： ‧開発者による⼿動実装 Agentによる⾃動実装 ‧計画に基づいた正確で  ⾼速な実装 ‧エラー時の⾃動修正 これまで： ‧開発者による⼿動実装 ⾃動⽣成 ‧開発ルール/制約の遵守 ‧フォーマットに基づいた  ドキュメント⾃動作成 これまで： ‧開発者による制約の個別判断 ‧ドキュメント⼿動作成
23. プロジェクトの状況によるものの、 基本的にはAWS Bedrock経由でのClaudeを利⽤ 1. 開発当初はCursorのメイン利⽤を進めていた a. Cursor Rulesでのルール整備 b. Cursor Custom Modesでのシナリオ別AIエージェントの定義 i. 計画 -> 実装 -> デバッグ までのワークフローに沿った実施 2. 現在はClaude Codeへ⼀部移⾏中（Cursorと併⽤） a. 理由 i. Custom Modesが廃⽌になり、カスタムコマンドの利⽤が推奨された ii. 他開発チームとの統⼀など AIツール利⽤時系列まとめ（⼀例） 23

24. 24 コード品質について
25. 1. コンポーネント分割にAtomic Designを採⽤ Atoms? 検索バーで 最小単位？ Molecules? フィールドとボタンの 組み合わせ？
26. 1. コンポーネント分割にAtomic Designを採⽤ AIエージェントとの相性の良さ Atomic Design に従ったコンポーネント設計 ルールを策定。 →コンポーネント分割の仕組み化 再利用性・保守性の向上、 ヒトの分割判断のズレをなくす
27. 例：階層定義 ### atoms（原⼦） - 最小単位のUI要素 - 単独で機能を持つ - 例: Button, Input, Label, Icon, Badge ### molecules（分⼦） - 2つ以上のatomsの組み合わせ - 単⼀の⽬的を持つ⼩さなコンポーネント群 - 例: SearchBar (Input + Button), FormField (Label + Input) ### organisms（有機体） - molecules/atomsを組み合わせた複雑なUIセクション - 独⽴した機能を持つ - 例: Header, Sidebar, ProductCard, DataTable ### templates（テンプレート） - organismsを配置したページレイアウト - データを含まない構造のみ - 例: DashboardLayout, AuthLayout ### pages（ページ） - 実際のデータを含む完全なページ - Next.js App Routerのpage.tsxで実装 - 例: /dashboard/page.tsx, /products/[id]/page.tsx 1. コンポーネント分割にAtomic Designを採⽤ 例：チェックリスト ## チェックリスト 新規コンポーネント作成時に確認 - [ ] shadcn/uiに同等のコンポーネントが存在しないか確認した - [ ] 配置階層判断フローに従って決定した - [ ] ファイル構成は正しいか（ComponentName.tsx, index.ts） - [ ] 必要に応じて.stories.tsxを作成した - [ ] 他の同階層コンポーネントとの⼀貫性を確認した
28. 2. コードレビュー • Claude Codeにコードレビュー⽤のCommandを追加（以下は⼀例） ◦ クリティカル ▪ Atomic Design（例：× atomsで他のコンポーネントインポートなど） ▪ アーキテクチャ/責務の分離（例：× UIコンポーネント内での直接fetchなど） ◦ 推奨事項 ▪ 抽象化（例：同じロジックの関数化提案） ▪ 可読性（例：早期リターン, 関数の分割）
29. 2. コードレビューの出⼒例
30. 30 UI/UXフレームワークの紹介
31. • メインアプリケーションはNext.js、 ドキュメントサイトはNextra Turborepoによるモノレポ構造 • 今回はメインアプリケーションについて解説 • メインAIツール：Claude Code • MCP：Context7 基本技術スタック 31

32. ui-ux-framework/ ├── .claude/ # Claude Code AI 開発環境 │ ├── settings.json # Bedrock/LLM設定 │ ├── agents/ # 役割別AIエージェント │ ├── skills/ # 拡張スキルセット │ └── commands/ # カスタムコマンド ├── .devcontainer/ # DevContainer設定 ├── apps/ │ ├── web/ # Next.js アプリケーション │ └── docs/ # Nextra ドキュメント ├── packages/ │ └── shared-i18n/ # 国際化リソース ├── CLAUDE.md # ⾃律実⾏ガイドライン ├── turbo.json # Turborepo 設定 └── biome.json # Biome 設定 プロジェクト構造 32
 AI駆動開発の流れ 1. 要件確認 a. AskUserQuestion ツール 2. Plan Modeでの実装計画 a. FE設計戦略スキルを使⽤ 3. 計画に対し、ユーザー承認 4. 実装⽤のAIエージェントによる実装‧デ バッグ 5. コミット
33. • ユーザーのあいまいな質問に対してClaude Codeが適切な選択肢を⽣成し、 ユーザーがその中から選ぶ形で回答できるような Claude Codeが提供するツール。 • CLAUDE.mdに以下記述 ## ユーザー確認ポリシー PlanModeに限らず、重要な判断や複数の選択肢がある場合は、 **AskUserQuestionツールを使用**してユーザーに確認してください。 不明点がなくなるまで AskUserQuestionツールで繰り返し質問してください。 ただし、以下の条件に該当する場合は確認をスキップできます : - ユーザーが既に明確な指示を出している - プロジェクトの既存パターンから判断が明白 - 軽微な変更で影響範囲が限定的 AskUserQuestionとは？
34. Claude Codeにおける使い分け⽅針表 34
 機能 定義するもの 使うとき CLAUDE.md 前提条件 常に適用されるプロジェクト全体の設定やルールを定義したいとき Subagents どんな専門家か 特定の領域（コーディング、テスト等）を専門とする人格に委託・並列 実行させたいとき Skills どうやるか 複雑な手順、専門知識、ベストプラクティスを具体的に定義して再利 用したいとき Commands 何をやるか よく使う定型的な指示を短縮コマンドとしてまとめたいとき Rules パス別の前提 特定のディレクトリやファイル種別ごとに異なる設定やルールを適用 したいとき Zenn.「ドラゴンを倒して覚える Claude Code - Commands, Skills, Subagents, Rules の違いと使い分 け」.https://zenn.dev/yahsan2/articles/claude-code-game-analogy.
35. FE設計戦略スキル • designing-frontend ◦ フロントエンド開発における設計戦略を統合的にガイドし、コンポーネント設計‧UI/UX実装‧ スタイリング‧Storybookテスト実装をサポートするスキル。 MCPとSkillsの使い分け • MCPは外部システムへ接続するためのプロトコル、 Skillsはタスクを実⾏するためのカスタマイズされたマニュアル Skills（Agent Skills）：どうやるか 35

36. Skills（Agent Skills）：どうやるか 36
 • 命名は動名詞形がおすすめ ◦ 公式では 動名詞形（verb + -ing） が推奨されている • description は必ず3⼈称で書く ◦ ~を⾏います。 ~を扱います。はNG • Progressive Disclosure（段階的な情報開⽰） を活⽤する ◦ SKILL.md は⽬次として、詳細は別ファイルに分割する
37. • 時間の都合上、共通パーツ‧主要画⾯等は事前に実装済み、 機能改善や修正などをデモでお⾒せします デモ：フレームワーク利⽤してのAI駆動開発 37

38. Figma MCPを利⽤したコンポーネント実装 プロンプト例 これらの1個のデザインを Figmaから実装して。 @https://www.figma.com/design/~~~
39. Figma MCPを利⽤したコンポーネント実装
40. Figma MCPを利⽤したコンポーネント実装
41. Figma MCPを利⽤したコンポーネント実装
42. Figma MCPを利⽤したコンポーネント実装
43. Figma MCPを利⽤したコンポーネント実装
44. Figma MCPを利⽤したコンポーネント実装
45. Figma MCPを利⽤したコンポーネント実装
46. Figma MCPを利⽤したコンポーネント実装
47. Figma MCPを利⽤したコンポーネント実装
48. Figma MCPを利⽤したコンポーネント実装 プロンプト例 これらの1個のデザインを Figmaから実装して。 @https://www.figma.com/design/~~~
49. 49 まとめ
50. • 要件整理 ◦ ドメインストーリーテリングを⽤いて エンジニア以外にも伝わる「可視化」を⾏ったこと • UI設計‧実装 ◦ AIエージェントと相性の良いコンポーネント設計（Atomic Design）を採⽤ ◦ 判断基準をルール化することで、AIによる⾃動実装の精度と再利⽤性を向上 • 品質の統⼀ ◦ どうやるかをSkillsとして定義し、ベストプラクティスを形式知化 ◦ コードレビューや規約遵守を⾃動化し、属⼈化を防ぎつつ保守性を担保 本⽇のまとめ：チーム開発におけるAIの実践的活⽤ 50

51. 2026/01/27（⽕）18:00~ を予定しております! • UI実装後のクライアントの要望内容をその場で反映する仕組み • AIエージェントによるUX評価 • ドキュメントサイトの⾃動⽣成 • 多⾔語化対応、ガイド • AI活⽤時の注意点について 次回お話しする内容の紹介 51