更新日: 2016年10月3日

現役WEBデザイナー8人が教える即実践で使える素材集&情報サイト33選

WEBサイトを作るときに、必ず必要になるのが画像素材ですね。

WEBサイトを制作する時に大切なのは、配色のバランスはもちろんですが、素材の良さで天と地ほどWEBサイトの魅力に差がでるので、素材選びがとても重要になります。
そこで、今回現役デザイナー8人が、本気で選んだ実践で活用できる素材サイトやトレンドをキャッチするための情報サイトをご紹介しようと思います。

現役デザイナーが実践で活用している
素材集やトレンドキャッチサイト33選

日本の高画質写真素材

GIRLY DROP 無料商用可

GIRLY DROP

サイトにある画像例

IMG_3047

IMG_5

IMG_1172

女性向けサービスと相性良い素材サイトになります。
かわいい&おしゃれな雑貨や人物の写真素材が無料でDL可能で、クレジット不要、商用利用可ですので、とても使いやすいサイトになります。

URL:http://girlydrop.com/

Ramica 無料商用可

Ramica

サイトにある画像例

photo_048

photo_055

photo_014

こちらも女性向けサービスとの相性の良いサイトになります。
おしゃれでレトロな風景写真が多く、インスタで加工しているような画像を探している方におすすめなサイトになります。

URL:http://www.ramica.net/

写真AC 無料商用可

写真AC

サイトにある画像例

6c5e92fc14672d907f473aa2041745ba_s

f9e326d87748b37fa8ea82da1608c568_s

4589b40b9674046e4f434d827cb5dfb4_s

無料素材集として有名なサイトです。
商用利用可能ですので、気軽に多くの写真を使うことができます。大きい画像をダウンロードする場合には、会員登録が必要ですが、こちらも無料です。
とりあえず、フリー素材を探している方はこちらのサイトから探し始めるのをおすすめします。

URL:http://www.photo-ac.com/

PAKUTASO 無料商用可

PAKUTASO

サイトにある画像例

SAYA160312500I9A3721_TP_V

OMG151018250I9A2443_TP_V

OZP88_jojopose05_TP_V

無料で使える素材集!素材は9000枚を超えており、会員登録しなくても高画質画像をダウンロードできます。
企業などとコラボしており、ドラマ・アニメのシーンを実写で再現しているなど、面白く使える画像が多いです。

URL:https://www.pakutaso.com/

PIXTA 有料商用可

PIXTA

サイトにある画像例

pixta_16544761_S

pixta_15554346_S

pixta_12938313_S

日本のWEBサイト向けの素材集サイトです。
国内でも圧倒的に写真数が多いので、あらゆる用途のサイトで活躍してくれる素材集サイトです。ほとんどの画像が有料ですが、一部無料画像もあります。頻繁に素材を探す方は、定額制プランがおすすめです。

URL:https://pixta.jp/

GATAG無料商用可

GATAG

サイトにある画像例

3704435355_4fb088878e_o

gahag-0056413747-1

gahag-0091777386-1

自然な風景や動物や人物などの高画質画像が無料でダウンロードできるサイトです。
各写真に、評価が付いており、迷ったら一つの基準にもなります。検索機能も日本語対応していますので、使いやすい素材サイトになります。
URL:http://www.gatag.net/

フード・フォト 無料商用可

フード・フォト

食べ物に特化した素材サイトです。
あらゆる食べ物の写真が揃っていますので、食べ物系の素材が必要になった場合、まずこのサイトを利用するのをおすすめします。基本無料ですが、利用用途については写真毎に異なりますので、確認しながら利用しましょう。

URL:https://food.foto.ne.jp/

アマナイメージズ有料商用可

アマナイメージズ

国内最高クラスと言っていいほど綺麗な素材が集まっているサイトです。
テレビ番組内の素材にも使える写真があったり、ほぼすべてのニーズに答えてくれる素材サイトです。ただし、画像は有料でお値段もそこそこしますので、ハイクオリティな画像を追求するような、サイトに利用するのがおすすめです。

URL:http://amanaimages.com/

海外の高画質写真素材

PEXELS無料商用可

pexels

サイトにある画像例

pexels-photo-24499

pexels-photo-168217

pexels-photo-168608

世界中の高品質な無料写真(CC0ライセンス)が揃っているストックフォトサービスです。
検索機能が優秀なので、イメージしている写真がすぐに見つかります。
また、UIもシンプルで使いやすいので、オススメです!

URL:https://www.pexels.com/

Barn Images無料商用可

BARN IMAGES

サイトにある画像例

Photo by Roman Drits / http://barnimages.com/

http://barnimages.com/

海外旅行系のサイトにピッタリな素材集サイトです。
アメリカ・イギリス・イタリア・ポルトガルなどの旅行者目線の風景写真が多く、高画質で欧米感を出せる写真が沢山あります。ただし、屋内の写真は少なめなので、風景で迷っている方向けです。

URL:http://barnimages.com/

CUPCAKE無料商用可

CUPCAKE

サイトにある画像例

IMG_1896-1200x800

IMG_6004-1200x800

IMG_0205-1200x800

スウェーデン在住の写真家が撮った写真サイトです。
写真がすでに加工されており、雰囲気がとても良い背景写真が多いので、加工無しでそのままWEBサイトに利用することができます。

URL:http://cupcake.nilssonlee.se/

Realistic Shots無料商用可

Reakistic Shots

サイトにある画像例

0210

0225

0249

毎週画像が追加され更新されているサイトになります。
小物などの写真も多く、ちょっとしたスマホやパソコンやインテリアなどの写真を探している方には使いやすいサイトになります。

URL:http://realisticshots.com/

FancyCrave無料商用可

FANCYCRAVE

サイトにある画像例

tumblr_o86s1sCI1T1ted1sho1_1280

tumblr_oav8td1dpH1ted1sho1_1280

28458680631_a7519fe80d_o

カテゴリー分けがしっかりされており、高画質写真を探しやすいサイトです。
なかなか普段見ないような角度や建物や風景の写真が多く掲載されているのが特徴的なサイトですので、ちょっと変わった写真を使い方向けになります。

URL:FancyCrave

MMT無料商用可

MMT

サイトにある画像例

P6251003

P5070288

P3310002

花や自然といった写真が多く、海外の植物や花の写真が欲しいと思ったら、写真はすべて高画質なので、とても使いやすく、花の写真が欲しいと思ったら一度探してみるといいサイトです。

URL:http://mmtstock.com/

freely photos無料商用可

freely

サイトにある画像例

freely-10307

freely-10272

freely-10185

ちょっと変わった画像を探している方におすすめなサイトです。普段見ないアングルやプレゼンなどで変わった背景を使いたい場合時などに利用することが多いサイトです。
毎週更新されているため、訪れるだけでも楽しいサイトです。

URL:http://freelyphotos.com/

tookapic無料商用可

tookapic

サイトにある画像例

d95d23f93ff068654e0ef5213c5c7836

5a331cf6cd97c6716b7776b226248bb3

3f08325e97d745a14c308b3e6c95369a

フォトグラファー参加型の写真サイトになります。
気軽にアプリからでも投稿できるサイトになっているのですが、プロの写真家も参加しているため写真のクオリティーは素晴らしいです。無料と有料の素材がありますので、選ぶ際には注意が必要です。

URL:https://tookapic.com

Free Nature Stock無料商用可

Free Nature Stock

サイトにある画像例

tumblr_ocqps9qmXd1u7ns0go1_1280

579

tumblr_oawfa2i05B1u7ns0go1_1280

自然の高画質写真を集めたサイトになります。
あらゆる自然の風景の写真があるため、背景素材としても使え、ほぼ毎日更新されているため、背景素材で風景を使いたい方におすすめのサイトです。
サイトのソースコードをみると、コメントで自然のAA(アスキーアート)が書かれているのも面白いです。

URL:http://freenaturestock.com/

ここまで紹介したのは、主に写真サイト系でしたが、ここからは、アイコンやイラストなど実践で使えるサイト集を紹介していこうと思います。

アイコンやイラストサイト集

ヒューマンピクトグラム無料商用可

ヒューマンピクトグラム

シンプルな人間のピクトグラムが無料でダウンロードできます。ビジネスに使える面白系など、バリエーションが多く使いやすくておすすめです。
AIデータもダウンロードできるので、好きな形に改変も可能です。

URL:http://pictogram2.com/

シルエットデザイン無料商用可

シルエットデザイン

シルエットの素材が商用利用可能で使えるため、汎用性が高い素材サイトです。
とても多いジャンルのシルエットが揃っており、ランキングなどで王冠アイコンを使いたい時や車のアイコンなどを利用したいときによく使っています。

URL:http://kage-design.com/

やじるし素材天国「矢印デザイン」無料商用可

やじるし素材天国「矢印デザイン」

矢印デザインは、TopeconHeroesダーヤマが制作した矢印素材をひたすらストックするオンライン素材集です。
このサイトにストックしたやじるし素材はWEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。
イラストレーターのデータ、png、jpgとあって使い勝手が良いです。

URL:http://yajidesign.com/

フキダシデザイン無料商用可

吹き出し素材専門サイト「フキダシデザイン」

フキダシデザインは、TopeconHeroesが制作したフキダシ素材をひたすらアーカイブするサイトです。
このサイトにアーカイブした吹き出しは、WEB制作や会議の資料、企画書などのデザイン素材として利用可能です。

URL:http://fukidesign.com/

FLAT ICON無料商用可

flaticon

フラットデザインサイト向けのアイコンがダウンロードできるサイトです。
検索は、英語でしなければなりませんが、あらゆるアイコンが揃っているため、非常に便利です。アイコンに迷ったらまずこのサイトを見るのをおすすめします。

URL:http://www.flaticon.com/

ICOOON MONO無料商用可

ICOON MONO

6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO。
サイズも小さいものから大きなものまで、png、jpg、svgでダウンロードできるので、デザイナーもデザイナーじゃない人も使いやすいサイトになります。

URL:http://icooon-mono.com/

Sketch App Sources無料商用可

Sketch App Sources

Sketchを使っている人におすすめの無料素材サイト。(一部有料もあり)
sketchで使いやすい形式で、世界中のクリエイターが素材を公開しており、iOS,AndroidなどのUI素材も多数あります。

URL:http://www.sketchappsources.com/

freepik無料商用可

freepik

数百万以上の無料ベクター、PSD、写真と無料アイコンがダウンロードできるサイトです。
クオリティがかなり高くフラットなデザイン素材が多いため、フラットデザインで作っているサイトにおすすめなサイトです。

URL:http://jp.freepik.com/

ここまでが、写真や素材を集めるために利用しているサイトになります。
デザインをする上でさらに、写真や素材の魅力を引き立てるために、フォント選びが大切になってきます。
そんな時に、利用しているサイトをここから紹介したいと思います。

ブラウザ上で一気にフォントを確認できるサイト

wordmark

wordmark

自分のPCにインストールされているフォントをブラウザ上で一気に確認できるサイトです。
Photoshopなどでデザインをしているときに、フォント選びに困ることがあり、一覧で見られるためとても便利なサイトです。

URL:http://wordmark.it/

FONT VIEW

FONT VIEW

こちらのサイトも、自分のPCに入っているフォントをブラウザ上で確認できるサービスです。
背景が白と黒に分かれているため、確認する際に、雰囲気が分かるので、黒い背景の場合はこちらのサイトを利用するのがおすすめです。

URL:http://fontview.info/

ここからは、現役デザイナーが流行やトレンドに遅れを取らないために、どこから情報をキャッチしているのかを、ご紹介したいと思います。

現役デザイナーが情報をキャッチするために利用しているサイト

Webクリエイターボックス

Web クリエイターボックス

Photoshopやillustratorなどの使い方や、デザインの基本となる事などを分かりやすく解説してあり、ほぼ毎日更新されているため、チェックしているサイトです。

URL:http://www.webcreatorbox.com/

コリス

コリス

CSSやjQueryなどの使い方や、WEBにすぐ実践できる技術情報が満載なので、アイディアや表現に困った際や、訪れるサイトです。

URL:http://coliss.com/

UX MILK

UX MILK

デザイナーにとって大切なユーザーを目的の場所まで導くUX
そのアイディアや考え方などの情報がまとまっているサイトです。
デザインやプログラミング要素も多く情報配信していますので、毎日チェックしています。

URL:http://uxmilk.jp/

LIG

LIG

WEBデザインについてはもちろんなのですが、デザイナーとして大切な事や、マーケティング系の情報も詳しく掲載されていますので、
デザイン以外の知識を身につけるために、見ておくと良いサイトです。

URL:https://liginc.co.jp/

VASILY DESIGN

VASILY DESIGN

VASILY社のデザイナーさん達が、トレンドを発信しています。
UIの話や自分が思っていることを記事として発信していますので、共感できるポイントや参考になるポイントが多いです。

URL:https://medium.com/vasily-design

Webディレクターズマニュアル

Webディレクターズマニュアル

WEBディレクターに必要な要素がまとまっており、どうのように表現したらデザイナーに伝わりやすいのかなどが書かれているため、デザイナーも読んでおくといいサイトです。

URL:http://web-d.navigater.info/

色々なサイトを紹介しましたが、各サイト毎に特徴があるため、全部見ていると時間が掛かってしまいます。
ここからは、今まで実践でWEBデザインをしてきて、ここだけ抑えておけばとりあえずなんとかなる!といったサイトをご紹介します。

ここだけ見ておけば、
WEBサイト制作時の素材に困らない!

写真系 PIXTA,写真AC
この2サイトを抑えておけば、写真素材で困ることはあまりりません。
迷った場合は、まず上記2サイトから素材を探すのをおすすめします。
素材系 ICOOON MONO
アイコン素材は、WEBサイト制作時によく使う事になりますので、
上記サイトを抑えておけば、アイコンに困ることはありません。
情報系 コリスUX MILK
WEBで使えるCSSの書き方やjQueryのモーションデモがあるため、
すぐに実践に活用できる情報が満載です。トレンドなどの情報も配信しているため、
日頃からチェックしておくと良いサイトです。

上記のサイトだけでも抑えておけば、WEB制作時の素材などに困ることは少ないです。
WEBデザインに不慣れな場合は、まず上記サイトから自分が探している素材を検索してみることをおすすめします。

まとめ

いかがでしたでしょうか。素材サイトは国内・海外にたくさんあり、どこから探したらいいのか迷うことも多いと思いますが、今回紹介したサイト内で用途ごとに使い分け、素早く欲しい素材を見つけられる参考になればと思います。

  • 貸金業法について
  • 消費行動診断・家計管理診断
  • 一般社団法人 全国銀行協会