Webデザイン用フリー素材集+デザイン参考用サイト15選!

Webデザイン用フリー素材集+デザイン参考用サイト15選!

Webデザインをする際はどのような手順でデザインを完成させていくでしょうか。

単にWebデザインと言っても、全体的なデザインの場合もあれば、バナーやパーツだけの場合もあるかと思います。
また、急ぎ作成しなくてはいけないという場面も多々あるかと思います。
どのような場面でも、そのデザイナーが持っている知識・技術・材料がどれだけ多いかで結果が左右されると思います。

ここでは、僕が実際に利用していて、他のウェブデザイナーが利用しているのも見たことのあるサイトをご紹介します。

Webデザインをする際に便利なベクター・写真素材から、背景画像、デザインの参考にするためのまとめサイトまで

ベクター素材

下記は素材の二次配布や素材そのものを販売することを除いて、商用利用もOKのベクター素材を提供しているサイトです。
ウェブだけでなく、資料などでも活躍すると思いますよ。

商用フリーで使える影絵素材サイト シルエットデザイン

スクリーンショット 2014-12-17 22.26.25

何度お世話になっていることでしょう!シルエットのベクター素材はカスタマイズもしやすく重宝しています。種類が豊富で欲しいシルエットは大体手に入れられます。

http://kage-design.com/

All-Silhouettes.com – Download Free Vector Files: Silhouettes, Outlines, Cutouts, Shapes

スクリーンショット 2014-12-17 22.27.01

こちらもシルエットのベクター素材を提供しているサイトです。
日本のシルエットデザインさんより外国風な感じです。

http://all-silhouettes.com/

human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)

スクリーンショット 2014-12-17 22.27.20

非常口でよく見るあのピクトグラムの人をベースに様々なピクトグラムを作成し提供しているサイトです。

http://pictogram2.com/

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

スクリーンショット 2014-12-17 22.27.41

強調したい時、テンポを変えたい時にあると便利な吹き出し。そのままのサイズでは使えなくても調整できるので使いやすいです。

http://fukidesign.com/

デザイン枠、飾り罫素材専門サイト「フレームデザイン」

スクリーンショット 2014-12-17 22.28.03

ちょっと飾りをつけたい時やアイキャッチにタイトルを目立たせたい時などに重宝するデザイン枠を提供しているサイトです。

http://frames-design.com/

写真素材

アイキャッチや雰囲気作りには写真は不可欠ですよね。
こちらも素材の二次配布や素材そのものを販売することを除いて、商用利用OKです。

Unsplash | Free High-Resolution Photos

スクリーンショット 2014-12-17 22.28.47

なんといってもハイクォリティ。背景に大きくいれても大丈夫な高画質・高品質な画像ばかりです。
10日おきに10枚の画像を公開しています。

https://unsplash.com/

picjumbo — totally free photos for your commercial & personal works

スクリーンショット 2014-12-17 22.29.49

こちらも高品質な画像を提供しています。
更新も毎日されており、どれも手を入れることなく使える品質です。
光の扱いが綺麗な写真が多いですよ。

http://picjumbo.com/

Imagebase: Free Stock Photography

スクリーンショット 2014-12-17 22.30.13

カテゴリーごとに分かれていて、見やすい探しやすいサイトです。

http://www.imagebase.net/

写真素材 足成【フリーフォト、無料写真素材サイト】

スクリーンショット 2014-12-17 22.30.35

日本では有名なサイトですね。
数が多いので、他サイトで見つからなかった時に僕は利用しています。

http://www.ashinari.com/

ぱくたそ – フリー写真素材・無料ダウンロード

スクリーンショット 2014-12-17 22.30.56

パロってみたりとかなり独自路線を行っているユーモアたっぷりのサイト。
高品質なのでハマったらかなり使えると思います。

http://www.pakutaso.com/

アイコン・バックグラウンド素材

パーツや背景画像を提供しているサイトです。
こちらも商用利用可です。

Subtle Patterns | Free textures for your next web project.

スクリーンショット 2014-12-17 22.31.30

背景画像を提供しているサイトです。
cssでの設定時にrepeatすることで綺麗に表示できるようになっています。
サイト内の背景画像内のプレビューボタンを押すと、サイトの背景が実際にその背景画像に変更されるので、確認も簡単で便利です。
センスが良いのでおすすめです。
利用の際はcss内に、

と明示する必要があります。
詳しくは、 http://subtlepatterns.com/about/

http://subtlepatterns.com/

フリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」

その名の通りドット素材を提供しているサイトです。
ハマれば使わない手は無いでしょう。

スクリーンショット 2014-12-17 22.31.50

http://dots-design.com/

ウェブサイトまとめサイト

デザインを始める前に、他サイトのデザインを参考にし、より良いデザインを考えることは大事だと思います。下記サイトは秀逸なデザインが揃うまとめサイトです。

Awwwards – Website Awards – Best Web Design Trends

スクリーンショット 2014-12-17 22.32.10

ウェブサイトのアワードサイトです。閲覧しているユーザーも投票できるようになっており、また、審査に出すのにも費用が発生するため先進的なデザインのクォリティの高いサイトが揃っています。

http://www.awwwards.com/

ARTNOC.COM クリエイティブなWebデザインの参考まとめサイト

スクリーンショット 2014-12-17 22.32.34

カテゴリごとにまとめられており目的のテイストのサイトに辿り着きやすいです。
色やレイアウトで検索できるのも便利。

http://www.art-noc.com/

Webデザインの“ブブン”を集めたブブンデザインアーカイブ

スクリーンショット 2014-12-17 22.32.55

ロゴやナビゲーション、フッターなどパーツのデザインを集めたサイト。
パーツデザインの際に参考になります。

http://bubundesignarchive.jp/

色々な要素を組み合わせ、またそれを己が力とするのもデザイナーの能力のうちだと思います。
有効に使ってみてはいかがでしょう。

筆者について

筆者について


1982年、東京下町生まれ。
高校卒業後、アメリカへ留学。その後、「アートが根付いた国では絵だけで食えるのか」を確認するため、ドイツベルリンにてアート活動をおこなう。

日本に戻ってからは、コーディング・オーサリング・プログラミングなんかを経て、ウェブディレクターを肩書きにしておりました。現在は独立し、ブログやサイトの運用を軸に、ウェブサイトの企画提案からデザイン・構築まで手広く活動しております。何でも屋です。

isLog〜イズログ〜では『日々生きること自体が旅』をモットーに、日々の旅を中心に綴っています。

詳しいプロフィールはこちら


feedly

コメントを残す

*