
サイトレビュー #008 YOLU 公式site
#YOLU #トリートメント #ヘアマスク #ヘアオイル #ヘアミスト #美容
みなさん、こんにちわ!デザイナーのrikaです。
夜空の世界観の素敵なサイトをみつけたので今回も分析していきます。
さあ、行ってみましょう!
商品情報
YOLUは、株式会社I-neが展開するナイトビューティケアブランドサイト。22年より発売していて全国で購入可能。ちなにみに、株式会社I-neは、BOTANISTで有名な会社ですね。
良いと思った所
・KVの合成
まずは、KVの検証。
商品の持つ「夜のイメージ」と美容系の王道の「瑞々しさ」を違和感なく合成している。合成した水の量が多いと、海に浮いているようにも見えそうだけど極力少ない水滴を合成していて違和感がない。人によっては、そうえば、水面に浮いてたねー。ていう程度にも感じる。
キャッチコピーと流れ星のような線を組み合わせた処理もひと工夫欲しい時に覚えておくと良さそうだ。

・ ユーチューブの切抜の窓枠
ユーチューブの切抜って、リンク感がでてしまうけど
形そのものをアーチ状の窓の形にしている。
星をつないだような窓が開く演出も素敵☆

・星を連想させる演出
コピーの文字と流れ星のような線をミックスした演出は去る事ながら、成分の説明のイラストや、リンクボタンなど、線と星をつないだ表現がサイト内に散りばめられている。夜空の演出に一役買っている。
アニメーションは、SVGのパスつなげて作っているようです⭐️

MOREボタン
まとめ
ヒーリング系や星関連のデザイン制作の際に、参考になりそうなのは勿論んだが、線のアニメーションや、MOREボタンを罫線で囲む表現などは、真似しやすそうだし、ジャンル問わず使えそうなので覚えておきたい。
ーーーーーーーー
最後までお読みいただいてありがとうございました。
また更新しますので、ぜひ遊びにきてくださいね!🖐️