AIで統一感のあるアイコンセットを作る: マスターアイコン1つ、兄弟11個、スタイルはひとつ

画像モデルにベルのアイコンを頼むと、きれいなベルが出てきます。次に南京錠を頼むと、きれいな南京錠が出てきますが、まるで別の人が描いたように見えます。線は太く、角は鋭く、わずかに傾いていて、ベルにはなかった陰影まで付いています。タブバーに並べると、無料素材を3種類寄せ集めたアプリに見えてしまいます。アイコンセットはセットとして評価され、見る人は良いアイコンに気づくよりずっと早く、浮いている1つに気づきます。

このガイドでは、Quillboxという架空のメモアプリのために12個のアイコンを作ります。ホーム、検索、通知、カレンダー、メッセージ、カメラ、お気に入り、フィルター、ロック、メール、フォルダ、削除です。どんなリストでも方法は同じです。ルールを決め、それに従うマスターアイコンを1つ作り、ほかのアイコンはすべてそのマスターから派生させ、実際に見られるサイズで確認し、最後にベクターで描き直します。

最初のプロンプトの前にルールを書く

統一感とは、すべてのアイコンが共有するいくつかの数値のことです。1枚のカードに書き出し、作業中はずっと開いておきましょう。

1. 01グリッド。 正方形のキャンバス、たとえば24×24ユニットで、意図した場合を除き何もはみ出さない2ユニットの余白を設けます。すべてのアイコンをこのグリッド上でデザインし、拡大縮小は最後に行います。
2. 02線。 太さはひとつ、たとえば2ユニットで、線端も角の接合も丸くします。線のアイコンと塗りのアイコンはひとつのセットに混ぜません。どちらかを選びます。
3. 03角の半径。 すべての四角形に同じ半径を使います。外側の角を3ユニット、などです。角の丸いカレンダーの隣に角の鋭いメールアイコンがある、というのがもっともよくある綻びです。
4. 04キーライン形状。 ほぼ同じ面積を占める円、正方形、横長の長方形を用意し、丸いアイコンと四角いアイコンが目に同じ大きさに見えるようにします。
5. 05配色。 セット全体で線の色はひとつ、アクティブ状態用のアクセントは多くてもひとつ。グラデーションも影も、装飾用の2色目の線もなしです。
6. 06視点。 平面で真正面から。斜め45度の見た目も、アイソメトリックの傾きもなしです。

マスターアイコンを1つだけ生成する

マスターは慎重に選びます。ルールの大半を一度に使うシンプルなアイコンがよいでしょう。家はうってつけです。まっすぐな線、角、接合部、小さな内側の形がそろっているからです。カードの内容を平易な言葉でプロンプトに書き、無地の背景にアイコンを1つだけ、ほかには何もなし、と頼みます。

カタログには、これに向いたモデルが2種類あります。Recraft 20B SVGは拡大縮小できるグラフィックやアイコン向けのSVGベクター画像を作るモデル、Recraft V4.1 Text to Vectorはプロンプトから編集可能なベクター風画像を作るモデルと説明されています。きれいに切り抜かれたラスター画から始めたいなら、Ideogram V3 Generate Transparentが背景透過の画像を返します。プロンプトを何度も実行し、好みではなくカードに照らして結果を評価してください。残すマスターは、ほかの案のほうがきれいでも、ルールにもっとも忠実なものです。

マスターから兄弟を派生させる

ほとんどのセットはここで崩れます。新しいプロンプトを11本書けば、11通りの新しい解釈が返ってきます。そうではなく、マスターをこの先すべての参照にしましょう。カタログにはそのための直接の手段があります。Recraft V4 Create Styleは参照画像を再利用できるスタイルIDに変え、Recraft V4 Style Text to VectorはプロンプトとそのスタイルID、または参照画像そのものからベクターグラフィックを描きます。マスターを渡し、良い兄弟が2つか3つできたらそれも参照に加えてください。スタイルが1枚の絵ではなく、小さな家族から学習されます。

兄弟のプロンプトはあえて退屈にします。マスターと同じ文で、変えるのはモチーフだけ。ベル、虫めがね、南京錠。かわいい、精細、リアルといった、スタイルを引き離す形容詞は我慢しましょう。モチーフはもっとも単純な形で説明します。南京錠なら、半円のループの下に角の丸い長方形があり、鍵穴は短い線1本、です。

• 難しいモチーフから先に。 カメラ、フィルター、カレンダーは部品が多く、もっともずれやすいものです。これらが持ちこたえれば、残りも大丈夫です。
• メタファーは素直に。 通知はベル、お気に入りはハート、削除はゴミ箱。気の利いたメタファーは別のデザイン判断であって、プロンプトの実験ではありません。
• 1アイコンに1モチーフ。 星の付いたフォルダは2つのアイコンです。バッジは後からベクターで、必要なアイコンすべてに同じ方法で加えます。
• 描き直さず小さく直す。 良い兄弟に1か所だけ違う部分があるなら、たとえば全体は正しいカメラの角が1つだけ鋭いなら、Ideogram V4.5 Editはマスクを受け付けるので、その部分だけを変更できます。

スタイルの固定はばらつきを狭めますが、なくしはしません。12個すべてがそろうまで数回のやり直しを見込み、残りは次の工程で手作業で直すつもりでいてください。

並べて小さく確認する

12個すべてを1枚のシートに4×3のグリッドで、同じ背景、同じサイズで並べます。そしてシートを縮め、各アイコンがアプリ内での大きさになるようにします。ツールバーなら24ピクセル、メニューや詰まったリストなら16ピクセルです。大きなモニターだけでなく、実際のスマートフォンで見てください。リストを順に確認します。

• 目を細めるテスト。 目をぼかしてみてください。12個すべてが同じグレーの濃さに見えるはずです。1つだけ濃く見えるなら、線が太いか線が多すぎます。
• 大きさのテスト。 丸いアイコンと四角いアイコンが同じ大きさに見えるべきです。検索アイコンがメールアイコンより小さく見えるなら、円のキーラインまで広げます。
• ディテールのテスト。 16ピクセルでは、線の太さより狭い隙間はつぶれます。ロックの鍵穴やカメラのレンズの輪がよく犠牲になります。省くか、隙間を広げましょう。
• 当てっこテスト。 シートを見たことのない人に小さなシートを見せ、各アイコンの意味を尋ねます。迷われたものは、形をもっと単純にするか、アプリ内で横にラベルを付ける必要があります。
• 状態のテスト。 各アイコンをアクティブなタブのアクセントカラーで試します。塗りのバージョンをシステムに含めるなら、12個すべてを同じ方法で塗る必要があります。

ベクターで仕上げる

モデルがSVGを返した場合でも、信用する前に開いてみてください。生成されたパスはよくでこぼこしています。3つで足りるところに何十ものノード、太さが微妙に違う塗りのアウトラインとして保存された線、ほぼ同じだけれど完全には一致しない角の半径。セットの場合、いちばんきれいな方法は、生成ファイルを下敷きのガイドとしてだけ使い、各アイコンを自分のグリッド上で本物の線で描き直すことです。AIロゴ案をベクターにする方法では手でのトレースと形の単純化を解説しており、同じ習慣がここでも使えます。

アイコンに特有なのは、共通の組み立てです。線の太さと角の半径をエディタのスタイルとして一度だけ設定し、12個すべてに適用すれば、後で線を変えたときにセット全体が変わります。点をグリッドに合わせ、メインのサイズで線がピクセル単位に乗るようにします。マスターファイルでは各アイコンを個別のアートボードに置き、magnifierではなくicon-searchのように意味で名前を付け、そこから開発者が求める形式で書き出します。

アイコンをより広いアイデンティティと並べて使うなら、配色とスタイルIDはブランドのほかの要素と同じところから持ってこられます。架空のロースタリーのブランドアイデンティティボードと同じやり方です。マスターを1つ固定し、ほかのすべてをその周りに組み立てるという考え方は、ステーショナリーセットをまとめるときと同じです。

あなたの仕事として残るもの

モデルがくれるのは下書きと方向性です。最終的なセットは描き直したものです。統一された線、本物のグリッド、実際のサイズでの確認。どのアイコンもほかの企業のよく知られたシンボルの模倣になっていないか確認し、ストアやOSがアプリアイコンに独自のルールを定めている場合はそのガイドラインに従ってください。12個がそろえば、13個目を加えるのは簡単です。カード、マスター、スタイルIDはもう手元にあります。ベクターとデザインのモデルは/modelsで探し、スタジオでマスターを作り始めましょう。