更新日: 2016年9月16日
現役WEBデザイナー8人が教える即実践で使える素材集＆情報サイト33選
WEBサイトを作るときに、必ず必要になるのが画像素材ですね。
WEBサイトを制作する時に大切なのは、配色のバランスはもちろんですが、素材の良さで天と地ほどWEBサイトの魅力に差がでるので、素材選びがとても重要になります。
そこで、今回現役デザイナー8人が、本気で選んだ実践で活用できる素材サイトやトレンドをキャッチするための情報サイトをご紹介しようと思います。
現役デザイナーが実践で活用している
素材集やトレンドキャッチサイト33選
日本の高画質写真素材
GIRLY DROP
サイトにある画像例
女性向けサービスと相性良い素材サイトになります。
かわいい＆おしゃれな雑貨や人物の写真素材が無料でDL可能で、クレジット不要、商用利用可ですので、とても使いやすいサイトになります。
Ramica
サイトにある画像例
こちらも女性向けサービスとの相性の良いサイトになります。
おしゃれでレトロな風景写真が多く、インスタで加工しているような画像を探している方におすすめなサイトになります。
写真AC
サイトにある画像例
無料素材集として有名なサイトです。
商用利用可能ですので、気軽に多くの写真を使うことができます。大きい画像をダウンロードする場合には、会員登録が必要ですが、こちらも無料です。
とりあえず、フリー素材を探している方はこちらのサイトから探し始めるのをおすすめします。
PAKUTASO
サイトにある画像例
無料で使える素材集！素材は9000枚を超えており、会員登録しなくても高画質画像をダウンロードできます。
企業などとコラボしており、ドラマ・アニメのシーンを実写で再現しているなど、面白く使える画像が多いです。
PIXTA
サイトにある画像例
日本のWEBサイト向けの素材集サイトです。
国内でも圧倒的に写真数が多いので、あらゆる用途のサイトで活躍してくれる素材集サイトです。ほとんどの画像が有料ですが、一部無料画像もあります。頻繁に素材を探す方は、定額制プランがおすすめです。
GATAG
サイトにある画像例
自然な風景や動物や人物などの高画質画像が無料でダウンロードできるサイトです。
各写真に、評価が付いており、迷ったら一つの基準にもなります。検索機能も日本語対応していますので、使いやすい素材サイトになります。
URL:http://www.gatag.net/
フード・フォト
食べ物に特化した素材サイトです。
あらゆる食べ物の写真が揃っていますので、食べ物系の素材が必要になった場合、まずこのサイトを利用するのをおすすめします。基本無料ですが、利用用途については写真毎に異なりますので、確認しながら利用しましょう。
アマナイメージズ
国内最高クラスと言っていいほど綺麗な素材が集まっているサイトです。
テレビ番組内の素材にも使える写真があったり、ほぼすべてのニーズに答えてくれる素材サイトです。ただし、画像は有料でお値段もそこそこしますので、ハイクオリティな画像を追求するような、サイトに利用するのがおすすめです。
海外の高画質写真素材
PEXELS
サイトにある画像例
世界中の高品質な無料写真（CC0ライセンス）が揃っているストックフォトサービスです。
検索機能が優秀なので、イメージしている写真がすぐに見つかります。
また、UIもシンプルで使いやすいので、オススメです！
Barn Images
サイトにある画像例
海外旅行系のサイトにピッタリな素材集サイトです。
アメリカ・イギリス・イタリア・ポルトガルなどの旅行者目線の風景写真が多く、高画質で欧米感を出せる写真が沢山あります。ただし、屋内の写真は少なめなので、風景で迷っている方向けです。
CUPCAKE
サイトにある画像例
スウェーデン在住の写真家が撮った写真サイトです。
写真がすでに加工されており、雰囲気がとても良い背景写真が多いので、加工無しでそのままWEBサイトに利用することができます。
URL:http://cupcake.nilssonlee.se/
Realistic Shots
サイトにある画像例
毎週画像が追加され更新されているサイトになります。
小物などの写真も多く、ちょっとしたスマホやパソコンやインテリアなどの写真を探している方には使いやすいサイトになります。
URL:http://realisticshots.com/
FancyCrave
サイトにある画像例
カテゴリー分けがしっかりされており、高画質写真を探しやすいサイトです。
なかなか普段見ないような角度や建物や風景の写真が多く掲載されているのが特徴的なサイトですので、ちょっと変わった写真を使い方向けになります。
URL:FancyCrave
MMT
サイトにある画像例
花や自然といった写真が多く、海外の植物や花の写真が欲しいと思ったら、写真はすべて高画質なので、とても使いやすく、花の写真が欲しいと思ったら一度探してみるといいサイトです。
freely photos
サイトにある画像例
ちょっと変わった画像を探している方におすすめなサイトです。普段見ないアングルやプレゼンなどで変わった背景を使いたい場合時などに利用することが多いサイトです。
毎週更新されているため、訪れるだけでも楽しいサイトです。
tookapic
サイトにある画像例
フォトグラファー参加型の写真サイトになります。
気軽にアプリからでも投稿できるサイトになっているのですが、プロの写真家も参加しているため写真のクオリティーは素晴らしいです。無料と有料の素材がありますので、選ぶ際には注意が必要です。
Free Nature Stock
サイトにある画像例
自然の高画質写真を集めたサイトになります。
あらゆる自然の風景の写真があるため、背景素材としても使え、ほぼ毎日更新されているため、背景素材で風景を使いたい方におすすめのサイトです。
サイトのソースコードをみると、コメントで自然のAA（アスキーアート）が書かれているのも面白いです。
URL:http://freenaturestock.com/
ここまで紹介したのは、主に写真サイト系でしたが、ここからは、アイコンやイラストなど実践で使えるサイト集を紹介していこうと思います。
アイコンやイラストサイト集
ヒューマンピクトグラム
シンプルな人間のピクトグラムが無料でダウンロードできます。ビジネスに使える面白系など、バリエーションが多く使いやすくておすすめです。
AIデータもダウンロードできるので、好きな形に改変も可能です。
シルエットデザイン
シルエットの素材が商用利用可能で使えるため、汎用性が高い素材サイトです。
とても多いジャンルのシルエットが揃っており、ランキングなどで王冠アイコンを使いたい時や車のアイコンなどを利用したいときによく使っています。
やじるし素材天国「矢印デザイン」
矢印デザインは、TopeconHeroesダーヤマが制作した矢印素材をひたすらストックするオンライン素材集です。
このサイトにストックしたやじるし素材はWEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。
イラストレーターのデータ、png、jpgとあって使い勝手が良いです。
フキダシデザイン
フキダシデザインは、TopeconHeroesが制作したフキダシ素材をひたすらアーカイブするサイトです。
このサイトにアーカイブした吹き出しは、WEB制作や会議の資料、企画書などのデザイン素材として利用可能です。
FLAT ICON
フラットデザインサイト向けのアイコンがダウンロードできるサイトです。
検索は、英語でしなければなりませんが、あらゆるアイコンが揃っているため、非常に便利です。アイコンに迷ったらまずこのサイトを見るのをおすすめします。
ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO。
サイズも小さいものから大きなものまで、png、jpg、svgでダウンロードできるので、デザイナーもデザイナーじゃない人も使いやすいサイトになります。
Sketch App Sources
Sketchを使っている人におすすめの無料素材サイト。（一部有料もあり）
sketchで使いやすい形式で、世界中のクリエイターが素材を公開しており、iOS,AndroidなどのUI素材も多数あります。
URL:http://www.sketchappsources.com/
freepik
数百万以上の無料ベクター、PSD、写真と無料アイコンがダウンロードできるサイトです。
クオリティがかなり高くフラットなデザイン素材が多いため、フラットデザインで作っているサイトにおすすめなサイトです。
ここまでが、写真や素材を集めるために利用しているサイトになります。
デザインをする上でさらに、写真や素材の魅力を引き立てるために、フォント選びが大切になってきます。
そんな時に、利用しているサイトをここから紹介したいと思います。
ブラウザ上で一気にフォントを確認できるサイト
wordmark
自分のPCにインストールされているフォントをブラウザ上で一気に確認できるサイトです。
Photoshopなどでデザインをしているときに、フォント選びに困ることがあり、一覧で見られるためとても便利なサイトです。
FONT VIEW
こちらのサイトも、自分のPCに入っているフォントをブラウザ上で確認できるサービスです。
背景が白と黒に分かれているため、確認する際に、雰囲気が分かるので、黒い背景の場合はこちらのサイトを利用するのがおすすめです。
ここからは、現役デザイナーが流行やトレンドに遅れを取らないために、どこから情報をキャッチしているのかを、ご紹介したいと思います。
現役デザイナーが情報をキャッチするために利用しているサイト
Webクリエイターボックス
Photoshopやillustratorなどの使い方や、デザインの基本となる事などを分かりやすく解説してあり、ほぼ毎日更新されているため、チェックしているサイトです。
URL:http://www.webcreatorbox.com/
コリス
CSSやjQueryなどの使い方や、WEBにすぐ実践できる技術情報が満載なので、アイディアや表現に困った際や、訪れるサイトです。
UX MILK
デザイナーにとって大切なユーザーを目的の場所まで導くUX
そのアイディアや考え方などの情報がまとまっているサイトです。
デザインやプログラミング要素も多く情報配信していますので、毎日チェックしています。
LIG
WEBデザインについてはもちろんなのですが、デザイナーとして大切な事や、マーケティング系の情報も詳しく掲載されていますので、
デザイン以外の知識を身につけるために、見ておくと良いサイトです。
VASILY DESIGN
VASILY社のデザイナーさん達が、トレンドを発信しています。
UIの話や自分が思っていることを記事として発信していますので、共感できるポイントや参考になるポイントが多いです。
URL:https://medium.com/vasily-design
Webディレクターズマニュアル
WEBディレクターに必要な要素がまとまっており、どうのように表現したらデザイナーに伝わりやすいのかなどが書かれているため、デザイナーも読んでおくといいサイトです。
URL:http://web-d.navigater.info/
色々なサイトを紹介しましたが、各サイト毎に特徴があるため、全部見ていると時間が掛かってしまいます。
ここからは、今まで実践でWEBデザインをしてきて、ここだけ抑えておけばとりあえずなんとかなる！といったサイトをご紹介します。
ここだけ見ておけば、
WEBサイト制作時の素材に困らない！
| 写真系 | PIXTA,写真AC この２サイトを抑えておけば、写真素材で困ることはあまりりません。 迷った場合は、まず上記2サイトから素材を探すのをおすすめします。 |
|---|---|
| 素材系 | ICOOON MONO アイコン素材は、WEBサイト制作時によく使う事になりますので、 上記サイトを抑えておけば、アイコンに困ることはありません。 |
| 情報系 | コリス、UX MILK WEBで使えるCSSの書き方やjQueryのモーションデモがあるため、 すぐに実践に活用できる情報が満載です。トレンドなどの情報も配信しているため、 日頃からチェックしておくと良いサイトです。 |
上記のサイトだけでも抑えておけば、WEB制作時の素材などに困ることは少ないです。
WEBデザインに不慣れな場合は、まず上記サイトから自分が探している素材を検索してみることをおすすめします。
まとめ
いかがでしたでしょうか。素材サイトは国内・海外にたくさんあり、どこから探したらいいのか迷うことも多いと思いますが、今回紹介したサイト内で用途ごとに使い分け、素早く欲しい素材を見つけられる参考になればと思います。
