アイコンフォントを知らないなんてもったいない！みんなすでに目にしているよ！サイト制作をするならぜひ使ってみて！ということで、今回は「アイコンフォント」に注目したいと思います。
共通認識のマークについて
非常口マークやトイレマークなど言葉ではなく、共通認識としてイラストで表現されているものを「ピクトグラム」と言います。Webサイトでも、共通認識とされているマークがあり、「アイコン」と呼ばれています。
例えば、
三本線のイラスト=メニュー
歯車のイラスト＝設定
は、よく見るものですよね。
アイコンフォントって何？
「アイコン」「フォント」という用語は知っているかと思いますが、組み合わさった「アイコンフォント」とは何でしょうか？
１．アイコンフォントは画像じゃない？
Webサイトで使用するアイコンは、画像で用意されているものを利用することが一般的です。しかし、最近ではアイコンフォントが多く利用されるようになってきました。
「Webフォントの仕組みで表示されるアイコン」であるため、クラウド上にあげられたフォントデータを読み込むことでホームページにアイコンとして反映させています。
簡単に言うとアイコンフォントは
というものです。
２．アイコンフォントの素材はどこにあるの？
では、自分でサイト制作をするときにアイコンフォントを使用する場合には素材はどうしたらよいでしょうか。
無料で利用できるサイトがあります。有名なところで言えば、「Font Awesome」です。一般的な基本アイコンだけでなく、Facebook やAmazonのようなブランドの有名企業のアイコンもあり、種類が豊富です。
その他、「Ligature kudakurage Symbols」は日本人がデザイナーをしており、はてなブックマーク、ヤフー、ラインなどのアイコンもあります。
アイコンフォントを上手に活用しよう
アイコンフォントは絵文字のように”かわいさ”があり、サイト制作の表示でも使用するか、しないかで大きく印象が異なります。ちょっとしたひと手間ではありますが、人は記号でパット認識するため、文字ばかりの表示よりもアイコンは有効です。
すべて画像にしてしまうと表示速度が遅くなるというデメリットがあるため、アイコンフォントを利用しましょう。
共通認識のマークと言っても、見慣れない人にとっては何の記号かわからないことも多いので自分では当たり前でもユーザー目線になることが大切です。「三本線＝メニュー」を知らなければ、クリックもしません。アイコンフォント＋「メニュー」「Menu」と日本語の説明と合わせて、表示するといいですね。
弊社では、お客様のご要望に応じてWeb制作を行っております。デザインは内部構造を意識し、画像の表示速度も考慮して制作をしております。お気軽にご相談ください。
下記リンク先より弊社のWEB制作についてご覧いただけます。是非ご覧ください。