圧倒的な使いやすさ!WordPressテーマ「SWELL」公式サイトをみる!

「Stories by Freepik」超おすすめ!無料とは思えないイラスト画像サイト

記事は書けたのに、イラスト選びに時間がかかる…

そんな悩みを抱えていませんか?無料画像サイトを探しまわっていると、結構時間がかかってしまいますよね。

そこで、おすすめしたいのが無料イラスト画像サイト「Stories by Freepik」です。

Stories by Freepikの特徴

  • 無料
  • 商用利用OK
  • 超ハイクオリティ
  • カスタマイズできる
  • アニメーション化できる

「Stories by Freepik」には、商用利用可能なクオリティの高いイラストがたくさん揃っています。しかも、イラストの色を変える・アニメーション化するなど、細かくカスタマイズすることが可能。

あなたのイメージにぴったりと合ったイラストがきっと見つかるはずです。ぜひ続きをご覧ください。

目次

欲しかったイラストが見つかる!Stories by Freepik

toppage of stories
Toppage of Stories

「Stories by Freepik」 は、クオリティの高いイラストを無料で提供しているサイトです。

海外のサイトなので、イラストは英語で探します。とはいえ、直感的な操作でいけるので、英語が苦手な人も大丈夫です。

Stories by Freepikの特徴

  • 会員登録|不要
  • 商用利用|可
  • 出典の表記|
  • ファイル形式|SVG、PNG
  • イラスト編集|可
  • アニメーション化|可

一番の特徴は、アニメーション化ができることです!いくつかのパターンが用意されており、アニメのようにイラストを動かすことが可能。

はじめて見たときは、本当に驚きました。ブログやWebサイトで使えば、印象づけるのに役立つと思います。

それでは、さっそく使い方を解説します。

Stories by Freepik の使い方

Stories by Freepik の使い方は、次の4ステップです。

  1. イラストを選ぶ
  2. カスタマイズする
  3. ダウンロードする
  4. 出典を表記する

①イラストを選ぶ 

まずは、下のリンクから「Stories by Freepik」へ移動しましょう。

〉〉Stories by Freepikへアクセス!

たくさん表示されているイラストの中から、好きなものを探してもいいのですが、「キーワード検索」「スタイル」「タグ」の3つの方法で、イラストを選ぶことができます。

キーワード検索で選ぶ

Search window

1つ目は、キーワード検索で選ぶ方法です。

キーワードは英語で入力しましょう!

検索窓にキーワードを入力すれば、関連するイラストだけを表示させることができます。英語が苦手な方は、Google翻訳が便利です。使いたいイラストのイメージした言葉で検索してみまてくださいね。

〉〉Google翻訳

スタイルで選ぶ

Styles

2つ目は、スタイルで選ぶ方法です。

「Stories by Freepik」 のイラストには、5つのスタイルがあります。

  • Rafiki
  • Bro
  • Amico
  • Pana
  • Cuate

トップページの左側に「STYLES」が表示されています。はじめはAll(すべて)になっていますが、スタイル名を選択すれば、スタイルごとに表示できますよ。

それぞれのスタイルを順番に見てみましょう。

Rafiki
Rafiki
Illustration by Stories by Freepik

Bro

Bro
Illustration by Stories by Freepik

Amico

Amico
Illustration by Stories by Freepik

Pana

Pana
Illustration by Stories by Freepik

Cuate

Cuate
Illustration by Stories by Freepik

5つとも同じ「Blog post」というコンセプトのイラストです。スタイルごとに特徴があって、面白いですよね。

タグで選ぶ

Tags

3つ目は、タグで選ぶ方法です。

TAGS」にタグ名が表示されています。自分の探したいキーワードのタグがあれば、クリックしてみましょう。

タグ名に関連するイラストが表示されます。

②カスタマイズする

Customize illustrations

なんと、「Stories by Freepik」 では、イラストをカスタマイズできます。カスタマイズできるのは、背景レイヤーです。

使いたいイラストが決まったら、クリックしてください。カスタマイズをしてみましょう。

この記事では、「Blog post」(Amico)のイラストを使います。

色をカスタマイズ

Change color」のボタンをクリックしてみましょう。

Colors

カラーパレットが出てきました。ここで好きな色を選択し、変更することができます。

背景、レイヤーをカスタマイズ

背景は「BACKGROUND」、レイヤーは「LAYERS」のボタンで切替表示できます。

Background and Layers

上のイラストでは、「LAYERS」の「Device」をクリックしました。PCが消えてしまいましたね。

結構、自由にカスタマイズができます。

※イラストによっては、変更できないものもあります。

③ダウンロードする

カスタマイズが終わったら、いよいよダウンロードです。イラストのファイル形式は、「SVG」「PNG」の2つです。

Download
Download PNG

ブログ記事で使う画像であれば、PNGを選びましょう。「Downlad PNG」をクリックで、ダウンロードできます。

④出典を表記する

attribuition

イラスト画像をダウンロードしたあとに、メッセージが出てきました。

イラストは出典を表記しないとダメだよ、忘れないでね!」と書かれています(たぶん、そんな感じです)

Stories by Freepikのイラスト画像は無料で使うことができますが、出典表記が必要です!

イラストを利用したら、「Illustration by Stories by Freepik」と記載してサイトへのリンクをつけておきましょう。

attribution

Copy and Attribute」をクリックすると、出典表記用のコードをコピーすることができます。

ライセンスについて詳しく知りたい方は、利用規約も確認しておくといいでしょう。

〉〉Stories by Freepikの利用規約

これはすごい!イラストのアニメーション化

Illustration by Stories by Freepik

Stories by Freepik では、上にある画像のようなアニメーション化ができます。イラストに動きがあると、見ていて楽しいですよね。

アニメーション化する方法

Animate it

まずは、アニメーション化したいイラストを選びましょう。イラストの右上にある「Animate it」をクリックします。

Elements

動かしたいパーツを「ELEMENTS」で選びます。選択中のパーツは、イラスト上で色が変わります。

Animation

次に、パーツの動きを選びます。「ENTRANCE」「LOOPING」のリストの中から好きなものをクリックしてください。

スライドインしたり、クルクルと回ったり、さまざまな動きを割り当てることができます。

Reset Randomize play button

プレビューを表示する場合は、右上にある再生ボタンをクリックします。リセットやランダムに動きをつけることもできます。

  • Reset=リセット
  • Randomize=ランダムに動きをつける
  • ▶=プレビュー
Download animation

アニメーションのカスタマイズが終わったら、「Export」をクリックしましょう。ダウンロードページへ移動します。

GIF」「Video」またはHTMLファイルとしてダウンロードできます。HTMLコードはコピーもできるようになっていますよ。

あなたのサイトにストーリーを!

今回は、イラスト画像サイト「Stories by freepik」をご紹介しました。

出典表記はしないといけませんが、クオリティの高いイラストを無料で使えるのは嬉しいですよね。

バリエーションも豊富でとても使いやすいサイトです。ブログ記事などのグレードアップにぴったりですね。

いろいろなカスタマイズができるので、人とは違ったイラストを使いたいという方にもいいかもしれません。

わたしは、Stories by Freepik に出会ってから、イラスト選びが楽しくなりました。特に、アニメーション化が面白いので、おすすめです!

〉〉Stories by Freepikへアクセス!

Illustration by Stories by Freepik

こちらの記事もおすすめです

あわせて読みたい
完全無料で使えるイラスト素材サイトunDraw【商用利用、色変更可】 完全無料!商用利用可能のイラスト画像サイト「unDraw」について解説します。モダンなデザインのイラストが多く、とても使いやすいですよ。
あわせて読みたい
ブロガー必見!無料の写真素材をまとめて検索できるサイト「O-DAN」 無料写真素材の検索サイト「O-DAN」。無料で商用利用可能な写真をまとめて検索することができます。写真を探すのに時間がかかってしまう方へおすすめです。
アナログ子
「アナログな自分から変わりたい」アナログ子です。機械オンチで、よく物を壊します。ブログ、WordPress、ライティングなどの勉強中。

気になったこと、良かったことなどを記事にまとめています。好きな食べものは「焼いも」

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URL Copied!

コメント

コメントする

目次
閉じる