【プログラミング学習】 サイトをちょっとした工夫で彩る方法

こんばんは！

今日で84個目の記事になります。
目標にしていた100記事が見えて来ました。

継続して書いてみると意外とあっという間ですね！

今日はちょっとした工夫でサイトの画面を彩る方法について書こうと思います。
システム開発や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/

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

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

# 今日も、最後までお読み頂きありがとうございます！
感想や質問などございましたら、コメント頂けますと嬉しいです。
全て返信させて頂きます！

では、また明日！