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サイトを作成してみましょう!

 

自分でもフラットなデザインを作りたいなら…

ネット上にはフリーのフラットな素材がたくさんありますが、あなたも自分で作って見たいと思いませんか?
でも、初めて作るにはなかなか抵抗があるはずです。

そこで、初心者でもフラットなイラストが作れるような参考書を2冊紹介します。

1冊目は、こちらの「“主線なし”イラストの描き方」という本です。
こちらはタイトル通り、主線なしのイラストの描き方が紹介されており、フラットとは少し違いますが、可愛らしいイラストの描き方が学べる本になります。


イラストを学んだだけでは、実際には作れません。
イラレを使うことによって、フラットなイラストの制作ができます。
ことらの本はそのイラレの使い方を基礎から学べる本です。
ぜひ、あなたもフラットなイラスト制作にチャレンジして見てくださいね!


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

関連記事

  1. ART

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

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

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

    Others

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

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

  3. 自然光で撮った人形と本とカメラとクッキー

    Others

    ブツ撮りをしてみよう Vol.1〜自然光ライティング

    最近はSNSで、自分のお気に入りの物や、食べ物をスマホやデジカメで撮っ…

  4. DTP

    画像に文字を入れるコツ

    皆さんはバナー作成などで写真に文字を入れる際、文字が見えづ…

  5. Illustrator

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

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

  6. Others

    「WhatTheFont 」でフォントをさがしてみよう

    皆さんは「このデザインで使われているフォントが使いたい」と困った経験は…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP