【CSS JS】季節に合わせたページデザイン：クリスマス

はじめに

みなさん、こんにちは！
今年も残すは12月、最近は寒くなってきて気づけば道に落ち葉が敷かれ始めてきましたね！

この時期に企業サイトや個人ブログを見ているとクリスマス用に少しデザインが変わっているサイトを見かけることが多いです。
そこで今回は、クリスマス用のデザインに使えるパーツや背景などをHTMLとCSSで再現しようと思います！

季節に合わせてデザインを変更するメリット

デザインを変更するのは運営側としては面倒ですが、以下のようなメリットがあります。

季節感で訪問者の興味を引きつける

季節感を反映したデザインはユーザーに親しみやすさを感じさせ、感情的なつながりを強化します。
例えば春には桜や新緑、夏には海や青空、秋には紅葉や焼き芋、冬には雪やクリスマスのモチーフを使用します。

ブランドイメージの強化

次に、季節ごとにデザインを変更することでブランドが「流行に敏感」または「ユーザー志向」である印象を与えます。
アパレル業界や飲食業界は特にこの要素が必要とされます。

販促やマーケティング効果の向上

上記のブランドイメージと関連して、季節に関連した商品やサービスのプロモーションが効果的になります。

冬：クリスマスセールやお正月キャンペーン。
春：新生活応援フェアや桜にちなんだ商品の特集。
夏：サマーバーゲンやビーチグッズのプロモーション。

季節限定感を演出することで、ユーザーに「今しか買えない」という印象を与えられます。

SEOやコンテンツ戦略のサポート

季節に関連したキーワードをデザインやコンテンツに取り入れることで、検索エンジンからの流入が増加します。
例として、「クリスマスギフト特集」や「夏のおすすめ商品」などのテーマに合わせたデザイン変更があります。

クリスマス用のデザインパーツ・背景

背景に雪を降らせる

クリスマスと言えば雪ですよね！
背景に雪を降らせるコードを紹介します。
完成形は以下のようになります。

コードは以下になります。

HTML

<body>
  <div class="snow-container"></div>
  <script src="script.js"></script>
</body>

CSS

body {
  margin: 0;
  overflow: hidden; /* スクロールを防ぐ */
  background-color: black; /* 背景を黒に設定 */
}
 
.snow-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.snowflake {
  position: absolute;
  top: -10px; /* 画面上部から降り始める */
  color: white; /* 雪の色 */
  font-size: 10px; /* 雪のサイズ */
  opacity: 0.8; /* 少し透明感を追加 */
  pointer-events: none; /* 雪がクリックイベントを妨げない */
  animation: fall linear infinite;
}
 
/* 雪の落下アニメーション */
@keyframes fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) translateX(50px) rotate(360deg);
  }
}

JavaScript

const snowContainer = document.querySelector(".snow-container")
 
function createSnowflake() {
  const snowflake = document.createElement("div")
  snowflake.classList.add("snowflake")
  snowflake.textContent = "❄" // 雪の結晶の形
 
  // ランダムな初期位置とサイズを設定
  const size = Math.random() * 10 + 10 // 雪のサイズをランダムに (10px - 20px)
  snowflake.style.left = Math.random() * 100 + "vw" // 横方向のランダム位置
  snowflake.style.fontSize = `${size}px` // 雪のサイズを適用
  snowflake.style.animationDuration = Math.random() * 5 + 5 + "s" // 落下速度をランダムに
  snowflake.style.animationDelay = Math.random() * 5 + "s" // 落下開始をランダムに
 
  snowContainer.appendChild(snowflake)
 
  // アニメーション終了後に要素を削除
  snowflake.addEventListener("animationend", () => {
    snowflake.remove()
  })
}
 
// 定期的に雪の結晶を生成
setInterval(createSnowflake, 100)

イルミネーションのような背景

クリスマスといえばイルミネーションもあると思います！
少し長くなりますが、CSSのみで再現できるのでぜひお試しください！

HTML

<div class="wrapper">
  <div class="colorizer1"></div>
  <div class="colorizer2"></div>
  <div class="colorizer3"></div>
  <div class="colorizer4"></div>
  <div class="circles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="title">メリークリスマス！！サンタが街にやってくる</div>
</div>

CSS

body {
  background: linear-gradient(90deg, #a82127 20%, #571d21 80%);
  background: -moz-linear-gradient(90deg, #a82127 20%, #571d21 80%);
  background: -webkit-linear-gradient(90deg, #a82127 20%, #571d21 80%);
  background: -o-linear-gradient(90deg, #a82127 20%, #571d21 80%);
  background-attachment: fixed;
}
 
.title {
  text-align: center;
  margin-top: 10%;
  color: #fff;
  font-size: 50px;
}
 
* {
  box-sizing: border-box;
}
 
.wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -10;
}
 
.circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(5px);
}
 
.circle:nth-child(1) {
  background: #4edc2d;
  box-shadow: 0 0 8px 7px #4edc2d;
  bottom: 8%;
  left: -2%;
  width: 153px;
  height: 153px;
  opacity: 0.16;
  -webkit-animation: flash-3 5s infinite linear;
  animation: flash-3 5s infinite linear;
}
 
.circle:nth-child(2) {
  background: #e95744;
  box-shadow: 0 0 5px 4px #e95744;
  top: 10%;
  left: 0%;
  width: 110px;
  height: 110px;
  opacity: 0.4;
  -webkit-animation: flash-3 5s infinite linear;
  animation: flash-3 5s infinite linear;
}
 
.circle:nth-child(3) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 32%;
  left: 28%;
  width: 150px;
  height: 150px;
  opacity: 0.1;
  -webkit-animation: flash-3 8s infinite linear;
  animation: flash-3 8s infinite linear;
}
 
.circle:nth-child(4) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: -8%;
  left: 15%;
  width: 165px;
  height: 165px;
  opacity: 0.1;
  -webkit-animation: flash-3 4s infinite linear;
  animation: flash-3 4s infinite linear;
}
 
@-webkit-keyframes flash-3 {
  0% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.6;
    filter: blur(10px);
  }
 
  60% {
    opacity: 0.2;
    filter: blur(50px);
  }
 
  90% {
    opacity: 0.5;
    filter: blur(20px);
  }
  100% {
    opacity: 0.5;
    filter: blur(10px);
  }
}
 
@keyframes flash-3 {
  0% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.6;
    filter: blur(10px);
  }
 
  60% {
    opacity: 0.2;
    filter: blur(50px);
  }
 
  90% {
    opacity: 0.5;
    filter: blur(20px);
  }
  100% {
    opacity: 0.5;
    filter: blur(10px);
  }
}

クリスマスツリー

ツリーもCSSのみで再現できます！
三角形を積み重ねるシンプルなものですが、アニメーションで星を光らせています。
簡単に作成できるのでお試しください！

HTML

<div class="tree">
  <div class="star">★</div>
  <div class="layer layer-1"></div>
  <div class="layer layer-2"></div>
  <div class="layer layer-3"></div>
  <div class="trunk"></div>
  <div class="lights">
    <span class="light red"></span>
    <span class="light yellow"></span>
    <span class="light green"></span>
    <span class="light blue"></span>
  </div>
</div>

CSS

/* ツリー全体 */
.tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
/* 星 */
.star {
  font-size: 50px;
  color: gold;
  margin-bottom: -10px;
  animation: twinkle 1.5s infinite alternate;
}
 
/* ツリーの各層 */
.layer {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #2ecc71 transparent;
  position: relative;
}
 
/* 層ごとの大きさ */
.layer-1 {
  border-width: 0 60px 60px 60px;
}
 
.layer-2 {
  border-width: 0 80px 80px 80px;
  margin-top: -10px;
}
 
.layer-3 {
  border-width: 0 100px 100px 100px;
  margin-top: -10px;
}
 
/* 幹 */
.trunk {
  width: 30px;
  height: 50px;
  background-color: #734e30;
  margin-top: -10px;
}
 
/* ライト */
.lights {
  position: absolute;
  top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 200px;
  height: 200px;
  pointer-events: none;
}
 
.light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 5px;
  animation: blink 2s infinite;
}
 
.red {
  background-color: red;
}
 
.yellow {
  background-color: yellow;
}
 
.green {
  background-color: green;
}
 
.blue {
  background-color: blue;
}
 
/* アニメーション */
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
 
@keyframes blink {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

雪だるま

三段に積み重ねた雪だるまもCSSのみで作成できます！

HTML

<div class="snowman">
  <div class="head">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
  </div>
  <div class="body">
    <div class="arm left"></div>
    <div class="arm right"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
  </div>
  <div class="base"></div>
</div>

CSS

/* 雪だるま全体 */
.snowman {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
 
/* 頭 */
.head {
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: -10px;
}
 
/* 目 */
.eye {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 30px;
}
 
.eye.left {
  left: 30px;
}
 
.eye.right {
  right: 30px;
}
 
/* 鼻 */
.nose {
  width: 15px;
  height: 15px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
 
/* 口 */
.mouth {
  width: 40px;
  height: 10px;
  border: 2px solid black;
  border-radius: 50%;
  border-top: none;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}
 
/* 体 */
.body {
  width: 140px;
  height: 140px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
/* 胴体のボタン */
.button {
  width: 15px;
  height: 15px;
  background-color: black;
  border-radius: 50%;
  margin: 5px 0;
}
 
/* 基本 */
.base {
  width: 180px;
  height: 180px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
 
/* 手（枝） */
.arm {
  width: 80px;
  height: 5px;
  background-color: brown;
  position: absolute;
  top: 50%;
  transform-origin: center;
}
 
.arm.left {
  left: -85px;
  transform: rotate(30deg);
}
 
.arm.right {
  right: -85px;
  transform: rotate(-30deg);
}

二段にしたり、木の枝で腕を作ったり、マフラーを付けたりするのも楽しそうですね！

プレゼントボックス

最後はプレゼントボックスです！

HTML

<div class="gift">
  <div class="box">
    <div class="ribbon-horizontal"></div>
    <div class="ribbon-vertical"></div>
  </div>
  <div class="bow">
    <div class="loop left"></div>
    <div class="loop right"></div>
    <div class="tail left"></div>
    <div class="tail right"></div>
  </div>
</div>

CSS

/* プレゼント全体 */
.gift {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
/* ボックス本体 */
.box {
  width: 150px;
  height: 150px;
  background-color: #e74c3c; /* 赤色でプレゼント感を演出 */
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
 
/* 横リボン */
.ribbon-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #f1c40f; /* ゴールドカラーのリボン */
  transform: translateY(-50%);
}
 
/* 縦リボン */
.ribbon-vertical {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 100%;
  background-color: #f1c40f;
  transform: translateX(-50%);
}
 
/* リボンのリボン部分 */
.bow {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
 
/* 左右のループ */
.loop {
  width: 40px;
  height: 20px;
  background-color: #f1c40f;
  border-radius: 10px;
  position: absolute;
}
 
.loop.left {
  transform: rotate(-45deg);
  left: -25px;
}
 
.loop.right {
  transform: rotate(45deg);
  right: -25px;
}
 
/* リボンの垂れ下がる部分 */
.tail {
  width: 10px;
  height: 30px;
  background-color: #f1c40f;
  position: absolute;
  bottom: -20px;
}
 
.tail.left {
  transform: rotate(45deg);
  left: -10px;
}
 
.tail.right {
  transform: rotate(-45deg);
  right: -10px;
}

色やサイズを変えて量産もできますね！

おわりに

いかがでしたでしょうか？
簡易なコードで上記のようにクリスマス感を演出できます。

今回はパーツや背景について紹介しましたが、フォントや色使いでも演出できます。
例えばタイトルにはScript系フォント（華やかで手書き風）を使用します。
また、色使いは赤・緑・白・黄色をメインに使用しましょう。
カラーコードの組み合わせ例を以下に紹介します。
#B22222, #216D5E, #AD9065

他にもシルバーやブルー、ワインレッドを使用することで高級感あるクリスマスを演出することも可能です。

季節に合わせたデザインの中でも、クリスマスは特に盛り上がるテーマであり、デザインに一工夫加えるだけでサイトの魅力が格段に上がります。自社サイトに合ったクリスマスデザインを取り入れて、訪問者に季節感を楽しんでもらいましょう！

【CSS JS】季節に合わせたページデザイン：クリスマス

はじめに

季節に合わせてデザインを変更するメリット

季節感で訪問者の興味を引きつける

ブランドイメージの強化

販促やマーケティング効果の向上

SEOやコンテンツ戦略のサポート

クリスマス用のデザインパーツ・背景

背景に雪を降らせる

イルミネーションのような背景

クリスマスツリー

雪だるま

プレゼントボックス

おわりに

この記事を書いた人

関連記事

【handlebars】HTMLの共通部分をパーシャル化して管理する方法

YouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む

スマホで100vhが画面高さいっぱいにならない時の対処法