ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

【WEBデザイン10選】クリスマスから年末年始まで!「冬のキャンペーン」サイトまとめ

  • WEBデザイン

いよいよ今年も、あと少しで終わりですね。いろいろとイベントごとの多いシーズン、慌ただしくお過ごしの方も多いと思います。

この時期、WEB上にも「冬のキャンペーン」サイトが多数開設され、賑わいでいます。そこで今回は、クリスマスに忘・新年会、年賀状におせち…など、年末年始にちなんだクオリティの高い「冬のキャンペーン」サイトをピックアップしてみました。企画や切り口、季節感やテイストの表現などをぜひ参考にしてください!

クリスマス特集サイト

年末のイベントといえば、やはりクリスマス。たくさんあるキャンペーンサイトから、企画・デザインともにクオリティが高いものを3つ選んでみました。

ハンズの森のクリスマス

01
http://www.tokyu-hands.co.jp/2015xmas/

業種:卸売業
サイトの目的:クリスマスキャンペーンの訴求
サイトの特長:レスポンシブWEBデザイン、イラスト

東急ハンズの2015年クリスマスキャンペーンサイトです。北欧のクリスマスをテーマに「ハンズの森のクリスマス」と題して展開。森を感じさせるアナログ感のあるテクスチャー表現と、クレヨンで描かれたようなイラストに温かみがあり、柔らかく優しい印象のサイトになっています。しかも、しっかりとスポンシブ対応されており、画像を多く使ったレスポンシブWEBデザインの参考にもなります。

LUMINE LIGHT ME CHRISTMAS

02
http://www.lumine.ne.jp/christmas2015/

業種:ファッションビル
サイトの目的:ルミネ各店のクリスマスキャンペーン訴求
サイトの特長:レスポンシブWEBデザイン、パララックス、動画

JR東日本のファッション系駅ビル、ルミネの2015年クリスマスキャンペーンサイトです。ファーストビューに現れる、まるで映画のような動画。そして、ロゴ、タイポグラフィー、パララックスで漂うように動くアイテム、キラキラとした光、さらにはマウスオーバーで星が瞬くリンク先ボタンなど、女性の好きなテイストが、溢れんばかりにふんだんに盛り込まれたサイトになっています。若い女性をターゲットにしたキャンペーンサイトとして、大いに参考になります。

AEON Let’s Make a Christmas!

03
http://mk.otoku.aeonsquare.net/christmas/

業種:流通業
サイトの目的:イオンのクリスマスキャンペーンの訴求
サイトの特長:タイルレイアウト、アニメーション

イオンの2015年のクリスマスキャンペーンサイトは、コンテンツ数も多く内容充実。しかも、それぞれのページがしっかりと細部まで作り込まれた、非常にクオリティの高い仕上がりになっています。タイルレイアウトで配置された各コンテンツへのリンクボタンは、それぞれの内容を象徴したバナー風にまとめられており、そのひとつひとつを見るだけでもクリスマス・デザインの参考になり、グラフィック的にも素晴らしいクオリティのサイトです。

阪急のChristmas2015

04
http://www.hankyu-dept.co.jp/honten/h/christmas2015/

業種:百貨店
サイトの目的:クリスマスキャンペーンの訴求
サイトの特長:アニメーション、フッター固定デザイン

阪急百貨店の2015年クリスマスキャンペーンサイトは、星空をイメージしたファーストビューのビジュアルがしっかりと作り込まれています。各コンテンツ・メニューが、クリスマスツリーを飾るアイテムに見立てて表現されるという、デザイン性の高いサイトになっています。ページが読み込まれる際のアニメーションの出方も、女性を意識したかわいい作りになっており、ひとつの物語を感じさせます。雪原のイメージでデザインされた固定フッターが、とてもよく効いています。

年賀状の特集サイト

メールやSNSが普及して、年賀状を出す人が年々減少している今。そんな流れの中で、「少しでも多くの人に年賀状を出してもらいたい」という工夫が感じられます。

郵便年賀

05
http://yubin-nenga.jp/

業種:郵便事業
サイトの目的:年賀状のキャンペーンサイト
サイトの特長:タイルレイアウト、WEBアプリ

日本郵便の年賀状キャンペーンサイトです。様々なコンテンツを盛りだくさんに用意し、様々な切り口から年賀状の作り方や楽しみ方の提案がなされています。WEB上で年賀状を作成できるアプリや、住所を知らないSNSの友だちにも年賀状が送れるサービスなどもあり、年賀状というアナログな文化とデジタルをうまく融合させたサービスの作り方も参考になります。

ウルトラヒーロー年賀状

06
https://net-nengajo.jp/special/ultrahero/

業種:郵便事業
サイトの目的:年賀状のキャンペーンサイト
サイトの特長:タイルレイアウト、パララックス

こちらも日本郵便の年賀状キャンペーンのサイト。水墨画タッチで描かれたウルトラマンの年賀状をネット上で作って、そこからハガキで送ることができるというサービスになっています。ファーストビューにインパクトがあり、スクロールとともに現れる歴代ウルトラマンのイラストは迫力十分。相手に送るだけではなく、自分も手元に持っておきたい…そんなコレクター魂にも火を付けるような企画になっています。グローバルメニューのマウスオーバー時の表現など、細かいところも丁寧にデザインされたサイト。スマホ版も別に用意されています。

おせち料理の予約販売サイト

おせちは予約するもの…という習慣はすっかり定着。最近は、取りに行く時間に自由が利くということで、コンビニでおせちを購入する人が増加中。競争も激化し、かつてのようにブランドや高級感だけではすまなくなったようです。そんな、おせち予約のサイトを見ていきましょう。

正月を彩る高島屋のおせち料理 2016

07
http://www.takashimaya.co.jp/shopping/special/osechi/

業種:百貨店
サイトの目的:おせち料理の予約受付(全国配送)
サイトの特長:グリッドレイアウト

高島屋の2016年おせち料理特集サイトです。一見すると、ごくオーソドックスなWEBデザインのように見えますが、おせちという和のテイストと、高島屋という高級感をデザインで上手く表現しています。このようなデザインは、やりすぎてしまうと逆に安っぽいチラシのようになってしまいがち。しっかりと売りたい商品を訴求しつつも、セールス色を出しすぎず品よくまとめている好例としてとりあげてみました。

セブン‐イレブンのおせち

08
http://www.sej.co.jp/products/osechi/

業種:コンビニ
サイトの目的:おせち料理の予約販売
サイトの特長:レスポンシブWebデザイン、1カラムレイアウト

こちらはセブン‐イレブンの2016年のおせち料理特集サイト。スマホやタブレットで閲覧する人が多いことを考慮したと思われる1カラムのレスポンシブWEBデザインで、すっきり見やすいサイトにまとまっています。ごくシンプルなデザインですが、フォントやテクスチャー、和のモチーフのあしらいなどで、ちゃんとお正月の雰囲気や高級なおせち料理の空気感を醸しだしています。

ローソンのおせち

09
http://www.lawson.co.jp/recommend/osechi2016/

業種:コンビニ
サイトの目的:おせち料理の予約販売
サイトの特長:LP型サイト、1カラムレイアウト

ローソンのおせち料理特集サイトは、先に紹介した2サイトよりも、画像を大きくふんだんに使用して、LP(ランディングページ)のような作りで構成されています。画像を多く使うことにはメリット、デメリットの両面がありますが、キャンペーンをビジュアル重視で見せる場合には、あえてこのような作りにするのも1つの方法。美味しさのシズル感が感じられます。

忘年会・新年会特集サイト

最後に忘年会・新年会の特集サイトをひとつ。グルメサイトの特集ページが、どれも同じようなイメージで構成されている中で、ターゲットを絞った打ち出し方が目を引きました。
森ビル 忘年会・新年会特集2015-2016

10
http://www.hillscard.com/campaign/2015enkai/

業種:飲食業
サイトの目的:森ビルの忘年会・新年会の訴求
サイトの特長:レスポンシブWEBデザイン

森ビルの忘年会・新年会特集サイト。森ビルということで、都心で働くビジネスマンをターゲットにしていると思われ、宴会色の薄い都会的なデザインに仕上がっています。また、地図上で場所から検索、予算で検索、料理のジャンルで検索など、お店を決める時の行動に沿ったわかりやすい検索メニューが用意され、「音で検索」などという、さりげない遊び心もプラス。スマホで行うことが多いお店探しを考えてか、スマホでも検索しやすいレスポンシブWEBデザインになっています。

今回のまとめ

以上、今回のWEBデザイン10選では、さまざまな冬のキャンペーンサイトを見てきました。クリスマスならキラキラとした華やかなテイスト、おせち料理なら和の雰囲気や品の良さなど、シーズンキャンペーンには、それを伝えるために抑えておかなければならない基本ポイントがあります。それを抑えながらも、いかに自由な発想でデザインしていくかが腕の見せどころ。その意味で、季節のキャンペーンサイトには学べる点が多いように思います。ぜひ、参考にしてみてください。

<関連記事>
【WEBデザイン10選】ページ遷移のエフェクトが心地よいサイトまとめ
これは上手い!縦の文字組みを効果的に使ったサイトまとめ
【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

  9. 9

    【WEBデザイン10選】効果的に動画を使ったキャンペーン、プロモーションサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」