こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトにちょっとした「変化」や「遊び心」を加えたいとき、真っ先に思い浮かぶのが“背景画像の演出”です。
特に、アクセスするたびに背景がランダムに変わったら、ユーザーの印象もガラッと変わりますよね。
「お、さっきと違うデザインだ！」
「今日はどんなビジュアルなんだろう？」
そんなちょっとした“仕掛け”が、ユーザーとの距離をぐっと縮めてくれるんです。
今回は、JavaScriptだけで背景画像をランダムに切り替える方法をご紹介します。
ライブラリは不要。誰でもシンプルに実装できますので、Web初心者の方もぜひチャレンジしてみてください！
基本の考え方：画像のリストからランダムに1つを選ぶ
やることはとてもシンプルです。
- 複数の背景画像URLをJavaScriptで用意する
- その中からランダムで1枚を選ぶ
- 選ばれた画像を背景に指定する
HTMLとCSSは最低限でOK。JavaScriptだけで完結します。
実装コード（HTML＋CSS＋JavaScript）
「Return」ボタンで何度もリロードしてみてください。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
HTML
背景を設定したい要素に id を付けておきます。
<body id="hero">
<h1>ようこそ！</h1>
</body>CSS
#hero に背景画像の共通設定をしておきます。
#hero {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
color: white;
text-align: center;
padding-top: 20%;
}JavaScript
画像URLを配列で用意し、ランダムに1枚選んで背景に設定します。
document.addEventListener("DOMContentLoaded", function () {
const images = [
"https://images.unsplash.com/photo-1497290756760-23ac55edf36f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1742836531212-c55044926fbd?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1747863498866-e88b7ef50d3e?q=80&w=1970&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://plus.unsplash.com/premium_photo-1745616638280-305b6a90a25d?q=80&w=1995&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
];
const randomIndex = Math.floor(Math.random() * images.length);
const selectedImage = images[randomIndex];
const hero = document.getElementById("hero");
hero.style.backgroundImage = `url('${selectedImage}')`;
});補足：画像を軽量に＆視認性に配慮しよう
ランダムとはいえ、背景画像はサイトの“顔”。次のポイントに気を配ることで、より使いやすく、美しい演出になります。
- 画像サイズは圧縮して軽量に（WebPなどもおすすめ）
- テキストが読みにくくならないようフィルターをかける（暗めのレイヤーやグラデーション）
- 画面比率に合わせて構図が崩れないように `background-size` や `position` を調整
応用アイデア：時間帯や曜日で出し分けも
今回のコードを少し応用すれば、「朝は明るい画像」「夜はシックな画像」「週末は特別バージョン」など、さらに工夫した背景演出が可能です。
const now = new Date();
const hour = now.getHours();
let selectedImage;
if (hour < 12) {
selectedImage = "images/morning.jpg";
} else if (hour < 18) {
selectedImage = "images/afternoon.jpg";
} else {
selectedImage = "images/night.jpg";
}
document.getElementById("hero").style.backgroundImage = `url('${selectedImage}')`;まとめ
Webサイトにおける第一印象を左右する“背景画像”。
アクセスするたびに変化があると、訪問者もワクワクしますよね。
今回は「画像配列＋ランダム選択＋背景指定」というシンプルな構成で実装しましたが、組み合わせ次第で表現は無限大です。
ちょっとしたひと工夫が、「お、なんかいいなこのサイト」という印象につながることも。
ぜひ、あなたのサイトにも取り入れてみてくださいね！