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

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

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

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

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

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

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

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

一般的にホームページの背景を設定するには、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では、bodyタグにbackground属性を直接指定することで背景を設定できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「お名前.com」は、国内シェアNo.1のドメイン登録サービスです。

独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはずです。

独自ドメインを取得しようと考えている方は、まずは無料で好きなドメイン名を検索してみましょう。