No.003 YOLU[ヨル]ナイトケアビューティーブランド WEBサイト

＊視点

「夜間美容」をコンセプトに新習慣を提案しているヘアケアライン、YOLU。
今回はその商品イメージにぴったりな美しい夜空広がるサイトデザインをレビュー。

シンプルかつ上品な印象はどのあたりからくるのか、　また余裕を感じる余白間はどの程度の幅なのか、着目していきます。

　商品CONCEPTに「忙しい人ほど、夜の時間は短い」と明記されており、仕事や家事で多忙な20～30代の都市生活者、主に女性を意識。

　　「翌朝感動」「すっきりと浄化」「ナイトケア」などのキーワードが、美容に関心の高い層に響くコンセプト。
⇒上品かつ幻想的。プレミアムな雰囲気と落ち着いたサイトイメージを作りたい。

・メインビジュアルは夜空をイメージさせるダークブルー〜パープルのグラデーション。

ポイントで女性らしさを感じるピンクが足されています。

落ち着きと神秘性、大自然の中で夜空を見上げているようなリラックス感を演出しています。

・フォントは本文が ‘游ゴシック’、ナビゲーションなどで ‘Tenor Sans’が採用されている。

白〜淡グレーのフォントを重ねることで、視認性を損なわずに柔らかさを保持。

見出しは画像なので恐らくだが、Tenor Sansをベースに〇が含まれる文字の中央をダイヤが飾っている。

ロゴと同じ形式で統一感を感じます。

・レイアウトは余白を広めにとったシンプルな構造。視線の流れを意識した縦スクロールで、

コンセプト → 商品 → 購入先へ自然に導線設計されています。

ヒーローイメージとTOPICSの間はmargin400px、各section間もpadding＋marginで約300pxほどの余白間。

このぐらい思い切って幅を開ける必要があることを再認識。

・ホバー時のアクションはナビゲーションの真ん中から広がるボーダーラインのみ。

・TOPICS欄、SHOPLIST欄とFAQ欄が斜めに配置されているデザインが視覚的に楽しく、流れ星のよう。

背景や斜めにひかれた線がどちらも右上から左下に流れる動きがある中で、左上から右下に展開。

この配置を斜めセクションと呼ぶそうです。オシャレで、ぜひ今後活用していきたいスタイルでした。

・シンプルなページ設計にゆったりとした余白間によって、落ち着いた印象が作られておりました。

・全体的に夜空を思わせるダークブルー〜パープルのグラデーション。

ポイントでピンクが使用され、女性らしさや安心感を感じるデザインにまとまっています。

また、縦スクロールの構成に、下から浮き上がる斜めセクションが目を引き、単調さを払拭。

・無駄のない、洗練された構成が「夜間美容」の新提案に対する安心感を感じさせました。