ココアはやっぱりモリナガ | 森永製菓 公式サイト(https://www.morinaga.co.jp/cocoa/)分析
ココアはやっぱりモリナガ（森永製菓）のサイトは、ピックアップした各ページへのリンクや、商品情報、レシピ、トリビア、歴史ページへのリンクがあるページです。横3列や4列で、シンプルに写真や文章を大きく並べて見せています。各サイトへ行きやすく、見やすいページです。今回は勉強のために、デザインを分析しました。
font
文字：ココアの茶色・白・オレンジ
読みやすい文字です。
color
背景：茶系・ベージュ系
メニュー
PCでは上部に横並びでメニューがあります。このメニューはスマートフォンでは右上のハンバーガーメニューになっています。
ハンバーガーメニューは、画面全体にふわっと表示され、少し透過して背景にページが見えています。
画面の見せ方
スマートフォンではシンプルにカラム落ちにしています。
途中に、横100%で画像を見せている箇所があります。この部分は、最近よくあるパララックス効果をつけられるかもしれません。
「トリビア」の箇所は、クリックで文章が表示され、クリックで文章が変わります。背景は少し布のような感じになっています。この見せ方はやってみたいと思います。
まとめ
LPを作る際にとても参考になるシンプルなレイアウトのページです。
ココアに関する各サイトへリンクがあり、各サイト紹介が見やすく、いろいろなサイトが見てみたくなります。
横幅100%に見せている箇所の画像は、少し青味がかっていてかっこいい見せ方です。一箇所ココアの動画の箇所があります。
初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。
