ClaudeでSVG概念図が無料で作れる。デザイナー不要で「伝わる図解」をワンオペマーケターが内製化する方法

『かくさん』こと、株式会社フブキ代表の角川英治です。

【結論から申し上げます。】

「サービスの仕組みを図で説明したいのに、デザイナーに頼む時間もコストもない」と感じているワンオペマーケターの方に、お伝えしたいことがあります。実は、お客様とのオンライン打ち合わせをたった5分録画して、その文字起こしをそのままClaudeに渡すだけで、企業サイトのブランドカラーに合ったSVG概念図が完成します。本記事では、フブキが実際にクライアントワークでやった、その一部始終をお伝えします。

起点は「5分の会議」と「文字起こし」だけだった

今回の話の出発点は、あるクライアントのサービスページに概念図を追加したい、というご要望でした。

フブキがまずやったことは、シンプルです。オンライン会議でクライアントに「どんな図がほしいですか？」と聞いた。それだけです。その会話はほんの5分間。登場人物は誰で、情報の流れはどうなっていて、最終的にどんな状態になるのか。それを口頭で話してもらいながら録画しました。

会議が終わったあと、その録画をAIで文字起こしして、テキストをそのままClaudeに貼り付けました。「この会話の内容をもとに、SVG概念図を作ってください」と伝えただけで、最初のたたき台が出てきました。

デザインブリーフも、フローの清書も、要件定義書も、何もいりませんでした。現場の会話そのものが、設計図の代わりになったのです。

なぜ「文字起こし」がそのままインプットになるのか

従来の概念図制作では、まずフローをテキストで整理し、デザイナーに渡し、初稿を確認して修正して……という往復が必要でした。ワンオペの現場では、この「言語化して整理して渡す」ステップ自体が、最もコストのかかる部分です。

しかしClaudeは、整理されていない会話テキストからでも、文脈と構造を読み取ることができます。誰が誰に何を依頼して、何が返ってくるのか。5分の口語的なやり取りの中にある「関係性」と「フロー」を拾い上げて、図として再構成してくれます。

つまり、文字起こしをインプットにするということは、「整理する手間」を丸ごとClaudeに委ねることができるということです。

SVGとは何か、なぜWebの図解に最適なのか

ここで前提の話を少し。SVGとはScalable Vector Graphicsの略で、どんな画面サイズに拡大・縮小しても画質が劣化しないベクター形式の画像フォーマットです。スマートフォンでもPCでも、常にシャープに表示されます。

そしてSVGはテキストベースのコードで書かれているため、HTMLファイルに直接埋め込めます。つまり「コードさえあれば、画像ファイルを書き出さなくてもWebに図が置ける」のです。ClaudeはこのSVGコードを生成できます。だからデザイナー不要で、チャットだけで図が完成します。

対話しながら、ブランドカラーで仕上げていく

最初のたたき台が出たあとは、会話を重ねながら細部を詰めていきました。

今回は、ClaudeがクライアントのWebサイトに直接アクセスして、サイトで実際に使われているカラーコードをブラウザから取得しました。プライマリカラーのブルー、ダークネイビー、ライトグレーの背景色。これらを数値として読み取り、そのカラーパレットで図を組み立て直しました。

さらに「矢印の形を変えたい」「折れ線を曲線ではなく直角にしたい」「大企業向けと中小企業向けで図を分けたい」という追加の要望にも、その都度対応しました。修正のたびにデザイナーにSlackを送る必要もなく、会話の中でリアルタイムに図が変わっていきます。

最終的な出力は、HubSpotのリッチテキストエディタに「ソースコード」モードで貼り付けるだけで使えるHTML形式です。クライアントはコピペ一回で、サービスページに概念図を掲載できました。

概念図を量産するために「スタイルガイドプロンプト」を作っておく

このプロジェクトで得た最大の気づきは、「1本目が完成した時点でテンプレートを保存しておく」ことの重要性です。

カラーコード・フォント・矢印の形状・ボックスのデザイン・出力形式。これらをまとめた「スタイルガイドプロンプト」を一度作っておけば、次回からは「内容だけ」を差し替えるだけで、同じトンマナの図が量産できます。今後このクライアントのサービスが増えるたびに、5分の会議と文字起こしと、テンプレートへの貼り付けだけで、概念図が揃っていきます。

AIO・SEO対策としての「図解コンテンツ」の価値

AI検索（AIO）の文脈でも触れておきたい点があります。AI検索エンジンは、テキストだけのコンテンツよりも、視覚的な情報と説明が組み合わさったページを「理解しやすい情報」として評価する傾向があります。

サービスの仕組みを図解で示せているページは、読者の滞在時間を伸ばし、直帰率を下げ、結果としてAIに「このページは課題解決に役立つ」と判断されやすくなります。概念図の内製化は、単なるコスト削減ではなく、コンテンツの質そのものを底上げする施策です。

ツールだけでなく「仕組み」がなければ内製化は続かない

ここまで読むと、「Claudeさえあれば自分でできる」と感じるかもしれません。ただ、実際にはプロンプトの設計・スタイルガイドの整備・CMSへの組み込みまでを一人でやり切れるかどうかが、内製化が続くかどうかの分岐点です。

ツールを入れて終わるケース、最初の1枚は作れても運用が止まるケース。これらはすべて「仕組みがない」ことが原因です。

フブキでは、HubSpotを基盤としたWebサイト内製化ツール「FUBUKI CMS ツール」を提供しています。専門知識不要で、テキストと画像（SVGを含む）を流し込むだけでプロ品質のページを作成できるモジュール設計です。外注コストを削減しながら、スピーディーで安全な情報発信体制を自社で構築したい方に向けて設計しています。

外注依存からの脱却「Webサイト内製化パッケージ」・HubSpot×独自モジュール「プロ品質のノーコードWeb構築ツール」・運用コストを大幅削減「自走型Webサイト構築システム」 https://www.fubuki.com/fm/