「これがほしかった」AIで業務フローをつくる to Miro

著者: すぅ AI駆動PM 媒体: note 公開日: 2026-02-01 URL: https://note.com/suh_sunaneko/n/n6b2ce55b3c07

概要

AIが Miro ボード上にスイムレーン付き業務フローを自動生成するスキルの解説記事。ヒアリング議事録や業務記述テキストを inputとして、Miro REST API v2 経由でフロー図を出力する。Claude Code Skills として実装されており、Claude Code でも Cursor でも同一品質で実行可能。

前バージョン(draw.io版)からの進化

観点draw.io 版(旧)Miro 版(新)
出力先draw.ioMiro(FigJam代替)
品質不安定(ガチャ的要素あり)高精度・安定
納品可能性叩き台止まり(FigJam/PPTへ作り替え必須)そのまま顧客共有・再確認に使えるレベル
表現力基本フローのみタイムライン・ドキュメント・システムも表現

AI業務フロー to Miro の特徴

  • スイムレーンが綺麗 — 担当者/部署ごとのレーン自動配置
  • タイムライン考慮 — 何時に何をやるかを時系列に配置
  • システム・ドキュメントの表現 — 使用ツールや資料を図中に示す
  • 複数業務の分割 — 1つのインプットから複数業務フローを自動生成
  • Skills統一品質 — Claude Code・Cursor どちらでも同一品質を保証

高品質出力の仕組み

厳密な座標計算と接続点管理により品質を担保する:

  • ノード間隔を数式で定義(タスク間 200px、判断→差戻し 250px)
  • スイムレーン幅 = 「最右X - 最左X + 500px」ではみ出しを防止
  • 各ノードの接続点(top/bottom/left/right)に最大1本のコネクタを接続
  • 差戻し・ループ構造では判断ノードと同Y座標に差戻しノードを配置、X方向250px以上離す
  • 複数業務フロー作成時は事前に座標設計表を作成し、見出しY座標を「前業務の最終レーンY + 125 + 200」で計算
  • 開始前・設計時・実行中・完了後の4段階チェックリストで品質保証

使い方(3ステップ)

Step 1: テキスト情報を用意する

  • 業務ヒアリング議事録(文字起こし、Q&A形式・自由記述)
  • 実際の作業動画をGeminiでマニュアル化したテキスト

いずれも input.md に記述。雑な状態でもOK。

Step 2: スキルを実行する

input.md の業務フロー作成して

実行すると以下の選択肢が表示される:

  • Miroで業務フローを作る
  • 業務一覧を作る
  • 両方を作る

Step 3: 完成を待つ

1業務あたり約 5分 で自動完成。

活用のポイント

AIで作っている部分があるので100点ではありません。最後は人間が修正する必要があります。

  • 成果物をいきなり「完成品です」と出すものではない
  • 従来:ヒアリング後 → 1週間後に再確認
  • AI活用後:ヒアリング翌日に業務フロー完成 → 即座に顧客と認識合わせ
  • スピードとサイクルを回せることが最大の貢献

今後の改善余地

  • トークン消費量が多い → スキル改善でコスト削減したい
  • 複数業務処理は時間がかかる → 並列処理で削減したい

スキルの技術仕様

スキル作成時の主要な技術要件:

要素仕様
APIMiro REST API v2
呼び出し方式curl
環境変数MIRO_TOKEN, MIRO_BOARD_ID
エンドポイント/frames, /shapes, /texts, /connectors
スイムレーン高さ250px固定
ノード間空白50-60px確保
判断ノードの形状rhombus(diamondではない)
コネクタ矢印endStrokeCap: stealth

ノードの種類と色

ノード種別形状色コード
開始緑丸#D5F5E3
終了グレー丸#D5D8DC
タスク白四角#FFFFFF
判断黄ひし形#FEF9E7
システム薄青角丸#EBF5FB
データソース薄紫角丸#F5EEF8
ドキュメント薄緑角丸#E8F8F5
差戻し赤四角#FADBD8

スキルのダウンロード

PM研究所コミュニティメンバーは無料。それ以外は ¥4,980 の有料記事。

関連ページ