こんにちは、アナログ子です。
突然ですが、こんな悩みを持っていませんか？
画像サイトを渡り歩き、こだわって探していると結構時間がかかってしまいますよね。
そこで、おすすめしたいのが「Stories by Freepik」です。
- 無料
- 商用利用OK
- 超ハイクオリティ
- カスタマイズできる
- アニメーション化できる
「Stories by Freepik」は、クオリティの高いイラストを無料で使うことができるサイトです。しかも、イラストの色を変えたり、動きをつけたり、細かくカスタマイズすることが可能です。
あなたのイメージにぴったりと合ったイラストへ、変えられますよ！
欲しかったイラストが見つかる！Stories by Freepik
「Stories by Freepik」 は、クオリティの高いイラストを無料で提供しているサイトです。
海外のサイトなので、イラストは英語で探します。とはいえ、直感的な操作でいけるので、英語が苦手な人も大丈夫です。
会員登録｜不要
商用利用｜可
出典の表記｜要
ファイル形式｜SVG、PNG
イラスト編集｜可
アニメーション化｜可
一番の特徴は、アニメーション化ができることです！いくつかのパターンが用意されており、アニメのようにイラストを動かすことが可能。
はじめて見たときは、本当に驚きました。ブログやWebサイトで使えば、印象づけるのに役立つと思います。
それでは、さっそく使い方を解説します。
Stories by Freepik の使い方
Stories by Freepik の使い方は、次の4ステップです。
- イラストを選ぶ
- カスタマイズする
- ダウンロードする
- 出典を表記する
①イラストを選ぶ
まずは、下のリンクから「Stories by Freepik」へ移動しましょう。
たくさん表示されているイラストの中から、好きなものを探してもいいのですが、「キーワード検索」「スタイル」「タグ」の3つの方法で、イラストを選ぶことができます。
キーワード検索で選ぶ
1つ目は、キーワード検索で選ぶ方法です。
キーワードは英語で入力しましょう！
検索窓にキーワードを入力すれば、関連するイラストだけを表示させることができます。英語が分からない場合は、Google翻訳が便利ですよ。
スタイルで選ぶ
2つ目は、スタイルで選ぶ方法です。
「Stories by Freepik」 のイラストには、5つのスタイルがあります。
- Rafiki
- Bro
- Amico
- Pana
- Cuate
トップページの左側に「STYLES」が表示されています。はじめはAll（すべて）になっていますが、スタイル名を選択すれば、スタイルごとに表示できますよ。
それぞれのスタイルを順番に見てみましょう。
Rafiki
Bro
Amico
Pana
Cuate
5つとも同じ「Blog post」というコンセプトのイラストです。スタイルごとに特徴があって、面白いですよね。
タグで選ぶ
3つ目は、タグで選ぶ方法です。
「TAGS」にタグ名が表示されています。自分の探したいキーワードのタグがあれば、クリックしてみましょう。
タグ名に関連するイラストが表示されます。
②カスタマイズする
なんと、「Stories by Freepik」 では、イラストをカスタマイズできます。カスタマイズできるのは、色、背景、レイヤーです。
使いたいイラストが決まったら、クリックしてください。カスタマイズをしてみましょう。
この記事では、「Blog post」（Amico）のイラストを使います。
色をカスタマイズ
「Change color」のボタンをクリックしてみましょう。
カラーパレットが出てきました。ここで好きな色を選択し、変更することができます。
背景、レイヤーをカスタマイズ
背景は「BACKGROUND」、レイヤーは「LAYERS」のボタンで切替表示できます。
上のイラストでは、「LAYERS」の「Device」をクリックしました。PCが消えてしまいましたね。
結構、自由にカスタマイズができます。
※イラストによっては、変更できないものもあります。
カスタマイズできるの、いいね！
③ダウンロードする
カスタマイズが終わったら、いよいよダウンロードです。イラストのファイル形式は、「SVG」「PNG」の2つです。
ブログ記事で使う画像であれば、PNGを選びましょう。「Downlad PNG」をクリックで、ダウンロードできます。
④出典を表記する
イラスト画像をダウンロードしたあとに、メッセージが出てきました。
「イラストは出典を表記しないとダメだよ、忘れないでね！」と書かれています（たぶん、そんな感じです）
Stories by Freepik のイラスト画像は誰でも無料で使うことができますが、出典の表記をしなくてはいけません。
イラストを利用したら、「Illustration by Stories by Freepik」と記載してサイトへのリンクをつけておきましょう。
「Copy and Attribute」をクリックすると、出典表記用のコードをコピーすることができます。
ライセンスについて詳しく知りたい方は、利用規約も確認しておくといいでしょう。
これはすごい！イラストのアニメーション化
Illustration by Stories by Freepik
Stories by Freepik では、上にある画像のようなアニメーション化ができます。イラストに動きをつけられるのですね！これはすごい！
動きがつくと面白いね！
アニメーション化する方法
まずは、アニメーション化したいイラストを選びましょう。イラストの右上にある「Animate it」をクリックします。
動かしたいパーツを「ELEMENTS」で選びます。選択中のパーツは、イラスト上で色が変わります。
次に、パーツの動きを選びます。「ENTRANCE」「LOOPING」のリストの中から好きなものをクリックしてください。
スライドインしたり、クルクルと回ったり、さまざまな動きを割り当てることができます。
プレビューを表示する場合は、右上にある再生ボタンをクリックします。リセットやランダムに動きをつけることもできます。
- Reset＝リセット
- Randomize＝ランダムに動きをつける
- ▶＝プレビュー
アニメーションのカスタマイズが終わったら、「Export」をクリックしましょう。ダウンロードページへ移動します。
「GIF」「Video」またはHTMLファイルとしてダウンロードできます。HTMLコードはコピーもできるようになっていますよ。
あなたのサイトにストーリーを！
今回は、イラスト画像サイト「Stories by freepik」をご紹介しました。
出典表記はしないといけませんが、クオリティの高いイラストを無料で使えるのは嬉しいですよね。
バリエーションも豊富でとても使いやすいサイトです。ブログ記事などのグレードアップにぴったりですね。
いろいろなカスタマイズができるので、人とは違ったイラストを使いたいという方にもいいかもしれません。
わたしは、Stories by Freepik に出会ってから、イラスト選びが楽しくなりました。特に、アニメーション化が面白いので、おすすめです！
Illustration by Stories by Freepik
こちらの記事もおすすめです
コメント