#1日1サイトレビュー【29】カロリーメイトLP

今日はカロリーメイトさんのLPサイトのレビューです！

【概要】

カロリーメイトの特設LPサイト

【ターゲット】

メインターゲットは受験勉強を頑張る学生さん。
だけど、社会人や妊婦さんなど大人にもカロリーメイトで足りない栄養素を補ってほしい。

【メインビジュアル】

おなじみカロリーメイトのパッケージ黄色をベースにしたシンプルなデザイン。
グリッドレイアウトとおもいきや、バックグラウンドの黄色の境目をメインビジュアルがつきぬけている。
ナビは左横に配置。スクロールするとフッターに切り替わり追従する。

【デザイン・レイアウト】

見出しには80pxの下線のあしらい
目線の動きZ型になるようレイアウト
「View More」にホバーすると背景と文字が反転する
SCENEのコンテンツの文字は::Beforeで画像に重ねている。

【フォント・カラー】

①#fff
②#fbc114
③#fef3d0

游ゴシック→日本語部分
Roboto Condensed→英字部分

【全体の動きとか】

背景の色が左から右(または右から左)に動いて表示される。
メインビジュアルも左から右にスクロールして切り替わる。
NavをホバーするとAboutとSCENEはコンテンツ内のリンク先が表示される。

【レスポンシブ】

全てのレイアウトが縦並びになる。
Navはハンバーガーメニューに統一して追従する形に。
Navでホバーして全体的に表示されたコンテンツはアコーディオンメニューになる。