見出し画像

1日1WEBサイト デザイン分析 #5 "クロッカンシュー ザクザク"

こんにちは。WEBデザイナー目指して勉強中のかいもちです。
今日は... ド派手 ! 気になる ! つい見ちゃう !
そういうページを分析します。 

" クロッカンシュー ザクザク "

目的・ターゲット

目的
・商品紹介 → 販促
ターゲット
・新しいもの、おしゃれなもの、映えスイーツが好きな
 SNSネイティブ世代


配色

画像1

・パッケージにも使われているライトブルーをアクセントカラーに
 白背景 & 黒文字、黒背景 & 白文字 のシンプルな配色


フォント

・UniversLTPro-BoldCond (サブタイトル英字)
→ Mono Type社製の欧文フォント。縦長でスタイリッシュな印象。

・Oswald - 400 (PRICE部分の英字)
→Universよりも更に縦長。Googleフォント。

・Noto Sans Japanese (日本語)

※ ちなみに気になるセクションタイトルは画像でした...


ファーストビュー

スクリーンショット 2021-07-04 14.16.45

特徴
・写真がメイン、数秒で3枚切り替わる。
 1.  ↑コレ (とにかくザクザクしてることが伝わる)
 2. 袋に入った商品写真 (1. よりは落ち着いた感じの写真)
 3. 謎 (ブレブレの販売風景 ? シャッとした激しい動きを感じる写真)

→ スタイリッシュさ、フレッシュさ、元気さを感じる ! 


コンテンツ

ずっとアイコンが右端に追いかけてきます↓

スクリーンショット 2021-07-04 14.45.06


スクリーンショット 2021-07-04 14.16.55

NEWS
・枠のついた写真、タイトル、遷移ボタンのシンプルな構成
・太めの枠がつくことで、よりスタイリッシュでカクカクした印象

スクリーンショット 2021-07-04 14.48.34

CONCEPT
・正直... So freshな感じも、FACTORY = SHOP な感じも全然伝わらない...
 と思ったら、下のコンテンツでそれぞれ説明されてた ! 

スクリーンショット 2021-07-04 14.18.05

CONCEPT (の説明部分)
・斜め切り、がスタイリッシュな印象を与える
・WHAT IS 〜 の + 部分に波紋アニメーションがあって、
 クリックできることが伝わりやすい

スクリーンショット 2021-07-04 14.18.25

PRICE / HOE TO EAT
・ここの英字部分だけフォントが違う理由はなんなんだろう...
・HOW TO EATはこのページ見てる人に必要な情報なのか疑問

スクリーンショット 2021-07-04 14.18.38

SHOP
・Listに飛ばすだけのコンテンツだけど、写真や背景にカットを入っていて
 ページのスタイリッシュな雰囲気を助長するのに一役買っている

スクリーンショット 2021-07-04 14.18.45

FOOTER
・必要最低限で見やすい
・ちなみに各国のページはほぼ同じデザインながら、写真やアニメーション
 ファビコン等に少しずつ違いがある


感想

・商品そのものを紹介したいとか、覚えてほしいというよりは、
 おしゃれでスタイリッシュなイメージを持ってもらいたいという印象。

・アニメーションがたくさんあって、ワクワクする。
 あっちからもこっちからもコンテンツがやってきて目移りするほど。
 ターゲットを考えるとピッタリハマっていると思う。

・文章も全体的にライトで、読み手の負担が少ない。


コンセプトがめちゃめちゃ作り込まれてるな・・・と思ったら
あのBakeさんのブランドでした。さすがのブランディング力 ! 

この記事が気に入ったらサポートをしてみませんか?