梨のコンポート

ChatGPTでピクトグラム風のアイコンを作るコツ

Cover Image for ChatGPTでピクトグラム風のアイコンを作るコツ
最終更新日時:

HeroiconsMaterial Icons等のアイコンフォントサービスは大量のアイコンを提供しているが、それでもドンピシャなアイコンが見つからないことがある。似ているアイコンで代用することも多いが、紛らわしい場合やユーザーが頻繁に見るメニューで使われる場合は、自作を検討する価値がある。

この記事ではChatGPTによるピクトグラム生成方法と、それをSVG化するテクニックについて記載する。

使用したツール

  • ChatGPT
    • GPT-5のAutoを利用。2025年10月16日に利用。
  • Inkscape
    • SVG化に利用。バージョンは1.2.2。

文明の利器 : ChatGPT

生成AIによる画像生成はまだ矛盾や違和感のあるイラストが生成されることが多い。しかし、シンプルな形状のピクトグラム生成においては、実用レベルの品質が得られる。

その前に : 権利問題等

生成AIの生成物を利用する際にはそのサービスのポリシー上商用利用が許可されているか著作権等を侵害していないか等を考慮する必要がある。商用利用などではそれを考慮して生成AIを利用できないケースも多い。

商用利用については、ChatGPTの利用規約に以下の文言がある。参考

お客様とOpenAIの間において、適用法令で認められる範囲で、お客様は、(a)インプットの所有権限は保持し、(b)アウトプットについての権利を有するものとします。当社はアウトプットに関する権利、権原、及び利益がある場合、これらすべての権限をお客様に譲渡します。

そのため、ChatGPTの禁止事項に抵触しない限り、原則として商用利用は可能である

著作権については、生成AIを利用しないケースと同様に考えられる。つまり、既存の著作権を侵害しない限りは利用可能であると考えられる。参考

作り方

ピクトグラムの生成

ChatGPTに「マウスと虫眼鏡のピクトグラムを作成してください」のように依頼すると、ピクトグラムを生成してくれる。

ChatGPTでプロンプトを入力し、ピクトグラムを生成するスクリーンショット

ただし、ここでChatGPTにSVGの生成をお願いしても、正しいSVG画像を生成してくれない。そのため、元の画像をダウンロードし、Inkscapeを使って手動でSVGを生成することで対応する。 ChatGPTが生成したSVGファイル。最初に生成したピクトグラムから大きく変わっている。

そのため、元の画像(PNG等)をダウンロードし、後述のInkscapeを使ってSVG化する方法を推奨する。

保存時のファイルサイズ削減

最初に生成した画像は、シンプルな見た目にも関わらずファイルサイズが1.3MBと大きい。単色に見える部分が実際には微妙にグラデーションしており、PNGの圧縮効率が低下しているためだ。

ChatGPTに*ピクトグラム画像を二値化してください。*と質問することで、白と黒の2色のみの画像を生成できる。二値化処理はPythonコードで実行されるため、生成AIによる予期せぬ変更が加わることなく、元の画像から正確に変換される。

二値化によりファイルサイズが1.3MBから6KBに抑えられた

SVG化

Inkscapeで当該画像をSVGに変換する。

まずはInkscapeを開き、ファイル -> インポートで生成した画像をインポートする。この時点ではラスタ画像(ビットマップ画像)を埋め込んだSVGになっているため、ベクター画像に変換する必要がある。

インポート後、メニューからパス -> ビットマップのトレースを選択し、サイドメニューより適用をクリックする。

inkscape_to_path

するとピクトグラムの画像をトレースする形でSVGが生成される。

inkscape_generated_svg

生成後、トレース元の画像を削除し、ファイル -> 保存でSVGとして保存できる。

generated_pictogram

まとめ

ChatGPTでピクトグラム生成→InkscapeでSVG化を行ってみた。ピクトグラムの生成に関しては現状十分なクォリティを得られているように思われる。SVG生成に関しても、ChatGPTでは現状不十分な結果しか得られなかったが、今後正確なSVGを生成するようになると期待される。