AI が描いたバッジ画像を、形を崩さず SVG に変換できたのは Adobe MCP だけだった
Probes は、レシピにまとめるには細かすぎる検証を 1 本ずつ置いておく場所です。 何を試して、どれが駄目で、最後にどう落ち着いたか。ここまで読めば判断はつくはず、というところで切り上げています。
DNA FACTOR RESUme という遺伝子検査ブランドの LP を作っている途中の話です。ページ上部に「累計検査者 24,781 人」のような、小さなアイコンと文字を組み合わせたバッジを 3 つ並べたかった。デザイン案は画像生成 AI の gpt-image-2 に描かせて、PNG 画像で受け取っています。 ただ、PNG のままコードに載せるのは無理でした。PNG は色のついた点を敷き詰めてできた画像（ラスター画像）なので、表示を大きくすると輪郭がぼやけます。背景も透明ではないので、ダークモード（ページの背景を黒に切り替える表示）にすると、バッジの周りだけ白い四角が残る。 なので、図形を点ではなく線と座標の数値として持つ形式（ベクター画像）に変換できないか試しました。その代表が SVG です。SVG ならどれだけ拡大しても輪郭は保たれるし、中身が文字データなので色をあとから CSS で塗り替えられます。
試した順に並べました。駄目だったものを消すと、なぜこの結論になったのか分からなくなるので残してあります。
ADOPTED = 採用 / REJECTED = 不採用 / PARTIAL = 条件つきで使える / UNVERIFIED = まだ試していない
出てきた SVG を開いてみると、図形の輪郭を表す線のデータ（path と呼びます）がばらばらに崩れていました。文字とアイコンの位置も元の絵から大きくずれている。手直しで詰められる範囲を超えていたので、この方法は捨てました。
Codex は OpenAI 側のコーディング AI で、Claude Code と同じ役割の別ブランドです。結果は Claude のときとほとんど同じで、やはり輪郭のデータが崩れました。モデルを替えれば通る、という話ではないらしい。
表示そのものは問題なく動きます。ただし拡大したときに輪郭が甘くなる弱さは残るし、ダークモードにするとバッジの背景だけが白く浮いてしまい、透明にする処理も入れられませんでした。その場しのぎとしては使えますが、公開版に残したい出来ではありません。
MCP は AI から外部ツールを呼び出すための共通の口で、Adobe MCP はその口を通して Illustrator を動かします。people / dna / japan の 3 バッジすべてで変換に成功しました。輪郭の線データは元の形を保っていて、文字とアイコンもきちんと別々の部品として分かれています。どの部品をどうまとめるかは手で少し整え直しましたが、スタート地点の出来がほかの方法と違いすぎる。
gpt-image-2 にラフを描かせて、Adobe MCP 経由の Illustrator で SVG に変換する。いま手元にある方法ではこれが一番安定します。Claude や Codex に SVG を直接書かせるやり方は、点の集まりの画像から線データを起こし直す段階でつまずき、文字とアイコンを分けきれずに形が崩れる。変換は変換用の道具にやらせたほうが速い。
この検証で実際に出てきたファイルです。クリックすると別のタブで原寸のまま開くので、そのまま保存して中身を見られます。
検証しながら書いていたメモです。手順も、途中で気づいたことも、あとから整えずに置いてあります。
バッジは 3 種類ありました。人型のアイコンに検査者数を添えたもの、DNA の二重らせん、日本地図です。絵としてはどれも gpt-image-2 が数十秒で仕上げてくれました。困ったのはその先です。見た目が良くても、そのままではウェブページに載せられる形式になっていません。
最初は「Claude Code なら PNG を見ながら SVG を書き起こせるだろう」と考えて、画像をそのまま渡しました。ここでやらせようとしていたのは、色のついた点の集まりから輪郭を推測して、線と座標のデータに起こし直す作業です。これが通らない。文字の縁とアイコンの縁が混ざり、開いてみると元の絵とは似て非なるものが出てきます。相手を Codex に替えても同じでした。読み取り自体は AI が得意でも、輪郭を数値として正確に取り直すのは別の仕事なのだと思います。
そこで Adobe MCP に切り替えました。MCP は AI から外部ツールを呼び出すための共通の口で、Adobe MCP はその口を通して Illustrator を動かします。変換そのものを AI に推測させるのではなく、Illustrator が昔から持っている画像トレース機能に任せる形になる。これが正解でした。3 つとも一度で通り、文字とアイコンが別の部品として分かれた状態で返ってきます。餅は餅屋。
Logo Design レシピの「検証済みの試行」欄に、Adobe MCP を採用候補として書き足します。ロゴ制作にも同じ流れがそのまま使えるはずです。gpt-image-2 に案を何本か描かせて、選んだものを Adobe MCP でベクターに起こす。ロゴではまだ試していませんが、バッジで通った流れがロゴだけ通らない理由も思いつきません。
そのままコピーして X に貼れる文です。好きに書き換えて使ってください。
gpt-image-2 でラフを描いて、Adobe MCP 経由の Illustrator で SVG 化。いまのところこれが最強。 Claude も Codex も、PNG から SVG を書き起こさせると形が崩壊するので使い物にならない。 バッジとアイコンで通ったので、ロゴもこの流れで行くつもり。