Webサイトにおけるアイコンのメリットは？
おすすめアイコン素材サイトも紹介！

こんにちは！CodeClub965のKです！

今回はちょっとした工夫でサイトの画面を彩る方法について書こうと思います。
システム開発やWebの制作をしていて、「必要な要素は満たせているけれど、何か物足りなくて画面が寂しい」ということは無いでしょうか？

私はよくあります。笑

そんな時に使えるちょっとしたテクニックになります。

アイコンを利用する

結論から言うと、簡単にできてサイトにちょっとした彩りを与えることができる方法が、アイコンの利用です。

例えば、見出しが「課題」というような場合、ただ大きな文字で「課題」と書かれているよりも、見出しの左側に以下のようなアイコンがある方が見た目がよくなったりします。

サイトの雰囲気によってはアイコンを入れるのが合わないサイトもあるかもしれませんが、簡単にできることなので、ぜひ試してみることをお勧めします。

アイコンを利用するメリット

アイコンを使うメリットには、見た目がよくなることはもちろんなのですが、ユーザーが情報や機能を理解しやすくなるというメリットもあります。

例えば、「電話をする」というボタンがあったとして、テキストだけのボタンよりも以下のアイコンが添えられたボタンの方が、電話をするボタンであることがわかりやすいはずです。

メール問い合わせであれば、以下のアイコンがあるとメールのイメージが沸きやすいです。

アイコンは非言語なので、アイコンが多用されているサイトだと、日本語が苦手な外国人がサイトを訪れた時でも、アイコンが理解の補助になるという意外なメリットもあります。

アイコンがダウンロードできるサイト

商用利用可能なアイコンが無料でダウンロードできるサイトはいくつかあります。

まずお勧めなのは、GoogleのMaterial Iconsです。
https://material.io/resources/icons/?style=baseline

一般的に利用するアイコンはここで大体揃ってしまいます。

このサイトの良いところは、アイコンを様々な形式で利用できるところです。

もちろん、PNG画像としてダウンロードすることができ、PNG画像であればサイズを選んだり、色を黒か白か選ぶことができます。

htmlのソースコードで記載することもできます。

例えば、以下のコードを書いてあげると、

<span class="material-icons">
    3d_rotation
</span>

以下のアイコンが表示されます。

いちいちファイルをダウンロードしたりしなくて良いのは非常に楽ですね。

ぜひ、使ってみて下さい。

万が一、Google Material Iconsで利用したいアイコンが見つからなかった時には、こちらのサイトも有用です。
https://iconmonstr.com/

こちらのサイトにも無料で商用利用可能なアイコンがかなり揃っています。

最後に

システム開発やサイト制作を行って、どこか物足りなさを感じた時は、ぜひアイコンの利用を検討してみて下さい！

Follow me!