Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

フラットデザインが簡単に作れるフリー素材イラストサイト3選

Others

フラットデザインが簡単に作れるフリー素材イラストサイト3選

使用ソフト: IllustratorCS5  

webサイトで良く見かけるフラットデザイン

最近のwebサイトで良く見かける立体感がなく平面でシンプルなデザイン、
通称「フラットデザイン」。過度な装飾を抑えたデザインのため、
自身でイラストを描いて作成するとなると配色等のセンスが問われます。

簡単なようで中々難しいフラットデザインですが、フリー素材で質の高いフラットデザインのイラストをダウンロードできるサイトを3つご紹介します。

どのサイトも会員登録不要、とても簡単にダウンロードできて尚且つ
商用利用可能のサイトとなっています。

 

1.ライナストック

https://www.linustock.com

現役webデザイナーであり、イラストレーターであるWADAさんが運営しているフリー素材サイトです。

シンプルでお洒落なイラストが沢山置いてあります。
線画、カラーレイヤーをEPS形式でダウンロードできるため、加工も簡単に行えます。作成しているwebサイトの雰囲気に合わせてカラーレイヤーのトーンを編集する等して上手く利用するのがコツと言えそうです。

 

①このような画面でダウンロードした後↓

ライナストック使い方1

ライナストック使い方2

 

②illustratorソフトにて、このようにテイストに合わせて加工が可能です。↓

ライナストック使い方3

ライナストックまとめ
・シンプルでお洒落なイラストサイト
・EPS形式、PNG形式でダウンロード可能
・線画レイヤー、カラーレイヤーが存在するので様々なテイストに加工可能

 

2.unDraw

https://undraw.co/illustrations

海外のイラスト素材サイトです。
シンプルなフラットデザインのイラストが多数あり、会社のwebサイト等に挿入する素材としても使用できそうです。

沢山の素材がありますが、海外のサイトなので検索ワードを英語で入力して(例:「写真」なら「picture」のように入力)検索します。

サイト上でベースカラーの変更が可能な点が、こちらのサイトの大きな特徴です。(「#FFFFFF」のようにRGBカラーを手動で入力する事も可能です。)ダウンロード形式はSVG形式とPNG形式があります。SVG形式であれば、ダウンロード後の加工も可能です。

今回の記事のアイキャッチもこちらのサイトからダウンロードしたものを使用しました。

 

①サイトに入ったら↓

unDraw使い方1

 

②こちらでベースカラーを変更し↓

unDraw使い方2

 

③SVG形式のファイルをダウンロード、の順に行いました。↓

unDraw使い方3

unDrawまとめ
・海外のお洒落なイラストサイト
・SVG形式、PNG形式でダウンロード可能
・サイト上でベースカラーの変更が行える

 

3.manypixels

https://www.manypixels.co/gallery/

「unDraw」と同じく海外のイラスト素材サイトです。サイト上でベースカラーの変更が行える点についても「unDraw」と同様です。ベースカラーの変更のみでなく、

「Monochromatic」「Isometric」「Two Color」「Flatline」「Outline」の5つのパターンからイラストを選択する事が可能であるため、webサイトのテイストに合ったイラストを選択できる点も特徴です。ダウンロード形式はSVG形式とPNG形式があります。

 

①Monochromaticの画像パターン

manypixels1

 

②Isometricの画像パターン

manypixels②

 

③Two Colorの画像パターン

manypixels3

 

④Flatlineの画像パターン

manypixels4

 

⑤Outlineの画像パターン

manypixels5

 

manypixelsまとめ
・海外のお洒落なイラストサイト
・5つのテイストからイラストを選択できる
・SVG形式、PNG形式でダウンロード可能
・サイト上でベースカラーの変更が行える

 

まとめ

フラットデザインが簡単に作れるフリー素材イラストサイト3選を紹介しました。
簡単にダウンロードできるイラストを使って、お洒落なwebサイトを作成してみましょう!

 

 

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Mac

    「タブ」を使ってMacのFinderを使いこなす!作業効率格段アップ!

    Macで色々Finderを開くと、何を開いているのか分からなくなったり…

  2. 黄色いバラの花

    Others

    適正露出の写真を撮る・後編(EV値とカメラの設定)

    EV値(露出量)と、絞り・シャッタースピード・ISO感度の関係前回…

  3. Mac

    フリーソフト「Clipy」はコピー&ペーストを保存する画期的ソフト

    テキストをコピー&ペーストするとき、普通はコピーは直前にした一回しか出…

  4. キーマカレー

    Others

    ホワイトバランスを設定して良い色合いの写真を撮る

    ホワイトバランスとは?カメラで撮影した時に、白熱電球の下で撮る…

  5. Others

    デジタルカメラの撮影モードは何を選べばいい?

    デジタルカメラの撮影モード普段はスマホで気軽に写真を撮っていて…

  6. 無料(フリー)の写真素材おすすめサイト! 商用利用も可能

    Others

    無料(フリー)の写真素材おすすめ4サイト! 商用利用も可能

    ブログのアイキャッチ画像やパンフレット、Webサイトで写真を使う機会は…

人気の記事

CodeCamp
  1. Photoshop

    How to Create a Watercolor Painting Effe…
  2. 手描き風のコーヒーの画像

    Photoshop

    写真を手描き風に加工してみよう
  3. Illustrator

    How to Create 3D Designs
  4. Illustrator

    最近使用したフォントの表示を消す方法
  5. Illustrator

    Adding Outlines to Images
PAGE TOP