本記事のポイント
「gpt-image-2 で出したバッジは綺麗なのに、SVG にした瞬間に別物へ崩れる」。LP 制作の最終仕上げで、humbulls が支援するなかでよく聞く悩みです。原因は Claude Code の性能でも Adobe の設定でもなく、1 つの手法で全部やろうとしていることにあります。本記事では、あるヘルスケア系 BtoB ブランドの LP 制作で使ったバッジ 3 枚を題材に、3 手法を同一条件で比較した一次データを公開します。専門的なベクター知識は不要で、判断基準と巻末キットがあれば自社でも同じ検証を再現できます。
先に結論の使い分け表を置きます。以降の章は、この表がなぜこの割り当てになるのかを実測で裏づける流れです。
| 用途 | 推奨手法 | 決め手 |
|---|---|---|
| LP ヒーローの装飾画像 (一度貼って終わり) | Adobe MCP image_vectorize | 視覚精度優先 |
| LP アイコン (機能説明 / 強み 3 つ、色変更あり) | Claude Code 単体 | 軽量 path で CSS 編集が容易 |
| サービスロゴ / ブランドマーク | 正規アセット (AI 生成しない) | ブランドの一貫性 |
| 印刷物 / 主役キービジュアル | Illustrator 手動 | 精度と編集性の両立 |
「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 軸で測り分けたのが本検証です。
比較は同じ素材を並べるのが鉄則です。検証素材には、あるヘルスケア系 BtoB ブランドの LP 制作で gpt-image-2 で生成したヒーローエリアの バッジ 3 種類 を選びました。各バッジは 160 × 160 px の正方形クロップ、背景透過 PNG に揃えています。
| バッジ | モチーフ | 難易度 |
|---|---|---|
| Badge A | 人型シルエット + 数値ラベル | 中 (人型は SVG 化しやすい) |
| Badge B | DNA ヘリックス + 形状ラベル | 高 (曲線が複雑) |
| Badge C | 日本地図 + 統計ラベル | 高 (海岸線の細部) |
3 手法は次のように固定しました。
image_vectorize に送り、ベクター化された SVG を取得 (Adobe Creative Cloud アカウントが必要)検証フローは「PNG 元画像 → 3 手法で SVG 化 → ブラウザで並べて表示 → 視覚精度 / コード行数 / 編集容易性を計測」というシンプルな流れです。条件を揃えるため、すべて 160 × 160 px の正方形クロップ・背景透過 PNG を入力にしました。背景色が異なる元画像を混ぜると、SVG 出力に背景処理の差が入って比較がブレます。
正直に開示しておくと、これは 3 素材・n=3 の小規模検証です。視覚精度の評価は最終的に目視で行っており、主観が混じります。数字はすべて 2026 年 5 月時点、円換算は 1 ドル = 150 円で統一しています。
3 手法を 4 評価軸 + 実測値で並べた結果がこちらです。
| 評価軸 | Claude Code 単体 | Adobe MCP image_vectorize | Illustrator 手動 |
|---|---|---|---|
| 視覚精度 | △ (素朴 path、概念のみ) | ◎ (path 数百〜数千、精密) | ◎ (調整次第で最高) |
| 編集容易性 | △ (再生成は容易だが path が単純すぎる) | × (path 多すぎて後編集困難) | ○ (Illustrator 内で自由) |
| コスト | ◎ (Claude Code 契約のみ) | △ (Adobe CC が必要、月 $24 ≒ 3,600 円) | × (Illustrator + 制作者時間) |
| 自動化適性 | ○ (Claude Code session で完結) | ◎ (Adobe MCP API 化が容易) | × (UI 操作前提) |
| 制作時間 (3 枚) | 30 分 | 5 分 (API 呼び出しのみ) | 90 分 (手動トレース) |
| 出力サイズ (Badge A) | 約 2 KB (50 行 path) | 約 28 KB (1,200 path 要素) | 約 8 KB (制作者が path 整理) |
数字ではっきり出たのは、制作時間と出力サイズの落差です。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 になる、という関係が見えます。
この検証で一番効いた発見は、Adobe MCP は視覚精度と自動化適性で勝つが、編集容易性で大きく負けるという構造です。path が数千個ある SVG は、後から色を変えようとしても CSS の一括指定が効きにくく、結局 Illustrator で開いて手動編集する羽目になります。精度の高さが、そのまま後工程の重さに化けます。
Claude Code 単体は逆で、素朴すぎて元画像と別物になりがちですが、出力が 50 行程度に収まるので CSS での色変更やサイズ調整が軽い。fill: var(--brand-color) を当てるだけでブランドカラーに寄せられるので、色変更や Hover 演出が前提のアイコンで強みが出ます。
Illustrator 手動は精度と編集性を両立できて品質は最高ですが、3 枚で 90 分と遅く、自動化適性はゼロです。一度きりの主役ビジュアルに絞って使うのが現実的です。
よくある失敗は、視覚精度だけを見て「一番綺麗な Adobe MCP に統一しよう」と決めてしまうことです。色変更が発生するアイコンにまで数千 path の SVG を使うと、修正のたびに Illustrator 往復が発生し、かえって工数が増えます。精度・編集性・コスト・自動化のどれが業務的に重いかを、用途ごとに決めるのが順番です。
冒頭の使い分け表を、実務の運用ルールとして具体化します。判断は最終的な「用途」で決まります。
| 用途 | 推奨手法 | 理由 |
|---|---|---|
| LP ヒーローエリアの装飾画像 | Adobe MCP image_vectorize | 視覚精度優先、一度貼って終わり |
| LP のアイコン (機能説明 / 強み 3 つ等) | Claude Code 単体 | CSS で色変更したい、再利用予定あり |
| サービスロゴ / ブランドマーク | 正規アセット (AI 生成しない) | ブランドの一貫性 |
| プレゼン資料のアイコン | Claude Code 単体 + Illustrator | 修正頻度が高い、軽量 path で十分 |
| 印刷物 (名刺 / リーフレット) | Illustrator 手動 | 印刷精度要件、AI 単体では届かない |
特に サービスロゴ / ブランドマーク は AI 生成を避けるのが業界の共通ルールです。humbulls でも「ロゴは正規アセット 5 本のみ使用、AI 生成版 / 代替版の流用は禁止」を社内で明文化しています (brand/docs/brand-guidelines.md)。AI で「ぽいロゴ」を作るとブランドの一貫性が崩れ、長期的に資産価値を毀損します。
humbulls の LP 制作実務では、この使い分けをフェーズ単位で AI / 人間に切り分けたハイブリッド構成で回しています。
| フェーズ | 担当 | 使用ツール |
|---|---|---|
| 画像生成 | AI | gpt-image-2 (1 画像 $0.04 ≒ 6 円) |
| ベクター化 (装飾用 SVG) | AI | Adobe MCP image_vectorize |
| アイコン作成 (再利用 SVG) | AI | Claude Code 単体 |
| ロゴ配置 | 人間 | 正規アセット |
| 印刷物用ベクター | 人間 | Illustrator |
| 最終調整 / クライアントレビュー対応 | 人間 | Illustrator + Figma |
この切り分けで、1 案件あたりの装飾画像制作時間が 約 4 時間 → 約 1 時間 に圧縮できました (4 倍速)。残りの 1 時間は「クライアントレビュー対応」「ブランド準拠の最終確認」という人間判断の領域です。クライアントには「AI が生成した素材を、人間がブランドに合わせて最終調整する」と説明しています。「AI が全部やる」より「人間が最終判断する」と添えるほうが、安心感が高まります。
よくある失敗は、Claude Code 単体の素朴 SVG を主役ビジュアルにまで使ってしまうことです。コードレベルでは類似でも、元画像と完全一致はしません。クライアントレビューで「もっと元画像に近づけて」と言われたら、Adobe MCP か Illustrator に切り替える判断が要ります。
→ 自社の年間制作量からコストの損益分岐点を出す作業は、巻末の実行キット②で実行できます。
この結果をそのまま鵜呑みにしないでください。本検証には次の限界があります。
次に検証するとしたら、素材数を 10 枚以上に増やす、写真調画像を加える、視覚精度を SSIM 等の定量指標で測る、最新モデルで手書き SVG を再測定する、の 4 点です。自社の素材で同じ検証を回せるよう、手順をキット①にまとめました。
3 手法に絶対の勝者はありません。視覚精度なら Adobe MCP と Illustrator、軽さと編集性とコストなら Claude Code、と得意分野が割れます。だからこそ用途で割り当てるのが正解です。
判断の起点は「品質要件を先に固める」ことです。LP の用途 (ヒーロー / アイコン / ロゴ / 印刷物) を分解し、それぞれの許容視覚精度と再編集の必要性を制作前に整理しておけば、手法選びで迷いません。ツールの実力は半年で動くので、この使い分けも半年ごとに見直す前提で運用してください。
LP 制作で AI ツールを実務に組み込む全体像は、Apps Script で HubSpot ↔ Sheets を自動同期する のような別記事でも公開しています。humbulls では、こうした LP 制作の AI 化フロー設計から Growth Partner サービス で伴走しています。AI 活用の実装例は humbulls Time Capsule で時系列に公開中です。実装テンプレを一括で使いたい方は BtoB マーケ AI 活用ガイド もご活用ください。
本文の判断を、そのまま AI で実行するためのキット集です。プロンプトは Claude (ブラウザ版で可) にコピペすれば動きます。
種別: 実装キット 使うもの: 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 軸 + 制作時間 + 出力サイズ を記録する評価表テンプレート(手法 × 評価軸)
- 検証時間の見積もり
出力の確認ポイント:
うまくいかないとき:
種別: 判断キット 使うもの: 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 契約が元を取る最小案件数)
- 推奨構成 + 判断根拠
出力の確認ポイント:
うまくいかないとき: