見出し画像

ギリシャヨーグルト パルテノ #1日1サイトレビュー



【概要】

森永乳業のギリシャヨーグルトパルテノのプロダクトサイト


【ターゲット】

パルテノの商品自体はなんとなく知っているが、詳しくは知らない人


【印象】

・パッケージと同じ青と白の配色で爽やかな印象

・画像がたくさん使用されている

・画像が多い分、文字を明朝体にして上品ですっきりとした印象に

・ヘッダーとフッターが同じ青色で、良い感じの始まりと終わりの締め色になっている


【構成】

・トップページ

・About:パルテノとは

・Greek Yogurt:ギリシャヨーグルトとは

・Lineup:ラインナップ

・Lifestyle:パルテノと暮らしと(カラダづくりとしての活用、アレンジレシピの紹介)

・Special:スペシャルギャラリー(TVCM、WEBムービー)


【メインビジュアル】

・フルスクリーンに画像が3分割で表示

・画像は外国の風景(おそらくギリシャ)や商品パッケージ、中身のヨーグルトなどで各カテゴリの画像が現れる。画像をクリックするとそのページに飛ぶ。何もしなければ5〜6秒で変わっていく。右側の切り替えボタンで自由に画像を切り替えできる

・画像の上に現れるテキストは白い帯を敷くことで見やすく

・上部にサイトタイトルとグローバルナビゲーションが配置

・右側にキャンペーンのバナーが配置

・右下にスクロールを促すアイコンが配置


【コンテンツ】

・MVから下にスクロールすると、下のコンテンツページがMVを覆い被さるような動きをする

・画像やコンテンツ同士に余白はないが画像でしっかり区切られている

・画像のマウスオーバーは画像が少し拡大される

・画像などはほぼサイトの横幅いっぱいに表示

・画像がない部分は余白が多い

・ボタンの枠線は細くし、明朝体の細さや上品さと統一させている。また、少し角丸で堅すぎない印象に(border-radiud:3px;)

・カテゴリの画面の切り替えの途中にローディングページが現れる

・各カテゴリページのヘッダーにはそれぞれに合った画像とカテゴリ名が表示

・カテゴリ名には手書きの文字があしらいで添えられている

・レイアウトはシングルカラムや2カラムなどカテゴリによって異なる

・各カテゴリページの下部に他のカテゴリのコンテンツが表示される→他のコンテンツも見てもらいやすくなる

・ラインナップの商品紹介では格子状に画像と説明文が交互に配置→デザイン性が高くおしゃれさがある

・フッターにお問いわせ、ご利用規約、プライバシーポリシー、会社ロゴマークが配置


【フォント】

・見出しはMincho(明朝体)

・本文などはNoto Sans JP(ゴシック体)

・アクセントにWork Sans(細く丸みがあり、80〜100pxとフォントサイズを大きくして使用しているが派手すぎず上品でおしゃれな印象になる)

・大見出しは50〜60px、中見出しは40px、小見出しは30px

・本文は16px

・ジャンプ率は高めだが、MinchoやWork Sansなどの細いフォントで落ち着いた印象になり、派手さはない


【カラー】

・ベースカラーは白(#ffffff)

・メインカラーは青(#003888)

・アクセントカラーに青っぽいグレー(#656f7f、#b2b7bf)

・全体的にパッケージ色の寒色で爽やかな印象に


【レスポンシブ】

SP表示では、

・ハンバーガーメニューに変化

・MV画像の3分割の大きさの位置が変化

・キャンペーンバナーが画面下部に配置

・ラインナップの画像とテキストの配置はスライドレイアウトで縦並びで配置に


【サイトを通じてどのような目的を達成しているか】

目的:パルテノの認知、購入

・パルテノを知っている人でもパルテノを様々なアレンジレシピに活用できることを紹介することで、様々な用途で購入してらえる

➡︎結果:目的達成



画像2

画像3

画像1




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