Webデザイナーなら知っておきたい背景フリー素材サイト15選
公開日：
:
Webデザインを考える時に背景をどうするか？と悩む方も多いと思います。そこで今回は webデザイナーの方に役立ちそうな背景画像・動画のフリーサイトをピックアップしてみました。豊富な素材からインスピレーションを感じるアイテムが見つかるといいですね。
Contents
- 1 webデザイナーなら知っておきたい背景フリー素材サイト15選
- 1.1 パターン系背景素材なら「Bg-Patterns」
- 1.2 パターン？イラスト？悩んだ時の「背景素材フリードットコム」
- 1.3 写真系壁紙なら「photo AC」
- 1.4 やさしい色目の壁紙なら「ホームページ 背景画像 壁紙 無料」
- 1.5 チャッチャとパターン背景を探したいなら「Subtle Patterns」
- 1.6 木目調なら「Backgrounds- GraphicBurger」
- 1.7 美しい背景素材が集まる「DBFreebies.co – backgrounds」
- 1.8 パターン素材を極めた「backgrounds ETC」
- 1.9 軽量なパターン素材なら「Squidfingers」
- 1.10 構造系パターン素材なら「texturemate」
- 1.11 ユニーク素材がある「PublicDomainPictures.net」
- 1.12 動画素材 – MOVIETOOLS
- 1.13 動画素材 – Give me free art
- 1.14 動画素材 – MOTION BACKGROUNDS FOR FREE
- 1.15 動画素材 – Free footages
- 2 気にいった画像・動画があった場合のコードについて
- 3 まとめ
webデザイナーなら知っておきたい背景フリー素材サイト15選
パターン系背景素材なら「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 といわれています。
普段、素材探しに悩まされているデザイナーさんの方に少しでも参考にしていただければ幸いです！
関連記事
-
-
もう悩まない！コピペで簡単CSSボタンデザインと便利なジェネレータ8選
ホームページ制作に欠かせない素材、ボタン。少し前までは画像を使って実装する事も多かったこのボタンです
-
-
高品質な素材が使い放題！？ホームページ作成に役立つ無料素材サイトまとめ
ホームページ制作をするときに悩むのが素材。今回の記事では、無料のイラストを使いたかったり写真を使いた
-
-
知らなきゃ損！?リンクの色をお洒落に変えるCSSテクニック！
Webページにて、「リンクの上にカーソルを乗せると色が変わる」デザインを見かけた事はありませんか？こ
-
-
プロ御用達！WEBデザインに役立つデザインツール13選
忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を
-
-
Webデザインの参考にしたい今流行りのフラットデザインサイト15選
2012年に Windows 8、2013 年に iOS 7 がリリースされ、このころを境に一気に
-
-
超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ
ホームページデザインに彩りを添えてくれるグラデーションは、たくさんのホームページで使われていますよね
-
-
イケてるフリー素材が使い放題！？海外の写真素材サイト15選
WEBサイトやホームページの作成に必須なフリー素材ですが、何度も同じサイトを使っ
-
-
Webデザインが苦手な人は要チェック！Bootstrapの基本的な使い方
IT業界を目指している皆さん、デザインに自信はありますか？「デザインは全くの初心者」「デザインセンス
-
-
プログラミング不要！？驚くほど簡単にクールなWEBサイトが作れる、無料のWEB制作ツール7選。
プログラミングが出来なくても驚くほど簡単にWebサイト制作ができるツールをご紹介します。 面倒な事
-
-
定番ボタンからアニメーションまで！ボタン素材サイト14選+α
web サイトの目的を達成するために「ボタン」の存在は非常に大きな意味をもっています。商用サイトであ