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

2015年8月12日 (2017年3月16日最終更新)
背景素材サイトならここだ!鉄板サイト15選


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

目次
  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. まとめ

鉄板サイト15選

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

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

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

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

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

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

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

写真系壁紙なら「photoAC」

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

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

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

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

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

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

subtle-patternsSubtlePatterns
素材数/400以上  ファイル形式/.png
利用制限/商用OK  ユーザー登録/不要

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

木目調なら「Backgrounds-GraphicBurger」

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

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

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

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

個人デザイナーが無償提供している壁紙画像をリストアップしたサイトになります。気にいった壁紙があれば、Behance

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

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

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

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

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

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

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

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

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

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

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

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

動画素材MOVIETOOLS

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

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

動画素材Givemefreeart

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

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

動画素材MOTIONBACKGROUNDSFORFREE

motion backgrounds for freeMOTIONBACKGROUNDSFORFREE
素材数/300以上  ファイル形式/.wmv .mov .avi
利用制限/商用OK  ユーザー登録/必要

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

動画素材Freefootages

free-footagesFreefootage
素材数/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といわれています。

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

プログラミングを勉強している方によく読まれています!

オシママサラ
オシママサラ
ライター 大手ボイラーメーカーに7年間営業職として勤務した後、2011年に早期リタイア。その後、インド南部への旅でこれからは IT だ✌と一眼発起。雑食的にプログラミング、Webサービス、IoT、FinTechなど学習中。2014年より仮想通貨の情報サイト【やさしくはじめる仮想通貨】を運営中。妻と子の3人暮らし。情報ソースは、日本語圏と英語圏。Ubuntuユーザー。

関連記事