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

No.009 Krispy Kreme Doughnuts公式WEBサイト

*視点

今回はKrispy Kreme Doughnuts 公式WEBサイトをレビュー。

アメリカンでポップな印象のあるKrispy Kreme Doughnuts。特にWEBサイトでは色彩計画がシンプルで見やすく

ぜひ学んでいきたいと思います。

  • 目的

Krispy Kreme Doughnuts 公式WEBサイトとして、新製品の発売情報や、キャンペーン情報の発信。

店舗検索機能。テイクアウト、デリバリーの予約機能とその誘導。

  • ターゲット層

10代~40代の男女。

⇒若者層にはSNS映えするかわいい商品と雰囲気、季節限定などが大切。「友達や誰かに広めたい」そういった印象を大事にしたい。

⇒30代~に対しては、ファミリー向けのアイテムや手土産、差し入れ需要も増えます。

また、サステナブル志向、健康意識などが感じられるワードは響きやすい。

  • フォント

本文:読みやすいNoto Sans、ヒラギノ角ゴ Pro W3。

見出し:少し丸みを帯びた太文字が使用され、カジュアルさ、親しみやすさを感じます。

また、見出しは全てロゴマークと同じ緑色の枠組みと赤い文字が使用されており、統一感を感じます。

 

  • 色彩

白をメインカラーに、ロゴマークの赤、緑を使用した統一感のある構成。

赤#C70F2E、緑#046A38ととても鮮やかな色が使用されていていますが、程よい割合でとても見やすく目を引きます。

補色の関係が使用されたシンプルだけれど、トレンド感のある素敵な配色です。

 

・サイトデザイン

No.009 Krispy Kreme Doughnuts公式WEBサイト レモンな向上心|WEBサイト100選
No.009 Krispy Kreme Doughnuts公式WEBサイト レモンな向上心|WEBサイト100選

 

・現在コラボ中のDole×Krispy Kreme Doughnuts  もったいないフルーツプロジェクトドーナツのビジュアルがヒーローイメージに使用されています。

【もったいないフルーツプロジェクトとは?】

Doleが行っているプロジェクト。様々な理由で規格外になったフルーツを一つでも多く救出し、「フルーツの可能性を広げる」「もったいないをあきらめない」

をコンセプトに商品展開、情報の発信を行っているサスティナブルなプロジェクト。

 

・ナビゲーション部分は黒から赤くホバーし、真ん中にロゴマーク。ロゴマークはあえて少しはみ出して配置され、それぞれの視認性を上げています。

さらに、ナビゲーションよりも上、右側にテイクアウト用の注文ホーム「PICKUP」とデリバリー用の「DELIVERY」が並びます。

ナビゲーションとは異なる配色、赤い楕円に白文字で配置されていることですぐに注文ボタンだとわかるデザイン。

No.009 Krispy Kreme Doughnuts公式WEBサイト レモンな向上心|WEBサイト100選
No.009 Krispy Kreme Doughnuts公式WEBサイト レモンな向上心|WEBサイト100選

 

また、ヒーローイメージの下には262px×262pの正方形で作られた様々なドーナツのバナーが左側に移動していきます。

このバナーがとてもカラフルでかわいらしく、シンプルなサイトデザインを華やかに見せています。

No.009 Krispy Kreme Doughnuts公式WEBサイト レモンな向上心|WEBサイト100選
No.009 Krispy Kreme Doughnuts公式WEBサイト レモンな向上心|WEBサイト100選

 

・本文中は「menu」「column」「news」「shop news」と見出しが縦スクロールで並び、

新製品情報の提供や、おすすめドーナツのご紹介、イベントの開催レポなどが並びます。

特に「menu」欄はバックカラーが赤く塗られ、目を引くデザインにされています。

 

  • 所感

Krispy Kreme Doughnuts公式WEBサイトは白をベースにロゴマークと同じ赤、緑を使用したシンプルですが見やすく、トレンド感のあるデザインでした。

改めて、ロゴマークをもとに色彩計画を立てる重要性を感じました。

また、メインビジュアルはDole×Krispy Kreme Doughnuts もったいないフルーツプロジェクトドーナツのビジュアルがヒーローイメージに使用されており、

おすすめの商品として非常に目を引くとともに、サスティナブルなブランドイメージを促進させる配置となっておりました。

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

コメントを残す

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