vscodeでscss(css)を自動的に並び替える方法とcsscombの設定方法
katayamawp
201 Created
htaccessでディレクトリ構成と違うurlで表示する方法
katayamawp
WEBサイトやパワーポイント資料の作成時に欠かせないアイコンや画像。デザインの品質を左右する重要な要素ですが、「いいアイコンが見つかったのに、種類が少なくて統一感を出すのが難しい…」と感じたことはありませんか？
そのためには、スタイルや種類が豊富なアイコンリソースを見つけることが大切です。
プロジェクトのテーマやブランドイメージに合ったアイコンを選び、カスタマイズ可能なセットを利用することで、色やサイズを自由に調整し、一貫性のあるデザインを実現することができます。
そんな時に役立つ、素材が豊富に揃っているサイトを集め、その中でも、高品質で実用的なものだけを厳選いたしました。
本記事の目次
Pixabay
Pixabayのイメージ
4,500万点以上の高品質な写真やイラスト、ベクターグラフィックスが無料で利用できるサイトです。
また、画像だけでなく、動画やサウンドなども提供されてることがポイントです。
Pixabayのメリット
詳細な絞り込み検索ができる
サイズや向きはもちろん、色による絞り込み検索ができます。
そのため、コンセプトに沿った画像選びが簡単に行えます。
Pixabayのライセンス
商用利用の際にはクレジットや有料プランの利用が必要な場合がありますのでご注意ください。
Pixabayのリンク
サイトトップ :
https://pixabay.com/ja/
Freepik
画像やアイコンに動画などさまざまなものを提供しています。
アイコン群がグループ分けされており、探しやすく選びやすいのが特徴です。
Freepikのメリット
アイコンの種類が豊富（数百万超）
アイコンの中でも、テイストによってグループ分けされていています。
いくつかのグループに分かれていますが、例えば以下(リンクはこちら)のアイコングループなら、300万以上のアイコンがあります。
同じテイストのアイコンが豊富のため、アイコンを使用するWEBサイトや資料の中で統一感のあるものを作ることができます。
Freepikのライセンス
商用利用の際にはクレジットや有料プランの利用が必要な場合があります。
Freepikのリンク
本位サイト : https://www.freepik.com/
お勧めアイコン群 : https://www.freepik.com/author/freepik/icons/basic-rounded-lineal_4#from_element=families_block
Flaticon
Flaticonでは、ハイクオリティーアイコンが使用できます
Flaticonのメリット
動くアイコンが使用できる
「百聞は一見にしかず」ということで、下記のリンクをご覧いただければわかる通り、動きのあるアイコンが使用できます。
ファイル形式が豊富
ダウンロードする際には無料と有料でファイル形式が違いますが、豊富な形式から選ぶことができます。
無料版では、GIFを使用してアイコンを配置することで動きを見せることができます。
Flaticonのリンク
アイコン : https://www.flaticon.com/animated-icons
その他
ご存知の方も多いと思いますが、たまに使用するサイトたちを下記で紹介しておきます。
アイコン素材
| 名称 | リンク |
|---|---|
| Google Icons | https://fonts.google.com/icons |
| Icooon-mono | https://icooon-mono.com/ |
| Icon Box | https://iconbox.fun/ |
| ちょうどいいイラスト | https://tyoudoii-illust.com/ |
| Iconly | https://web.iconly.pro/ |
イラスト素材
| 名称 | リンク |
|---|---|
| Loose Drawing | https://loosedrawing.com/ |
| Linustock | https://icooon-mono.com/ |