![storyset-freeillust](/wp-content/uploads/storyset-freeillust.jpg)
Webデザインやブログのアイキャッチなどで使える、無料のロイヤリティフリー素材は、いくつあっても困ることはありません。
さて。今日お話するのは「storyset」というイラスト素材サイト。
無料で使えるロイヤリティフリー画像なのですが、他のサービスとは一味違います。
まず、自分でカスタマイズが可能!イラストの中で使われているパーツの選択や色を、自由に変更することができます。
![storyset-freeillust_1](/wp-content/uploads/storyset-freeillust_1.png)
![storyset-freeillust_2](/wp-content/uploads/storyset-freeillust_2.png)
そして何より、アニメーションが作れてしまいます。イラスト内で使われているパーツを動かして、それをSVGやGIFや動画として出力できます。
実際に作ったのがこんな感じ。同じテンプレートのイラストでも、多様なバリエーション違いを作ることが可能です。
![storyset-freeillust_8](/wp-content/uploads/storyset-freeillust_8.gif)
無料イラスト素材「storyset」でできること・使い方
それでは実際に、storyset でできることについてご紹介します。
1まず以下のリンクから storyset のサイトにアクセスします。
Storyset | Customize, animate and download illustration for free
Edit and animate all our customizable illustrations to enhance your projects totally free. Start now to be creative in our online editor ✅
2 画像を選びます。海外のサイトなので、検索は英語で。左ナビからは、カテゴリやタグから検索できます。
![storyset-freeillust_3](/wp-content/uploads/storyset-freeillust_3.jpg)
3画像のカスタマイズは、右ナビから。「COLOR」から色の変更ができます。
「LAYERS」をクリックすると、イラスト内のパーツの表示/非表示を選べます。「Show all layers」をクリックすれば、変更できるパーツが増えます。
![storyset-freeillust_4](/wp-content/uploads/storyset-freeillust_4.jpg)
静止画でOKなら、右下のDownload SVGDownload PNGをクリックすれば、ダウンロード可能です。
4アニメーションを作りたい場合は、右上のAnimate it!をクリック。
![storyset-freeillust_5](/wp-content/uploads/storyset-freeillust_5.jpg)
5左ナビの「ELEMENTS」から、動かしたいパーツを選択し、右ナビから動き方を調整します。
「ENTRANCE」は、そのパーツの出現方法を。「LOOPING」は、そのパーツの状態を設定できます。
![storyset-freeillust_6](/wp-content/uploads/storyset-freeillust_6.jpg)
「ひとつひとつ丁寧に設定していくのは面倒!」という方は、右上のRandomize!がおすすめ。クリックするたびに、ランダムにアニメーションを作ってくれます。
作り終わったら右下のExportをクリック。
SVGとしてWebサイトに埋め込むこともできますし、GIFや動画としてダウンロードすることもできます。
![storyset-freeillust_7](/wp-content/uploads/storyset-freeillust_7.jpg)
あとがき
このサービス、なによりイラストの種類の豊富さが素晴らしいのです。「mobile」と検索しただけでも、かなりの数のイラストがヒットします。
イラストのクオリティもひとつひとつがちゃんとしているので、Webサイトのデザインやアイキャッチ作成にも活用できますよ。