VIE DE FRANCE – 公式ホームページ(https://www.viedefrance.co.jp/)分析
ヴィ・ド・フランスの公式ホームページは、色使いがとても綺麗なブランドサイトです。紺・白・赤の色味に、大きな画像使い。
文字も大き目でとても活発な印象です。サイトを開いてすぐ大きな画像があり、PCでは余計なメニュー等が何も無く、画像が切り替わり、とても綺麗な見せ方です。
中央にロゴがありますが、画像の色味とマッチしていて、気が付かないくらいです。
この見せ方で、一度私も模写をして勉強をしたいと思います。
font
“游ゴシック体”, YuGothic, “游ゴシック”, “Yu Gothic”, “メイリオ”, sans-serif
文字：黒・白・赤系
color
紺(#003894)・白・赤系(#e61919)
背景：グレーの斜め線の背景（画像）と白背景が交互にあります。
動きについて
SCROLLボタンが動いています。
↓
animation: 1.5s ease-in-out 0s infinite normal both running heartbeat;
「今月の新商品」のパンの画像にマウスオーバーすると、SCROLLボタンのように動きます。
「商品紹介」は、大きく拡大します。
「QUALITY ヴィ・ド・フランスのこだわり」はパララックスになっています。
background-attachment: fixed;を使ったことが無かったです。
.block-quality {
width: 100%;
height: 49.26vw;
overflow: hidden;
position: relative;
background: url(../img/top/bg_quality.jpg) no-repeat;
background-position: top center;
background-attachment: fixed;
background-size: cover;
}
まとめ
パララックスを知らなかったので、不思議な見せ方だといつも思います。
動きや見せ方を参考にして書けるようにしたいと思います。
初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。
