シチズンのブランドシチズンLのLP

シチズンL

シチズンLの要件定義は、地球環境や人に配慮した持続可能な発展を考えたものづくりの活動で。
そのためにサイト全体が自然に根差した、地水火風の４元素テーマにしたデザインを中心に時計が売れるたびに
海洋ごみを回収しますという環境保全への取り組み等、ブランドイメージを伝える構成になっています。

調べたところ、文字盤の装飾に月や夜空のデザイン装飾に貝殻を使うなど、
自然をイメージしながらもエレガントなものが多く

オフィスワークをしている20代の女性
ジュエリー感覚で身につけたいという30代の女性
高級感がある腕時計を身につけたい40代の女性
に人気があるようです

デザインも素敵なのですが、注目したい技術が使われているサイトで

冒頭のロゴのSVGアニメーションです

SVGのデータをhtmlに書き込んで、SVGアニメーションの
stroke-dashoffset:1e-5
stroke-dasharray：none
opacity: 1;
で動かしているようです
1eが30で-5? 25？の位置から破線の間隔無しの指定なので、一部見えているところからのLの文字のアニメーションをさせる工夫があります。
背後のスライダーはスリックで、商品の背景を際立たせるためにズームアウト
文字を一文字ずつspanで囲ってtransrate marrixで動かしています

メインのフォントはCalibriで標準サンセリフより丸みがあって温かみがあります。

transrate3d translateなどボックスの動きに気を使ってるのが印象的です
video タグの動画の高さは指定しないコーディングなのでスマホでみるとかなり小さくなってしまっています
bodyのbfore に背景画像を置いて、バックグラウンドカラーをスクロールすると変更することによって
グラデーションしながら背景が変わるように見えたり

transrate3dの親ボックスにvideoタグを置いた場合の動きなど相当研究なさっているのだと思いました。
時間のあるときに再現してみたいと思います。

気になったこと
other collectionsのボックスごとにウィンドウの位置がかわると
上下に動いていく記述がサイトの横幅によっては表示しきれずに崩れてしまう所です
大きな画面では問題ないようですが、破綻しないようにする方法が
ナビゲーションバーなのは時間が無かったのかなと思いました。
fixedで動かない背景に、absoludeのイメージとtrasrateで動くボックスの３重構造をうまく使った美しいサイトだと思います。

HOME

Webサイト100選