レモンな向上心|WEBサイト100選

No.002 ステラおばさんのクッキー公式WEBサイト

・視点

ステラおばさんのクッキー公式WEBサイトを特に企業イメージや商品に沿ったデザインに注目してレビューしていきます。

初見の印象としては非常に親しみやすく、開いたとたんに広がるメインビジュアルの動画が楽しい。もっと見たいと感じさせます。

1、ターゲット

20代~50代の女性。自分へのご褒美や職場などへの手土産、ギフトに重宝されている。

⇒ナチュラルで温かい雰囲気と特定の誰かにあてた特別な贈り物というイメージが大切。

No.002 ステラおばさんのクッキー | 株式会社アントステラ 公式WEBサイト レモンな向上心|WEBサイト100選
No.002 ステラおばさんのクッキー公式WEBサイト レモンな向上心|WEBサイト100選

 

2、ヘッダー

・色彩 #FEF7DBメイン/ #4F3130 文字

ロゴマークで採用されている色合いを使うことでまとまった印象です。

また、#FEF7DBは焼き上がり前のクッキー生地を思わせるライトイエロー

・商品紹介から始まり、

ホバー時にボーダーラインが伸びる動きとプルダウンでメニューが広がるが、

オンラインショップと店舗案内は角丸で囲われ、この2点のみホバー時は明るく表示されるなど、差別化されている。

・ロゴをあえて少し大きく配置しヒーローイメージにかぶせることで事務的な単調さが緩和されている。

・全体的に直線が少なく丸みやシャドウがつけられていることで温かくメルヘンな印象にまとめらえています。

プルダウンメニューにも丸みがあり、こだわりを感じました。

3、トップページ

・メインビジュアル

クッキーの調理過程から始まる動画が約35秒間ヒーロームービーとして使用されております。

斜めに英字が浮かび上がるアニメーションも合わせておしゃれで楽しい印象。

さらに作られているクッキーはステラおばさんのクッキーでも一番人気のチョコチップクッキー。文字通り看板商品であることが一目でわかる構成が素敵です。

No.002 ステラおばさんのクッキー | 株式会社アントステラ 公式WEBサイト レモンな向上心|WEBサイト100選
No.002 ステラおばさんのクッキー公式WEBサイトレモンな向上心|WEBサイト100選

 

・お知らせ

:hoverで色が変化。右端のmoreがほんの少し左に動く。新店情報など新着3件表示。

・トピックス

新着の期間限定商品やイベントを画像を添えて掲載。新店情報と分けることで目に入りやすく、画像はホバー拡大する。

・イベントキャンペーン

さらに詳細な開催されているイベント情報。スライダー式に複数のバナーが横に移動。ホバーで明るく表示される演出。

・商品紹介

ギフト紹介が先に3つ、下に量り売りクッキーについてが並ぶ

ギフト紹介ホバー拡大、量り売りクッキーにはホバーで明るく表示される演出。

 

◎お知らせ、トピックス、イベントキャンペーン共にホバーによる演出があることでクリックできる箇所だと一目で認識しやすい

 

4、ピックアップ ー ”クッキーガイド”

No.002 ステラおばさんのクッキー | 株式会社アントステラ 公式WEBサイト レモンな向上心|WEBサイト100選
No.002 ステラおばさんのクッキー公式WEBサイト レモンな向上心|WEBサイト100選

商品紹介⇒量り売りクッキー で表示される店頭で購入できる量り売りクッキーの一覧

クッキーがすべて手書き風イラストであらわされており絵本のような世界観。

現在発売されているものだけでなく春夏秋冬すべてのクッキーが並ぶ1ページは見ているだけで楽しく

お店に行ってみたい!食べてみたい!と思わせる雰囲気が満載です。

 

・所感

ヒーローイメージの動画、角丸が多様されていること、ホバー時の動きが細かく設定されていることなどから

ステラおばさんのクッキーが持つメルヘンで温かみのある雰囲気が演出されていました。

また、全体がロゴマークの色彩+白にまとまっていることでギフトで誰かに送りたい特別なアイテムであるところも感じられました。

 

レモンな向上心|WEBサイト100選

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です