フリー素材にない「ほしいアイコン」をAIで自作する。試してわかった最適な方法

最初にやることは、AIに指示を出すことではない。「何を、何点、どんなスタイルで」を決めることだ。

今回のテストでは以下のように定義した。

• 何を：SaaSの機能紹介ページ用のアイコン
• 何点：6点（セキュリティ、スピード、カスタマーサポート、データ分析、クラウド、コスト削減）
• どんなスタイルで：モノクロ・線画・ミニマルなスタイル

「どんなスタイルで」がデザインを左右する重要なポイントだ。ここが曖昧だと、AIは毎回異なるテイストで出力してしまい、セットとしての一貫性が崩れる。

参考にしたいアイコンのスクリーンショットを1枚用意しておくと、この問題を回避できる可能性が高まる。

参考画像は、今回は以下のスクリーンショットを参照させて、似たテイストのアイコンを作成した。

参照したアイコンサイト：Phosphor Icons

テイストの特徴を整理すると以下の通り。

• モノクロ（黒 #000000）の線画
• 均一なストローク幅（細めの線）
• 塗りなし、背景なし
• 角は適度に丸み
• ミニマルで視認性重視

この特徴をプロンプトに反映する。以下が、今回4つのツールすべてに統一して使用したプロンプトだ。

以下の6つのコンセプトを表すアイコンを作成してください。

■ スタイル指定
- モノクロの線画アイコン（黒い線のみ、塗りなし、背景なし）
- 均一なストローク幅（細めの線）
- ミニマルなデザイン、装飾は不要
- 角は適度に丸みを持たせる
- 6点すべてで線の太さ・角丸・デザインの複雑さを統一すること

■ 作成する6点
1. セキュリティ（シールドをモチーフに）
2. スピード（稲妻をモチーフに）
3. カスタマーサポート（ヘッドセットをモチーフに）
4. データ分析（棒グラフをモチーフに）
5. クラウド（雲と上向き矢印をモチーフに）
6. コスト削減（コインと下向き矢印をモチーフに）

■ 重要
- 6つのアイコンが1つのセットとして見えるよう、テイストを完全に統一してください
- 添付したアイコン画像のスクリーンショットのようなクリーンで整った線画スタイルを参考にしてください

ポイントは「スタイル指定」のセクションだ。線の太さ、塗りの有無、角丸、複雑さのレベルまで明記している。ここを曖昧にすると、ツールごとにバラバラの解釈をされる。

ここからツールごとの結果を解説する。

Claude：一発目から使えるレベル。最高品質

Claudeに上記プロンプトと参考画像を渡すと、6つのアイコンをsvgコードとして個別に出力した。

結論から言うと、4ツール中で最も高品質だった。1回目の出力で十分使えるレベルのアイコン。線の太さ、角丸、デザインの複雑さが6点すべてで統一されており、修正なしでそのまま使えるレベルだった。

特に良かったのは以下の点だ。

一覧プレビューを自動生成してくれる。 6つのアイコンを1つの画面に並べたプレビューを、指示しなくても作成してくれた。1つずつ開いて確認する必要がなく、セット全体の統一感を一目で把握できる（上記の画像）。

個別にプレビュー・ダウンロードできる。 各アイコンは独立したsvgファイルとして出力されるため、必要なものだけをダウンロードすればいい。

修正が的確。 仮に調整が必要な場合も、「3番のヘッドセットの線をもう少し細くして」といったピンポイントの指示に対応してくれる。

Claudeのアプローチは「コードでアイコンを設計する」という本質を突いている。そもそもアイコンとは、限られた面積の中で意味を伝えるための設計図だ。画像としてレンダリングするよりも、最初からベクターデータとして設計する方が理にかなっている。

ChatGPT：svg個別出力が使いやすい。実用十分

ChatGPTも同じプロンプトでsvgを6つ個別に出力した。

プレビュー表示に対応しており、1つずつ確認しながらダウンロードできる。

1回目の出力は、使えるものはそのまま使えるレベルだったが、参考画像と比較すると全体的に線がやや太かった。

「全体的に線が太いので、細くして出力し直してください。」

この修正指示を出すと、すべてのアイコンを一括で修正して再出力してくれた。個別対応も可能で、「3番のヘッドセットだけ調整したい」といった指示にも応じる。

「細く」とはどのくらいかわからない場合もあるため、編集前に「この線の太さを数値で教えてほしい」など数値で編集することを意識するとより正確で高度な編集指示ができる。

ChatGPTはsvg生成に加えて、透過PNGでの出力にも対応している。この場合は6つのアイコンが1枚の画像にまとめて出力されるため、切り取って使う形になる。ただしアイコン用途であればsvgの方が実用的なので、ChatGPTでアイコンを作るならsvg生成一択だ。

Gemini：svgは作れるが、使い勝手に難あり

まず、Nano Banana Proの画像生成機能でアイコンを作ろうとするのは避けること。背景透過ができず、ウォーターマークが入る。アイコン用途としては使えない。

通常のチャットで「svgを作成して」と指示する。デザインの品質自体はChatGPTと同等で十分に使えるレベルだ。一回の指示で6つすべてのアイコンを個別出力した。修正もできる。

しかし、問題はワークフローにある。

Gemini上ではsvgのプレビューができない。「Canva」機能を使えば表示は可能だが、svgファイルとしてのダウンロード機能がないためコードから<svg>を抽出する。結果として以下の手順が必要になる。

1. 生成されたsvgコードをコピー
2. テキストエディタ（メモ帳など）に貼り付け
3. 「.svg」拡張子で保存
4. フォルダ上またはブラウザ等で開いてプレビュー確認

1回だけなら許容範囲だが、修正を繰り返すたびにこのフローが発生する。

ChatGPTやClaudeのプレビューとダウンロードが一体化しているフローに比べると、作業効率に明確な差がある。

デザイン品質に問題がないだけに、この使い勝手の悪さが惜しい。

Geminiを使う理由があるとすれば、無料枠で試せる点だ。ただし、効率を考えるとChatGPTかClaudeに課金した方が結果的に速い。

svgが出力されたら、以下の3点を確認する。

1. セットとしての一貫性：

6つのアイコンを並べて見たときに、同じ人が作ったように見えるか。

線の太さ、角丸の半径、デザインの情報量が揃っているかを確認する。

Claudeは一覧プレビューを自動生成してくれるので、この確認が楽だった。

2. モチーフの伝わりやすさ：

「セキュリティ」のアイコンを見て、セキュリティだと伝わるか。抽象的すぎないか、逆に具体的すぎないか。

伝わりにくいものがあれば、「シールドの形をもう少しシンプルにして」のように修正を指示する。

修正は具体的なほうが良い。そのために「このsvgの線の太さは数値でいくつ？」「角丸を数値で表すと？」など数字で調整できるように聞くのも手だ。

3. 技術的な問題：

svgコードが正しく表示されるか、ファイルサイズが極端に大きくないか。

ChatGPTとClaudeの出力では、この点で問題が発生することはなかった。Geminiはsvgファイルを自ら作成する必要があるため注意が必要。

修正は最大3回を目安にする。それ以上かかる場合は、プロンプトの書き方を見直すか、ツールを変えた方が早い。

ChatGPTとClaudeでは、出力されたsvgファイルをそのままダウンロードできる。ダウンロードしたsvgは、以下の方法でそのまま使える。

• Webサイト：<img> タグで読み込むか、インラインsvgとしてHTMLに埋め込む
• Figma / Canva：svgファイルをドラッグ&ドロップでインポート
• チラシ・資料：svgに対応したデザインツールで読み込む

svgの利点は、色やサイズの変更が後から簡単にできることだ。

たとえば、白背景のサイトでは黒いアイコン、ダークモードでは白いアイコンに切り替えたい場合、svgのstroke属性を変更するだけで対応できる。

また、同じスタイル指定のまま、モチーフだけを「通知（ベルをモチーフに）」や「設定（歯車をモチーフに）」などに差し替えれば、同じテイストで追加生成できる。スタイル指定の部分がテンプレートとして機能する。

ここまでの結果を見て、「既存のロゴやアイコンのpng画像をAIでsvg化できるのでは」と考えた人もいるかもしれない。

結論から言うと「ChatGPT」ならできる可能性が高い。

試しにtechtech.clubのロゴ（png）を3つのツールでsvg変換してみた。

ChatGPTを「Thinkingモード」にしてロゴ画像を添付。「添付画像のアイコンをsvgファイルで作成してください。」と指示すると5分ほどして生成完了。

99%正確。よく見るとロゴ下の線と線の間がもう少し開いているはず。だが再現性のレベルは高く、このレベルまでいったのは唯一だ。

微修正はチャットで行うと崩れる可能性が高いため、ここからは自然言語ではなく、svgコードの修正または他ツールを使って手直ししたほうが早い。

GeminiとClaudeについては全体的な雰囲気は捉えられているものの、パーツの正確な位置が再現できていない。

ロゴはブランドを表すものだ。95点では使えない。100点でなければ意味がない。この用途については、Adobe IllustratorやInkscapeの画像トレース機能を使う方が確実だ。

AIでのsvg生成が力を発揮するのは、今回のように「ゼロから新しいアイコンを作る」場面。既存の画像を正確に再現する場面では、AIだけで完結は現状難しい。この使い分けも覚えておくといい。