はじめに
概要
本記事はWebサイトの“背景”に特化した完全ガイドです。CSSでの背景色やグラデーション、背景画像の扱い方、デザイン素材の探し方、レスポンシブ対応、SEOとの関係、参考事例まで網羅します。初心者から中級者が実践で使える知識を丁寧に解説します。
読者対象
HTMLとCSSの基礎を少し知っている方を想定します。まったくの初心者でも読み進められるよう、具体例と図解（文章内での例示）を用意します。
本章の目的
まずは本ガイドの全体像を把握していただきます。各章で学べる内容と、実際の作業順（背景の設計→実装→調整→SEO）を簡潔に示します。
進め方のヒント
順番に読むと理解が深まります。すぐに試したい方は第2章と第3章のコード例を先にご覧ください。実務で使うときの注意点も随所に書きます。
注意点
最新のブラウザ仕様や環境差に配慮していますが、特定のCMSやプラグインの個別対応は章ごとに補足します。必要があれば実例に合わせて調整してください。
Webサイトの背景を設定する基本方法
背景の役割と基本
Webサイトの背景は見た目と印象を左右します。CSSのbackground系プロパティで設定し、背景画像、背景色、表示位置、繰り返し、サイズなどを指定します。まずはシンプルに背景色と画像を組み合わせる考え方を押さえましょう。
主なプロパティと使い方
- background-color: ページの塗りつぶし色。画像が読み込めないときの代替になります。
- background-image: 画像やグラデーションを指定します。複数指定も可能です。
- background-size: cover（画面いっぱいに拡大）やcontain（全体表示）を使います。
- background-position: center、top leftなどで表示位置を決めます。
- background-repeat: no-repeat、repeat-xで繰り返しを制御します。
- background-attachment: fixedで視差効果を出せますが、挙動に注意が必要です。
- background-origin／background-clip: 余白やボックス内での表示範囲を細かく制御します。
基本のサンプルコード
body{
background-color:#f2f2f2;
background-image:url("bg.jpg");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
この例では画面いっぱいに中央配置の背景画像を1枚だけ表示します。背景色を必ず指定しておくと安全です。
注意点と実用アドバイス
画像は適切に圧縮し、WebPなどを検討してください。複数背景は上から重なる順です。グラデーションと画像を組み合わせて見やすさを高めると効果的です。
背景色やグラデーションの使い方
背景色の基本
背景色は background-color で指定します。淡い色を使うと読みやすさが上がり、視線を邪魔しません。ブランドカラーを部分的に使うことでアクセントを付けられます。
淡い色とブランドカラーの使い分け
- 全体: 淡いグレーやパステル系をベースにします。
- 部分的な強調: ボタンやヘッダーにブランドカラーを使います。
例: header { background-color: var(–brand,#0077cc); }
グラデーション（linear-gradient）の基本
CSS3以降は linear-gradient で簡単に作れます。方向や色の停止位置を指定できます。背景色のフォールバックを先に書くと古いブラウザでも安全です。
具体的なコード例
シンプルな背景色:
body{ background-color:#f7f9fc; color:#333 }
グラデーション（フォールバックつき）:
.hero{ background-color:#ff7e5f; /* フォールバック */
background-image: linear-gradient(135deg,#ff7e5f 0%,#feb47b 100%);
}
テキストが重なる写真上での半透明オーバーレイ:
.hero::before{content:"";position:absolute;inset:0;
background:rgba(0,0,0,0.35);
}
コントラストと可読性
背景が派手な場合はテキスト色を濃くするか、オーバーレイで明暗を調整します。ボタンやリンクは十分なコントラストを確保してください。
注意点
複雑なグラデーションはファイルサイズに影響しませんが、デザインの主張が強くなります。場面に応じて淡め／強めを選んでください。
背景画像とimgタグの使い分け
概要
装飾目的の画像はCSSのbackground-imageで設定し、情報を伝える画像はHTMLのimgタグで表示します。目的をはっきり分けることで見た目・性能・アクセシビリティが良くなります。
背景画像を使う場面（装飾・演出）
- ヒーローセクションの雰囲気作り（風景写真やテクスチャ）
- 小さなパターンやグラデーションの繰り返し
- 見た目だけの装飾（ボタンやカードの背景）
背景画像は読み上げ対象にならないため、視覚効果に専念できます。
imgタグを使う場面（情報伝達）
- 商品写真やロゴ、グラフ、図解など意味を持つ画像
- スクリーンリーダーに説明が必要な画像
imgにはalt属性で代替テキストを必ず設定します。空にする（alt=””）と装飾扱いになります。
実践的な注意点
- レスポンシブ対応: 背景画像はbackground-sizeやメディアクエリで切り替え、imgはsrcsetで最適画像を用意します。
- パフォーマンス: 大きな写真は遅延読み込みや圧縮で軽くします。背景画像も必要な場面だけ読み込む工夫が重要です。
- アクセシビリティ: 伝えるべき情報は必ずimgで出し、背景はCSSで装飾に徹しましょう。
簡単なコード例
- CSS: background-image: url(‘bg.jpg’); background-size: cover;
- HTML:
デザイン素材を探すキーワード
はじめに
背景素材を探すときは英語キーワードを使うと候補が格段に増えます。ここでは代表的なキーワードと検索のコツを具体例つきで紹介します。
代表的なキーワード（例）
- Glitter（グリッター）: 金やラメ感のある背景
- Bokeh（ボケ）: 光の丸ボケを活かした柔らかい背景
- Texture（テクスチャ）: 紙・布・石など質感全般
- Pattern（パターン）: タイル・繰り返し模様（seamlessと組合せると便利）
- Gradient（グラデーション）: 滑らかな色の移り変わり
- Abstract（アブストラクト）: 抽象的で雰囲気重視の背景
検索キーワードの組み合わせ例
- “gold glitter background”
- “blue bokeh texture high resolution”
- “seamless marble pattern”（繰り返し可能）
- “watercolor background png”
- “minimal geometric pattern svg”
便利な追加ワード
- “seamless”（繰り返し可能） “high resolution” “transparent” “tileable” “commercial use” など
ライセンスと品質の確認
無料素材でも利用条件が異なります。必ず “free for commercial use” やライセンス表示を確認してください。
検索のコツ
色を指定するなら色名や16進コード（例: “navy”／”#003366″）を加えると狙った雰囲気が見つかります。日本語検索も併用すると国産素材を見つけやすくなります。
レスポンシブ対応と背景画像の注意点
概要
画面サイズが異なる端末でも背景画像が崩れないように調整します。主にCSSのbackground-sizeとメディアクエリで対応します。
background-size の使い分け
- cover：縦横比を維持して要素全体を覆います。切り取りが発生しやすいです。
- contain：画像全体を収めます。余白ができることがあります。
メディアクエリで画像を切り替える
画面幅に応じて別ファイルを読み込むと軽量化できます。例：
.hero{background-image:url('hero-large.jpg');background-size:cover}
@media(max-width:600px){.hero{background-image:url('hero-small.jpg')}}
表示速度と最適化
画像は圧縮し、必要ならWebPを使います。大きな画像をそのまま送ると表示が遅くなります。モバイルでは解像度を下げる、遅延読み込みやメディアクエリで不要な読み込みを避けます。
見せ方の工夫
重要な被写体は背景-positionで中心に合わせます。縦長・横長で切り取りが変わるため、複数サイズで確認してください。
SEOと背景、キーワードの関係
背景画像自体のSEO影響
背景画像（CSSで設定するもの）は検索エンジンの評価に直接影響しません。ブラウザには見えますが、テキストのように検索エンジンが直接読む対象ではないためです。ただし、画像そのものをで掲載するとalt属性などで検索に寄与します。
テキストの可読性が最重要
背景に重ねる見出しや本文の可読性を優先してください。文字が読みづらいとユーザーは離脱しやすく、滞在時間や直帰率に悪影響を与えます。コントラストを上げる、半透明のオーバーレイを使う、大きめのフォントを使うと効果的です。
画像周りの基本対策
背景画像に意味がある場合は、その意味をページ内のテキストで補足します。で使う場合はalt属性に短く説明を書き、ファイル名も説明的にすると良いです。画像は適度に圧縮し、表示サイズに合ったファイルを用意して読み込みを速くしてください。
タイトル・メタ・見出しの使い方
検索で目立たせたいキーワードはページタイトル（title）、meta description、見出し（h1/h2）に自然に入れてください。過剰な詰め込みは逆効果なので、読者に向けた文章を心がけます。
実践チェックリスト
- 背景上のテキストは十分に読みやすくする
- 意味のある画像はテキストで補足する
- imgにはaltを付け、ファイル名を分かりやすくする
- titleやmeta descriptionに主要キーワードを含める
- 見出しで構造を明確にし、キーワードを自然に使う
これらを意識すると、背景デザインがユーザー体験を損なわずにSEOにもつながります。
参考になる背景デザイン事例
全画面イメージ（ヒーロー）
画面いっぱいに写真やイラストを配置して第一印象で引きつけます。旅行や飲食、ファッションなどビジュアルが重要な業種で効果的です。テキストは読みやすさのために暗めのオーバーレイを入れると良いです。
動画背景
短いループ動画を背景に用いると動きで注目を集めます。音声はオフにして自動再生し、モバイル時は静止画に切り替える運用が一般的です。
グラデーションとブレンド
ブランドカラーを軟らかく繋ぐグラデーションは、落ち着いた雰囲気を作ります。写真と重ねることで深みが出ます。
テクスチャ・パターン
紙目や布目、ドットなどの細かなパターンは、親しみや温かみを与えます。背景として目立ちすぎないサイズとコントラストに調整してください。
ミニマル＆カラーでの強調
余白を活かし、鮮やかな背景色で重要な領域を際立たせます。ボタンや見出しの色と合わせると統一感が出ます。
デザインの組合せ例
・商品ページ：商品写真を中心に、下部にブランドカラーのグラデーション
・コーポレート：テクスチャ背景＋ロゴカラーのアクセント
・ランディング：動画背景＋暗めのオーバーレイ＋目立つCTA
どの事例でも、読みやすさと表示速度を優先してください。小さな画像最適化やモバイルでの代替背景を用意すると実用性が高まります。
