アイコンの使い方:情報をわかりやすくする
アイコンは「視覚的な単語」
アイコンは文字を読まなくても意味が伝わるミニチュアのシンボルです。
適切なアイコンは情報の認識速度を大幅に上げ、
デザインを視覚的に豊かにします。研究によると、
人は文字より画像(アイコン含む)を3倍速く認識します。
アイコンを使う場面
アイコンが特に効果を発揮するのは、リスト・箇条書きの先頭に置いてテキストだけの一覧をわかりやすくする場面です。
また、サービスの特長・強みを3〜4つのアイコン+短文で表現するレイアウトは、
視覚的にも整理されて読みやすくなります。ナビゲーション・メニューやデータ・数字の強調にも有効です。
アイコン選びの3原則
アイコンを選ぶ際に守るべき原則が3つあります。
スタイルを統一する。線画(アウトライン)のみ、または塗り(フィル)のみで揃えます。
混在するとデザインが雑に見えます。
サイズを統一する。セットで使うアイコンは16px・24px・32pxなど同じサイズで揃えます。
意味が誤解されないものを選ぶ。国・文化によって意味が異なるアイコン(特にハンドサインや宗教的シンボル)は避けましょう。
おすすめアイコン素材サイト
Google Material Icons(fonts.google.com/icons)は無料・商業利用可で2000種類以上あります。
Googleのデザインシステム準拠で品質が高く、
最初に試したいサイトです。
Feather Icons(feathericons.com)はシンプルな線画スタイルで、Webデザイン・アプリUIに最適です。
Font Awesome(fontawesome.com)は業界標準で、無料版でも1400種類以上使えます。
Icons8(icons8.com)はスタイルが多様で、同スタイルで揃えやすいサイトです。
まとめ
アイコンはテキストの3倍速く認識される視覚的な言語です。
スタイル・サイズを統一して使うことで、デザインの整列感と情報の伝わりやすさが同時に高まります。
自分のサービスや商品の「3つの特長」をアイコン+短文(20字以内)で表現してみましょう。
NEXT STEP
次は「イラストで世界観をつくる」続けて読む →