背景素材サイトならここだ！鉄板サイト15選

2015/08/12 2016/01/19

Webデザインを考える時に背景をどうするか？と悩む方も多いと思います。そこで今回は webデザイナーの方に役立ちそうな背景画像・動画のフリーサイトをピックアップしてみました。豊富な素材からインスピレーションを感じるアイテムが見つかるといいですね。

こちらもご参考までにどうぞ！
ここが最前線！2015年WEBデザイントレンド13選

Contents

パターン系背景素材なら「Bg-Patterns」

Bg-Patterns
素材数／200以上　　ファイル形式／.jpg .png .svg
利用制限／商用OK　　ユーザー登録／不要

気にいった画像があればブラウザ上で自分なりにアレンジして、ダウンロードすることが可能になっています。webデザイナーの TopeconHeroes ダーヤマさんが繰り出す背景画像はどれもファッションな物ばかりです。

パターン？イラスト？悩んだ時の「背景素材フリードットコム」

背景素材フリードットコム
素材数／100以上　　ファイル形式／.png .ai
利用制限／商用OK　　ユーザー登録／不要

背景画像で悩んだ時に参考になるサイトが「背景素材フリードットコム」です。パターンからイラストまで背景画像を網羅しています。サイドバーのカラー・カテゴリーから壁紙を検索することができます。別途有料版の背景素材も用意されています。

写真系壁紙なら「photo AC」

photo AC
素材数／30000以上　　ファイル形式／.jpg
利用制限／ほぼ商用OK　　ユーザー登録／必要

写真ファイルの提供サイト「photo AC」から壁紙用写真ファイルを無料でダウンロードすることができます。イラスト素材も少しありますので、お時間のある時に見ておくと参考になると思います。

やさしい色目の壁紙なら「ホームページ背景画像壁紙無料」

ホームページ　背景画像　壁紙　無料
素材数／100以上　　ファイル形式／.jpg .gif
利用制限／商用OK　　ユーザー登録／不要

「ホームページ背景画像　壁紙　無料」では、やさしい基調の壁紙素材が無料で提供されています。ファイルサイズがどれも軽く、web ページのサイズをコンパクトに収めることができます。

チャッチャとパターン背景を探したいなら「Subtle Patterns」

Subtle Patterns
素材数／400以上　　ファイル形式／.png
利用制限／商用OK　　ユーザー登録／不要

素材をダウンロードする前に、ブラウザ上でプレビューを視聴することが可能です。不要なダウンロードを避けることができ、時間とパケットの節約になります。

木目調なら「Backgrounds- GraphicBurger」

Backgrounds- GraphicBurger
素材数／100以上　　ファイル形式／.jpg .svg
利用制限／ほぼ商用OK　　ユーザー登録／不要

木目調やレンガ調などのパターン素材が豊富に取りそろえられています。ファイルサイズは、3000 × 2000ピクセルなどの大判画像形式となっています。

美しい背景素材が集まる「DBFreebies.co – backgrounds」

DBFreebies.co – backgrounds
素材数／200以上　　ファイル形式／.jpg .png
利用制限／ほぼ商用OK　　ユーザー登録／不要

個人デザイナーが無償提供している壁紙画像をリストアップしたサイトになります。気にいった壁紙があれば、Behance
や MediaFire 、ドロップボックスなどに移動して、ダウンロードするようになります。MediaFire などはダウンロード実行時に広告表示などがあります。

パターン素材を極めた「backgrounds ETC」

backgrounds ETC
素材数／1500以上　　ファイル形式／.jpg
利用制限／商用OK　　ユーザー登録／不要

住宅用の壁紙並みに背景素材がラインナップされています。

軽量なパターン素材なら「Squidfingers」

Squidfingers
素材数／100以上　　ファイル形式／.gif
利用制限／商用OK　　ユーザー登録／不要

1KB以下の軽量なパターン素材が豊富に取り揃えられています。

構造系パターン素材なら「texturemate」

texturemate
素材数／4000以上　　ファイル形式／.jpg
利用制限／商用OK　　ユーザー登録／不要

利用する用途や色（ブルーやピンクなど）などサイドバーを使って目的の壁紙を検索しやすくなっています。炎や鉄など豊富なパターン素材が揃えられています。素材ファイルは、3000 × 2000　ピクセルなどの大判画像形式です。

ユニーク素材がある「PublicDomainPictures.net」

PublicDomainPictures.net
素材数／400以上　　ファイル形式／.jpg
利用制限／商用OK　　ユーザー登録／不要

景色からパターン、フレームまで何でもそろっているサイトになります。ただし、クオリティーやジャンルなどの分別がされていないので、目的としている壁紙を探すのに時間がかかるかもしれません。

動画素材 – MOVIETOOLS

MOVIETOOLS
素材数／200以上　　ファイル形式／.wmv .mov
利用制限／第三者への提供不可　　ユーザー登録／不要

SF系から車系まで多ジャンルな動画がラインナップされています。

動画素材 – Give me free art

Give me free art
素材数／20以上　　ファイル形式／.wmv .mov
利用制限／第三者への提供不可　　ユーザー登録／不要

動画数は少ないですが、一つ一つのクオリティーが高いです。

動画素材 – MOTION BACKGROUNDS FOR FREE

MOTION BACKGROUNDS FOR FREE
素材数／300以上　　ファイル形式／.wmv .mov .avi
利用制限／商用OK　　ユーザー登録／必要

無償と有償のコンテンツが混在しています。

動画素材 – Free footages

Free footage
素材数／100以上　　ファイル形式／.avc .mp4
利用制限／商用OK　　ユーザー登録／不要

画像やアイコンなどの素材を総合的に提供しているサイトになります。背景向けの動画素材も取りそろえられており、空や雲、森や動物など自然系の動画が多く揃えられています。

気にいった画像・動画があった場合のコードについて

HTML での背景指定方法

<body> の下に、

<body style=”background-image: url( ファイル名 .gif );”>

動画の場合は、

<p>サイトのタイトルなど</p>

<video src=”ビデオのファイル名.mov” autoplay loop>

<img src=” 動画のトップ画像ファイル .jpg ” alt=”Placeholder”>

</video>

*動画については CSS でのレイアウト調整要

CSS での背景指定方法

body{ background-image: url( ファイル名 .gif );}

まとめ

いかがでしたでしょうか？良さそうな背景画像・動画は見つかりそうでしょうか？webデザインを考える上では、デザイン性の他にもページのファイルサイズも考慮しなければいけない場合があります。特に動画背景を採用する場合は、3MB以下、理想は 500 KB といわれています。

普段、素材探しに悩まされているデザイナーさんの方に少しでも参考にしていただければ幸いです！

オシママサラ

ライター

フリーライター兼主夫、現在1歳になるわが子のおむつを替えながら PC と向き合う生活❤情報ソースは日本語圏と英語圏！