No.025 カロリーメイト | 大塚製薬 – webサイト分析

カロリーメイト公式サイト | 大塚製薬 (https://www.otsuka.co.jp/cmt/)分析

カロリーメイト公式サイトは、商品の黄色をカラーに使い、イラストや動きを利用したサイトです。商品紹介から読み物ページ、キャンペーン等の各種ページ、動画だけではなく、スペシャルページも充実しているサイトです。とても面白いサイトです。
今回は勉強のために、デザインや製品を利用したコンテンツを分析しました。

 

PCメインビュー

font

“Zen Kaku Gothic New”, sans-serif
文字:黒・白
読みやすい文字です。

color

黄色(#fac014)・黒・白
背景:黄色(#fac014)・白

 

 

メニュー

PCでは上部にメニューがあります。このメニューはスマートフォンでは右上のハンバーガーメニューになっています。
PCでは、上部メニューのリンクにマウスを乗せるとボックスが開きます。画像もボックス内に表示されています。

 

スマートフォンハンバーガーメニュー内

 

フッターは縦に長いタイプ

PCフッター

 

まとめ

イラストが利用されています。商品に水滴が付いている写真使いがとても爽やかです。スペシャルページはとても面白いコンテンツです。ひとつひとつどのように作られているのかを私も考えてみたいと思います。何度も開いて見たくなるサイトです。

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

 

PCスクリーンショット

 

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

 

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