~2016~クリスマスのWebデザイン10選+おまけ[雪を降らせるjQuery]

投稿日:2016年12月20日

xmas2016_icatch
みなさんいよいよ2016年も年の瀬、いかがお過ごしでしょうか?
少し前にクリスマス関連のページ制作とバナー制作をしましたが、意外と参考が見つからなかったので今回探してみました。
クリスマスのWebサイトを作成する際にきっと役に立つおまけ付きでご紹介します。

Marunouchi Bright Christmas

capture_xmas01http://www.marunouchi.com/feature_jp/brightchristmas2016/top.html
丸の内毎年恒例のイベントサイトだけあって下層ページも革張り背景でかなり凝っていますね。
黒をベースに画像をうまく配置して奥行のある空間ができています。なにが見れるのかついクリックしたくなります。
下層ページもテクスチャをふんだんに使った凝ったデザインになっています。

カノン・ダジュール~青い精霊の森~

capture_xmas02http://www.caretta.jp/Illumination2016/
カレッタ汐留のイルミネーションイベントサイトです。
実際のイルミネーションの写真の魅力を活かしたサイトに仕上がっていて、本物も見に行きたくなりますね!
青色がメインカラーの大人向けのクリスマスデザインサイトです。

WINTER ILLUMINATION 2016

capture_xmas03http://gardenplace.jp/special/2016christmas/
恵比寿ガーデンプレイスのクリスマス特設サイトです。
こちらも実際の画像を用い、更に動きをつけて演出しています。下層もそれぞれのページ毎にデザインされていて素敵なサイトです。

JUWEL DOME

capture_xmas04http://jewel-dome.com/
目黒川のイルミネーションイベントサイトです。
写真は一切使わずシンプルでおしゃれなデザインで仕上げています。
あえてイルミネーションを使わず公式サイトで画像を使わないところが憎いですね!

AEON Hello! New CHRISTMAS 2016

capture_xmas05http://www.aeon-hellonew.net/
イオンのクリスマス特設サイトです。
大胆な構成で元気で明るいクリスマスを演出しています。くりぬきで背景見せているの、いいですね!
ファビコンもかわいいです。

ハンズのクリスマス-Present THE MERRY Christmas!-

capture_xmas06http://www.tokyu-hands.co.jp/christmas/2016/
イラストと木彫の素材を使って温かみのあるデザインにしていますね。
背景に雪を降らせていて冬の室内を表現しているようです。

womoが贈るクリスマス

capture_xmas07https://womo.jp/feature/christmas/
静岡の口コミサイトでスタンダードな構成ながらコンテンツの境目を不定形な画像で区切っていて工夫にぐっときますね!
このサイトも背景に雪を降らせています!
今年のクリスマスサイトでは赤以外の色が目立った印象ですが、こちらは王道カラーのようです。
ロゴもクリスマスバージョンになっていて良いですね。

三越伊勢丹グループ「こころに太陽を呼ぶ、祝祭。」

capture_xmas08http://cp.miguide.jp/christmas-journey/index.html?utm_source=christmas-journey#
クリスマスをオリジナルのイベントへと昇華させようとしているかなりチャレンジングな伊勢丹の特設サイト。
太陽をモチーフにするとはかなり斬新です!各店舗にもページを持たせていてデザインを微妙に変えてそろえています。

HAPPY HOLIDAY|PARCO

capture_xmas09http://www.parco.jp/gift/
作家のイラストを背景に使ったパルコらしい個性的なクリスマスサイトです。
飾りつけをしているときのようなわくわく感がでてますね!

ラゾーナ×アーティストコラボレーション でんぱ組.inc

capture_xmas10http://www.lazona-kawasaki.com/10th/artist/xmas/
クリスマスというよりはでんぱ組とのコラボのほうが推しの様ですがしっかり構成された特設サイトです。
見やすく且つクリスマスらしいポップなデザインですね!

イベントサイトを主に紹介しているので凝ったものが多いですが、
クリスマスのサイトはフォントやグラデーションの装飾など普段のサイトとは違ってふんだんに盛って楽しめますね。
クリスマスデザインの制作の参考に是非!!(来年とかに…)

おまけ

上記サイトを見てきた中で目立ったベースカラー赤・青・緑でモチーフを変えてクリスマスっぽいデザインを作ってみました。

ついでに雪も降らせてみました!!


「jQuery-Snowfall」というjsが有名な様ですが、今回はこちら(ツクメモ – ウェブやアプリをツクるヒトのメモ)で紹介しているプラグインを使っています。(こちらのサイトの下にページ内に「このページに雪を降らす」ボタンがあるのですが、個人的にぐっときました。是非押してみてください。)
こちらは画像の読み込みで結晶を降らせていますが、Snowfallの方がリアルな雪に見えそうです。

動きをつけれられると楽しいですね!みなさんも試しに作ってみてはいかがでしょうか?

…では!

澤口

関連記事

カテゴリー: jQuery, サイト制作, デザイン
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル