No.045 森永ビスケット – webサイト分析

森永ビスケット|森永製菓株式会社公式サイト(https://www.morinaga.co.jp/biscuit/)分析

森永ビスケットのブランドページは、商品紹介やレシピ、ビスケットの歴史等が掲載されているLPです。ページを開くとビスケットが大きな画像で紹介されています。短い動画も表示されます。
今回は勉強のために、デザインを分析しました。

PCメインビュー

font

“ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, “MS Pゴシック”, “MS PGothic”, sans-serif
文字:茶(#613335)・白・黒系(#222222)
読みやすい文字です。

color

黄土色(#cca83c)・赤(#df0522)・ベージュ系(#f8f5e6)・青(#04409d)・黄(#ffe200)

メニュー

PCもスマホも右上にハンバーガーメニューがあります。このメニューは開くとリンクが左から右に動いて表示されます。

 

ハンバーガーメニュー内

画面の見せ方

ラインアップの詳しく見るボタンをクリックすると、商品紹介がラインアップ下に開きます。閉じるボタンを押すと、商品紹介が閉じます。イラストが使われています。

 

まとめ

LPを作る際にとても参考になるデザインのページです。レシピが掲載されていて、動画も有ります。タルトやケーキ等、作りたくなります。

初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。

 

PCトップページスクリーンショット

 

スマートフォントップページスクリーンショット

 

webサイト100選 | 雨とホットケーキ