アイコンはイラストと違い、単体で意味を伝える記号です。並べたときに1つだけ線が太い、1つだけ塗りつぶし——それだけで、その項目が強調されているように読まれます。出どころの違うアイコンを混ぜたときに起きやすい行き違いと、その避け方をまとめます。
塗りと輪郭を混ぜない
最初に決めたいのは、塗りつぶしのアイコンを使うか、輪郭だけのアイコンを使うかです。この2つは別の記号体系で、混ざると塗りのほうが「選択中」「有効」といった状態を表しているように見えます。ナビゲーションやチェックリストでは、この誤読がそのまま操作の間違いになります。
同じ形について塗りと輪郭の両方が用意されていることは珍しくありません。片方に決めて、資料の最後まで通してください。切り替えたいときは、状態の違いを表すときだけに限ります。
線の太さは1つの資料で1種類に決める
輪郭のアイコンを使う場合、印象を最も大きく左右するのは色でも形でもなく線の太さです。細い線は精密で控えめに、太い線は明快で強く見えます。問題は、この差が意味の差として読まれることです。
手順の一覧に細線と太線が混ざっていると、太いほうが重要な工程だと受け取られます。実際には素材の出どころが違うだけでも、読み手にはそう見えません。太さは1種類に固定し、強調は色や配置で行うほうが安全です。
小さいほうを基準にサイズを選ぶ
同じアイコンでも、小さく置いたときと大きく置いたときでは見え方が変わります。小さくすると細部が潰れて団子に見え、大きくすると線が細く頼りなく見えます。
1つの資料で複数のサイズに使い回すなら、小さいほうを基準に選んでください。小さくても意味が読めるアイコンは大きくしても破綻しませんが、逆は成り立ちません。判断に迷ったら、実際に配置する大きさまで縮めて一度確認します。
色は意味を持たせるときだけ変える
アイコンに色を付けるのは、その色が何かを表しているときだけにします。赤は警告、緑は完了——といった対応が資料の中で一貫していれば、色は情報として働きます。装飾として1つずつ違う色を当てると、読み手は意味のない差を探すことになります。
余白を削らない
アイコンの周囲の余白は、形の一部です。枠にぴったり収めようとして余白を削ると、隣の要素と干渉して読みにくくなります。文字と横並びにするときは、アイコンの高さを文字の高さより気持ち小さめに取ると落ち着きます。
Visual Hubのアイコンについて
当サイトのアイコンは単色の塗りで描いてあり、線の太さという属性を持ちません。輪郭だけに見えるものも、内側をくり抜いた塗りとして作ってあります。太さが素材ごとに食い違う心配がないぶん、上の「線の太さを揃える」は他所の素材と混ぜるときの話になります。
色とサイズはダウンロードのときに指定する形式で、ファイルとして色違い・サイズ違いを持っていません。資料に合わせて後から決められます。SVGとPNGのどちらでも書き出せます。
※塗りと輪郭は、同じ形について別の素材として用意しているものがあります。並べて使うときは、どちらかに寄せてお選びください。