- カテゴリー： ホームページ作成
- 公開：
ホームページ背景で使える商用OKのフリー素材サイトと背景画像の設定方法
ここ数年でオンライン会議やオンライン飲み会が増えたこともあり、背景画像をダウンロードしてバーチャル背景を設定した経験のある方は多いのではないでしょうか。またパソコンのデスクトップやスマートフォンの待ち受けなどをオリジナルの背景画像にしている方もいるかと思います。
このような背景画像をホームページに設定する場合は注意をしないといけません。画像に商標権や著作権がある場合や、クレジットの明記が義務づけられることもあるため、意識せずに使うと利用規約に抵触してしまう恐れがあります。
今回はホームページの背景に使える無料かつ商用利用OKの素材サイトを紹介します。背景画像をグーペのホームページに設定する方法も解説しているので、素敵な背景画像が見つかったらご自身のホームページに使ってみてください。
▼目次
【無料・商用可】おしゃれで実用的！おすすめフリー素材サイト9選
ホームページの背景画像として活用できる、高品質・高画質の素材が豊富なサイトを9つ紹介します。無料で使えて商用利用が可能なものばかりですが、素材サイトでは一部有料の素材も提供しています。ご利用の際には必ず各サイトの利用規約を確認してください。
BEIZ images（ベイツ・イメージズ）
- 会員登録：不要
- 使用料：無料
- 商用利用：可能
- クレジット表記：不要
- 画像の加工：可能
背景や壁紙に特化したフリー素材サイトです。木目や金属、テクスチャなどホームページの背景にも馴染みやすく、シンプルで使い勝手のよい素材が多数あります。
PAKUTASO（ぱくたそ）
URL：PAKUTASO（ぱくたそ）
- 会員登録：不要
- 使用料：無料
- 商用利用：可能
- クレジット表記：不要
- 画像の加工：可能
風景や人物、食品などあらゆるジャンルの写真素材を提供しています。メニューの「カテゴリー」から「背景・テクスチャ」をクリックして、ホームページ背景として活用できる素材を絞り込めます。
Bg-patterns
URL：Bg-patterns
- 会員登録：不要
- 使用料：無料
- 商用利用：可能
- クレジット表記：不要
- 画像の加工：可能
カラフルなパターン背景の素材を配布しているサイトです。カスタマイズ機能で画像サイズや配色を自由に変更できます。イラストのパターン画像は容量が小さいのでホームページの表示スピードに影響を与えないというメリットもあります。
Unsplash
URL：Unsplash
- 会員登録：不要
- 使用料：無料
- 商用利用：可能
- クレジット表記：不要 ※規約に「クレジット歓迎」との注意書きあり
世界中の写真家によるクオリティの高い写真素材を200万点以上集めたサイト。海外のサイトのためすべて英語表記となります。手持ちの画像や画像URLからUnsplash上の写真素材を探せる「画像検索機能」は、膨大なデータからイメージに合う素材を探すときに役に立ちます。
pixabay
URL：pixabay
- 会員登録：不要 ※高解像度画像をダウンロードしたい場合は登録が必要
- 使用料：無料
- 商用利用：可能
- クレジット表記：不要
- 画像の加工：可能
画像、イラスト、動画、音楽など2500万点を超える素材サイト。会員登録するとクリエイターをフォローしたりメッセージを送ったりするコミュニティーの要素もあります。高解像度の画像をダウンロードするには会員登録が必要ですが、ホームページ背景の用途であれば低解像度の画像で十分でしょう。トップページは日本語ですが、海外のサイトのため利用規約は英語です。
Paper-co
URL：Paper-co
- 会員登録：不要
- 使用料：無料
- 商用利用：可能
- クレジット表記：不要
紙のテクスチャ素材を配布しているサイトです。ダンボール、ノート、木、布などの日常にある素材をモチーフにしているため親しみやすくホームページ背景にも自然に溶け込むのではないでしょうか。説明欄では質感や雰囲気、利用シーンを提案しているため素材の使用イメージがわきやすいです。
illustAC
URL：PhotoAC（写真AC）、illustAC（イラストAC）
写真専用とイラスト専用の素材サイトがあります。ホームページ背景だけでなくチラシやパンフレットなど幅広い用途で活用できる写真素材を提供しています。プレミア会員に登録するとダウンロードした素材を使って商品化して販売することも可能です。手持ちの画像をアップロードしてイメージに近い素材を探すこともできます。
- 会員登録：必要
- 使用料：無料
- 商用利用：可能
- クレジット表記：不要
- 画像の加工：可能
Cool Backgrounds
URL：Cool Backgrounds
- 会員登録：不要
- 使用料：無料
- 商用利用：可能
- クレジット表記：不要
好きな色を組み合わせて素材を作れるサイトがまとまっています。カラフルなポリゴン風やグラデーション効かせた形状などユニークな背景画像を作成することができます。商用利用可能、クレジット表記不要の記載はありますが各サイトで利用規約やガイドラインが異なりますので事前に利用規約をご確認ください。
フリー素材を利用する際の注意点
今回紹介している素材サイトはすべて商用利用が可能です。また基本的にクリエイターのクレジット表記やサイト運営者への報告の必要はありません。しかしながら、素材に関してすべての権利が放棄されているわけではありません。
ダウンロードした素材を再配布したり、商品化して販売したりする行為は利用規約に抵触します。また、商品化ライセンスを購入することで、グッズや加工品として販売可能な場合もあります。ダウンロードした素材を利用する前に必ず利用規約や禁止事項を確認しましょう。不明点や不安点があればサイト運営者にお問い合せしていただき、利用条件に問題がないと確証を得た上で利用するのが安心です。
肖像権に注意する
写真の素材に人物が含まれている場合は注意が必要です。素材サイトで配布されている写真は、人物の肖像権使用の許可を得ているものと得ていないものがあります。
人物が含まれている場合は、画像をトリミングしたりボカシを入れたりするなど肖像権を侵害しないよう配慮しましょう。肖像権に関しては各サイトでガイドラインを設けているのでご確認いただくようお願いします。
ホームページ作成サービス「グーペ」で背景画像を設定する方法
素材サイトでダウンロードした背景画像をグーペのホームページに設定する方法を解説します。
【初心者向け】「かんたん編集」で背景画像を設定する
グーペの「かんたん編集」ではHTMLやCSSの知識不要で背景画像を設定できます。背景画像設定に対応しているテンプレートに変更するか、テンプレートの新規ダウンロードをお願いします。
背景画像設定に対応しているテンプレート一覧
＜無料テンプレート＞
＜有料テンプレート＞
背景画像を設定する方法
- 管理メニュー「各種設定：デザイン」で「編集」をクリック
- 「背景画像」の「背景画像を使用する（オリジナル画像）」を選択
- 「ファイルを選択」より画像をアップロード
- 「画像の繰返し方法」や「表示位置」を選択する
- 「保存」ボタンをクリック
背景画像をブラウザ画面いっぱいに配置する場合は「全画面表示」にチェックを入れてください。
無料テンプレート「Smooth」で背景画像を設定した場合のイメージです。
 |  |
左が背景画像「なし」、右はUnsplashでコーヒー豆の背景画像をダウンロードして設定しています。背景画像があることで訪問者に店舗の特徴や雰囲気が伝わりやすくなったのではないでしょうか。
【上級者向け】「HTML・CSS編集」で背景画像を変更する
背景画像設定に対応していないテンプレートは「HTML・CSS編集」のカスタマイズで背景画像の設定が可能です。テンプレートのカスタマイズはサポート対象外となりますため、改変の際にはご自身の判断で行ってください。
背景画像を設定する方法
- 管理メニュー「運用管理：ファイルアップロード」に背景画像をアップロードする
- 「URLをコピー」する
- 管理メニュー「各種設定：デザイン」の「HTML・CSS編集」をクリック
- CSSエリアにタグを追加する
テンプレート「Clinic2」の例ではCSSエリアに画像URLとタグを挿入しています。記述はあくまでも「Clinic2」を利用した場合の一例となります。表示の保障や表示崩れ場合のサポートはできかねますことをご了承ください。
 |  |
左が背景画像「なし」、右はUnplashでコーヒーショップの画像をダウンロードして、ホームページの背景に設定しました。画像の透明度さげてホームページのコンテンツを邪魔しないよう工夫をしています。
背景画像を上手に活用してホームページの存在感を高めよう
ホームページに背景画像を設定することで店舗やサービスの世界観をホームページで効果的に表現することができます。
ホームページ全体を占める背景画像は、やみくもに設定してしまうと可読性や視認性が悪くなりホームページの見栄えに大きく影響します。ダウンロードした画像をそのまま使うのではなく、透明度やサイズを調整するなどした上で設定するようにしましょう。
繰り返しますが、ホームページに設定した画像が規約に違反していた、というようなことが無いように利用規約や禁止事項に目を通すことも忘れずに。
本記事がみなさまのホームページをより魅力的にするための参考になれば嬉しいです。
