AIエージェントに「SVGコード」を書いてもらったら、フラットなアイコンを一歩ずつ思い通りに微調整できた話

はじめに

AIを使ってアイコンを作ろうとして、最初の30分で心が折れそうになったことはありませんか？

例えば、作りたいのはトロンボーンとメガネを組み合わせた、フラットでシンプルなデザインのアイコンなのに、具体的なアイコンについて細かいところをAIに「ちょっと線の太さを変えて」などと頼むたびに、全体のデザインがガラリと変わった全く別物の画像が上がってくるような…。

「いや、変えてほしいのは線の太さだけなんだけど……」と思いながら、すれ違いのやり取りを繰り返すうちに、疲れてきて自分でベクターツールを開いて作り始めたほうがいいのでは？とさえ思い始めるような…。（デザインスキルが低いのでそれは難しいのですが…。）

今回、もしかしてと試したのが、画像を出してもらうのをキッパリ辞めて、SVGコードを直接書き出してもらうというアプローチでした。
※後から調べると同様の考え方は色々あるようでしたが、自分の記録としても記事を書いています。

結論から言うと、このコードで図形を描いてもらうという方法に変えたことで、すれ違いから解放され、最後の一工夫までじっくりと対話でデザインを育てていくことができました。この記事では、実際に理想のアイコンを形にしていったプロセスと、そこで得られた具体的な気付きについて紹介します。

また、余談ですが、アイコンがシンプルだったのが理由かもしれませんが、AIのリソースの減りも全然少なくて、その点も良かったです。

なお使っているのはGoogle Antigravity2.0でGoogle AI Proプランです。

完成したアイコン。トロンボーンとメガネ融合したデザインです。

対話を重ねて、ゼロからデザインを形にするプロセス

画像生成AIでの一発出しとは異なり、SVGコードを書いてもらう方法では、対話をしながら少しずつデザインをブラッシュアップしていく作業を、やり取りのトラブルもなく進めることができました。

SVG形式については当初から指定して、出力はsvgファイル形式にてお願いしますと伝えました。まずは大まかなラフ案をいくつも作ってもらい、そこからまた何案も案出しを進めた後、ある程度方向性を決めました。この時点まででも、大まかなラフ案の方向性が以前の指示から連続性があり、非常にスムーズに進めることができました。

その後、「管のカーブをもっと滑らかに」「ここの線の太さを揃えて」といったやり取りを何度も重ね、一歩一歩、泥臭くも着実に理想の形へ近づけていきました。

色の決定プロセスも同様で、対話を通して一緒に微調整して決めていきましたが、何の破綻もなくデザインの修正を進めることができました。

破綻なく進めることができた具体的な事例ですが、全体の形がほぼ出来上がってきたかなり制作が進んだ終盤の段階で、あることに気が付きました。
「右側のレンズの中央にある黒い点（ロータリーバルブの軸受部分）が、人間の瞳孔（目）みたいで少し怖い……」

そこで終盤の段階になってから、AIにこうお願いしました。

「この中央の黒い点を取り除いて、いい感じにした案を何案か出してほしい。」

好みの案に調整するのに何度かやり取りを重ねましたが、どの案も指示した箇所以外のデザインを壊すことなく、片目の部分だけを書き換えて自分の思い描いた通りの形に仕上げてくれました。

もしこれが画像生成AIだと、終盤でこの中央の点だけ消してと頼んでも、少なくとも自分のスキルでは全体の形やテイストが変わってしまって最初からやり直しになっていたのではと思います。

また、最後の最後まで、納得がいくまでピンポイントでしつこく微調整ができるのは、コード出力ならではの良さだと実感しました。
加えて、微調整後もイラレやaffinity designerなどのベクターツールで改変もしやすいのが良い点と感じました（今回は行わなかったですが。）。

なお、途中で手作業での修正もしつつAIに修正させる方法も考えましたが、svgファイルのデータ構造がぐちゃぐちゃになりそうな予感を感じたのでやめました。
専属のベクターツールAIもあるんだろうなぁと思いつつ、とりあえず、あまり課金なども増やしたくない（現在Google AI Proのみ）ので、この形を軸に色々作るのを進めていこうと考えています。

修正前（中央に黒い点がある状態）	修正後（金属パーツを白抜きにした状態）

終盤でのピンポイントな修正（ちょっと前後のバージョンではないかも）。黒い点（左）から、金属パーツを大きくして白抜きにしたドーナツ状（右）へ、他のパスを壊さずに修正できました。

実際に試して分かった、コードだからこそ助かった点

1. 途中でAIとの対話が切れても「続き」から再開できる

AIアシスタントと長い時間やり取りをしていると、時折AIがフリーズしたり、会話の記憶が途切れてしまうことがあります。
画像生成AIのチャットが途切れてしまうと、二度と同じ画像を再現することはできない用に思います。

2. 背景を「透明」にして出力できるため、使い勝手が良い

アイコンをブログやSNSのプロフィールなどに設置する際、背景は透明になっていた方が断然便利です。白い背景のサイトにも、黒い背景のサイトにも綺麗に馴染むからです。

画像生成AIだと背景が白や黒で塗りつぶされて出力されてしまうことが多く（背景透過png出力できない…？）、綺麗に背景を透明にする切り抜き作業（透過PNGへの変換）に一手間かかってしまいます。

一方、SVGコードであれば背景の指定をしないだけで、最初から完全に背景が透明な画像になります。そこから画像ファイル（PNG）に書き出すだけで、透明背景のアイコンを簡単に作ることができました。

3. サイズ違いのシミュレーションが1ページで一覧できる

あと、これはAI側からの提案で作ってもらったのですが、プレビュー用のシンプルなHTMLファイルを1枚作ってもらうことで、ブラウザ上でサイズを変えた際の見え方の検証や、過去のデザイン案との比較を1ページで行えました。svgだと、その都度プレビュー画像（PNG画像）を生成しなくてもブラウザのズーム機能を使うだけでサイズ違いの表示を確認できて修正のサイクルを回す速度も早く感じました。

「SNS用の丸型でトリミングされたときにどう見えるか」「少し離れて見たときにどう見えるか」といった確認が、画像と文章で一覧できたため、とても分かりやすく、納得して次の指示を出すことができました。

プレビュー用HTML内のアイコン表示イメージ

アイコン単体での見え方や、少し引いた時のサイズでの印象、丸く切り抜かれた際のシミュレーションなどをブラウザ上で並べて比較した様子。最終の微調整なので間違い探しみたいになっています。

ディスプレイ表示をきれいに仕上げるための調整

パソコンやスマホの画面でアイコンを表示した際、細い線がなんとなくにじんでぼやけて見える問題がありました。これも、コードを直接調整できるからこそ、以下のようにきれいに解決できました。

• 線の太さをキリの良い偶数の数値（6pxや4pxなど）に統一する:
  小数点が含まれる中途半端な太さの線をなくしたことで、ディスプレイの画素の境界に線がぴったり乗り、にじまないクッキリとした綺麗な描画になりました。
• 書き出し解像度を最適化する:
  SVGからPNG画像に変換する際、無駄に高い解像度で書き出して縮小すると、変換時の補正がかかって線がボケてしまいます。アイコンの出力実寸（512x512pxなど）に合わせて、にじみの出ない正確な倍率を指定することで、最もクッキリ見えるクリアな画像に仕上げることができました。

まとめ

もし、シンプルな「フラットデザイン」のアイコンやロゴを作りたいと考えていて、かつ自分好みの形にじっくり対話でこだわりたいのであれば、AIにSVGコードを描いてもらう方法は非常にマッチします。

• 言葉で思い通りにピンポイントで最後の最後まで修正できること
• 最初から透明背景で使いやすい画像が得られること
• 途中で対話が切れても、コードから確実に再開できる安心感

画像生成AIで理想の形が出るまでプロンプトを試行錯誤する代わりに、AIアシスタントに「SVGコードで描いてほしい」と頼んで、対話しながらデザインを育てるアプローチも選択肢として考えてみてはいかがでしょうか。