Webサイトやチラシを作っていて、フリー素材では微妙に合わないアイコンがほしくなることがある。

デザイナーに頼むほどではない。でも妥協したくない。AIで解決できそうだが、ツールによってアプローチがまったく異なり、結果にも明確な差が出る。

主要AIツールで同じアイコンセットを作ってみた結果、見えてきた答えは「画像生成ではなくsvg生成を選べ」だった。

今回はChatGPT、Gemini、Claudeの3ツールで検証。

この記事でできるようになること

この記事を読むと、30分後には以下の状態になっている。

  • 自分の用途に合ったAIツールを選び、一貫性のあるアイコンセットを生成できている
  • アイコン作成で「画像生成」ではなく「svg生成」を選ぶべき理由を理解している
  • 1つのプロンプトの型を使って、別のモチーフでも同じテイストのアイコンを量産できる

結論

先に結論を書く。アイコンをAIで作るなら、画像生成ではなくsvg生成を選ぶこと。

画像としてアイコンを生成すると、3つの問題が発生する。背景透過ができない（またはできても不完全）、拡大縮小すると劣化する、そしてファイルサイズが不必要に大きくなる。

svgならこれらの問題がすべて解消される。最初からベクターデータとして設計されるため、どんなサイズでもクリーンに表示できる。

主要AIを試した結果を端的にまとめる。

Claude ChatGPT Gemini
svg生成 ◯ ◯ ◯
デザイン品質 一発で使える 修正で向上 修正で向上
使い勝手 プレビュー・個別DL・一覧表示 プレビュー・個別DL プレビュー不可・ダウンロードに手間
総合 ◎ ◯ △

第一候補はClaude。 1回目の出力から修正不要のクオリティで、6点の一覧プレビューまで自動生成してくれる。ChatGPTも同等に使えるので、普段使い慣れている方を選べばいい。

この記事が向いている人：

  • 自社サイトやチラシに使うアイコンを自分で調達している人
  • フリー素材のテイストが合わず妥協している人
  • デザイナーに頼む予算や時間がない人

向いていない人：

  • ロゴやブランドアイデンティティに使う素材を作りたい人
  • ピクセルパーフェクトな精度が求められるUI設計をしている人

最終アウトプット

今回のテストで実際に作成したのは、SaaSサービスの機能紹介ページを想定した6点のアイコンセット。ミニマルな線画スタイルで統一した。

作成したアイコン：

  • セキュリティ
  • スピード
  • カスタマーサポート
  • データ分析
  • クラウド
  • コスト削減

具体的な使用方法と手順

全体の流れ。30分あれば生成までいける。

  1. ほしいアイコンの要件を決定
  2. 参考画像とプロンプトを用意
  3. AIにsvgの生成を指示
  4. 出力を確認し、必要に応じて修正
  5. svgファイルを保存して使用

ほしいアイコンの要件を決定

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

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

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

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

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

参考画像とプロンプトを用意

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

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

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

 

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

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

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

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

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

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

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

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

AIにsvgの生成を指示

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

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

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

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

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

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

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

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

フリー素材にない「ほしいアイコン」をAIで自作する。4つのツールで試してわかった最適な方法
svcファイルは個別に出力

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

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

 

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

フリー素材にない「ほしいアイコン」をAIで自作する。4つのツールで試してわかった最適な方法
この画像は当サイトが作成（アイコンはChatGPT）

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

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

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

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

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

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

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

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

フリー素材にない「ほしいアイコン」をAIで自作する。4つのツールで試してわかった最適な方法
ChatGPTが作成したアイコン（png画像で出力）

 

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

フリー素材にない「ほしいアイコン」をAIで自作する。4つのツールで試してわかった最適な方法
この画像は当サイトが作成（アイコンはGemini）

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

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

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

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

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

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

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

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

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

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

出力を確認し、必要に応じて修正

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

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

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

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

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

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

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

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

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

3. 技術的な問題：

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

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

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

svgファイルを保存して使用

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

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

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

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

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

【補足】既存のpng画像をsvgに変換できるか

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

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

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

techtech.club
TECHTECH.のロゴ（png）

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

ChatGPT

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

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

 

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

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

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

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

評価

項目 評価 コメント
コスト ★★★★☆ (4/5) ClaudeまたはChatGPTの有料プラン推奨。デザイナー外注費（1点数千円〜）と比較すれば圧倒的に安くて早い
クオリティ ★★★★★ (5/5) svg生成であれば実用レベル。特にClaudeは1回目の出力から修正不要の品質
使いやすさ ★★★★★ (5/5) 自然言語で指示するだけ。参考画像を添付すればテイストの指定も簡単。プレビュー・DLまで一貫して完結
汎用性 ★★★★☆ (4/5) Web、チラシ、資料、アプリ——アイコンが必要な場面は広い。プロンプトのモチーフを差し替えれば同じテイストで量産可能
難易度 ★★★★☆ (4/5) デザインスキル不要。「どんなスタイルがほしいか」を言語化できれば十分。参考画像を用意しておけば言語化の負担も減る

使用ツール・コスト / 所要時間

  • コスト: 無料から
  • 所要時間: 約 30 分

編集者あとがき

今回の検証で最も重要な発見は、「アイコンを画像生成AIで作ろうとするのはアプローチが間違っている」ということだった。

考えてみれば当然の話だ。アイコンはもともとベクターデータとして設計されるもので、ピクセルで描くものではない。にもかかわらず、「AIで画像を作る」と聞くとまず画像生成を試してしまう。自分もそうだった。背景透過ができない、拡大するとぼやける、ファイルサイズが大きい——これらはすべて、アプローチの選択ミスから来ている問題だ。

svg生成に切り替えた瞬間、これらの問題はすべて消えた。しかも品質は画像生成を上回る。ClaudeもChatGPTも、自然言語の指示だけでプロが作ったようなアイコンセットを出力してくれる。

一方で、同じアプローチでイラスト（手描き風の挿絵など）を生成できるかも試してみた。こちらは参考画像のテイストに「雰囲気は似ているが別物」という出力にとどまり、安定した結果を得られなかった。アイコンのsvg生成とイラストの画像生成は、同じ「AIで素材を作る」でもまったく別の作業だ。

アイコンのsvg生成とイラストの画像生成は、同じ「AIで素材を作る」でもまったく別の作業だということを実感した。

次に試したいのは、生成したアイコンのスタイルをテンプレート化して量産すること。プロンプトの「スタイル指定」部分を固定し、モチーフだけを差し替えれば、同じテイストで何十点でも展開できるはずだ。そこまでいけば、フリー素材に頼る場面はかなり減る。

ジョン

Author

ジョン

techtech.club 編集長。メディアで起業し、元はスタートアップのプロダクトマネージャー。一度テクノロジーに賭けて挫折した。その経験がいまの生き方や考え方、事業の起点になっている。ここで書くのは答えではない。投資・キャリア・事業など専門家でなくても自分の頭で判断するための材料と視点。読者に教えるのではなく、一緒に考える側にいたい。

関連記事