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