はじめに
マーケティング業務において、カスタマージャーニーマップやフローチャート、プロセス図などの図解作成は避けて通れない作業です。しかし、多くのマーケターが「PowerPointで一から図を作るのが面倒」「draw.ioは機能豊富だけど最初から作るのに時間がかかる」「デザインセンスがないから見栄えの良い図が作れない」といった悩みを抱えているのではないでしょうか。
従来の図解作成では、まず頭の中でイメージを整理し、それをツール上で一つ一つの要素を配置して作り上げる必要がありました。この工程は創意工夫が求められる一方で、単純作業も多く含まれており、本来注力すべき戦略立案や分析業務の時間を圧迫してしまいます。
そこで今回ご紹介するのが、Claudeを使ってdraw.ioインポート用のXML形式で図解データを自動生成し、draw.ioにインポートして要素を編集する革新的な手法です。この方法を使えば、複雑なカスタマージャーニーマップも数分で作成でき、その後の細かい調整はdraw.ioの直感的なインターフェースで行えます。まさに「アイデアを言葉で伝えるだけで、プロレベルの図解が完成する」という夢のような作業効率化が実現します。
XMLとdraw.ioの基本概念を理解しよう
まず、この手法の土台となる技術について理解を深めましょう。XMLとは「eXtensible Markup Language」の略で、データの構造を記述するためのマークアップ言語です。WebページのHTMLと似ていますが、XMLはより柔軟で、様々な種類のデータを構造化して表現できます。
draw.ioは、ブラウザ上で動作する無料の図解作成ツールです。現在は「diagrams.net」という名称でも知られており、フローチャートや組織図、ネットワーク図など、あらゆる種類の図解を作成できます。このツールの大きな特徴の一つが、図解データをXML形式で保存・読み込みできることです。
| 要素 | 説明 | マーケティング業務での活用例 |
|---|---|---|
| XML | データ構造を記述する言語 | カスタマージャーニーの各段階とタッチポイントの関係性を定義 |
| draw.io | ブラウザベースの図解作成ツール | 作成したXMLを視覚的に編集し、プレゼン用資料として仕上げ |
| mxGraphModel | draw.io独自のXML形式 | 図形の位置、サイズ、色、接続関係などを数値で表現 |
Claudeでスライド・図解作成を始める前の準備
Claudeを使って図解のXMLを生成する前に、いくつかの準備作業が必要です。まず、作成したい図解の目的と構成要素を明確にしましょう。例えば、カスタマージャーニーマップであれば、対象となる顧客ペルソナ、各段階での行動、感情、タッチポイントなどを事前に整理しておきます。
次に、念の為、draw.ioのXML形式について基本的な理解を深めておくことも重要です。draw.ioでは、図形一つ一つが「cell」として定義され、それぞれに位置座標、サイズ、スタイル情報が含まれています。また、図形同士の接続関係も「edge」として表現されます。
実際の作業手順は以下のようになります。まず、Claudeに対して「draw.ioで編集できる用のXMLを生成して」という指示と共に、作成したい図解の内容を詳細に説明します。その際、図解の種類、含めたい要素、レイアウトの希望などを具体的に伝えることが成功の鍵となります。
| 準備段階 | 実施内容 | 具体例 |
|---|---|---|
| 要件整理 | 図解の目的と含めるべき要素の洗い出し | カスタマージャーニー：認知→検討→購入→利用→推奨の5段階 |
| 構造設計 | 要素間の関係性と配置方針の決定 | 時系列は左から右、各段階の下に感情とタッチポイントを配置 |
| スタイル方針 | 色使いやフォント、図形の種類の決定 | 段階：青系の矢印、感情：表情アイコン、タッチポイント：黄色の四角 |
Claudeを使った図解XML生成の具体的手順
それでは、実際にClaudeを使ってdraw.io用のXMLを生成する手順を詳しく見ていきましょう。ここでは、マーケティングでよく使われるカスタマージャーニーマップを例として進めていきます。
まず、Claudeに対して明確で具体的な指示を出すことが重要です。単に「カスタマージャーニーを作って」と言うのではなく、顧客の行動、感情の変化、各段階でのタッチポイントなど、含めたい要素を詳細に説明します。また、「draw.ioで編集できる用のXMLを生成して」と明示的に伝えることで、適切な形式での出力を確実にします。
生成されたXMLには、図形の座標、サイズ、色、文字情報、接続関係などが全て含まれており、そのままdraw.ioにインポートして使用できる状態になっています。
カスタマージャーニーのXML実例
ここで、実際のカスタマージャーニーマップのXMLコードをご紹介します。これは、BtoBソフトウェア導入における顧客の行動と感情の変化を表現したものです。
<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2025-05-30T00:00:00.000Z" agent="Claude" etag="btob-customer-journey" version="24.4.8" type="device">
<diagram name="BtoBカスタマージャーニー" id="customer-journey">
<mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1000" pageHeight="600" math="0" shadow="1">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- Background -->
<mxCell id="background" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8f9fc;strokeColor=none;gradientColor=#e9ecef;gradientDirection=south;" vertex="1" parent="1">
<mxGeometry width="1000" height="600" as="geometry" />
</mxCell>
<!-- Title -->
<mxCell id="title" value="BtoBソフトウェア導入のカスタマージャーニー" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=24;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="200" y="10" width="600" height="30" as="geometry" />
</mxCell>
<!-- Subtitle -->
<mxCell id="subtitle" value="営業管理システム導入までの顧客体験プロセス" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontColor=#7f8c8d;" vertex="1" parent="1">
<mxGeometry x="200" y="40" width="600" height="20" as="geometry" />
</mxCell>
<!-- Main Timeline -->
<mxCell id="timeline" value="" style="endArrow=none;html=1;rounded=0;strokeWidth=4;strokeColor=#34495e;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="100" y="120" as="sourcePoint" />
<mxPoint x="900" y="120" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Stage 1: Problem Recognition -->
<mxCell id="stage1-circle" value="課題<br>認識" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#e74c3c;strokeColor=#c0392b;strokeWidth=3;fontColor=white;fontStyle=1;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="120" y="90" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="stage1-title" value="課題認識フェーズ" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="100" y="160" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="stage1-detail1" value="「Excelでの管理に限界」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="80" y="180" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage1-detail2" value="「営業効率が悪い」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="80" y="195" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage1-detail3" value="「データが散在している」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="80" y="210" width="140" height="15" as="geometry" />
</mxCell>
<!-- Arrow 1 -->
<mxCell id="arrow1" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#7f8c8d;strokeWidth=2;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="190" y="120" as="sourcePoint" />
<mxPoint x="250" y="120" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Stage 2: Information Gathering -->
<mxCell id="stage2-circle" value="情報<br>収集" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f39c12;strokeColor=#e67e22;strokeWidth=3;fontColor=white;fontStyle=1;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="270" y="90" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="stage2-title" value="情報収集フェーズ" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="250" y="160" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="stage2-detail1" value="「SFAって何？」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="230" y="180" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage2-detail2" value="「どんな機能がある？」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="230" y="195" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage2-detail3" value="「導入効果は？」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="230" y="210" width="140" height="15" as="geometry" />
</mxCell>
<!-- Arrow 2 -->
<mxCell id="arrow2" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#7f8c8d;strokeWidth=2;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="340" y="120" as="sourcePoint" />
<mxPoint x="400" y="120" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Stage 3: Solution Comparison -->
<mxCell id="stage3-circle" value="比較<br>検討" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#3498db;strokeColor=#2980b9;strokeWidth=3;fontColor=white;fontStyle=1;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="420" y="90" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="stage3-title" value="比較検討フェーズ" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="400" y="160" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="stage3-detail1" value="「A社 vs B社 vs C社」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="380" y="180" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage3-detail2" value="「機能・価格比較」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="380" y="195" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage3-detail3" value="「デモ・トライアル」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="380" y="210" width="140" height="15" as="geometry" />
</mxCell>
<!-- Arrow 3 -->
<mxCell id="arrow3" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#7f8c8d;strokeWidth=2;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="490" y="120" as="sourcePoint" />
<mxPoint x="550" y="120" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Stage 4: Decision Making -->
<mxCell id="stage4-circle" value="意思<br>決定" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#27ae60;strokeColor=#229954;strokeWidth=3;fontColor=white;fontStyle=1;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="570" y="90" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="stage4-title" value="意思決定フェーズ" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="550" y="160" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="stage4-detail1" value="「社内稟議・承認」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="530" y="180" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage4-detail2" value="「予算確保」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="530" y="195" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage4-detail3" value="「最終選定」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="530" y="210" width="140" height="15" as="geometry" />
</mxCell>
<!-- Arrow 4 -->
<mxCell id="arrow4" value="" style="endArrow=classic;html=1;rounded=0;strokeColor=#7f8c8d;strokeWidth=2;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="640" y="120" as="sourcePoint" />
<mxPoint x="700" y="120" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Stage 5: Implementation -->
<mxCell id="stage5-circle" value="導入<br>運用" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#9b59b6;strokeColor=#8e44ad;strokeWidth=3;fontColor=white;fontStyle=1;fontSize=11;" vertex="1" parent="1">
<mxGeometry x="720" y="90" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="stage5-title" value="導入・運用フェーズ" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="700" y="160" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="stage5-detail1" value="「システム設定」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="680" y="180" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage5-detail2" value="「ユーザー研修」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="680" y="195" width="140" height="15" as="geometry" />
</mxCell>
<mxCell id="stage5-detail3" value="「運用開始・定着」" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#34495e;" vertex="1" parent="1">
<mxGeometry x="680" y="210" width="140" height="15" as="geometry" />
</mxCell>
<!-- Emotion Section Title -->
<mxCell id="emotion-title" value="感情の変化" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="50" y="250" width="100" height="20" as="geometry" />
</mxCell>
<!-- Emotion Baseline -->
<mxCell id="emotion-baseline" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#bdc3c7;strokeWidth=2;dashed=1;dashPattern=5 5;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="100" y="300" as="sourcePoint" />
<mxPoint x="900" y="300" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Emotion Labels -->
<mxCell id="emotion-neutral" value="中立" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#7f8c8d;" vertex="1" parent="1">
<mxGeometry x="50" y="290" width="40" height="20" as="geometry" />
</mxCell>
<mxCell id="emotion-satisfied" value="満足" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#27ae60;" vertex="1" parent="1">
<mxGeometry x="50" y="260" width="40" height="20" as="geometry" />
</mxCell>
<mxCell id="emotion-dissatisfied" value="不満" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontColor=#e74c3c;" vertex="1" parent="1">
<mxGeometry x="50" y="310" width="40" height="20" as="geometry" />
</mxCell>
<!-- Emotion Curve -->
<mxCell id="emotion-curve" value="" style="endArrow=none;html=1;rounded=1;strokeColor=#e74c3c;strokeWidth=4;curved=1;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="150" y="320" as="sourcePoint" />
<mxPoint x="750" y="220" as="targetPoint" />
<Array as="points">
<mxPoint x="300" y="310" />
<mxPoint x="450" y="270" />
<mxPoint x="600" y="260" />
</Array>
</mxGeometry>
</mxCell>
<!-- Touchpoints Section Title -->
<mxCell id="touchpoints-title" value="主要タッチポイント" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="50" y="370" width="150" height="20" as="geometry" />
</mxCell>
<!-- Touchpoint 1 -->
<mxCell id="touchpoint1" value="Google検索<br>「SFA おすすめ」<br>比較サイト閲覧" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ecf0f1;strokeColor=#bdc3c7;fontSize=10;align=center;" vertex="1" parent="1">
<mxGeometry x="110" y="400" width="80" height="50" as="geometry" />
</mxCell>
<!-- Touchpoint 2 -->
<mxCell id="touchpoint2" value="企業サイト<br>製品資料DL<br>価格確認" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ecf0f1;strokeColor=#bdc3c7;fontSize=10;align=center;" vertex="1" parent="1">
<mxGeometry x="260" y="400" width="80" height="50" as="geometry" />
</mxCell>
<!-- Touchpoint 3 -->
<mxCell id="touchpoint3" value="営業担当<br>デモ実施<br>見積提示" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ecf0f1;strokeColor=#bdc3c7;fontSize=10;align=center;" vertex="1" parent="1">
<mxGeometry x="410" y="400" width="80" height="50" as="geometry" />
</mxCell>
<!-- Touchpoint 4 -->
<mxCell id="touchpoint4" value="契約部門<br>契約締結<br>発注処理" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ecf0f1;strokeColor=#bdc3c7;fontSize=10;align=center;" vertex="1" parent="1">
<mxGeometry x="560" y="400" width="80" height="50" as="geometry" />
</mxCell>
<!-- Touchpoint 5 -->
<mxCell id="touchpoint5" value="CS担当<br>導入支援<br>ユーザー研修" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ecf0f1;strokeColor=#bdc3c7;fontSize=10;align=center;" vertex="1" parent="1">
<mxGeometry x="710" y="400" width="80" height="50" as="geometry" />
</mxCell>
<!-- Pain Points Section Title -->
<mxCell id="painpoints-title" value="ペインポイント" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;fontStyle=1;fontColor=#2c3e50;" vertex="1" parent="1">
<mxGeometry x="50" y="480" width="150" height="20" as="geometry" />
</mxCell>
<!-- Pain Point 1 -->
<mxCell id="pain1-icon" value="!" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#e74c3c;strokeColor=#e74c3c;fontSize=12;fontStyle=1;fontColor=white;" vertex="1" parent="1">
<mxGeometry x="134" y="504" width="16" height="16" as="geometry" />
</mxCell>
<mxCell id="pain1-text" value="情報過多で混乱" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=9;fontColor=#e74c3c;" vertex="1" parent="1">
<mxGeometry x="100" y="525" width="100" height="15" as="geometry" />
</mxCell>
<!-- Pain Point 2 -->
<mxCell id="pain2-icon" value="!" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f39c12;strokeColor=#f39c12;fontSize=12;fontStyle=1;fontColor=white;" vertex="1" parent="1">
<mxGeometry x="284" y="504" width="16" height="16" as="geometry" />
</mxCell>
<mxCell id="pain2-text" value="専門用語が難しい" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=9;fontColor=#f39c12;" vertex="1" parent="1">
<mxGeometry x="250" y="525" width="100" height="15" as="geometry" />
</mxCell>
<!-- Pain Point 3 -->
<mxCell id="pain3-icon" value="!" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#3498db;strokeColor=#3498db;fontSize=12;fontStyle=1;fontColor=white;" vertex="1" parent="1">
<mxGeometry x="434" y="504" width="16" height="16" as="geometry" />
</mxCell>
<mxCell id="pain3-text" value="比較が大変" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=9;fontColor=#3498db;" vertex="1" parent="1">
<mxGeometry x="400" y="525" width="100" height="15" as="geometry" />
</mxCell>
<!-- Pain Point 4 -->
<mxCell id="pain4-icon" value="!" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#27ae60;strokeColor=#27ae60;fontSize=12;fontStyle=1;fontColor=white;" vertex="1" parent="1">
<mxGeometry x="584" y="504" width="16" height="16" as="geometry" />
</mxCell>
<mxCell id="pain4-text" value="社内調整に時間" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=9;fontColor=#27ae60;" vertex="1" parent="1">
<mxGeometry x="550" y="525" width="100" height="15" as="geometry" />
</mxCell>
<!-- Pain Point 5 -->
<mxCell id="pain5-icon" value="!" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#9b59b6;strokeColor=#9b59b6;fontSize=12;fontStyle=1;fontColor=white;" vertex="1" parent="1">
<mxGeometry x="734" y="504" width="16" height="16" as="geometry" />
</mxCell>
<mxCell id="pain5-text" value="操作習得が困難" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=9;fontColor=#9b59b6;" vertex="1" parent="1">
<mxGeometry x="700" y="525" width="100" height="15" as="geometry" />
</mxCell>
<!-- Timeline Duration Labels -->
<mxCell id="duration1" value="1-2週間" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontStyle=1;fontColor=#7f8c8d;" vertex="1" parent="1">
<mxGeometry x="100" y="560" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="duration2" value="2-4週間" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontStyle=1;fontColor=#7f8c8d;" vertex="1" parent="1">
<mxGeometry x="250" y="560" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="duration3" value="4-8週間" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontStyle=1;fontColor=#7f8c8d;" vertex="1" parent="1">
<mxGeometry x="400" y="560" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="duration4" value="2-4週間" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontStyle=1;fontColor=#7f8c8d;" vertex="1" parent="1">
<mxGeometry x="550" y="560" width="100" height="20" as="geometry" />
</mxCell>
<mxCell id="duration5" value="4-12週間" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=10;fontStyle=1;fontColor=#7f8c8d;" vertex="1" parent="1">
<mxGeometry x="700" y="560" width="100" height="20" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>draw.ioでのインポート手順詳細
生成されたXMLをdraw.ioで使用する手順は非常にシンプルです。
まず、テキストエディタにてXMLコードを開き、.xmlの拡張子のとして保存します。（筆者の場合はVS Codeを使用）
次に、Webブラウザで「https://app.diagrams.net/」にアクセスし、draw.ioを開きます。新しい図を作成する際に「Blank Diagram」を選択するか、既存の図を開いている場合は「ファイル」メニューから「次の場所からインポート」→「デバイス」を選択します。
インポートが完了すると、図解が自動的にキャンバス上に配置されます。この時点で、既に完成度の高いカスタマージャーニーマップが表示されているはずです。
各要素が編集できる形になっているため、必要に応じて修正して活用していきましょう。
この手法の革新性と圧倒的なメリット
この「Claude×draw.io」連携手法の革新性は、従来の図解作成プロセスを根本から変革する点にあります。これまでは「アイデア→構造設計→要素配置→スタイル調整→完成」という長い工程が必要でしたが、この手法では「アイデア→Claudeに指示→即座に完成図が出現→drawioにインポートして必要箇所を修正」という驚異的な短縮が実現されています。
時間効率の面での改善は特に顕著です。従来の手作業であれば、複雑かつ綺麗にビジュアル化されたカスタマージャーニーマップの作成には2-3時間（※デザイナーに入ってもらうとさらに多い）を要していたものが、この手法では指示文の作成から完成まで10-15分程度で完了します。これは実に90%以上の時間短縮を意味しており、マーケターがより戦略的な業務に集中できる時間を大幅に増やすことができます。
また、品質の一貫性も大きなメリットです。人間が手作業で作成する場合、その日の体調や集中力、デザインセンスによって出来栄えにばらつきが生じがちですが、Claudeによる生成では常に一定の品質が保たれます。配色やレイアウトも論理的に設計されており、見る人にとって理解しやすい図解が自動的に生成されます。（プロンプトによって出来栄えは左右されますが、プロンプト自体もClaudeに作成してもらうのがおすすめです。）
| メリット分野 | 従来手法 | Claude×draw.io手法 | 改善効果 |
|---|---|---|---|
| 作成時間 | 2-3時間 | 10-15分 | 90%以上短縮 |
| 品質の一貫性 | 作成者のスキルに依存 | 常に一定品質 | 品質のブレがゼロに |
| 修正・更新 | 全体を見直して再配置 | XML編集、drawio上で部分修正可能 | 修正時間80%短縮 |
| チーム共有 | ファイル送信・バージョン管理が煩雑 | XMLコード、drawio上で簡単共有 | 共有効率300%向上 |
他の図解パターンへの応用可能性
カスタマージャーニーマップ以外にも、この手法は幅広い図解作成に応用できます。マーケティング業務でよく使われる図解のdrawio用のXMLコード生成のプロンプトを記載しておきます。ぜひ参考にしてください。
1. 基本的なカスタマージャーニーマップ
[業界名]の[商品/サービス名]について、5段階のカスタマージャーニーマップをdraw.ioで編集できるXML形式で作成してください。
含める要素：
- ステージ（認知→検討→購入→利用→推奨）
- 各ステージでの顧客アクション
- 感情の変化（絵文字付き）
- タッチポイント
- ペインポイント
- 期間の目安
色分けして視覚的に分かりやすくし、ステージ間は矢印で接続してください。
2. BtoBカスタマージャーニー
BtoB向け[商品/サービス名]の意思決定プロセスを反映したカスタマージャーニーマップをdraw.ioで編集できるXML形式で作成してください。
特徴：
- 意思決定者と影響者を分けて表示
- 検討期間が長い特性を反映
- 社内承認プロセスを含む
- ROI検討段階を明示
- 導入後のサポートフェーズまで含む
各ステージで関与する部門も記載してください。
3. オムニチャネル対応ジャーニー
オンライン・オフライン両方のタッチポイントを含む[業界名]のオムニチャネルカスタマージャーニーマップをdraw.ioで編集できるXML形式で作成してください。
チャネル：
- オンライン（Web、SNS、アプリ、メール）
- オフライン（店舗、電話、DM、イベント）
- チャネル間の連携ポイントを明示
- 各チャネルでの体験の一貫性を表現
シームレスな顧客体験を視覚化してください。
4. SWOT分析図
[企業名/商品名]のSWOT分析をdraw.ioで編集できるXML形式で作成してください。
構成：
- 4象限のマトリックス形式
- Strengths（強み）- 緑色
- Weaknesses（弱み）- 赤色
- Opportunities（機会）- 青色
- Threats（脅威）- 橙色
- 各象限に3-5項目ずつ記載
- 中央に企業/商品名を配置
戦略的含意も矢印で示してください。
生成されたビジュアルはこちら
5. 競合ポジショニングマップ
[業界名]における競合他社のポジショニングマップをdraw.ioで編集できるXML形式で作成してください。
軸設定：
- X軸：[価格帯/品質レベル/利便性など]
- Y軸：[機能性/ブランド力/カスタマーサービスなど]
- 主要競合5-8社を円形アイコンで配置
- 自社を強調表示
- 市場機会エリアを点線で囲む
各社の特徴を簡潔に記載してください。
6. ペルソナマップ
[ターゲット商品名]のメインペルソナを詳細に描いたペルソナマップをdraw.ioで編集できるXML形式で作成してください。
含める情報：
- 基本情報（年齢、性別、職業、年収）
- ライフスタイル・趣味
- 課題・ニーズ
- 情報収集方法
- 購買行動パターン
- 使用デバイス・チャネル
- 影響を受ける人・メディア
視覚的に魅力的なレイアウトで整理してください。
生成されたビジュアルはこちら
7. マーケティングファネル
[商品名]のマーケティングファネルをdraw.ioで編集できるXML形式で作成してください。
段階：
- TOFU（認知段階）- 青系グラデーション
- MOFU（検討段階）- 黄系グラデーション
- BOFU（決定段階）- 赤系グラデーション
- 各段階の施策・コンテンツ
- 転換率の目安
- KPIを併記
逆三角形の形状で視覚的に表現してください。
8. リードナーチャリングフロー
BtoB企業向けのリードナーチャリングフローをdraw.ioで編集できるXML形式で作成してください。
プロセス：
- リード獲得（複数チャネル）
- スコアリング・セグメンテーション
- 自動メール配信シナリオ
- セールス引き渡し基準
- フォローアップ施策
- 失注後の再アプローチ
フローチャート形式で条件分岐も含めてください。
9. キャンペーン計画フロー
[キャンペーン名]の実行計画フローをdraw.ioで編集できるXML形式で作成してください。
タイムライン：
- 企画・戦略立案フェーズ
- クリエイティブ制作フェーズ
- メディア準備・設定フェーズ
- 実行・運用フェーズ
- 効果測定・分析フェーズ
- 各フェーズの担当部門
- 重要なマイルストーン
ガントチャート風の見やすい形式で作成してください。
10. マーケティングROI分析図
マーケティング投資のROI分析を可視化する図をdraw.ioで編集できるXML形式で作成してください。
構成要素：
- 投資項目別の円グラフ（広告費、人件費、ツール費用）
- 効果指標の棒グラフ（リード数、売上、認知度）
- ROI計算式の表示
- 期間比較（前期vs今期）
- 改善提案エリア
ダッシュボード風のレイアウトで作成してください。
生成されたビジュアルはこちら
🎨 プロンプト作成のコツ
効果的なプロンプトの要素
- 具体的な業界・商品を指定 - より実用的な結果が得られます
- 色分けの指示 - 視覚的な分かりやすさが向上します
- 含めるべき要素を明確化 - 漏れのない包括的な図表が作成されます
- レイアウトの指定 - 期待する見た目に近い結果が得られます
- 実際の数値・期間の目安 - リアルな実用性が高まります
カスタマイズのポイント
- 業界特性に合わせた項目の追加・削除
- 企業規模に応じた複雑さの調整
- ブランドカラーの指定
- 特定のKPI・指標の重視
- 社内共有を想定した分かりやすさの確保
これらのプロンプトを参考に、自社の状況に合わせてカスタマイズしてご活用ください。
まとめ
この記事では、Claudeを使ってXML形式で図解データを自動生成し、draw.ioにインポートして編集する革新的な手法について詳しく解説しました。この手法により、従来2-3時間かかっていた複雑な図解作成が10-15分程度に短縮され、マーケターの業務効率を飛躍的に向上させることができます。
Key Takeaways
この革新的手法により、図解作成時間を90%以上短縮でき、複雑なカスタマージャーニーマップも数分で完成させることが可能になります。XMLという標準形式を使用することで、品質の一貫性が保たれ、チーム間での共有や修正も効率的に行えます。
具体的な指示文の作成が成功の鍵となり、図解の種類、含めたい要素、レイアウト指示、色分け方針を明確に伝えることで、期待通りの結果を得られます。カスタマージャーニーマップ以外にも、マーケティングファネル、競合分析マトリックス、組織図など幅広い図解作成に応用可能です。
XMLのカスタマイズにより、色の変更、位置調整、要素の追加などが直接コードレベルで可能となり、より高度で個性的な図解作成が実現できます。チーム協働においても、Gitでのバージョン管理やテンプレート化による標準化により、組織全体での品質管理と効率化が図れます。
この手法は、マーケティング業務の根本的な効率化をもたらし、戦略立案や分析といったより付加価値の高い業務に集中できる時間を大幅に増やすことができる画期的なソリューションです。今後のAI技術の発展により、さらなる可能性の拡大が期待される注目の手法と言えるでしょう。
