CC WorkFlow Studio で作る開発ワークフロー

2026/2/13 のQiitaBash の登壇時の資料です。

Claude Codeを使用してワークフローを定義し、定義フローの通りに開発を実行する方法と登壇者が実際に作成しているワークフローについて紹介をしています。

Transcript

1. CC WorkFlow Studio で作る CC WorkFlow Studio で作る 開発ワークフロー 開発ワークフロー ピーディーシー株式会社 システム開発部 蔵品絢介 1 1
2. 自己紹介 プロフィール ニックネーム： くらっち 年齢: 24歳（新卒3年目） ↓ お猿さんアイコンが目印！ Xアカウントはこちら！↑ 業務内容 社内業務用Webアプリ開発 （Ruby on Rails） 生成AIについてのR&D (Amazon Bedrock AgentCore) QA業務（主に試験部分） QiitaBashへの登壇は2回目です！ 先日の『みのるんがClaude Codeで「パワポ作成代行AIエージェント」を開発するのをお昼に眺める会』の雑談相手として登場していました。 2 2
3. 【前提】私はClaude Codeをコーディングで使用し ています 3 3
4. 【問題提起】Claude Code を使う中での課題 4 4
5. 【課題】Sub AgentやSkillsを使ってくれない... 「このSub Agent/Skillsを使って」と明示的に指示しないと使ってくれない 開発者が毎回指示を出すのは非効率 Sub Agentをうまく使ってくれないとコンテキスト圧迫する... 5 5
6. Sub Agent/Skillsが使われるようにしたい...！ 6 6
7. 【解決策】Workflowを定義してあげる！ Claude Codeに実行してほしいタスクをWorkflowとして定義 各ステップでSub AgentやSkills、条件分岐を指定する 開発プロセスを構造化することで、Workflowの通りにタスクが実行され、 Sub AgentやSkillsが自然に活用される 7 7
8. でもワークフローってどうやって定義すれば...？ 8 8
9. CC WorkFlow Studio がおすすめ！ 9 9
10. CC WorkFlow Studio の特徴 VS Code Extension GUIでステップ, フローを定義 各ステップでSub Agent・Skills・条件分岐などを設定 .vscode/workflows にJSON, .claude/commands にMarkdownファイルが生成される Markdown内でMermaidを使用したフローが定義される カスタムスラッシュコマンドとして、ワークフロー実行が可能になり、 AgentがMarkdownを読んでその通りに実行してくれる 10 10
11. CC WorkFlow Studioのイメージ 11 11
12. 私が作ったワークフロー 順 フェーズ 実行内容 実行者 1 設計 Backlogに設計を記載 人間 2 設計 Backlogから設計情報を取得 SubAgent × Backlog MCP 3 実装 コーディング SubAgent 4 AIレビュー 静的コード解析 SubAgent × Skills 5 AIレビュー 脆弱性コード解析 SubAgent × Skills 6 AIレビュー 自動テスト実行 Skills 7 人間レビュー PR作成 + コードレビュー + 検証 + マージ 人間 他にも、自動テストメンテナンスワークフローなどを作成して使用しています。 12 12
13. 深掘って説明 13 13
14. 深掘って説明 順 フェーズ 実行内容 実行者 1 設計 Backlogに設計を記載 人間 2 設計 Backlogから設計情報を取得 SubAgent × Backlog MCP 3 実装 コーディング SubAgent 4 AIレビュー 静的コード解析 SubAgent × Skills 5 AIレビュー 脆弱性コード解析 SubAgent × Skills 6 AIレビュー 自動テスト実行 Skills 7 人間レビュー PR作成 + コードレビュー + 検証 + マージ 人間 14 14
15. 【設計】Backlog MCPでいい感じに設計取得 Backlog MCPを使用して、課題のdescriptionを自動取得 Wiki/過去の課題情報も分析して文脈を理解 読み取った内容やソースコードから実装プランを策定 勝手にBacklogへの登録/更新/削除がされないように、使用可能なBacklog MCPのツールを絞っています。 開発者の意図をBacklogから自動的に取得し、AIが理解した上で実装に進む 15 15
16. 深掘って説明 順 フェーズ 実行内容 実行者 1 設計 Backlogに設計を記載 人間 2 設計 Backlogから設計情報を取得 SubAgent × Backlog MCP 3 実装 コーディング SubAgent 4 AIレビュー 静的コード解析 SubAgent × Skills 5 AIレビュー 脆弱性コード解析 SubAgent × Skills 6 AIレビュー 自動テスト実行 Skills 7 人間レビュー PR作成 + コードレビュー + 検証 + マージ 人間 16 16
17. Sub Agentによる実装 Sub Agentがプランに基づいて実装 親エージェントには実装タスクを渡さないことで、 親エージェントのコンテキストを綺麗に保つ 17 17
18. 深掘って説明 順 フェーズ 実行内容 実行者 1 設計 Backlogに設計を記載 人間 2 設計 Backlogから設計情報を取得 SubAgent × Backlog MCP 3 実装 コーディング SubAgent 4 AIレビュー 静的コード解析 SubAgent × Skills 5 AIレビュー 脆弱性コード解析 SubAgent × Skills 6 AIレビュー 自動テスト実行 SubAgent × Skills 7 人間レビュー PR作成 + コードレビュー + 検証 + マージ 人間 18 18
19. Sub Agentによるコードレビュー Sub Agentによる静的コード解析Skill・脆弱性解析Skill・自動テストSkill・レビュー の実行 Agentによるgit commit , git push 実行（PR作成の手前まで） コーディング, 単体テスト, レビューまで、Sub Agent 軍団が自動で実施 人間がPR作成を行うようにすることで、人間による検証, 確認の機会を用意しています 19 19
20. 深掘って説明 順 フェーズ 実行内容 実行者 1 設計 Backlogに設計を記載 人間 2 設計 Backlogから設計情報を取得 SubAgent × Backlog MCP 3 実装 コーディング SubAgent 4 AIレビュー 静的コード解析 SubAgent × Skills 5 AIレビュー 脆弱性コード解析 SubAgent × Skills 6 AIレビュー 自動テスト実行 Skills 7 人間レビュー PR作成 + コードレビュー + 検証 + マージ 人間 20 20
21. 人間によるコードレビューとマージ PRの作成時 もしくは 作成後、 想定通りに動作しているか検証 文脈的・思想的な整合性の判断 マージ実行 マージボタンを押す権限は決して渡さないことで、人間が責任を持って実装を承認 する 21 21
22. このようにすることで、 22 22
23. Sub Agent軍団によって、質の高い実装がされるよ うになる ワークフローに沿ってSub AgentやSkillsが活用されるようになる Backlog MCPを使って要件・設計の自動取得と理解 実装から自動テストまでを形式的に自動実行してくれるようになる 人間は検証, 最終判断に集中でき、 AIによるブラックボックス実装を避けることができる 23 23
24. どうやってワークフローを実行する？ 24 24
25. ワークフローの実行方法 .claude/commands ディレクトリにワークフロー定義の.md ファイルがあるので、 カスタムスラッシュコマンドとして実行できます。 $ /develop-workflow SAMPLE-001 「develop-workflow というワークフローを使用して、 SAMPLE-001 の課題の対応をして」という意味 25 25
26. まとめ 1. Sub AgentやSkillsはワークフローを定義すれば活用されるようになる 2. ワークフローはCC WorkFlow Studioで簡単に作成できる 3. Backlog MCPを使って設計情報を取得する（使用可能ツールは絞る） 4. 人間は検証, 最終判断に集中し、実装に責任を持つ 26 26
27. CC Workflow StudioについてのQiita記事を投稿し てます！ 27 27
28. ご清聴ありがとうございました ご清聴ありがとうございました 28 28