フルーティス│ミツカン ビネガードリンク/006
https://www.mizkan.co.jp/fruity-su/
title:フルーティス│ミツカングループ商品・メニューサイト ビネガードリンクという新選択。
description：ミツカンから、フルーティさにこだわったビネガードリンク「フルーティス」誕生。お酢を身近に 、手軽に楽しんでもらうために、フルーティな飲みやすさにこだわりました。「ざくろラズベリー」「シャルドネ」「ピーチライチ」「ピンクグレープフルーツ」の4種類。やわらかな酸味とほどよい甘みで、水や炭酸水 、牛乳など、色々な割り方で楽しめます。
①topページ
ヒーローヘッダーで桐谷美玲さん。お酢とか飲みそうなイメージはあります。
スライダーで2画像。右下に商品画像5点。
左上のfruitySuのロゴクリックで、桐谷美玲さんが一度消えて商品が左から順に表示されます。
②ABOUT
少しスクロールすると、商品説明、商品画像、CMをみるリンクが表示されます。淡い果物のイラストも順に表示。
[CMをみる]クリックでfooter上あたりまで下がり、CMのYouTube動画静止画が表示されます。topへ戻るボタンはなし。
モデルさんの画像、きれいなブルーの背景に左側の白文字はゆっくりと表示されます。
さらに下がると、「WORKING DAY am 7:38のSu:ppin」と文字が入った画像が表示。位置固定。
画像下に朝におススメのドリンクレシピの表記が入り、リンク有。
さらに下がると画像の左右に女性が朝食やドリンクを飲んだり朝らしいイメージ画像が表示されます。左右の画像は「WORKING DAY…」画像を透過したり上に重なったりして、更に動きを感じるデザイン。
「WORKING DAY am 7:38のSu:ppin」7:38の“：”はずっと点滅。
さらにスクロール。「WORKING DAY am 7:38のSu:ppin」の「am 7:38」→「pm 2:17」」に変わり、薄かった空の色は少し濃い青に。
交差点の画像＋新しい画像が１点表示。
ドリンクレシピはリフレッシュにおススメに変わります。
さらにスクロール。
「WORKING DAY am 2:17のSu:ppin」→「pm 10:40」になり、空は暗くなりました。
お風呂上りの一杯でくつろいでいる女性画像。ドリンクレシピも癒しタイムにおススメに変わります。
スクロール。
翌朝はお休みのようです。
「HOLIDAY am 9:40のSu:ppin」、部屋着でくつろいでいる女性の画像に、レシピは「ゆっくりめの朝におススメ」になっています。
スクロール。
お昼は女子会だそうです。
「HOLIDAY pm 1:05のSu:ppin」、フルーツポンチ風なドリンクグラス、女子会メニューの画像など。レシピは「女子会におススメ」。
スクロール。
デザートタイム。
「HOLIDAY pm 3:00のSu:ppin」、アイス画像など。
レシピは「自分へのご褒美」。
スクロール。
くつろぎタイム。
「HOLIDAY pm ７:45のSu:ppin」、夜空の画像など。
レシピは「くつろぎタイムにおススメ」。
③PRODUCT
製品案内。
④レシピ
18点ありました。
⑤CM
桐谷美玲さんCM。
⑥ナビメニューとfooter。
topも含め、ナビメニューは公式ホームページと同じ内容だったので割愛。
まとめ：時計と時間が過ぎる表現が上手だなあと思いました。取り入れたいと思うCSSやJavaScriptなど自分の好きな傾向がわかってきました。すっきり見えるサイト程色々仕掛けられているように思います。