今回はサイト制作では欠かせないアイコン素材におすすめのサイト『icooon-mono』の使い方を解説します。
icooon-monoでダウンロードできるアイコンは色々とカスタマイズが出来ます。
- サイズ変更可
- 色変更可
- 透過率変更可
- 3種類のファイル形式からダウンロード可
コーダーはあまり使わないかも知れませんが、デザイナーは重宝しそうなサイトです。
サイトはコチラ↓
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
フリーアイコン素材サイト icooon-monoとは?
icooon-monoは、アイコン素材のダウンロードサイトで、商用可能なフリー素材が6000種類以上もあります。
さらに、登録不要なのですぐ使えます。
イラストだと登録が必要だったり1日のダウンロード制限があったりするサイトもあるので、登録不要で特に制限もなくつかえるのは非常に快適です。
もちろんWeb制作での使用も可能ですし、加工してもOKでファビコンにすることも可能です。
ただし、再配布禁止などの規約もあるので、トップページ右上にあるLICENCEをよく読んでからご利用ください。
icooon-monoでのアイコンの探し方
アイコンの探し方は、2種類あります。
- カテゴリー
- 検索
さらに、別ページで個性的なアイコンや文字素材を探すことも出来ます。
icooon-monoの使い方(カテゴリーで探す方法)
アイコンの上にマウスを乗せると『動物・植物』といったカテゴリー名が表示されます。
ちなみに、ページを開いた時に表示されているアイコン達(バットやハサミなど)は、トップページにデフォルトで表示されている物です。
そして、今回は『動物・植物』をクリックします。
すると表示されるアイコンが変わったのが分かると思います。
今回は、右上のリスのアイコンを選択して編集していきます。
アイコンのサイズ選択、色変更、透過率変更
まずは、アイコンのサイズを選択します(初期値は256pxです)
そして次は色を変えます。この色を変えられるのが便利です。
初期値ではグレーのような数値になっています。
この枠内をクリックすると、次のような画面が表示されます。
この色をクリックするか、枠内の数値を変更することでも色は変更できます。
また、右側のバーでは透過率を変更できます。
今回は50%にしてみました。
また『rgb』も『rgba』に変わったのが分かると思います。
『rgb』と『rbga』の違いについては以下の記事を参照ください。
XDなどで良くある8桁のカラーコードの見方と一覧
続きを見る
また『rgb』ではなく、次のように16進数でも色を変えられます。
ただし、ここで透過度を変えるとまた『rgba』に戻ります(16進数では透過度を表せない為)
画像をダウンロード
あとは、ダウンロードしたい種類のファイルを選択してダウンロードするだけです。
また、アイコンの右下にある+をクリックすることでストックしていくことができ、最大12個まで一括でダウンロードすることが出来ます。
ただし、アイコンのサイズやファイルの種類などは全て同じになります。
icooon-monoの使い方(
先ほどはカテゴリーで探しましたが、検索フォームで探すことも出来ます。
この検索フォームは、日本語でも英語でも検索できます。
例えば、『犬』と『dog』で検索してみます。
検索結果は微妙に違いますが、どちらも犬関係のアイコンが表示されました。
ちなみに見つからなかったときは、
「そんなアイコン素材は残念ながら置いてません」
と冷たく言われますが気にしないようにしましょうw
icooon-monoの使い方・番外編(個性的なアイコンから探す)
実は、ページ上部にはこのようなアイコンがあります。
上の画像は、『マンガ文字』にカーソルをあてている状態です。
それでは、『マンガ文字』をクリックしてみます。
かなり個性的な文字素材ですね。
これもアイコン同様に色などを変えられます。
これら『icooon-mono』のページ上部にあるアイコンたちはそれぞれ別ページになるので、ページのレイアウトが多少違います。
また、使用する際にはライセンスを確認しましょう。
まとめ
今回はフリーアイコン素材サイト『icooon-mono』の使い方を解説してきました。
ライセンスの確認が必要な場合もありますが、色やサイズを自由に変えられるのは便利ですね。
デザイナーさんには特に便利なサイトかと思います。
以上になります。