コラム
2019/04/26

アイコンフォント、どれがいいの？

  • UI/UX
  • デザイン

CMSを徹底比較！目的別におすすめのCMSも紹介限られた範囲の中で情報を直観的に表すことができ、ユーザーへのアクションの指針としての働きも持つ「アイコン」は、サイトのデザイン性やユーザビリティに対して大きな役割を持っています。

かつてはこれらのアイコンも、画像で作成するのが通常でしたが、現在はWebフォントの一種である「アイコンフォント」を利用しているサイトが多いです。

リーフレットダウンロード  「システムのデザイン」をもっと知りたい方はこちらへ

関連製品

    アイコンフォントとは・・・
    Webフォントの文字部分をアイコンで作成したもの。

    メリットとデメリット

    フォントデータであるという事は、解像度の違いによる劣化がなく、フォントサイズやカラーの変更に応じてサイズやカラーを変更する事が可能です。
    CSS3を利用すれば、アニメーションや回転などの表現も実現できます。
    そして何よりアイコン用の画像を作成して書き出す手間が省けるのは、大きな開発時間の短縮となります。
    また、様々な種類のアイコンが「フォント」として1ファイルにまとめられているため、1リクエストで済む事も大きなメリットです。

    一方、アクセシビリティの確保のための視覚的認知ができないユーザへの配慮が必要であったり、単色での指定しかできない、少ない種類のアイコンを利用するときにも1フォントファイルとしてすべての種類をダウンロードさせなければならない…などがデメリットとしてあげられるでしょう。

    アクセシビリティを確保しつつアイコンフォントを利用するには要素にaria属性を付ける事で実現が可能です。 
    		aria-label="アイコンの内容をテキストで"

    おすすめのアイコンフォントはどれ？

    ライセンスフリーで利用できるアイコンフォントには様々なものがありますが、中でもお勧めなのは最も有名なFont-Awesomeというアイコンセットです。
    フォントのライセンスは「SIL Open Font License 1.1」、CSSファイルは「MIT License」となります。

    最も有名でよく利用されているという事は、ユーザーが目にする機会が多いという事です。
    「アイコン」は、ユーザーへのアクションの指針としての働きを持つという点を考えると、初めて目にするものよりも度々目にするものの方が、直観的に理解しやすいといえるでしょう。
    また、日本語での情報量や関連する便利ツールも多いため、制作者の学習コストが低い点も大きなポイントです。

    「FontReach」ではフォントの利用率を調べる事ができます。
    こちらの「Top Fonts」のページでは、最もよく利用されているフォントが順に表示されていますが、文字情報のフォントの中でもFontAwesomeのランクの高さを伺う事ができます。

    端末が多様化している昨今、アイコンフォントを利用する事はWeb制作のコストダウンや品質向上に有効的な手段の一つです。
    今回は、ごく簡単にアイコンフォントの「メリットとデメリット」、「おすすめ」をまとめました。
    アイコンフォントに代わってSVG画像を利用するシーンも増えてきてはいるものの、Webフォントが利用できるようになってからのアイコンフォントの浸透率は目を見張るものがあり、スタンダードな手法と言えるでしょう