21.スノーサンド サイトレビュー

SNOW SAND ＜スノーサンド＞　冬季限定生チョコレートサンドクッキー

冬季限定のチョコレートクッキー、スノーサンドのブランドサイト。
寒色を使用しているのに、どこか暖かい気持ちになります。Twitterでもよく見かけた人気のサイトです。

目的
・スノーサンドの販売促進。

ターゲット
・スノーサンドの購入を考えている人
・友人へのプレゼントを考えている人
・限定物に弱い人

印象
かわいい、爽やか、優しい、おしゃれ

特徴

余白
縦180px。余白は広く、ゆったりとした印象。

配色
#EBEEF3　ベースカラー　薄い灰色
#13629c　メインカラー　濃い水色
#1A1D1F 　文字色　黒
冬を感じさせるような青みが強い配色。青は食欲減退色として知られていますが、このお菓子はパッケージのデザイン性の高さが魅力だと思うので、その印象を大切にした配色に感じました。

フォント
"Noto Serif JP"　日本語
Marcellus　英語　GoogleFontsから使用可

Marcellus
上品なフォント。有名フォントOptimaのような印象。

メインビジュアル

背景は冬の山をイメージしたようなイラストで、雪の上にスノーサンドが載っているような構成。スノーサンドは「冬」をイメージして作られたお菓子で、このメインビジュアルは商品の魅力や感じてほしい雰囲気が伝わりやすいと感じました。メインビジュアル下の区切り線が曲線になっているところも、柔らかさが感じられます。
メインビジュアルを見ると、お菓子のパッケージになっていそうです。

変化する背景

スノーサンドの特徴、パッケージのコンテンツでは、上記の画像のように背景が変化します。特にじっくり見てほしい、じっくり見てもらえそうなサイトでは、このように背景を変えてあげると世界観に入り込めるので魅力的だなと感じました。色々なサイトで取り入れられそうです。

真似したいポイント

・編集がいらない部分はバナーとして画像で配置する。

・写真や背景色の区切りを曲線にすると柔らかい印象になる。

・ヘッダーをホバーすると直線が波線になる。(とまととのサイトでも似たような動きあり)

・シンプルなイラストを繰り返すことで、可愛らしさを感じさせる

・商品画像をホバーすると、写真がずれて表示されて中身が見られる。

・「スノーサンドの特徴」のコンテンツで、写真の配置に少しづつ変化を出している→飽きさせない工夫

・「*」を雪を表現するマークとして使っている。
→他にも記号を表す文字を使えそう。

感想

今回はスノーサンドのWEBサイトをレビューしました!とても可愛らしいサイトで一度レビューしたいと思っていたので、今回レビューできてよかったです^^今年は残念ながらこの商品を知るのが遅く買いそびれてしまったので、来年再販があれば購入したいです。