Blog スタッフブログ
【WEBデザイン】特集&イベント&LPサイトに使える!ハロウィンタッチサイトデザインまとめ

こんにちは、Webデザイナーのそいです。
本格的に秋到来ということで、この時期のイベントといえばハロウィンですね!今回はそんなハロウィンにあわせたイベントサイトや商品サイトを大調査!ハロウィンのイメージにあったワクワクするデザインやアイデア満載のサイトをピックアップしましたので、是非ご覧ください。
ミスタードーナツ

まずはじめにミスタードーナツの特集サイトです。ミスタードーナツといえばポケモンや有名パティシエとのコラボなど話題の商品をシーズンごとに発売されているイメージですね。

商品のコンセプトメッセージにもあるように、メインビジュアルには雷のビリビリとしたエフェクトが実装されていました。今回はブラックサンダーとのコラボなので「雷」がコンセプトのようです。ページはシンプルなデザインですがハロウィンのイラストが使われていたり商品が映えるようなサイトの配色が印象的でした。
不二家

お次は不二家のハロウィン商品ページ。シーズン商品の特集サイトのようです。
ケーキやギフト、スーパーなどのお店で購入できるお菓子、あとはレシピ集やキッズ・家庭で楽しめるパーティ用印刷物などのスペシャルコンテンツへのリンク集が並んでいます。

モバイルファーストのレイアウトを採用されていて、左右のスペースはペコちゃんとポコちゃんがスクロールに合わせてついてきます。子供さんにとって見やすく親しみやすく感じられるようにデザインされていますね。

バナーはインフォメーション・ダウンロードとデザインが色分けされていて可愛らしいデザインに。
シャトレーゼ

洋菓子店、シャトレーゼも商品特集サイトが開設されています。
商品のパッケージに使われてイラストがサイトでもふんだんに使われています。

ケーキ・チョコ・焼き菓子の3カテゴリの商品紹介サイトです。

サイト全体にイラストが散りばめられていたり、背景色はハロウィンカラーを使ってグラデーションで表現されていました。絵本を読んでいるような気分になり、お子さんと一緒に商品を選ぶのが楽しくなりそうなサイトデザインとなっていました。
ハウステンボス

ハウステンボスのハロウィンイベントページです。ユーザーを絞らないシンプルな構成のデザインです。

開催イベントやエリア紹介は大きく分けて4つ。シンプルな構成でありながらしっかりハロウィンカラーを取り入れたサイトとなっており綺麗でまとまった印象を受けました。

写真もとても綺麗なのですが、写真映えする絶妙なカラーと配色バランスです。配色を変えるだけでイベント感を感じさせるテクニックはデザインの勉強になりますね!
カルディコーヒーファーム

サイト紹介も終盤に入りました。カルディコーヒーファームのサイトです。店に足を運んでみると、いつでもイベントシーズンの商品が売られていて楽しいですよね!そんなカルディコーヒーファームにも特集サイトがありました。

タイルで並べられた商品画像がドドンと並んだインパクトあるページです。ポップな色合いで商品画像が並んでいてワクワクしますね!画像をクリックすると商品説明ダイアログが表示されます。

上の画像はギフトの紹介、他におもちゃ(くじ引きなど)のアイテム紹介コンテンツも掲載されていました。おもちゃのアイテム紹介はYoutubeショート動画が連携されていて上手くSNS活用もされていました。上から下まで、インパクト大&キャッチーに魅せるオシャレなサイトデザインでした。
サンシャインシティ

最後に東京は池袋にある商業施設、サンシャインシティのハロウィンイベントサイトです。施設内で催されているイベントや施設内にある飲食店や雑貨の限定商品紹介など情報紹介サイトとなっています。

このサイトの作りはとてもシンプル。タブ切替で各イベント・催しものの紹介が見られるようになっています。
キービジュアルにも使われているイラストが、見出しなどの装飾にもたくさん使われていました。

1つ1つの情報はわかりやすく分類分けされていたり、はっきりとした色分けがなされているのでとても見やすいです。また、情報はボリュームたっぷりでありながらタブ分けされているので長い印象も受けず目的にあわせて情報が知れるので導線がしっかりつくりこまれている印象でした。
まとめ
いかがでしょうか。今回はハロウィンタッチのサイトをまとめて紹介しました。ハロウィンをイメージさせるかぼちゃなどイラストを取り入れて表現されているだけでなく、色合いや見せ方、細部のデザインなど作り手のこだわりが詰まったサイトがたくさん見られました。
特に最後のサンシャインシティのサイトではタブ分けが有効的に使われておりシーズン特集ページという括りだけでなく幅広い目的で使えそうな手法でした。今回ご紹介したサイトも期間限定のサイトになっていますのでぜひお早めにチェックしてみてください。
今回もご一読いただきありがとうございました。