gpt-image-2 や Firefly で生成した画像を LP に埋め込むとき、PNG のままだと表示サイズ可変への対応が弱く、SVG 化が求められます。SVG 化の手段は大きく「Claude Code 単体で手書き SVG を作る」「Adobe MCP の image_vectorize を使う」「Illustrator で手動トレース」の 3 つ。私たち humbulls はあるヘルスケア系 BtoB ブランドの LP 制作で、同じバッジ画像 3 枚を 3 手法で SVG 化し、視覚精度と編集容易性を比較しました。結論を先に言うと、用途で使い分けが正解です。
gpt-image-2 で出した綺麗なバッジが、SVG 化で崩れる。LP 制作の最終仕上げで必ず一度ハマる問題です。
AI 画像生成ツール (gpt-image-2 / Firefly / Midjourney 等) は、ピクセル画像 (PNG / JPEG) を出力します。LP に「画像のまま」貼れば見た目は綺麗ですが、Retina ディスプレイでぼやけたり、リサイズで画素破綻したり、CSS でフォントとサイズを揃えにくかったりと、本番 LP の品質要件には届きません。※ 本記事の円換算はすべて 1 ドル = 150 円 (2026 年 5 月時点) を基準に計算しています。
実務でよく取られる選択肢は 3 つです。Claude Code に元画像を見せて「これを SVG として手書きしてください」と頼む (= AI 目視 + 手書きコード生成)、Adobe MCP の image_vectorize ツールでベクター変換する (= 精密ベクター化 API)、または Illustrator の Image Trace で手動トレース (= 従来の制作フロー)。それぞれ得意分野が違うので、最初に「目的」を明確にしないと選択を誤ります。
私たち humbulls が遭遇した典型的な失敗は、Claude Code に「これを SVG にして」と頼んだ結果、概念的には合っているがディテールが粗い SVG が出てきて、LP に貼ると「アイコンぐちゃぐちゃ問題」が発生する、というパターンでした。具体的には、人型シルエットが棒人間化したり、DNA ヘリックスのねじれが粗くなったり、日本地図の輪郭がカクカクになったり。元画像と並べると「別物に見える」レベルで劣化します。
これは Claude Code の限界というより「LLM の単発推論で精密ベクターを書き上げるのは難しい」という構造的な制約です。逆に Adobe MCP の image_vectorize は、ピクセル画像を解析して数百〜数千個の path に分解する専用 API なので、視覚精度では圧倒的に強いです。
注意点がひとつ。「精密 SVG = 良い」とも限りません。Adobe MCP の出力は path が多すぎて、後から色を変えたりサイズを調整したりする編集作業が重くなります。用途別の使い分けを次章以降で見ていきます。
目的: 画像 → SVG 変換の方針を自社案件に合わせて決定 所要時間: 15 分 ツール: Claude (Opus 4.7)
プロンプト:
あなたは BtoB LP の制作ディレクターです。AI 画像 (gpt-image-2 / Firefly) を SVG 化する方針を以下の条件で決めてください。
【入力】
- 用途: LP ヒーロー / アイコン / バッジ / ロゴ
- 編集頻度: 1 度作って終わり / 月次更新 / クライアント案件で複数バリエーション
- 後工程: そのまま LP に貼る / ブランドアセットとして再利用 / 印刷物にも展開
【出力】
- 推奨手法 (Claude Code 単体 / Adobe MCP / Illustrator) と判断根拠
- 制作時間の概算
- 失敗時のリカバリ手順
運用 Tips: - ロゴ系は精度より「再現性」優先 → 必ず正規アセット (= ブランドガイドライン規定) を使う - 一度きりの LP 装飾なら Adobe MCP で精度優先、編集予定があるなら Claude Code で素朴な path に留める
比較は同じ素材を並べて行うのが鉄則です。あるヘルスケア系 BtoB ブランド LP のヒーローバッジ 3 種類を、3 手法で SVG 化しました。
検証素材として選んだのは、あるヘルスケア系 BtoB ブランドの LP 制作で gpt-image-2 で生成したヒーローエリアの バッジ 3 種類 です。各バッジは 160 × 160 px の正方形クロップ画像で、以下のモチーフを含みます:
| バッジ | モチーフ | 難易度 |
|---|---|---|
| Badge A | 人型シルエット + 数値ラベル | 中 (人型は SVG 化しやすい) |
| Badge B | DNA ヘリックス + 形状ラベル | 高 (曲線が複雑) |
| Badge C | 日本地図 + 統計ラベル | 高 (海岸線の細部) |
3 手法は以下の通り設定しました:
image_vectorize ツールにバッジ PNG を送信し、ベクター化された SVG を取得 (= Adobe Creative Cloud アカウントが必要)検証フローは「PNG 元画像 → 3 手法それぞれで SVG 化 → ブラウザで並べて表示 → 視覚精度 / コード行数 / 編集容易性を計測」というシンプルな流れです。
実装は 3 手法とも 30 分以内に完了しますが、視覚精度の評価は LP デザイナーと共同で行うのが正解です。「コード上は別物だが見た目は同等」という判定もあり得るので、最終評価は必ず目視で行います。
注意点がひとつ。比較対象を同じ条件にするため、すべて 160 × 160 px の正方形クロップで揃え、背景透過 PNG を入力にしました。背景色が異なる元画像で比較すると、SVG 出力に背景処理の差が混入して比較がブレます。
目的: 同じ素材を 3 手法で SVG 化する検証手順を組み立てる 所要時間: 30 分 ツール: Claude (Opus 4.7) / Adobe MCP
プロンプト:
あなたは AI ツール検証のテストエンジニアです。同じ PNG 画像を 3 手法 (Claude Code 単体 / Adobe MCP / Illustrator) で SVG 化する検証手順を組み立ててください。
【検証対象】
- 160 × 160 px の正方形 PNG 画像 3 枚 (= バッジ A / B / C)
- 背景透過済み
【評価軸】
- 視覚精度 (= 元画像とどれだけ似ているか)
- コード行数 (= SVG ファイルサイズ)
- 編集容易性 (= 後から色 / サイズ変更がしやすいか)
【出力】
- 各手法の実行手順 (= スクリプト or UI 操作)
- 評価記録テンプレート (= 表形式)
- 検証時間の見積もり
運用 Tips: - Claude Code には「100 行以内で書いてください」のような行数制約を入れると素朴な path に収まる - Adobe MCP は API レスポンスが遅い (= 1 枚 30 秒程度) ので、並列処理の設計を考えておく
4 軸で比較すると「圧倒的に勝つ手法は存在しない」ことがわかります。用途別の使い分けが必須です。
3 手法を 4 評価軸で並べた結果がこちらです:
| 評価軸 | Claude Code 単体 | Adobe MCP image_vectorize | Illustrator 手動 |
|---|---|---|---|
| 視覚精度 | △ (素朴 path、概念のみ) | ◎ (path 数百〜数千、精密) | ◎ (調整次第で最高) |
| 編集容易性 | △ (再生成しやすいが path 単純すぎる) | × (path 多すぎて後編集困難) | ○ (Illustrator 内で自由) |
| コスト | ◎ (Claude Code 契約のみ) | △ (Adobe Creative Cloud 必要、月 $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 は視覚精度と自動化適性で勝つが、編集容易性で大きく負ける」 という構造です。path 数千個の SVG は、後から色を変えようとすると CSS で一括指定が効きにくく、Illustrator で開いて手動編集する羽目になります。
Claude Code 単体は逆に「素朴すぎて元画像と別物」になりがちですが、出力 SVG が 50 行程度に収まるので、CSS で色変更したりサイズを調整したりが容易です。「ブランドカラーを反映させる」「Hover で色を変える」のような後編集が必要なケースで強みが出ます。
Illustrator 手動は精度と編集性の両立では最強ですが、制作時間が長く、自動化適性がゼロです。1 度きりの主役ビジュアル (= LP のメインキービジュアル等) に絞って使うのが現実的です。
私たち humbulls の判断基準は 「視覚精度 vs 編集性のどちらが業務的に重要か」 で決めるシンプルなルールです。「画像のまま LP に置く」なら Adobe MCP、「アイコンを再編集する」なら Claude Code、「重要な主役ビジュアル」なら Illustrator 手動。
注意点がひとつ。Adobe MCP は Adobe Creative Cloud の契約 (= 個人版で月 $24 ≒ 約 3,600 円) が必要です。年間 $288 (= 約 43,200 円) かかるので、年間 10 案件以上の LP 制作で初めて元が取れる試算です。それ以下なら Claude Code 単体 + Illustrator スポット契約という選択肢の方が安価です。
目的: 自社の年間 LP 制作量に合わせて 3 手法のコスト試算を行う 所要時間: 15 分 ツール: Claude (Opus 4.7) / Google Sheets
プロンプト:
あなたは LP 制作スタジオの経営アドバイザーです。年間の LP 制作量から、画像 → SVG 化の手法選定とコスト試算を出してください。
【入力】
- 年間 LP 制作量: [X 件 / 年]
- 1 LP あたりのバッジ / アイコン平均数: [Y 個]
- 制作者時給: [Z 円]
- Adobe Creative Cloud 単一プラン: $24/月 (= 約 3,600 円)
【出力】
- 3 手法の年間コスト試算 (Claude Code 単体 / Adobe MCP / Illustrator 手動)
- 損益分岐点 (= Adobe MCP 契約が元を取る最小案件数)
- 推奨構成 + 判断根拠
運用 Tips: - Adobe Creative Cloud は月単位の契約解約が可能、繁忙期だけ契約する運用も有効 - Claude Code の月額は固定なので、画像 SVG 化に追加コストはほぼゼロ
「全部 AI 化」は無理です。用途で 3 手法を使い分けると、品質とコストのバランスが最適化します。
3 手法の使い分けは、最終的な「用途」で決まります。私たち humbulls の運用ルールはこうです:
| 用途 | 推奨手法 | 理由 |
|---|---|---|
| LP ヒーローエリアの装飾画像 | Adobe MCP image_vectorize | 視覚精度優先、一度貼って終わり |
| LP のアイコン (機能説明 / 強み 3 つ等) | Claude Code 単体 | CSS で色変更したい、再利用予定あり |
| サービスロゴ / ブランドマーク | 正規アセット (= AI 生成 NG) | ブランドの一貫性、AI 生成は禁止 |
| プレゼン資料のアイコン | Claude Code 単体 + Illustrator | 修正頻度高、軽量 path で十分 |
| 印刷物 (名刺 / リーフレット) | Illustrator 手動 | 印刷精度要件、AI 単体では届かない |
特に サービスロゴ / ブランドマーク は「AI 生成厳禁」が業界標準のルールです。私たち humbulls の社内ルールも「ロゴは正規アセット 5 本のみ使用、AI 生成版 / 代替版の流用禁止」を明文化しています (= brand/docs/brand-guidelines.md)。AI で「ぽいロゴ」を作ってもブランドの一貫性が崩れ、長期的に資産価値を毀損します。
LP ヒーローエリアの装飾画像は逆に「視覚精度優先 + 一度貼って終わり」なので Adobe MCP が最適です。LP 公開後に「もう少し色を明るくしたい」と言われたら、また Adobe MCP で再生成すれば足ります。
LP のアイコン (= サービスの強み 3 つを表すアイコン等) は再利用や色変更が発生しやすいので、Claude Code 単体の素朴 path が現実解です。CSS で fill: var(--brand-color) のように色を指定すれば、ブランド変更時に一括で色を変えられます。
注意点がひとつ。Claude Code 単体で出した素朴 SVG は「コードレベルで類似画像」なので、元画像と完全に同じ見た目にはなりません。クライアントレビューで「もう少し元画像に近づけて」と言われたら、Adobe MCP に切り替える判断が必要です。
目的: 用途別の SVG 化フローを Decision Tree で組み立てる 所要時間: 20 分 ツール: Claude (Opus 4.7)
プロンプト:
あなたは BtoB LP 制作スタジオの技術リードです。画像 → SVG 化の Decision Tree を組み立ててください。
【判断材料】
- 用途 (LP 装飾 / アイコン / ロゴ / プレゼン / 印刷物)
- 再利用予定の有無
- 編集頻度 (1 度きり / 月次 / クライアント案件で複数)
- 視覚精度要件 (粗くて OK / 元画像と近い / 印刷精度)
【出力】
- 5 ステップ程度の Decision Tree (= Yes/No 分岐)
- 各分岐先の手法 (Claude Code / Adobe MCP / Illustrator / 正規アセット)
- 制作者向けの 1 ページガイド
運用 Tips: - ブランドロゴ系の判断分岐は「常に正規アセット」で終端させる (= AI 生成への流入を防ぐ) - Decision Tree は社内 Wiki に貼って、新人制作者が迷ったときに見られる場所に置く
「100% AI 化」は無理ですが、「制作工程の一部を AI 化」は十分現実的です。humbulls 実務の採用判断を公開します。
私たち humbulls の LP 制作実務では、ハイブリッド構成で 3 手法を組み合わせています。具体的には以下のフェーズで AI / 非 AI の役割を切り分けています:
| フェーズ | 担当 | 使用ツール |
|---|---|---|
| 画像生成 (= AI 画像生成) | AI | gpt-image-2 (= 1 ドル = 150 円換算で 1 画像 $0.04 ≒ 6 円) |
| ベクター化 (= 装飾用 SVG) | AI | Adobe MCP image_vectorize |
| アイコン作成 (= 再利用 SVG) | AI | Claude Code 単体 |
| ロゴ配置 | 人間 | 正規アセット |
| 印刷物用ベクター | 人間 | Illustrator |
| 最終調整 / クライアントレビュー対応 | 人間 | Illustrator + Figma |
このフローで重要なのは 「AI 化できる工程と人間判断が必要な工程を明確に分ける」 ことです。「AI 任せ」にすると品質が読めなくなり、「全部人間」にするとコストとスピードが悪化します。
humbulls の LP 制作実績では、画像生成 + ベクター化フェーズを AI 化したことで、1 案件あたりの装飾画像制作時間が 約 4 時間 → 約 1 時間 に圧縮できました (= 4 倍速)。残りの 1 時間は「クライアントレビュー対応」「ブランド準拠の最終確認」という人間判断の領域です。
クライアント側に説明する際は「AI が生成した素材を、人間がブランドに合わせて最終調整する」というハイブリッド構成を明示しています。「AI が全部やる」と言うとクライアントの不安を呼びますが、「人間が最終判断する」と添えると安心感が高まります。
humbulls の Growth Partner サービス では、こうした LP 制作の AI 化フローを含めて伴走しています。AI 活用の実装例は humbulls Time Capsule で時系列に公開しています。
注意点がひとつ。AI 化の判断は技術トレンドで毎月変わります。今は Claude Code + Adobe MCP の組み合わせがベストですが、半年後には Figma AI / Stitch / 他社 MCP が追いつく可能性が高いです。半年に 1 度はツール選定を見直す前提で運用してください。
目的: 自社の LP 制作フローを AI 化 / 人間担当に分解 所要時間: 30 分 ツール: Claude (Opus 4.7)
プロンプト:
あなたは LP 制作スタジオの DX コンサルタントです。以下の LP 制作フローを「AI 化できる工程」「人間担当が必要な工程」に分解してください。
【現在のフロー】
1. ヒアリング / 要件定義
2. ワイヤー作成
3. デザインカンプ
4. 画像生成 / ベクター化
5. コーディング
6. クライアントレビュー対応
7. 公開 / 計測設定
【出力】
- 各工程の AI 化適性 (◎/○/△/×)
- AI 化する場合の推奨ツール
- 人間判断が必要な理由 (= ブランド準拠 / 法務 / 仕上げ品質 等)
- 工数圧縮率の見込み
運用 Tips: - AI 化適性 △ 以下の工程は無理に AI 化しない (= 品質悪化リスク) - 半年に 1 度、AI 化適性を再評価する (= 技術進化で適性が変わる)
「迷ったらこの 4 行で判断」というルールを 1 ページに圧縮し、制作スタジオ全員で共有するのが運用の最短路です。
3 手法の使い分けの結論はシンプルです:
「AI ですべて自動化」を目指すと品質が読めなくなり、「すべて人間」だとコストとスピードが悪化します。用途で 3 手法を使い分けるハイブリッド構成 が、品質とコストのバランス最適解です。
私たち humbulls はこの 4 行ルールを A4 1 ページにまとめ、制作スタジオの新人がすぐ参照できるようにしています。AI 化フローはツール進化が速く、半年ごとに見直しが必要なので「常に最新版を 1 ページで配布する」運用が現実的です。
LP 制作で AI ツールを実務に組み込む全体像は Apps Script で HubSpot ↔ Sheets を月額 $0 で自動同期 のような同タグ別記事でも公開しているので、合わせてご活用ください。
注意点がひとつ。AI 化判断は「品質要件」を最初に固めないと迷子になります。LP の用途 (= ヒーロー / アイコン / ロゴ / 印刷物) を分解して、それぞれの「許容できる視覚精度」「再編集の必要性」を制作前に整理しておきましょう。
目的: 制作スタジオ全員に共有する Decision Tree 1 ページガイドを生成 所要時間: 30 分 ツール: Claude (Opus 4.7)
プロンプト:
あなたは LP 制作スタジオの技術リードです。画像 → SVG 化の Decision Tree を A4 1 ページのガイドにまとめてください。
【必須項目】
- 用途別の手法 (LP 装飾 / アイコン / ロゴ / 印刷物)
- 各手法の制作時間目安
- 失敗時のリカバリ手順
- AI 化判断の半年見直しサイクル
【出力】
- マークダウン (= Notion に貼り付け可能)
- 図表 (= Decision Tree の ASCII 簡易版)
- 制作者向け 1 行サマリ
運用 Tips: - ガイドの更新は半年ごと、技術トレンドに合わせて改訂 - 新人制作者の初回案件で必ず参照させる運用にすると定着が早い
humbulls の Growth Partner サービス では、LP 制作の AI 化フロー設計から伴走しています。AI 活用の制作テンプレを一括でダウンロードしたい方は、BtoB マーケ AI 活用ガイド もご活用ください。