この記事では、Webデザインにおけるアイコンの種類の一つ、Webアイコンフォントについて、現役Webデザイナーが解説しています。
Webアイコンフォントの特徴や注意点、プロが使うアイコン配布サイトについてもまとめています。
また、Webアイコンフォントをデザインカンプに使う方法も紹介します。
この記事はこんな方におすすめ
- faceWebデザイン勉強中の初心者の方
- faceデザインでアイコンを初めて使いたい人
この記事を書いているのは、Webデザイナー歴17年の現役フリーランスです
Webアイコンフォントとは？
Webデザインにおけるアイコンは、見出しやメニューのアクセントとしてよく使われます。
この様なアイコンを使って、直感的にわかりやすいデザインを作ります。
Webアイコンの作り方には、2種類の方法があります。
ひとつは、画像として保存して画像データを呼び出す方法。
もうひとつは画像を必要とせず、コードを打ち込むことでアイコンを表示させる手法です。この手法をWebアイコンフォントといいます。
Webアイコンフォントの特徴
Webアイコンフォントとは、アイコン画像を使わずにWebフォントのコードを指定することで画面上にアイコンを表示させる方法です。画像を用意する必要がなく、手軽に実装できるのでWeb制作の場では人気の手法です。
Webアイコンはよほどマニアックなデザインじゃなければ汎用的な用途にはほぼ使える種類が揃っていますし、画像データではないので、サイズが小さくても高品質を保持したまま表示されます。
また、使い方も簡単でHTMLを知っている人であれば実装することができます。
以下は、一般的によく利用されるgoogleの提供するWebアイコンフォントの書き方の例です。
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<span class="material-symbols-outlined">arrow_forward</span><style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
</style>ヘッダーとアイコンを使いたい箇所にHTMLを打ち込み、CSSにスタイルを設定します。
これでアイコンが表示されます。
※上記は一例で、アイコンフォントの種類によって設定方法は違いますのでご注意ください。
Webアイコンフォントの人気の理由。メリットについて
Webアイコンフォントが人気なのには、以下の理由があります。
- 軽量で高品質だから
- 色やサイズが自由に変更できるから
- レスポンシブデザインにも適応が楽
- 利用が簡単
- アイコンの種類が豊富
軽量で高品質だから
Webアイコンフォントはベクターフォントです。拡大・縮小しても画質劣化がないので、高解像度のディスプレイでも表示がきれいです。また、画像で作ったアイコンよりもファイルサイズが小さくなります。
色やサイズが自由に変更できるから
アイコンの色を変えたい場合は、従来の画像ベースであれば画像の作り替えとアップデートし直しが必要でした。しかし、Webアイコンフォントであれば、CSSでスタイルを指定することで、色やサイズを変更することができます。しかもCSSで一括変更も可能なので、カスタマイズが本当に楽です。
レスポンシブデザインにも適応が楽
Webアイコンフォントはテキストとして扱われるので、デバイスや画面サイズに応じて自動的に適切なサイズに調整されます。そのため、スマホで見てもパソコンで見ても、適切なサイズで綺麗なクオリティを保ってくれます。
利用が簡単
先ほどコードの例を載せましたが、HTMLさえ知っていれば基本的に簡単に設定することができます。
特別なスキルがなくても簡単に利用することができます。
アイコンの種類が豊富
Webアイコンフォントの種類は豊富に揃っているので、一般的な企業サイトで使うアイコンであれば、不足はないと思います。
Webアイコンフォントの選び方と注意点
Webアイコンフォントは非常に優れたアイコンですが、以下の点に気をつけて選ぶといいでしょう。
- 種類が豊富なセットのものを選ぶ
- ライセンスに注意する
- アップデートに注意
種類が豊富なセットのものを選ぶ
デザインを作る時には、同じサイトのWebアイコンフォントを選びましょう。別のサイトのものを使うと不自然になります。その際に、使いたい種類が揃っているのはもちろんですが、その後サイトのメニューが増えること等も想定し、なるべく数が多いWebアイコンフォントを選びましょう。
この後、紹介するサイトの様に、世界的にシェア率の高い有名なサイトであれば安心です。
ライセンスに注意する
Webアイコンフォントだけでなくアイコン画像でもそうなのですが、利用にはライセンスが必要な場合があります。利用規約は必ず読んで、商用利用や再配布に対する制限をチェックして、使用目的に合ったライセンスを選びましょう。
アップデートに注意
頻繁にあるわけではありませんが、Webの進化に伴い、Webアイコンフォント自体の設定方法に変化が起きることもあります。これから先、急にアイコンが消えてしまう可能性も0ではありません。
もしそれを絶対に避けたい場合は、画像アイコンを設定しておいた方が無難です。
よく使われる有名なWebアイコンフォント
ここでは、プロのWebデザイン制作でよく使われる、有名なWebアイコンフォントのサイトをいくつか紹介します。
Font Awesome
Font Awesomeは、世界で一番有名で人気のあるWebアイコンフォントの一つで、世界中のデザイナーが利用しています。
とにかく種類が豊富。無料プランで約2,000種類、有料プランで16,000種類以上のアイコンがありますので、希望のアイコンはほぼ見つけることができるはず。更新も活発なので、最新のトレンドや需要に合わせたアイコンが利用できます。
Font Awesomeを使えば、SNSやamazonのブランドアイコンもWebアイコンフォントで表示可能です。
また、Font Awesomeでいいアイコンが見つかったんだけど、テイストが線画（ライン）だったらなあと言う時は、次に紹介する Line Awesomeを使えば大丈夫。
Line Awesomeは、Font Awesomeのアイコンをラインテイストにしてくれる、素敵なWebアイコンフォントです。
Line Awesome
最近はラインアイコンの方が使い勝手が良いのでありがたい
Font Awesome https://fontawesome.com/
Line Awesome https://icons8.com/line-awesome
Google Material Icons
googleが提供しているWebアイコンフォントで、Material Designのガイドラインに基づいた統一感のあるアイコンセットです。シンプルでモダンなデザインが特徴で、Google製品やAndroidアプリでよく見られます。
基本は無料ですが、有料の範囲もあります。
googleのWebフォントと一緒に使っても良いし、googleが提供しているため、安定性・信頼性・汎用性が高いですね。
Google Material Icons https://fonts.google.com/icons
Phosphor Icons
ちょっと可愛くてシンプルなアイコンが欲しい時は、こちらの「Phosphor Icons」はいかがでしょうか。
webアイコンフォントの2大巨頭「Font Awesome」や「Google Material Icons」は一部無料で欲しいアイコンは有料の時も少なくありません。
しかし、このアイコンはMITライセンスなため基本的に自由度が高く商用利用も可、7,000種類以上のアイコンが無料で使えます。
デザインも良し。少し柔らかいデザインにしたい時は、このWebアイコンフォントがおすすめです。
Phosphor Icons https://phosphoricons.com/
デザインカンプにWebアイコンフォントを使いたい場合
Webデザイナーが今回のデザインはWebアイコンフォントを使おうとなった場合は、どうしたら良いでしょうか。
Font AwesomeやGoogle Material Iconsはフォントデータを、自分のパソコンにインストールすることができます。
フォントをダウンロードしてインストールした後は、フォントサイトのアイコンをコピーして、フォトショップ等のデザインソフト上でペースとするだけ。
この時にフォントの設定をインストールしたWebフォントにすることで、カンプ上でWebアイコンの画像が出てきます。
また、これ以上フォントを入れたくないという場合は、Webアイコンフォントのサイトでは、アイコンのSVGデータのダウンロードも可能です。
デザインカンプにダウンロードしたSVGデータをはめ込み、もしWebコーダーが別にいる場合は、どのアイコンフォントを使ったかわかるメモを残しておくといいでしょう。
Webフォントアイコン：まとめ
Webアイコンフォントはデザインもモダンシンプルで洗練されているのが多く、どんなサイトにも馴染みが良いです。
大変便利なサービスなので、機会があれば積極的に利用してみましょう。
Webフォントアイコンではない、画像アイコンのまとめについては以下の記事を参考にしてください。
Webデザインのアイコンについての概要はこちらの記事です。