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

はじめに
- 季節に合わせてデザインを変更するメリット
クリスマス用のデザインパーツ・背景
おわりに

はじめに

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

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

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

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

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

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

ブランドイメージの強化

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

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

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

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

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

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

季節ごとにデザインを調整することで、競合他社との差別化を図ることができます。特に、多くの競合がシーズンに関心を向けない場合、季節感を活かしたデザインで目立つことが可能です。

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

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

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

背景に雪を降らせる

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

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

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

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);
  }
}

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のみで再現できるのでぜひお試しください！

<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>

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;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -11;
  -webkit-animation: spin 300s linear infinite;
          animation: spin 300s linear infinite;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

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

<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>

/* ツリー全体 */
.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のみで作成できます！

<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="button"></div>
    <div class="button"></div>
    <div class="button"></div>
  </div>
  <div class="base"></div>
</div>

/* 雪だるま全体 */
.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);
}

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

プレゼントボックス

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

<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>

/* プレゼント全体 */
.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