Web制作

フリーアイコン素材サイト icooon-monoの使い方

アイコンのフリー素材を探せるいいサイトないかな?

今回はサイト制作では欠かせないアイコンの素材におススメのサイトをご紹介したいと思います。

サイトはコチラ↓

アイコン素材ダウンロードサイト「icooon-mono」

icooon-monoとは?

まずサイトの説明をさせて頂きます。

こちらはアイコン素材のダウンロードサイトで、商用可能なフリー素材が6000種類以上もあります。

さらに登録不要なのですぐ使えます。

イラストだと登録が必要だったり、1日のダウンロード制限があったりするサイトもあるので、登録不要で特に制限もなくつかえるのは非常に快適です。

もちろんこのブログで紹介しているのでWeb制作での使用も可能ですし、加工してもOKです。

またファビコンにすることも可能です。

ただし再配布禁止などの規約もあるので、トップページ右上にあるLICENCEをよく読んでからご利用ください。

 

使い方

アイコンの探し方は2種類あり、まずはカテゴリーで探してみます。

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

 

アイコンの上にマウスを乗せると上の写真のように動物・植物といったカテゴリー名が表示されます。

ちなみに下に表示されているアイコン達はトップページにデフォルトで表示されている物です。

そして今回は動物・植物をクリックします。

 

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

すると下に表示されるアイコンが変わったのが分かると思います。

そして今回は右上のリスのアイコンを選択します。

すると次のような画面になります。

 

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

まずはサイズを決めます(初期値は256pxです)

そして次は色を変えます。

この色を変えられるのが便利です。

 

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

ここに初期値ではグレーのような数値になっています。

この枠内をクリックすると、次のような画面が表示されます。

 

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

この色をクリックすることで色を変えられます。

また枠内の数値を変更することでも色は変えられます。

また右側に注目して下さい。

 

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

この右側のバーは透過度を設定出来るところで、ここでは50%にしてみました。

また rgb も rgba に変わったのが分かると思います。

rgb と rbga の違いについては以下の記事を参照ください。

テキストの背景だけを透過させる方法

 

また rgb ではなく、次のように16進数でも色を変えられます。

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

ただしここで透過度を変えるとまた rgba に戻ります(16進数では透過度を表せない為)

あとはダウンロードしたい種類のファイルを選択してダウンロードするだけです。

もちろんアイコンの背景は透過しているので、さまざまな背景で使う事が出来ます。

また、アイコンの右下にある+をクリックすることでストックしていくことが出来、最大12個まで一括でダウンロードすることが出来ます。

 

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

ただしアイコンのサイズやファイルの種類などは全て同じになります。

 

検索フォームで探す

先ほどはカテゴリーで探しましたが、検索フォームで探すことも出来ます。

この検索フォームは日本語でも英語でも検索できます。

例えばメールとmailで検索してみます。

 

 

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

検索結果は違いますが、どちらもメール関係のアイコンが表示されました。

ちなみに見つからなかったときは、

「そんなアイコン素材は残念ながら置いてません」

と冷たく言われますが気にしないようにしましょうw

 

画像出典:アイコン素材ダウンロードサイト「icooon-mono」

-Web制作