AIで統一感あるアイコンを生成するには？Geminiでオリジナルのアイコンセット作成を実演

こんなこと、ありませんか。

• 無料のアイコン素材を使うと、どこかで見たことのある感じになる
• AIにアイコンを1個ずつ頼むと、絵のタッチがそろわない
• 作ったアイコンが、サイトの雰囲気から浮いてしまう

この記事では、前回作った「ルール表」をGemini（ジェミニ）に渡して、統一感のあるアイコンを6個まとめて作ります。
最後に、アイコンの決めごとをルール表に書き足すところまで進めます。

• アイコンにも「お店らしさ」は出せる
• ルール表を渡せば、タッチがそろう
• Geminiでアイコンを作ってみよう
• STEP1　ルール表を添付して、6個を1枚で作ってもらう
• STEP2　2枚目は、同じチャットで具体的に頼む
• STEP3　1個ずつ切り出す
• アイコンの決めごとを、ルール表に書き足す
• ルール表だけで頼むと、「挿絵」になる
• 色は「近ければOK」と決めておく
• Geminiにまとめてもらう
• まとめ

アイコンにも「お店らしさ」は出せる

Webサイトで使うアイコンには、大きく分けて2種類あります。

メニューボタンや閉じるボタンのような「操作のためのアイコン」は、どのサイトでも同じ形のほうが、見る人が迷いません。見慣れた形だからこそ、押すとどうなるかがひと目でわかります。ここは、無理に作る必要はありません。

いっぽう、メニュー欄の「コーヒー」「焼き菓子」や、電話・メールのような「内容を伝えるアイコン」は、絵のタッチでお店の雰囲気を出せるところです。ここをオリジナルでそろえると、サイト全体の統一感がぐっと増します。

無料のアイコン素材（イメージ）

MENU

コーヒー

紅茶

焼き菓子

ランチ

テイクアウト

季節限定

形はわかりやすいが、どのお店でも見かける

オリジナルのアイコン

MENU

コーヒー

紅茶

焼き菓子

ランチ

テイクアウト

季節限定

手描きの線で、お店の雰囲気が伝わる

ルール表を渡せば、タッチがそろう

画像生成AIに「コーヒーのアイコンを作って」とだけ頼むと、AIはその都度「よくある絵」を描きます。
1個ずつ頼むと、線の太さも色合いもバラバラになりがちです。

そこで使うのが、前回作ったルール表です。
色や「手描きの線」といった決めごとを一緒に渡すと、AIはその範囲の中で描いてくれます。

完成形は、こんな感じです。

Geminiでアイコンを作ってみよう

題材は、前回に続いて架空のカフェ「こもれびcafe」です。
前回の記事で作ったルール表（.md）を用意しておいてください。前回の記事を読んでいない方は、下のルール表を使えます。

今回はGeminiを使います。無料プランでも何回か作り直せるので、試しながら進めやすいです。

※ ChatGPTでも同じことができます。ChatGPTなら背景を透明にした画像で出してもらえるので、STEP3の「背景を消す」作業が要りません。ただし、無料版で作れる画像は執筆時点で1日2枚ほど。作り直しや追加がしにくいので、無料で試すならGeminiがおすすめです。

STEP1　ルール表を添付して、6個を1枚で作ってもらう

Geminiを開き、ルール表のファイルを入力欄に添付します（ドラッグ＆ドロップでもOK）。
そのうえで、次の文章を送ってください。

添付したのは、カフェ「こもれびcafe」のデザインルールです。
このルールに沿って、Webサイトのメニュー欄で使うアイコンを6個、1枚の画像にまとめて作ってください。

・アイコン：コーヒー、紅茶、焼き菓子、ランチ、テイクアウト、季節限定
・6個を2行×3列に、同じ大きさ・同じ余白で並べる
・線の色はメイン（#6E6259）、ポイントだけアクセント（#AC6A51）
・背景は無地（できれば透明）
・6個とも、線の太さとタッチをそろえる

このお願いのポイントは3つです。

• 1枚の画像にまとめて頼む：同じ1枚の中で描くので、線の太さやタッチがそろいやすくなります。1個ずつ頼むと、回ごとに少しずつ描き方が変わってしまいます
• 6個くらいを目安にする：1枚に詰めこみすぎると、1個あたりが小さく粗くなります
• 線と色の使い方も書く：ルール表には「アイコン」の描き方までは書いていません。線の色やポイントの色を添えると、アイコンらしいシンプルな形になります（理由は、記事の最後でもう一度触れます）

送ってしばらく待つと、お願いした画像が表示されます。

出てくる画像は、まったく同じ添付ファイル・お願い（プロンプト）でも、その都度変わります。
次の画像は、新しいチャットで同じお願いをもう一度送ったときのものです。

1回目と2回目で、絵のタッチや描かれているものは違いますが、共通点もあります。
6個とも、鉛筆で描いたような手描き感のある線。線は真っ黒ではなく焦げ茶色で、テラコッタ色のポイントがそろっています。添付したデザインのルールの中で、バリエーションを作ってくれていることがわかります。

イメージと違うものが出てきたときは、新しいチャットでもう一度試してみましょう。変えてほしいところがはっきりしているなら、「もう少しシンプルなイラストにして」などと続けてお願いすると、理想に近づきます。

なお、「2行×3列」の並びや大きさは、指定どおりにならないこともあります。あとで1個ずつ切り出すので、ここは気にしなくて大丈夫です。

今回は、1回目の画像を使って進めます。

絵としての完成度は、2回目のほうが高いかもしれません。湯気やコーヒーの表面の陰影、クロワッサンの細かな線まで描きこまれています。
ただ、アイコンはWebサイトの中では小さく表示されるもの。縮小すると、細い線や細かな描きこみはつぶれてしまい、何の絵かわかりにくくなります。
1回目は線が太めで形もシンプルなので、小さくしてもはっきり見えます。

1回目今回使う

2回目

「きれいな絵」と「使いやすいアイコン」は別もの。
迷ったときは、スマホのアプリのアイコンくらいまで小さくして、何の絵かひと目でわかるか見比べてみましょう。
この「線は太めに、描きこみは少なめに」も、あとでルール表に書き足す決めごとの1つです。

STEP2　2枚目は、同じチャットで具体的に頼む

アイコンが足りないときや、イメージと違うものがあったときは、2枚目を作りましょう。
気に入った画像が出たチャットで、そのまま続けて次のように頼みます。ルール表も1枚目の画像もチャットに残っているので、それを見ながら描いてくれます。

1枚目と同じタッチで、アイコンをもう6個、1枚の画像にまとめて作ってください。

・アイコン：桜の花、ケーキ、サンドイッチ、Wi-Fi、営業時間（時計）、お店の場所（地図のピン）
・6個とも、大きさと線の量をそろえる（細かく描きこみすぎない）
・背景は無地

ここでのコツは、ふわっとした言葉を「モノの名前」に言い換えることです。
1枚目の「季節限定」は、AIが何を描けばいいか迷う言葉です。私が試したときは、葉っぱが1枚描かれただけでした。「桜の花」のように、描いてほしいモノそのものを書くと、イメージどおりになりやすくなります。

また、1回で6個作れるので、ほしいアイコンはまとめて頼むのがおすすめです。
2枚で12個。作り直しの回数も節約できます。

できあがった2枚目がこちらです。

1枚目と2枚目を並べても、違和感のない仕上がりですね。
市販の素材集だと、「ここで使うアイコンだけ、ぴったりなものがない」ということがよくあります。この方法なら、必要なアイコンをあとからいくつでも作れます。

※ 日がたってチャットが見つからないときや、やりとりが長くなってタッチがずれてきたときは、新しいチャットにルール表と1枚目の画像を添付して「この画像と同じタッチで」と頼む方法もあります。くわしくは統一感のあるイラスト生成の記事で紹介しています。

STEP3　1個ずつ切り出す

できた画像は、6個が1枚にまとまっています。
背景を消して（透明にして）から、1個ずつ切り出しましょう。Canvaなど、ふだん使っているツールがあれば、それでかまいません。

Photoshopを持っている人

①背景を削除する　②切り分ける　③PNGで保存する、の3つで完了です。

まずは、背景を削除します。

※ ChatGPTで作った場合は、背景がはじめから透明なので、切り分けからでOKです。

今回のように、きれいに並んだ画像を切り分けるときは、「スライスツール」（画像を区切って、まとめて書き出せる機能）を使うと早いです。

区切ったら、「Web用に保存」の画面で、アイコンにしたい部分を選んで、PNGで保存します。

選んだ部分が、1個ずつ別のファイルとして保存されます。

拡大しても荒れない「ベクター画像」にしたい方は、Illustratorのベクター生成の記事も参考にしてください。

無料でやりたい人

アプリのインストールや会員登録なしで試したい方は、ブラウザで使える「バナー工房」が手軽です。

まず、左側のパネルから「背景透明」を選びます。
消したいところをクリックしていくだけで、背景が透明になります。カップの中など、線に囲まれた部分も、クリックすれば透明にできます。

背景を透明にしたら、ここで一度保存しておくのがおすすめです。切り抜き（トリミング）は1個ずつしかできないので、この画像をもとに、くり返し切り抜くことになります。

次に、同じく左側のパネルにある「四角切取」を選ぶと、好きな部分だけを切り抜いて保存できます。
2個目からは、「履歴」を開くと、背景を透明にした状態の画像に戻れます。そこから、また切り抜いて保存しましょう。

アイコンの決めごとを、ルール表に書き足す

アイコンができたら、最後にもうひと手間。
今回決めたことを、ルール表に書き足しておきます。

ルール表だけで頼むと、「挿絵」になる

STEP1のお願いには、ルール表のほかに「線の色」「線の太さとタッチをそろえる」といった条件も書きました。試しに、この条件を外して、ルール表と「アイコンを6個作って」だけで頼んでみると、次のような画像が出てきました。

コーヒーの湯気や、ロールケーキの断面まで陰影が描きこまれた、本の挿絵のようなイラストです。絵としてはきれいですが、小さく並べるアイコンには向きません。

こうなったのは、ルール表に「イラストの雰囲気」（手描きの線、うすい色など）は書いてあっても、「アイコンはこう描く」という決めごとがなかったからです。AIは、渡された決めごとの範囲で、いちばんそれらしいものを描きます。

そこで、アイコンの決めごともルール表に書き足しておきましょう。
次からは、ルール表を渡すだけで、同じようなアイコンを頼みやすくなります。

色は「近ければOK」と決めておく

もう1つ書き足しておきたいのが、色の考え方です。
画像生成AIは、カラーコードを書いても、その色ぴったりにはなりません。
ルールに近い色にはなりますが、少しずれます。

Geminiにまとめてもらう

同じチャットで、続けて次のように頼みます。

出してくれたアイコンを、サイト共通のアイコンとして採用します。
今回決めたことを、最初に添付したルール表の「3. トーン」の中、「### イラストの雰囲気」のすぐ下に、「### アイコンの描き方」として書き足したいです。
書き足す部分だけを、「### イラストの雰囲気」と同じ書き方（見出し1つ＋箇条書き）でまとめてください。新しい番号付きの項目や、表は作らないでください。

・描き方（線、塗り、線の太さ、タッチ。小さく表示してもつぶれないよう、線は太めに、描きこみは少なめに）
・色の使い方（画像の素材は、ルールの色に近ければOKとする）
・背景（透明にして使う）
・題材の頼み方（ふわっとした言葉ではなく、描くモノの名前で頼む）
・アイコンでやらないこと（箇条書きの最後にまとめる）

送ると、ルール表に書き足す「アイコン」の項目がまとめて返ってきます。

返答の下にある「回答をコピー」のボタンを押すと、返答をまるごとコピーできます。

コピーした内容は、次のとおりです。

### アイコンの描き方

* **線の太さとタッチ**：鉛筆のぬくもりが残る手描き風の線で揃える。小さなサイズ（Webのメニューなど）で表示してもつぶれないよう、線は太めで描きこみは少なくシンプルにする。
* **塗り**：線は鉛筆のグレージュ（`#6E6259`）、ポイント使いでくすみテラコッタ（`#AC6A51`）を差し色にする。画像の素材やイラストを準備する際は、ルールの色に近いトーンであれば OK とする。


* **背景**：Webサイトやツール上で配置しやすくするため、背景は透明にして使用する。
* **題材の指定方法**：「かわいい感じで」「おしゃれに」といった曖昧な言葉ではなく、「桜の花」「時計」「地図のピン」のように描くモノの具体名を指定して依頼する。
* **アイコンでやらないこと**：細部まで細かく描きこむこと、影やグラデーションをつけること、アクセントカラー（`#AC6A51`）を塗りつぶしの主色として広く使うこと、写真のようにリアルな立体感を出すこと。

コピーした内容を、ルール表の「3. トーン」の「イラストの雰囲気」のすぐ下に貼り付けます。

返答の最初や最後に、「〜を作成しました」「〜に追加してお使いください」のような、Geminiからのひと言が入っていることがあります。ルール表には要らない文なので、貼り付けたあとに消しておきましょう。
余分な空行があれば、あわせて詰めておくと見やすくなります。

これで保存すれば完了です。
ルール表は、こうして使いながら育てていきましょう。

まとめ

• ボタンの印のような「操作のためのアイコン」は無料の素材で十分。メニューや店舗情報など「内容を伝えるアイコン」をオリジナルにすると、お店らしさが出る
• ルール表を添付して、6個を1枚の画像にまとめて頼むと、線やタッチがそろいやすい
• 選ぶときは「きれいな絵」より「小さくしてもわかる絵」。線は太めに、描きこみは少なめに
• 追加のアイコンは同じチャットで頼む。ふわっとした言葉は「モノの名前」に言い換える
• できた画像は、背景を消してから1個ずつ切り出す（Photoshop、バナー工房など）
• 決めたことはルール表に書き足して、使いながら育てていく