背景フリー素材サイトならここ!鉄板サイト15選

背景フリー素材サイトならここ!鉄板サイト15選

ブログやメディアなどのWebデザインを考える時に「背景をどうする?」と悩む方も多いと思います。

そこで今回はwebデザイナーの方に役立ちそうな背景画像・動画のフリーサイトを15個ピックアップしてみました。状況に合わせた豊富な素材からインスピレーションを感じるアイテムが見つかるといいですね。

目次
  1. 鉄板サイト15選
  2. パターン系背景素材なら「Bg-Patterns」
  3. パターン?イラスト?悩んだ時の「背景素材フリードットコム」
  4. 写真系壁紙なら「photoAC」
  5. やさしい色目の壁紙なら「ホームページ背景画像壁紙無料」
  6. チャッチャとパターン背景を探したいなら「SubtlePatterns」
  7. 木目調なら「Backgrounds-GraphicBurger」
  8. 美しい背景素材が集まる「DBFreebies.cobackgrounds」
  9. パターン素材を極めた「backgroundsETC」
  10. 軽量なパターン素材なら「Squidfingers」
  11. 構造系パターン素材なら「texturemate」
  12. ユニーク素材がある「PublicDomainPictures.net」
  13. 動画素材MOVIETOOLS
  14. 動画素材Givemefreeart
  15. 動画素材MOTIONBACKGROUNDSFORFREE
  16. 動画素材Freefootages
  17. 気にいった画像・動画があった場合のコードについて
  18. HTMLでの背景指定方法
  19. まとめ

image

鉄板サイト15選

早速鉄板のフリー素材サイトを紹介していきますね。

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

bg-pattrens

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

気にいった画像があればブラウザ上で自分なりにアレンジし、ダウンロードすることが可能。Webサイトのバックグラウンド、紙資料の背景画像として利用もできます。

webデザイナーのTopeconHeroesダーヤマさんが繰り出す背景画像はどれもファッションな物ばかりで素晴らしいですね。

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

背景素材

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

背景画像で悩んだ時に参考になるサイトが「背景素材フリードットコム」です。パターンからイラストまで背景画像を網羅しています。

サイドバーのカラー・カテゴリーから壁紙を検索することができます。別途有料版の背景素材も用意されています。

Webデザインを学習されている方によく読まれています。

写真系壁紙なら「photoAC」

photo-ac

画像出典photoAC
素材数/30000以上  ファイル形式/.jpg
利用制限/ほぼ商用OK  ユーザー登録/必要

写真ファイルの提供サイト「photoAC」から壁紙用写真ファイルを無料でダウンロードすることが可能です。

イラスト素材も少しあるので、時間のある時に見ておくと参考になるでしょう。

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

ホームページ背景画像

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

「ホームページ背景画像壁紙無料」では、やさしい基調の壁紙素材が無料で提供されています。

ファイルサイズがどれも軽く、Webページのサイズをコンパクトに収めることが可能。

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

subtle-patterns

画像出典SubtlePatterns
素材数/400以上  ファイル形式/.png
利用制限/商用OK  ユーザー登録/不要

素材をダウンロードする前に、ブラウザ上でプレビューを視聴することが特徴です。

不要なダウンロードを避けることができ、時間とパケットの節約が可能。

木目調なら「Backgrounds-GraphicBurger」

gtaphic burger

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

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

美しい背景素材が集まる「DBFreebies.cobackgrounds」

dbfreebies

画像出典DBFreebies.cobackgrounds
素材数/200以上  ファイル形式/.jpg .png
利用制限/ほぼ商用OK  ユーザー登録/不要

個人デザイナーが無償提供している壁紙画像をリストアップしたサイトです。美しい素材の前に時間を忘れて眺めてしまうかもしれません。

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

backgrounds-etc

画像出典backgroundsETC
素材数/1500以上  ファイル形式/.jpg
利用制限/商用OK  ユーザー登録/不要

住宅用の壁紙並みに背景素材がラインナップされています。シンプルですがどれも特徴的で数も多く、多方面で利用できるサイトです。

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

squidfingers

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

1KB以下の軽量なパターン素材が豊富に取り揃えられています。小さいサイズの素材をダウンロードしてすぐに使いたい場合に便利ですね。

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

texturemate

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

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

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

public domain pictures

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

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

動画素材MOVIETOOLS

movietools

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

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

動画素材Givemefreeart

givemefreeart

画像出典Givemefreeart
素材数/20以上  ファイル形式/.wmv .mov
利用制限/第三者への提供不可  ユーザー登録/不要

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

動画素材MOTIONBACKGROUNDSFORFREE

motion backgrounds for free

画像出典MOTIONBACKGROUNDSFORFREE
素材数/300以上  ファイル形式/.wmv .mov .avi
利用制限/商用OK  ユーザー登録/必要

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

動画素材Freefootages

free-footages

画像出典Freefootage 素材数/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以下、理想は500KBといわれています。

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

image

オシママサラ
ライター
オシママサラ

関連記事