ホームページの背景に画像を設定するには?おすすめ素材サイトも紹介

この記事は約9分で読めます
Facebookシェア Twitterシェア LINEシェア はてなブックマークシェア

「魅力的なホームページを作りたい」「ホームページの雰囲気を変えたい」と考えることがありますよね。

そんなときにおすすめなのが、ホームページの背景に画像を設定することです。

背景を設定することで、ホームページの印象は大きく変化します。

今回は、自分のホームページに使っても問題のない、おすすめのフリー画像素材サイトを紹介します。

実際にホームページの背景を設定する方法や、背景画像を選ぶポイントについても解説しますので、初心者の方もぜひ参考にしてください。

ホームページの背景を設定する方法

まず、ホームページに背景を設定する方法について解説します。

背景を設定する方法はいくつかありますので参考にしてください。

CSSで背景を設定する方法

一般的にホームページの背景を設定するには、CSSのbackgroundプロパティを使用します。

backgroundプロパティは背景に画像を設定するだけではなく、背景色や画像の位置、スタイルなどを細かく指定できます。

具体的には以下のような指定が可能です。

・background-image:背景画像を指定
・background-color:背景色を指定
・background-size:背景画像のサイズを指定
・background-position:背景画像の表示位置を指定
・background-attachment:背景の固定・移動を指定
・background-origin:背景画像の配置の基点を指定
・background-repeat:背景画像のリピート方法を指定
・background-clip:背景の描画領域を指定

例えば、以下のようにCSSを記述すると、指定した背景画像がページの真ん中に、繰り返されずに一つだけ表示されます。

body {
background-image:url("画像URL");
background-position:center;
background-repeat: no-repeat;
  }

HTMLで背景を設定する方法

HTMLでは、bodyタグにbackground属性を直接指定することで背景を設定できます。

HTML内に直接記述するため、シンプルで作業が楽なことがメリットです。

ただし、柔軟な指定はできず、共通の部分を一括で変更したい場合でもひとつひとつ変更しなくてはなりません。

現在のHTML5では廃止されており、非推奨とされています。

設定してみると問題なく表示されますが、非推奨とされている以上、今後正しく表示されなくなる可能性もあるため、使用は控えたほうが賢明です。

スタイルの指定はCSSで行うことが推奨されています。

WordPressで背景を設定する方法

WordPressで背景を設定する場合、先に紹介したようにCSSを編集してbackgroundプロパティで指定することも可能ですが、管理画面のメニューから簡単に背景の設定ができる機能もあります。

WordPressの管理画面から「外観」の「カスタマイズ」を選択すると、背景色や背景画像を簡単に設定できます。

またテーマやプラグインを利用している場合には、他にも背景を設定する方法が用意されている場合もあります。

ホームページ背景に使えるおすすめ素材サイト10選

インターネット上ではたくさんの画像素材を探すことができますが、自分のホームページに使用する際には利用規約に注意しなければなりません。

画像を配布しているサイトによっては商標権や著作権があるもの、クレジットの表記が義務づけられているもの、使用料が必要なものなどもあります。

利用する前にそれぞれの素材サイトの利用規約を一読することを忘れないでください。

今回は無料で利用でき、商用利用可能なフリー素材サイトを紹介します。ぜひ自分のホームページのイメージに合う素材を探してみてください。

  • Bg-Pattrens

Bg-Patternsは、ホームページやチラシ・ポスターなどの紙媒体、ビジネス資料などに使えるカラフルなパターン背景のフリー素材サイトです。

無料で色や形、サイズなども自由にカスタマイズできます。

カラフルで独特な素材が多くアレンジもできるため、個性的でオリジナリティのある素材を探している方におすすめです。

  • BEIZ images

BEIZ imagesは、背景や壁紙に使える画像に特化したフリー素材サイトです。

自然の風景や素材のテクスチャを表現したシンプルなものから、アーティスティックで華やかな絵画のようなデザインのものまで豊富に揃っています。

カテゴリごとに分かれているため、目的の素材が探しやすいでしょう。

  • Subtle Patterns

Subtle Patternsはシンプルで使いやすい画像が揃ったフリー素材サイトです。

センスの良いモノトーン、チェック、ストライプなど、どんな場面でも使えるパターンが豊富なので、画像に迷ったときにはのぞいてみると良いでしょう。

  • Background Labs

Background Labsはカラフルな柄やイラストの入った、おしゃれなパターン画像が揃ったフリー素材サイトです。

元気が出るような華やかなデザインが多く、明るい雰囲気のホームページを作りたい方にはぴったりでしょう。

画像は色やタグから検索できます。

  • 背景素材フリードットコム

背景素材フリードットコムは、背景素材に特化したフリー素材サイトです。

制作物の種類や色、イメージなどから画像を探すことができるため非常に使いやすいです。

季節に合わせた素材も豊富に用意されているため、きっとイメージに合うものが見つかるでしょう。

さらに高いクオリティの素材を扱う有料サイトもあり、1フォルダ(96点)1980円で利用できます。

  • フリーテクスチャ素材館

フリーテクスチャ素材館は木材や石材・金属、紙、布、アニマル柄などそれぞれのテクスチャを表現した素材が揃ったフリー素材サイトです。

なかなか見つけにくい毛皮やグリッターなどの質感をリアルに表現した素材などが用意されているため、きっとお探しの素材が見つかるでしょう。

素材ごとに画像サイズが異なるため、用途に合わせて調整してください。

  • ホームページ背景画像壁紙無料

ホームページ背景画像壁紙無料は、使いやすいシンプルなデザインの背景画像が揃ったフリー素材サイトです。

サンプル画像にマウスポインタを合わせるとページ背景が選んだ画像と同じものに変わるため、イメージを掴みやすいでしょう。

ファイルサイズが1〜3KBほどの軽量で作られていることもうれしいポイントです。

  • Paper-co

Paper-coは紙のテクスチャを表現した素材を配布しているフリー素材サイトです。

ダンボールやコンクリート、和紙などなじみのあるテクスチャが豊富で、背景に使用すれば温かみを感じるホームページとなるでしょう。

  • ぱくたそ

ぱくたそはあらゆるジャンルの写真素材が揃った有名なフリー写真素材サイトです。

背景画像のカテゴリには高画質なさまざまなテクスチャの素材が用意されています。

検索もしやすく、背景画像以外の素材も豊富ですので、ぜひ一度チェックしてみてください。

  • Unsplash

Unsplashは海外のフリー写真素材サイトです。

世界中からクオリティの高い写真が投稿されており、日本のサイトではなかなか探せないようなテイストの素材が見つかります。

日本語での検索も可能ですが、検索結果が正確でないこともあるため英語での検索がおすすめです。

画像のサイズはそれぞれ違うため、必要に応じて調整しましょう。

ホームページの背景画像を選ぶポイント

インターネット上ではたくさんの魅力的な素材を探すことができますが、選択肢が多くてどれを選べばいいか迷うこともありますよね。

ホームページのユーザーとしてはあまり背景を意識することはないかもしれませんが、デザインの中でも重要な要素であり、ユーザーの印象を大きく左右します。

ここでは、ホームページの背景画像を選ぶ際に意識したいポイントについて解説します。

高解像度のものを選ぶ

背景画像には高解像度のものを選びましょう。

美しい画像はどのようなユーザーに対しても魅力的で洗練された印象を与えます。

逆に荒い画質の画像を使用すると、少し古く感じるなどあまり魅力的ではない印象を与えてしまいます。

人は文字などの情報よりも目で見て判断する画像や動画のほうが記憶に残りやすいです。

ユーザーの第一印象を左右する背景画像の美しさにこだわりましょう。

データ容量に注意する

高解像度の画像を選ぶことは重要ですが、デメリットとしてデータ容量が大きくなる傾向があります。

極端にデータ容量が大きい画像の場合、サイト全体の読み込み速度が遅くなり、ユーザー側の通信環境によっては表示されない場合もあります。

これを防ぐにはホームページの構成内容から適した画像サイズに加工したり、トリミングしたりするなどの調整が必要です。

適切な画像ファイル形式を選ぶ

画像ファイルの形式にはさまざまな種類があり、それぞれ特徴や最適な用途があります。

データ容量にも影響しますので、適切なファイル形式を選ぶことは大切です。

ホームページでよく使われる3つの形式の特徴について紹介します。

  • JPEG

JPEG(ジェイペグ)は、写真や色数の多い画像、色の境目がはっきりしないグラデーションが使われた画像などに適した画像ファイル形式です。

約1,670万色以上の色を使用でき、写真を綺麗に表示できます。

一方、画像の保存を繰り返すと画像が劣化したり、一度画像を圧縮するともとの品質に戻らなかったりするなどのデメリットがあります。

  • GIF

GIF(ジフ)は、色の数が少ないシンプルなイラストやロゴなどによく使われる画像ファイル形式です。

背景を透明にできたり、アニメーション動画を作れたりします。

GIFはJPEGと違い256色までしか使えないため、写真や色の数が多い複雑なイラストなどに使用するとうまく表現しきれない可能性があります。

  • PNG

PNG(ピング)は、JPEGやGIFよりも新しい画像ファイル形式です。

JPEGと同じく約1670万色以上の色を使えて、GIFと同じく背景を透明にできるという、それぞれの良いところを併せ持っています。

また何度画像を保存しても品質が劣化しないこともメリットです。

一方、フルカラーで使用する場合はJPEGよりもデータ容量が大きくなる点には注意しなければなりません。

PNGは画像を劣化させたくないときや写真を切り抜いて背景を透明にしたいとき、色の数が少ないイラストなどに使用するのがおすすめです。

さまざまなデバイスからの見え方に注意する

最近ではPCだけでなく、スマホやタブレットでホームページへアクセスする人も多いです。

画面の大きさによって画像がうまく表示されないということもよくあり、これを最適化する「レスポンシブデザイン」が重要視されています。

レスポンシブデザインとは、ホームページのデザインをデバイスの画面サイズに応じて最適化することです。

CSSで実装できるので、どんなデバイスからも快適にアクセスできるよう調整するのがおすすめです。

まとめ

今回は、ホームページの背景の設定方法やおすすめの素材サイト、背景画像を選ぶポイントについて解説しました。

背景画像はホームページデザインの重要な要素であるため、ユーザーの印象を大きく左右します。

自分で1からデザインするのは大変ですが、無料で豊富なデザインの中から選んで使用できる素材サイトがたくさんあるので、上手に活用するのがおすすめです。

利用する際には規約に違反しないようきちんとルールを確認しながら、ぜひ魅力的なホームページ作りに役立ててください。

誰でも10分!WordPressブログの始め方

ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

合わせて読みたい

【完全ガイド】誰でも10分!WordPressブログの始め方

独自ドメインを取得するなら「お名前.com」

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。
WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

独自ドメインを取得しようと考えている方は、以下のリンクから、ぜひご利用ください。

お名前.comで
独自ドメインを取得

Facebookシェア Twitterシェア LINEシェア はてなブックマークシェア

このサイトの管理人
泉 賢

GMOインターネット株式会社お名前.com事業部所属。
お名前.comのドメインに関するマーケティング業務を担当し、現在はオウンドメディアサイト運営を中心に活動中。