はじめに

WEBデザイン超初心者の私が、ポートフォリオサイトを作成するにあたり、無料で使えて、かつモダンなフリーイラスト素材サイトを調べてみました。

今回のポートフォリオサイトの制作ではメインカラーが決まっていたため、シンプルかつおしゃれで、さらに色も自由に変えられるものがあれば良いなと思っていました。

unDraw

シンプルで統一感があり、とても使いやすそうなイラストです。今回はこちらを利用してみました。

右上の紫色の四角いボタンをクリックすれば好きな色に変更できます。指定のカラーコードがある場合は、それをコピペして変更することも出来ます。

使用したいイラストをクリックするとSVG* かPNG* を選択してダウンロードができるようになっています。

今回はサイズを変更しても画質が劣化しないSVGでダウンロードしました。
Figmaを利用してデザインをしていたので、FigmaにSVG形式の画像を貼り付ける方法と、貼り付けた画像からSVGをコピーする方法を載せておきます。

シェイプツールの中から、一番下の「画像/動画を配置...」を選択。
SVG形式でダウンロードしたイラストを選択し、イラストをおきたい場所でドラッグすると配置できます。

そして、実際にコーディングするときに、SVGをコピペすることになると思うのですが、その際はFigmaのデザイン画面から、直接SVGのコードをコピーすることができるので便利です。

SVGをコピーしたいイラストの上で右クリックし、「SVGとしてコピー」を選択。あとはこれをコーディングの際に、イラストを表示させる場所に貼り付けるだけです。

*SVG:画像サイズを変更しても画質が劣化しない、
CSSでサイズやカラーを変更できる等の利点があります。
シンプルで色数の少ないアートワーク、ロゴ、サイトの装飾的なグラフィックなどに最適です。

PNG:複雑なグラフィックを大きな解像度で表示したり、何千色もの色を使った写真を表示したりするのに向いています。グラフィック、ロゴ、チャート、イラストなどに最適です。

Loose Drawing

優しくて、親しみやすい雰囲気のイラストです。こちらもシンプルで利用しやすそうです。

unDrawと同様に、ここで色を自由に変更することが可能です。

こちらのサイトではPNGとJPG形式で無料ダウンロード出来ます。SVGについては「お問合せください」となっています。

ソコスト

ソコソコ使えるシンプルなイラスト素材集だそうです。

こちらも自由に色が変更できるので便利です。
カラー変更したものはPNGとSVG形式でダウンロード可能で、
変更していないものに関してはEPS*でもダウンロード出来ます。

*EPS形式は、様々なサイズで使用する画像に最適な形式です。保持される画像データにより、より大きい寸法に引き伸ばしたり、拡大したりした場合でも、高い解像度が維持されます。 EPS画像データには、可逆方式の圧縮のメリットがあり、ファイルサイズを縮小した場合でも、高い画質が維持されます。

Shigureni Free Illust

ゆるくてポップでかわいいイラストです。女の子のイラスト限定になってしまいますが、かわいいイラストが欲しいときに使えそうです。

PNGは無料でダウンロード出来ますが、SVGは有料でのダウンロードとなっているようです。

以上が、今回紹介するフリーイラスト素材サイトになります。

終わりに

色が自由に変更できるフリー素材のイラストは、作成するWEBサイトのテーマに合わせて使用できとても使い勝手が良いと思いました。また、無料のものでもシンプルでおしゃれなイラストがたくさんあり、WEB制作や資料作成の手助けになると思いました。SVG形式でダウンロードし、Figmaに貼り付けてデザインすることで、コーディングの際の手間を少し省くことができるので有効活用したいと思いました。

参考