AI 画像 SVG 化を 3 手法で実測比較 — Claude Code vs Adobe MCP

本記事のポイント

• gpt-image-2 で作った同じバッジ 3 枚を、Claude Code 単体 (手書き SVG) / Adobe MCP image_vectorize / Illustrator 手動の 3 手法で SVG 化し、視覚精度・編集容易性・コスト・自動化適性の 4 軸で実測しました
• 圧倒的に勝つ手法はありません。視覚精度は Adobe MCP と Illustrator、編集容易性とコストは Claude Code、と得意分野が割れます。結論は用途で使い分けることです
• 検証は 3 素材・n=3 の小規模です。数字はすべて 2026 年 5 月時点。自社の画像で再検証するためのプロンプトも巻末に付けました

「gpt-image-2 で出したバッジは綺麗なのに、SVG にした瞬間に別物へ崩れる」。LP 制作の最終仕上げで、humbulls が支援するなかでよく聞く悩みです。原因は Claude Code の性能でも Adobe の設定でもなく、1 つの手法で全部やろうとしていることにあります。本記事では、あるヘルスケア系 BtoB ブランドの LP 制作で使ったバッジ 3 枚を題材に、3 手法を同一条件で比較した一次データを公開します。専門的なベクター知識は不要で、判断基準と巻末キットがあれば自社でも同じ検証を再現できます。

先に結論の使い分け表を置きます。以降の章は、この表がなぜこの割り当てになるのかを実測で裏づける流れです。

1. 検証の背景 — なぜ「アイコンぐちゃぐちゃ」問題が起きるのか

「Claude Code に『これを SVG にして』と頼んだら、人型が棒人間になって戻ってきた」。AI 画像を LP に組み込む制作者から、よく届く声です。

AI 画像生成ツール (gpt-image-2 / Firefly / Midjourney 等) が出すのはピクセル画像 (PNG / JPEG) です。LP に画像のまま貼れば見た目は綺麗ですが、Retina でぼやけたり、リサイズで画素破綻したり、CSS でフォントやサイズを揃えにくかったりと、本番 LP の品質要件には届きません。そこで SVG 化が必要になります。手段は大きく 3 つ、Claude Code に元画像を見せて手書き SVG を書かせる、Adobe MCP の image_vectorize でベクター変換する、Illustrator の Image Trace で手動トレースする、です。

崩れるのは主に Claude Code 単体のケースでした。概念的には合っているがディテールが粗い SVG が返り、LP に貼るとアイコンぐちゃぐちゃ問題になります。人型シルエットが棒人間化し、DNA ヘリックスのねじれが粗くなり、日本地図の海岸線がカクカクになる。元画像と並べると別物に見えるレベルで劣化します。これは Claude Code の欠陥というより、LLM の単発推論で精密ベクターを書き上げること自体が構造的に難しい、という話です。

一方で Adobe MCP の image_vectorize は、ピクセル画像を解析して数百〜数千個の path に分解する専用 API なので、視覚精度では強く出ます。ただし精度が高ければ良いとも限りません。ここを 4 軸で測り分けたのが本検証です。

2. 検証セットアップ — 同じバッジ 3 枚を 3 手法で SVG 化

比較は同じ素材を並べるのが鉄則です。検証素材には、あるヘルスケア系 BtoB ブランドの LP 制作で gpt-image-2 で生成したヒーローエリアの バッジ 3 種類 を選びました。各バッジは 160 × 160 px の正方形クロップ、背景透過 PNG に揃えています。

3 手法は次のように固定しました。

1. Claude Code 単体 (手書き SVG): 元画像を Claude Code (Opus 4.7) に渡し、「同じ見た目になるよう SVG を書いてください」と指示。出力をそのまま LP に組み込む想定
2. Adobe MCP image_vectorize: バッジ PNG を image_vectorize に送り、ベクター化された SVG を取得 (Adobe Creative Cloud アカウントが必要)
3. (参考) Illustrator 手動トレース: Image Trace の High Fidelity Photo モードで手動トレース。比較対照用で、実運用では使わない前提

検証フローは「PNG 元画像 → 3 手法で SVG 化 → ブラウザで並べて表示 → 視覚精度 / コード行数 / 編集容易性を計測」というシンプルな流れです。条件を揃えるため、すべて 160 × 160 px の正方形クロップ・背景透過 PNG を入力にしました。背景色が異なる元画像を混ぜると、SVG 出力に背景処理の差が入って比較がブレます。

正直に開示しておくと、これは 3 素材・n=3 の小規模検証です。視覚精度の評価は最終的に目視で行っており、主観が混じります。数字はすべて 2026 年 5 月時点、円換算は 1 ドル = 150 円で統一しています。

3. 結果 — 視覚精度 / 編集容易性 / コスト / 自動化適性の 4 軸

3 手法を 4 評価軸 + 実測値で並べた結果がこちらです。

数字ではっきり出たのは、制作時間と出力サイズの落差です。Adobe MCP は 3 枚を API 呼び出しだけで 5 分、Claude Code は 30 分、Illustrator 手動は 90 分。ところが出力サイズは逆順で、Adobe MCP の Badge A が約 28 KB (1,200 path 要素) なのに対し、Claude Code は約 2 KB (50 行 path) に収まります。速くて精密なほど、後で触りにくい重い SVG になる、という関係が見えます。

4. 考察 — 「精密 SVG = 正解」ではない

この検証で一番効いた発見は、Adobe MCP は視覚精度と自動化適性で勝つが、編集容易性で大きく負けるという構造です。path が数千個ある SVG は、後から色を変えようとしても CSS の一括指定が効きにくく、結局 Illustrator で開いて手動編集する羽目になります。精度の高さが、そのまま後工程の重さに化けます。

Claude Code 単体は逆で、素朴すぎて元画像と別物になりがちですが、出力が 50 行程度に収まるので CSS での色変更やサイズ調整が軽い。fill: var(--brand-color) を当てるだけでブランドカラーに寄せられるので、色変更や Hover 演出が前提のアイコンで強みが出ます。

Illustrator 手動は精度と編集性を両立できて品質は最高ですが、3 枚で 90 分と遅く、自動化適性はゼロです。一度きりの主役ビジュアルに絞って使うのが現実的です。

よくある失敗は、視覚精度だけを見て「一番綺麗な Adobe MCP に統一しよう」と決めてしまうことです。色変更が発生するアイコンにまで数千 path の SVG を使うと、修正のたびに Illustrator 往復が発生し、かえって工数が増えます。精度・編集性・コスト・自動化のどれが業務的に重いかを、用途ごとに決めるのが順番です。

5. 使い分け指針 — 用途で 3 手法を割り当てる

冒頭の使い分け表を、実務の運用ルールとして具体化します。判断は最終的な「用途」で決まります。

特に サービスロゴ / ブランドマーク は AI 生成を避けるのが業界の共通ルールです。humbulls でも「ロゴは正規アセット 5 本のみ使用、AI 生成版 / 代替版の流用は禁止」を社内で明文化しています (brand/docs/brand-guidelines.md)。AI で「ぽいロゴ」を作るとブランドの一貫性が崩れ、長期的に資産価値を毀損します。

humbulls の LP 制作実務では、この使い分けをフェーズ単位で AI / 人間に切り分けたハイブリッド構成で回しています。

この切り分けで、1 案件あたりの装飾画像制作時間が 約 4 時間 → 約 1 時間 に圧縮できました (4 倍速)。残りの 1 時間は「クライアントレビュー対応」「ブランド準拠の最終確認」という人間判断の領域です。クライアントには「AI が生成した素材を、人間がブランドに合わせて最終調整する」と説明しています。「AI が全部やる」より「人間が最終判断する」と添えるほうが、安心感が高まります。

よくある失敗は、Claude Code 単体の素朴 SVG を主役ビジュアルにまで使ってしまうことです。コードレベルでは類似でも、元画像と完全一致はしません。クライアントレビューで「もっと元画像に近づけて」と言われたら、Adobe MCP か Illustrator に切り替える判断が要ります。

→ 自社の年間制作量からコストの損益分岐点を出す作業は、巻末の実行キット②で実行できます。

6. 検証の限界と次の検証

この結果をそのまま鵜呑みにしないでください。本検証には次の限界があります。

• サンプルが小さい: 3 素材・n=3 のみ。モチーフも人型 / DNA / 地図の 3 種に偏っており、写真調やグラデーション主体の画像では傾向が変わり得ます
• 視覚精度が目視評価: 「元画像とどれだけ似ているか」を人が見て判定しており、主観が混じります。定量指標 (SSIM 等) では別の順位が出る可能性があります
• モデル・ツールのバージョン依存: Claude Code 側は Opus 4.7 時点の性能です。モデルが更新されれば手書き SVG の精度は上がる余地があります
• 為替前提: コストは 1 ドル = 150 円で計算しています。Adobe CC の月契約 (月 $24 ≒ 約 3,600 円、年間 $288 ≒ 約 43,200 円) を含むため、円安が進めば損益分岐点は動きます

次に検証するとしたら、素材数を 10 枚以上に増やす、写真調画像を加える、視覚精度を SSIM 等の定量指標で測る、最新モデルで手書き SVG を再測定する、の 4 点です。自社の素材で同じ検証を回せるよう、手順をキット①にまとめました。

まとめ

3 手法に絶対の勝者はありません。視覚精度なら Adobe MCP と Illustrator、軽さと編集性とコストなら Claude Code、と得意分野が割れます。だからこそ用途で割り当てるのが正解です。

• LP 装飾画像 / ヒーローエリア → Adobe MCP image_vectorize で精度優先
• 再利用アイコン / 機能説明 → Claude Code 単体で軽量 path
• ロゴ / ブランドマーク → 必ず正規アセット (AI 生成しない)
• 印刷物 / 主役キービジュアル → Illustrator 手動

判断の起点は「品質要件を先に固める」ことです。LP の用途 (ヒーロー / アイコン / ロゴ / 印刷物) を分解し、それぞれの許容視覚精度と再編集の必要性を制作前に整理しておけば、手法選びで迷いません。ツールの実力は半年で動くので、この使い分けも半年ごとに見直す前提で運用してください。

LP 制作で AI ツールを実務に組み込む全体像は、Apps Script で HubSpot ↔ Sheets を自動同期する のような別記事でも公開しています。humbulls では、こうした LP 制作の AI 化フロー設計から Growth Partner サービス で伴走しています。AI 活用の実装例は humbulls Time Capsule で時系列に公開中です。実装テンプレを一括で使いたい方は BtoB マーケ AI 活用ガイド もご活用ください。

🤖 AI 実行キット

本文の判断を、そのまま AI で実行するためのキット集です。プロンプトは Claude (ブラウザ版で可) にコピペすれば動きます。

キット① 自社の画像素材で 3 手法を実測比較する検証セットを組む — 30 分

種別: 実装キット 使うもの: Claude (ブラウザ版で可) / 必要に応じて Claude Code + Adobe MCP 事前に用意するもの: SVG 化したい PNG 画像 2〜3 枚。難易度がバラつくよう、単純な形と複雑な曲線の両方を混ぜると傾向が見えます。背景透過に揃えておくと比較がブレません。

プロンプト:

画像 → SVG 化の手法を、自社の素材で実測比較する検証手順を組み立ててください。

【検証対象】
- PNG 画像: (枚数と各モチーフを記入。例: 3 枚 / 人型アイコン・ロゴ風マーク・地図)
- サイズ: (例: 160 × 160 px、背景透過)

【比較する手法(必ずこの 3 つで揃えること)】
1. Claude Code 単体で手書き SVG を生成
2. Adobe MCP image_vectorize でベクター化(Adobe CC 契約が要る)
3. Illustrator 手動トレース(比較対照、任意)

【評価軸(必ずこの 4 軸で記録すること)】
- 視覚精度: 元画像とどれだけ似ているか(目視、△/○/◎)
- 編集容易性: 後から色・サイズ変更がしやすいか(path 数が少ないほど有利)
- コスト: 追加で必要な契約・時間
- 自動化適性: API やスクリプトで量産できるか

【出力】
- 各手法の実行手順(スクリプト or UI 操作)
- 4 軸 + 制作時間 + 出力サイズ を記録する評価表テンプレート(手法 × 評価軸)
- 検証時間の見積もり

出力の確認ポイント:

• 評価表に「制作時間 (枚数ぶん)」と「出力サイズ (行数 or KB)」の行が入っているか。この 2 つが手法選定の決め手になります
• 視覚精度の判定は最後に必ず目視で。「コードは別物だが見た目は同等」という判定もあり得るので、数字だけで決めないでください

うまくいかないとき:

• Adobe MCP が使えない (Adobe CC 未契約) → まず Claude Code 単体と Illustrator の 2 手法だけで回し、精度が足りない用途が出た時点で Adobe CC の月契約を検討
• Claude Code の SVG が重くなる → 「100 行以内で書いてください」と行数制約を付けると素朴な path に収まります

キット② 年間 LP 制作量から手法とコストの損益分岐点を出す — 15 分

種別: 判断キット 使うもの: Claude (ブラウザ版で可) 事前に用意するもの: 年間の LP 制作件数と、1 LP あたりのアイコン / バッジ平均数のざっくり値。正確でなくて構いません。

プロンプト:

年間の LP 制作量から、画像 → SVG 化の手法選定とコスト試算を出してください。

【入力】
- 年間 LP 制作量: (例: X 件 / 年)
- 1 LP あたりのバッジ・アイコン平均数: (例: Y 個)
- 制作者時給: (例: Z 円)
- Adobe Creative Cloud 単一プラン: 月 $24(1 ドル = 150 円で約 3,600 円、年間約 43,200 円)

【判断基準(必ずこの基準に従うこと)】
- 視覚精度優先で一度貼って終わりの装飾は Adobe MCP
- 色変更・再利用があるアイコンは Claude Code 単体(追加コストほぼゼロ)
- ロゴは正規アセット、印刷物は Illustrator 手動
- Adobe CC は月単位で解約できるので、繁忙期だけ契約する運用も可

【出力】
- 3 手法の年間コスト試算(Claude Code 単体 / Adobe MCP / Illustrator 手動)
- 損益分岐点(Adobe CC 契約が元を取る最小案件数)
- 推奨構成 + 判断根拠

出力の確認ポイント:

• 損益分岐点が案件数で示されているか。本検証では年間 10 案件以上で Adobe CC が元を取る試算でした。自社の数字がこれを下回るなら、Adobe CC は繁忙期スポット契約が有利です
• アイコン (再利用あり) を Adobe MCP に割り当てていないか。ここは Claude Code 単体が原則です

うまくいかないとき:

• 制作者時給が不明 → 一般的な相場 (例: 3,000〜5,000 円) で仮置きして幅を出し、後で実数に差し替え

参考文献

• Adobe for Creativity (MCP) — Adobe 公式 (取得日: 2026-05)
• Adobe Illustrator — Image Trace — Adobe 公式
• Adobe Creative Cloud Pricing — Adobe 公式 (取得日: 2026-05)
• W3C SVG 1.1 Specification — W3C 公式
• MDN — SVG Path Element — MDN
• OpenAI — Image Generation — OpenAI 公式 (取得日: 2026-05)