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

フラットデザインが簡単に作れるフリー素材イラストサイト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. キーマカレー

    Others

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

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

  2. Others

    ショートカットキーで作業効率アップ!

    操作をする時、あなたはマウスを使っていますか?キーボードを使っています…

  3. Illustrator

    【挑戦】ペンツールの練習 1分間であなたはできる?

    ペンツールを使って、完成できますか?挑戦してみてください!3つ…

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

    Others

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

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

  5. ART

    木でQRコードをつくった!

    木片を見て、ふと思った。「木の面の陰影で何かできないか…」…

  6. food pic

    Others

    革命!?料理の写真を美味しそうに加工できるサイト

    手作りのご飯や、外食をした際に料理の写真を撮る人は多いのではないでしょ…

Language

CodeCamp

最近の記事

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

    How to Map Symbols to 3D Objects
  2. InDesign

    身近な話題をインデザインで新聞にしてみよう(その③段落スタイル)
  3. Illustrator

    How to Warp Text with Envelope Distort
  4. Illustrator

    再配色を使って色を変えてみよう
  5. Illustrator

    Illustratorでスピログラフを作ってみよう
PAGE TOP