アイコンセットに統一感が出るのはなぜ?
アイコンがそろって見えるのは、グリッド、線の太さ、角の処理、細かさ、パレットが共通しているときです。別々のセットのアイコンを混ぜたり、1つずつ別のプロンプトで生成したりすると、たいていこのどれかが崩れます。アイコンセット作成では、1つのスタイルの説明から、セットのすべてのアイコンを1枚のシートに描くので、描き方の判断はすべてのアイコンに対して一度だけ行われます。その後、各アイコンが切り抜かれ、個別のSVGにトレースされます。
![]()
作例のセットから3つ。それぞれ1つのリストから作りました。ラインのカフェアプリ、角がシャープな塗りつぶしのフィットネス記録、3色のフラットカラーの旅行アプリ。
セットの作り方は?
AIロゴ作成を開き、アイコンを選びます。スタジオの見出しがアイコンセット作成に変わります。
- アイコンを並べます。 必要なものを、読点(、)やカンマで区切るか、1行に1つずつ入力します:
コーヒーカップ、クロワッサン、マップピン、ポイントカード。それぞれがチップになります。1セットに入るアイコンは25個までです。 - 描き方を選びます。 ラインは同じ太さの輪郭線、塗りつぶしは1色のべた塗りの形、フラットカラーは最大3色のべた塗りの形、この画像に似せるはアップロードした画像(ログインが必要)や、すでに作ったロゴやアイコンセットの雰囲気に合わせます。
- 角を選びます。 角丸かシャープです。
- 必要ならスタイルを言葉で説明します。 300文字まで。例:「親しみやすくミニマル、線の端は丸く、少し手作りの温かみ」。この文はセットのすべてのアイコンの描画に使われます。
- 送信します。 各タイルにアイコンがトレースされる様子が表示され、その後に完成したSVGが表示されます。
新しいセットの料金は、送信前にボタンに表示されます。失敗したセットには料金はかかりません。
ほかを描き直さずに1つだけ直すには?
ラウンドを使います。ラウンドでは、メモを付けてアイコンをやり直したり(「テクスチャなしの、巻いただけのシンプルなマット」)、新しいアイコンを追加したりでき、1回に9件まで変更できます。やり直したアイコンや追加したアイコンはセットのスタイルで描かれるので、統一感は保たれます。セットの最初の数ラウンドは料金に含まれています。ラウンドにクレジットがかかる場合は、始める前にボタンにそう表示されます。
細部が1か所違うだけで描き直すほどでもない場合は、SVGエディターでアイコンを開き、パスや色を直接変更してください。
ダウンロードの中身は?
ZIPは3つの部分でできています。
| フォルダー | 中身 |
|---|---|
svg/ |
アイコンごとのSVG。viewBox="0 0 24 24"、2pxの余白付き |
png/ |
各アイコンの16・24・32・48・64・128・256・512pxの透過PNG |
sprite.svg |
すべてのアイコンを、icon-NAMEというidの<symbol>としてまとめたもの |
小さいPNG(48pxまで)はそのサイズで描かれるので、大きい画像を縮小したものと違い、線がピクセルにぴったり合います。それより大きいサイズは512pxから縮小しています。
Webサイトでアイコンを使うには?
ラインや塗りつぶしのセットでは、SVGがcurrentColorで描かれるので、アイコンは周りの文字の色になります。ファイルを編集しなくても、CSSで色を変えられます。
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cup-of-coffee"/></svg>
Order
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
色を各ファイルに書き込んでおきたい場合は、ダウンロードのダイアログでデザインどおりを選んでください。フラットカラーのセットは、常に元の色のままです。装飾用のアイコンにはaria-hidden="true"を付け、単独でボタンになるアイコンにはアクセシブルな名前を付けてください。
どんなリストがうまくいく?
具体的で絵にできる名詞がいちばんです。「自転車」「ストップウォッチ」「ドアの鍵」など。抽象的な言葉(「成長」「信頼」)では生成ツールが何を描けばいいか分からないので、先にモノに置き換えてください(「芽」「握手」)。リスト全体で細かさをそろえましょう。「点」と「都市のスカイライン」が混ざったセットは、どう描いてもちぐはぐに見えます。
公開する前に、すべてのアイコンを文字の横に16pxと24pxで並べて確認し、背景とのコントラストを確認し、似たアイコンがきちんと見分けられることを確かめてください。生成ツールは、アイコンが他人のマークに似ていないかまでは確認しません。商標登録する予定のアイコンは必ず確認してください。