千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.05.18

【デザインのクオリティを上げたい!】フリーアイコンを使いこなす

飯野のか

デザイン

こんにちは!デザイナーのいいのです。

今回はWebデザイン初心者に向けて、フリーアイコンの使いこなし方について書いていこうと思います。

簡単にダウンロードして使用できるフリーアイコンはそのまま使うこともできますが、ちょっとコツを知るだけでデザインのクオリティをあげることができます。

今回は実際のフィードバックのような形でデザイン工程をお見せしながら、フリーアイコンの上手な使い方をご紹介していきます。

おすすめのフリーアイコンダウンロードサイトもご紹介していますのでぜひご覧ください!

目次

アイコンはなぜ使用するの?

フィードバック1

ユーザーに素早く情報を認知させる

人はWebサイトの20%程度のテキストしか読まない、と言われています。

何でもスマホで情報を収集できるようになったことで、ユーザーはできるだけ短い時間で効率良く、必要なコンテンツだけを読みたいと考えます。

その為、アイコンを取り入れることで、テキストを読まなくても直感的・視覚的に書いてある内容を伝えることができ、ユーザーの注意をひくことができます。

アイコンを探す

私がよく使用する、会員登録不要・商用利用可・パス編集可能データ有りのフリーアイコンのダウンロードサイトを4つご紹介します。

パスを編集したりカラーを変更することが多いため、aiデータやSVGでダウンロードします。

icon-pit

アイコンデータはベクター加工してあるイラストレーターのAi、背景透過PNG形式がまとまってZIPファイルになっており無料ダウンロードが可能。

線が細めで丸みのある使いやすいアイコンが多い。

他のアイコンサイトと比べて、少し細かめにつくられているアイコンも多い。

https://icon-pit.com/

ICON BOX

16px~256pxの中の5段階から選んでダウンロードできるPNG・パスデータ編集可能なSVGをダウンロードが可能。

使いやすく、シンプルでわかりやすいアイコンが多い。

丸みのあるもの・カクカクした直線のもの、太め・細めとバリエーションも多い。

https://iconbox.fun/

icon-rainbow

16px~512pxの中の7段階から大きさを選べ、カラーもダウンロード前に変更が可能。

PNG・JPG・SVGから選んでダウンロードできる。

とにかくいろんなアイコンが多数揃っていて、色んなシーンで使用でき便利。

https://icon-rainbow.com/

ICOOON MONO

こちらも16px~512pxの中の7段階から大きさを選べ、カラーもダウンロード前に変更が可能。

PNG・JPG・SVGから選んでダウンロードできる。

種類が豊富で基本ここならなんでもある。シルエットのように塗りありのアイコンを使いたいときはここ。

https://icooon-mono.com/

複数アイコンを使うときに気をつけること

フィードバック2

サイト内で複数アイコンを使うときは「フリーアイコンをそのまま使っている感」を出さないように統一感を出すと、サイトデザインのクオリティもあがります。

上の例だと、カラーは揃えてあるものの、線の太さがバラバラだったり、3つめだけいろんな要素が詰まったアイコンなのが気になります。

アイコンのテイスト

角が丸いものを使うか・カクカクしたものを使うかでなるべく統一したり、

いろんな要素が詰まった細かいアイコンとシンプルなアイコンがあるので、シンプルで揃えるか、少し凝りたい時はいくつかアイコンを組み合わせて1つのアイコンをつくりあまり差が出ないようにします。

また上の3つめのアイコンのように線が途中で途切れているアイコンはこなれ感がでるのですが、なるべく他のアイコンも線の途切れをつくって揃えたり、逆に線をつなげて途切れをなくしたり、パスデータをいじって調節します。

線の太さや色

線の太さや色はベクターデータであればイラレで簡単に揃えることができます。

色はアピアランスの塗りや線から、線の太さはオブジェクト>パス>パスのオフセットから調節できます。

パスのオフセットは、線を太くしたり細くしたり、角の丸さも調節できます。

今回は詳しい説明は割愛しますが、知らなかった方は『パスのオフセット』で検索してみてくださいね。

2色のアイコンにしてみる

フィードバック3

2色アイコンにすると目立つところがはっきりしたり、アクセントがつきます。

フリーアイコンだけでも、大分つくり込んでいる感がでてきます。

完成形

「1箇所色を入れる」パターンは、変えたい箇所を選択してアピアランスから塗りか線の色を変えるだけ。

「シェイプをつかって組み合わせる」パターンは、上の例は円と重ねましたが、複雑なかたちの時はペンツールでざっくりパスを取り、できたシェイプをアイコンの後ろに持ってきます。

難しそうに見えて慣れると意外と簡単に作れるので、2色アイコンにするのもオススメです。

サイトカラーを使えばサイトに馴染んでクオリティもあがります。

おわりに

どうでしたか?

フリーアイコンを取り入れて少しデータをいじるだけで、要素の分かりやすさや見た目も大分変わります。

ぜひ、あまりアイコン使ってなかったよ~とういう方や、そのまま使ってたよ~という方は挑戦してみてくださいね!

飯野のか

デザイナー

都会のOLを目指していたら、いつのまにかwebデザイナーの道へ。
デザインって難しいけどたのしい!日々アンテナを張って、
身の回りにある素敵なデザインを探しています。
來來來世は坂道アイドルになるために徳を積んでいる途中。
HOME | コラム | 【デザインのクオリティを上げたい!】フリーアイコンを使いこなす
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪