本記事では、対話型AIのChatGPTと画像生成AIのFireflyを組み合わせ、ゼロからオリジナルアイコンを作るプロセスを実験レポート形式で紹介しています。生成コストや著作権の不安を減らし、ブランドの世界観にフィットするアイコンを作るべく奮闘しました。

Step 1：ChatGPTでアイコンモチーフを決める

今回は、｢制作・改善・保守｣それぞれのアイコンを既存サイトに会う形で考えたいと思います。
抽象的な言葉を､視覚的にどう表現するか？をChatGPTに相談します。18px程の小さいサイズでも視認できるように｢シンプルな形状｣であることも補足で伝えます。

ChatGPTで得られたアイコンの中から、イメージにフィットするものを選びます。

Step 2：ChatGPTにFirefly用プロンプトを作ってもらう

ChatGPTから得たプロンプト例を一部抜粋して紹介します。完成度を上げるために、英語で出してもらいます。

①【制作アイコン】定規（ruler）

A flat, minimal vector icon of a horizontal ruler. No shadows, no 3D effects. Use soft blue and purple pastel tones, matching the style of a magnifying glass icon. Simple monoline or filled design, with clean lines. Designed for clarity at 18px size on a website. Transparent background.

②【改善アイコン】歯車2つ（gears: large and small）

A flat, simple vector icon of two gears (one large, one small) interlocked. No shading or 3D effects, minimal detailing. Colored in soft blue and purple pastel tones, consistent with a magnifying glass icon style. Clear lines and simplified shapes for visibility at small sizes (18px). Transparent background.

③【保守アイコン】南京錠（padlock）

A flat, minimal vector icon of a closed padlock. Avoid complex details or shadows. Use soft blue and purple pastel colors, matching the style of a magnifying glass icon. Clean outline or filled shape, suitable for 18px use on a website. Transparent background.

Step 3：Adobe Fireflyでアイコンを生成

Fireflyでの操作手順

1. Firefly にログイン

2. ｢テキストから画像を生成（Text to image）｣を選択

3. ChatGPTでもらったプロンプトをコピペ

4. ｢構成｣に参考にしたい形状のアイコンやイラストをアップロードする

5. 「スタイル｣に参考にしたいテイストのアイコンやイラストをアップロードする

6. 出力された画像から気に入ったものを選ぶ／必要なら再生成

4.切り取り＆完成

画像が出力されたらPhotoshopでモチーフを切り取り、必要であれば色味などを微調整します。 完成したアイコンを元々作っていたものと組み合わせてみました✨

まとめ

ChatGPTとFirefly の組み合わせで､サイトやポートフォリオ等にすぐに使用出来る一定のクオリティのアイコンが作る事か可能です｡
Firefly の結果はプロンプト次第なので､ChatGPTを活用すると時短・安定感があり､デザイナーにとっても大きなメリットとなります｡

KOHIMOTOでは、AIを活用したサイト制作や運用支援を行っています。ご相談は「お問い合わせ」からお気軽にどうぞ👇