アイコン規格を書く
グリッド・線幅・角丸を数値で決め、次の 20 個で議論しないようにする
［プロダクト］のアイコン規格を決めます。今後 20 個以上を描き、外部に依頼する可能性もあります。そのまま実行できる仕様を書いてください：1）キャンバスとライブエリア（例：24×24 のキャンバス、20 のライブエリア、四方に 2 の余白）；2）線幅の値と、拡大縮小したときに一緒に変えるか；3）角丸と端点の処理；4）視覚的な重さの補正（同じサイズで円・四角・三角をどう調整するか）；5）命名と書き出し（サイズ、形式、ダークモード用の版）；6）チェックできる項目 5 つ。最後に「正しい例」「誤った例」をそれぞれ言葉で示し、最も間違えやすい点を添えてください。「シンプルで統一された」といった形容詞は使わないでください。
使い方
規格の数値はすべて「なぜ隣の値ではないのか」に答えられる必要があります。さもないと、外部の制作者が勝手に選びます。
向いている場面
- アイコンをいくつかの出所から集めて 12 個になり、今後 30 個まで増やして外部に依頼する予定です。数値が先にないと、上がってきたものを検収できません。
- デザインシステムを引き渡す段階で、アイコンだけが文書化された規格を持っていません。この 1 ページがあれば、開発者も外部の制作者も毎回聞きに来ずに済みます。
向いていない場面
- アイコンが 3〜5 個だけで、すべて同じ公式ライブラリのものです。規格を書くコストが効果を上回るので、ライブラリのルールをそのまま使います。
- ブランドのビジュアルがまだ固まっていない場合です。メインカラーや角丸の言語が動いていると、アイコン規格も作り直しになるので、先にブランドを決めます。
例
入力
SaaS の管理画面。既存の線画アイコン 12 個が、1.5px と 2px の線幅、24px と 20px の 2 種類のキャンバスに混在。ダークモードは色を反転しただけ
得られるもの
24×24 のキャンバス、20 のライブエリア、サイズに追従しない 1.75px の線幅に統一します。角丸 2、端点は round。円と三角は外接する枠を 4% 広げて視覚的な重さを補正します。ダークモードは反転をやめ、90% の白い線と影を外した専用版を用意します。チェックリストの最後は「16px でも輪郭が判別できる」で、誤った例として 20px 用アイコンを 24px に拡大して線幅が 2.1px になったケースを添えます。
よくある誤用
- 「線幅 2px」だけを決めて、ライブエリアも余白も書かない場合です。それに従った 2 人が描くと、見た目の大きさが 10% 以上違ってきます。
- あらゆる場面に合わせた規格にしようとする場合です。販促ページもアプリも管理画面も、と範囲を広げた時点で制約が緩み、規格は存在しなくなります。
こう変えると効く
- 16px 用の光学サイズの規格として書きます。小さいアイコンは線を太く、形を簡略にする必要があり、24px とは別のルールになります。
- 「文字と横に並べるときの位置合わせ」の節を足します。実装で最も多いずれで、規格に抜けていることが多い項目です。