業務フローの設計にPowerPointではなくBPMNを使うべき理由 — Claude Code時代の詳細設計

はじめに

業務システムの設計でSwim Lane（スイムレーン）形式の業務フローを書くとき、多くの現場ではPowerPointやFigmaが使われています。見た目は整えやすく、関係者への説明資料としてはよくできています。

しかし、この「人間が読むための図」を設計の源泉にしてしまうと、あと工程で大きなコストが発生します。特に、Claude CodeのようなAIエージェントを開発に活用する場合、設計成果物のフォーマット選択が開発効率を決定的に左右します。

本記事では、実際にPowerPointのスライドからBPMN 2.0に変換した経験をもとに、BPMNを採用する利点を解説します。

PowerPointの業務フローが抱える問題

PowerPointのスライドに描かれた業務フローは、本質的に「画像」です。

PowerPoint (.pptx)
├── 図形の座標とスタイル情報
├── テキストボックスの文字列
└── グループ化とレイヤー

これは人間が見るには十分ですが、次のような問題があります。

• 構造情報がない: 「この矢印がどのタスクからどのタスクへ向かっているか」をプログラムが読み取れない
• アクターの定義が曖昧: レーンの境界が図形の配置で表現されているだけで、意味的な紐付けがない
• 分岐条件が自然言語: ゲートウェイの条件が図中のテキストに埋め込まれ、機械的に検証できない
• フロー間の接続が不明確: 複数スライドにまたがるフローの接続点（「次のフローへ」）が視覚的な慣習に依存

BPMN 2.0とは

BPMN（Business Process Model and Notation） は、業務プロセスを図式化するための国際標準記法です。OMG（Object Management Group）が策定し、ISO 19510として国際標準化されています。現行バージョンはBPMN 2.0.2です。

BPMNの最大の特徴は、人間が理解できるフロー図と機械が処理できるXMLが一つのファイルに同居している点です。プールとレーン（Swim Lane）でアクターを表現し、タスク・ゲートウェイ・イベントでプロセスの流れを記述します。

BPMN 2.0がもたらす構造化

BPMN 2.0はXML形式で、見た目と意味の両方を持つフォーマットです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<bpmn:process id="Process_1" isExecutable="false">
  <bpmn:laneSet id="LaneSet_1">
    <bpmn:lane id="Lane_reception" name="太平受付担当">
      <bpmn:flowNodeRef>r1</bpmn:flowNodeRef>
      <bpmn:flowNodeRef>r2</bpmn:flowNodeRef>
    </bpmn:lane>
    <bpmn:lane id="Lane_system" name="システム" />
  </bpmn:laneSet>

  <bpmn:task id="r1" name="修理内容の特定" />
  <bpmn:exclusiveGateway id="d2" name="保証範囲?" />
  <bpmn:sequenceFlow sourceRef="r1" targetRef="d2" />
</bpmn:process>

この構造から、以下がプログラム的に読み取れます。

Claude Codeとの相性：なぜBPMNが開発を加速するか

1. BPMNファイルを直接読んで設計意図を理解できる

Claude CodeはXMLを正確にパースして理解します。BPMNファイルを渡せば、以下のことが即座にわかります。

• 登場するアクター全員とその担当タスク
• 業務の流れ（分岐・合流を含む正確なフロー）
• システムが関与するポイント（Systemレーンのタスク）
• 他のフローとの接続点（リンクイベント）

PowerPointでは「スライドの画像を見せて説明する」必要がありますが、BPMNならテキストとして読める設計書です。

2. 設計→実装の自動変換が可能になる

BPMNの構造化データがあれば、Claude Codeは以下のようなコード生成が実現できます。

BPMN定義 → 画面遷移の定義
BPMN定義 → API エンドポイント設計
BPMN定義 → ステートマシン実装
BPMN定義 → E2Eテストシナリオ

例えば、案件登録フロー（flow-02）のBPMNから、Claude Codeは以下を導出できます。

• 「得意先登録有?」のゲートウェイ → if/else の条件分岐コード
• 「太平受付担当」レーンのタスク → 受付担当向け画面のワイヤーフレーム
• 「保証範囲あり」の分岐 → ビジネスルールの実装
• 末端のリンクイベント → 次画面への遷移ロジック

PowerPointの図からこれらを導出するには、人間が図を見て仕様を書き起こし、それをClaude Codeに伝える必要があります。BPMNなら、この「書き起こし」の工程が不要です。

3. 整合性の自動検証ができる

実際のプロジェクトでは、10本のBPMNフロー間の整合性チェックスクリプトを作成しました。

1
2
3
4
5

# check_link_events.py の検証内容
# 1. OUT イベントに対応する IN イベントが存在するか
# 2. IN イベントに対応する OUT イベントが存在するか
# 3. リンクイベントのラベルが未設定でないか
# 4. シーケンスフローに接続されていない孤立リンクイベントがないか

PowerPointでは「スライド3の右下の矢印がスライド5の左上の矢印と対応している」ことを人間が目視確認するしかありません。BPMNならXMLをパースして機械的に検証できます。

Claude Codeにこのチェックスクリプトの作成を依頼すると、BPMNのXML構造を理解した上で、即座に正確な検証ロジックを書いてくれます。

4. ドキュメントの自動生成

BPMNファイルから以下を自動生成できます。

• Markdown形式の業務フロー説明書（アクター表、フロー詳細、関連リンク）
• SVG画像（bpmn-to-imageコマンドで変換）
• mkdocsサイトでのドキュメント公開

今回のプロジェクトでは、10本のBPMNファイルから各フローのMarkdownドキュメントとSVGを一括生成し、mkdocsのナビゲーションに組み込みました。

各フロー = .bpmn（設計の源泉） + .svg（ビジュアル） + .md（説明文書）

BPMNが Single Source of Truth（唯一の信頼できる情報源） となり、他の成果物はそこから導出されます。

5. Gitによるバージョン管理と差分レビュー

BPMNはXMLテキストなので、Gitで管理でき、Pull Requestで差分レビューが可能です。

1
2

- <bpmn:exclusiveGateway id="d2" name="保証範囲?" />
+ <bpmn:exclusiveGateway id="d2" name="保証契約有無?" />

PowerPointのバイナリファイルでは「何が変わったか」をGitで確認できません。BPMNなら、業務フローの変更がコードレビューのプロセスに乗ります。

実践：PowerPointからBPMNへの変換

今回のプロジェクトでは、以下のアプローチで変換を行いました。

ステップ1：PPTXからMarkdownへの情報抽出

PowerPointのスライドから、業務フローの構造情報をMarkdown形式で抽出します。

ステップ2：Claude Codeによる BPMN XML生成

抽出した情報をもとに、Claude Codeがフロー定義をPythonスクリプトに埋め込み、BPMNの XML を一括生成しました。

1
2
3

# generate_flows.py
# 各フローの定義（アクター、タスク、ゲートウェイ、接続）を
# Python辞書で記述し、BPMN 2.0 XMLを生成

ステップ3：Camunda Modelerでの微調整

生成したBPMNファイルをCamunda Modeler（無料のBPMNエディタ）で開き、レイアウトの微調整を行いました。自動生成ではカバーしきれないビジュアル上の調整を人間が行います。

ステップ4：SVGエクスポートとドキュメント生成

微調整後のBPMNからSVGを書き出し、Markdownドキュメントとともにmkdocsサイトに反映しました。

PPTX → Markdown → Python辞書 → BPMN XML → Camunda Modeler → SVG + Markdown
               ↑ 人間の知見        ↑ Claude Code        ↑ 人間の微調整

まとめ：設計フォーマットの選択は技術的意思決定である

業務フローの設計フォーマットは、単なるドキュメントの見た目の問題ではありません。あと工程でAIエージェントをどう活用するかに直結する技術的意思決定です。

BPMNは「人間にも機械にも読める業務フロー」を実現する現時点で最も合理的な選択肢です。Claude Codeのような開発エージェントの能力を最大限に引き出すためにも、設計段階でのフォーマット選択を見直してみてはいかがでしょうか。

ツール紹介

BPMNを扱うためのツールは充実したエコシステムがあります。以下、本記事で言及したツールを紹介します。

Camunda Modeler

Camunda Modeler は、Camunda社が提供するデスクトップ向けのBPMN/DMNエディタです。Windows・macOS・Linuxに対応しており、無料でダウンロードできます。

• BPMN 2.0準拠のダイアグラムをGUIで作成・編集
• ドラッグ&ドロップでタスク・ゲートウェイ・イベントを配置
• XMLの直接編集も可能
• Camundaプラットフォームとの連携（ワークフロー実行）にも対応

本記事のプロジェクトでは、Claude Codeが生成したBPMN XMLのレイアウト微調整にCamunda Modelerを使用しました。

bpmn-js

bpmn-js は、bpmn.ioプロジェクト（Camunda社が主導）が開発するJavaScript製のBPMNレンダリング/編集ツールキットです。

• ブラウザ上でBPMNダイアグラムを表示・編集
• npmパッケージとしてWebアプリケーションに組み込み可能
• 高い拡張性（カスタムレンダラー、オーバーレイ等）
• demo.bpmn.io でブラウザから即座に試用可能

自社のWebアプリケーションにBPMNビューアやエディタを組み込みたい場合に最適です。

bpmn-to-image

bpmn-to-image は、BPMNファイルをPNG/PDF/SVGに変換するコマンドラインツールです。内部的にbpmn-jsとPuppeteerを使用しています。

1
2
3
4
5

# インストール
npm install -g bpmn-to-image

# BPMNからSVGへの変換
npx bpmn-to-image flow-02-case-registration.bpmn:flow-02-case-registration.svg

CI/CDパイプラインに組み込むことで、BPMNファイルの更新時に自動でSVGを再生成する運用が可能です。

リンク集

BPMN仕様・リファレンス

ツール・ライブラリ

本記事は、サービス案件管理システムの詳細設計プロジェクトでPowerPointからBPMN 2.0への変換を行った実経験に基づいています。