Webサイトにおいて、アイコンは非常に重要です。
特にUIデザインを考える上で、アイコンの存在は欠かせません。
どんなにシンプルなサイトでも、アイコンがないサイトはほぼないのではないでしょうか。
この記事では、Webデザイン勉強中の初心者の方に向けて、アイコンの概要やWebデザインを作る時にどのようにしてアイコンを使うのか、組み込み方やダウンロード先等について紹介します。
この記事を書いているのは、Webデザイナー歴18年の現役フリーランスです
アイコンとは
アイコンとは、物事を簡単な記号・絵柄で表したもののことです。
例えば、スマホの画面に並んでいる画像も「アイコン」と呼ばれるものです。
Webデザインでもアイコンはよく使います。主にメニューや見出し、ボタンのアクセントとして使われます。
アイコンはUIデザインにおいても重要です。アイコンは文字よりも直感的に内容を伝えることができます。
特にパソコンやスマホユーザーはテキストを読むより先に絵（アイコン）で判断する傾向があるので、よりスムーズに目的に辿り着くことができます。
ただ文字を並べるより、アイコンがあった方が情報としてわかりやすく、またメリハリのついたデザインになりますよね。
また、レスポンシブデザインでも、アイコンは重要です。
パソコンでは文字＋アイコンで表示してても、スマホになり画面スペースが狭くなる場合は、アイコンのみでメニューを表現することも珍しくありません。
アイコンのデザインにはフォーマットがある
後述しますが、アイコンはオリジナルで作る人もいれば、有名なサイトのものを使う人もいます。
どのアイコンを使うのも自由ですが、一般的な共通認識というものがあります。
アイコンは「記号」ですので、例えばお天気の記号の様に「傘マークであれば雨」という誰でもわかる認識に合わせる必要があります。
よくあるのが、検索＝むしめがね、お問合せ＝手紙、ホーム＝家、などです。
アイコンのデザインはどうやって作るのか
Webサイトのアイコンをデザインするには、3つのやり方があります。
- 自分でオリジナルアイコンを作る
- アイコン素材サイトからダウンロードして使う 初心者向け
- Webフォントアイコンを使う
自分でオリジナルアイコンを作る
自分でアイコンを作るメリットは、サイトにマッチしたアイコンを作れるので、ワンランクアップしたデザインができる。オリジナルなので他社と被ることがない。という点です。
カスタムされたアイコンは、その企業やブランドの個性を表現でき、また、他者との差別化もできます。
オリジナルアイコンというのは、想像以上にそのWebサイトのブランディングの価値を高めてくれるんです。
ただ、アイコンも全部作るとなると時間がかかるので、納期や予算の関係もあり、デザイナーが自分でアイコンを作らないケースも多いです。
もしオリジナルアイコンを作る場合は、Illustratorというデザインソフトで作る場合が多いです。
アイコン制作はデザインの腕の上達になりますし、もし余裕があったらぜひチャレンジしてみてください。
案件によっては一般的でないニッチなアイコンが必要な時もあるので、自分でアイコンが作れるスキルは重宝します！
アイコン素材サイトからダウンロードして使う
初心者のうちは、アイコン素材サイトからダウンロードして使うのが一番簡単です。
ダウンロードするデータはaiやpngであることが多いので、自分のデザインカンプに嵌め込めばOK。
アイコン素材サイトの中には、ブラウザ上でアイコンの色を変更してダウンロードできるところもあり、初心者デザイナーにとって強い味方です。
おすすめアイコン素材サイト
私が個人的によくお世話になっているアイコン素材サイトをまとめましたので、よかったら参考にしてください。/
こちらの記事です。
Webアイコンフォントを使う
Webアイコンフォントとは、WebフォントのコードをHTMLに打ち込むことで、画像データがなくてもアイコンが表示される仕組みのことです。
Webアイコンフォントを使うメリットとして、以下の点があります。
- 画像を使わないのでサイトの容量が軽くなる
- コードを打ち込むだけなので後の管理が楽
- CSSで色や大きさを変えることができる
デザインにうまくはまるWebアイコンフォントがあると、後のサイト管理が楽になるので、もし良いアイコンがある様なら積極的にWebアイコンフォントを使っていっていいと思います。
Webフォントを使ってデザインを起こすやり方ですが、まず、デザイナーがデザインカンプを作る時に、Webアイコンフォントの画像をデザインデータに埋め込みます。
そして、HTMLコーダーに依頼する際に「このアイコンはWebアイコンフォントです」と伝えて、どのアイコンフォントを使ったか情報を渡すようにしましょう。
そうするとHTMLコーダーがWebフォントを使ってコーディングをしてくれます。
おすすめWebアイコンフォント
Webアイコンフォントについて、詳しくはこちらの記事にまとめています。
SNSアイコンは公式サイトからダウンロード
企業サイトに欠かせない、Twitter・Instagram・facebookといったSNSのアイコン群。これらは公式サイトからデータがダウンロードできます。
オフィシャルのアイコンやロゴは、各企業で厳格なレギュレーションが決まっていますので、必ず守るようにして、変に加工しないようにしましょう。
抜きにしたい場合も、公式のものがあります
SNSアイコンのダウンロード先
各URLからダウンロードできます。必ずガイドラインを確認して利用しましょう。
またデータはPC用なので、パソコンからダウンロードするようにしましょう。
- X(旧Twitter）
- Instragram
-
https://about.meta.com/ja/brand/resources/instagram/instagram-brand/
- LINE
アイコンを使う時のポイント
アイコンを選ぶ、または作成する時の大事なポイントです。
- 一目みて何のアイコンかわかる
- サイトデザインにマッチするものを選ぶ
- 複雑すぎないものを選ぶ
- 全ページで使うアイコンは、同じ制作者のものにする。Webアイコンフォントであれば、同じサイトのものにする。どうしても欲しいアイコンがない場合は、わからないレベルで似たものを探す。
とにかく全体の統一感を揃えることが大事です。
メニューにアイコンを使うのであれば、まず全種類を揃えられるか確認すること。
また、線の太さも大事。アイコンの線の太さで見た目の印象が変わるので、サイトデザインを壊さないものを選びましょう。
ホサイトでも見やすい、シンプルでキャッチーなアイコンが好まれます
「ユーザーが一目みてわかりやすい」という視点は大事です。
例えばメールのアイコンであれば、誰でも封筒タイプのアイコンを浮かべるでしょう。
万人にわかるというのが大事で、オリジナリティより一般的なものをセレクトすると間違いないです。
見ているだけで楽しいアイコン素材。デザイナーの手間を減らしてくれて、さらにサイトデザインのクオリティを上げてくれるアイコンを提供してくれるサイトに感謝ですね。