#1日1サイトレビュー【32】OPERA（オペラ） | コスメティック[公式]

【概要】

リップグロスOPERAの商品紹介ページ

【ターゲット】

20～30代のおしゃれが好きな女性。

【メインビジュアル】

右側にモデルさん、左側にキャッチコピー、境界部分に商品の写真をまたがるように配置
ボタン周囲にさりげなく光彩(グレー)をふんわりと入れている。

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

基本的にグリッド通りに配置。所々、背景と写真をずらすレイアウトを取り入れている。
余白多めにすることで空気感を演出。
ヘッダーにナビを配置。右側にハンバーガーメニュー。追随するのはハンバーガーメニューのみ。
フッターはナビとショップリスト、オンラインストアは固定。ショップリスト・オンラインストアはホバーするとサインと光彩が浮かび上がる仕掛け。

【フォント・カラー】

①#ffff
②#f7edea
③#e5c5ba

全体→HCo Gotham
見出し→游明朝

フォントは12～14pxと全体的に小さめ

【全体の動きとか】

スクロールすると下から上にコンテンツが浮かび上がる。
メインビジュアルの右側に数字、その周囲を時計のように円が動き、時間になれば次のページにスライダー移動する。

【レスポンシブ】

メインビジュアルのスライダーの数字が左側に移動。
ナビはハンバーガーメニューのみ
全体的に写真が上、文章が下の配置になる。
コンセプトページの写真はあしらい程度のは比率はそのまま、商品写真は横幅いっぱいに表示。