見出し画像

クレイヘアケアブランドDROAS #1日1サイトレビュー



【概要】

泥が持つ天然由来の美容成分を引き出したクレイヘアケアブランドの公式サイト(LPサイト)


【ターゲットと目的】

・泥には保湿や補修の成分があり、アミノコーティングによりカラーの退色を防ぐことができるため、ターゲットは髪の保湿や補修、カラーの退色を防ぐシャンプーやトリートメントを求めている人とする(サイト内に女性のモデルがいるわけでもなく、性別の表現も使われていないため性別は問わないと推測する)。

・最終的な目的となる商品の購入までに至るブランドの認知を目的とする

・泥の持つ美容成分で汚れを落とすだけでなく、髪の保湿や補修ケア、カラーの退色の防ぎができることなどの商品の特徴や様々なオンラインショップで購入できることを伝えたい


【印象】

・スクロールすると泥の背景の後ろの商品の画像が現れ、斬新でインパクトがあり、スクロールするのが楽しい

・テキストの文字が大きく、インパクトがある

・スクロールするたびに商品の画像がぬるぬると動き、視覚的に気持ち良い


【構成】

・全体の構成は、メッセージ、feature(成分と効果の詳細)、LINEUP、ShopList、OfficialSNS

・商品の成分・効果などの詳細やメリットを伝えてからメインである商品のラインアップを紹介し、様々なオンラインショップやドラッグストアなどで購入できることを伝えている


【メインビジュアル】

・最初に商品ボトルの画像が現れてからMVが現れる

・フルスクリーンで背景全面が泥になっている

・ブランド名はやや左下に大きく配置→インパクトあり

・泥の塊部分にカーソルを合わせると泥が歪むようなホバーをする


【コンテンツ】

・I型レイアウト

・コンテンツごとに文字の配置や右揃えだったり左揃えだったりと整列が異なっている

・泥の背景の後ろにある画像やフォントサイズの大きい見出しに視線が集まる

・泥の成分を説明しているコンテンツで泥の画像のポインターが点滅していることで動きがあって視覚的に良い

・LINEUPのコンテンツのBuy Nowのボタンにマウスオーバーするだけでオンラインショップの選択ボタンが表示され、すぐに別サイトに飛べて購入に至ることができる点が良い

・別リンクに飛ぶボタンなどはボタンなどに色がつき、拡大するマウスオーバー

・伸ばしているようなテクスチャの泥や泥の背景の後ろにある画像でwebサイト全体の動きを出している


【文字組み】

・欧文、和文ともにゴシック体

・欧文と見出しの和文とは少し線が細い、上品なゴシック体。最初は白の縁取り文字で通常の黒文字に変化する

・見出しのフォントサイズがかなり大きく、目立つ

・ジャンプ率は高い


【カラー】

・メインカラーは白に近いグレーの泥の色

・メインカラーは少し薄い黒(#333333)

・アクセントカラーは画像の色

・商品ボトルの色に合わせて黒、グレー、白を配色とした無機質でシンプルにまとめている


【サイトを通じてどのように目的を達成するか】

目的:最終的な目的となる商品の購入までに至るブランドの認知

・泥の成分がメインとなる商品のため、全体的に泥をまとったサイトにし、泥の商品であるという印象やインパクトを与える

・目的達成の動線は、泥の成分やメリットなどの商品の詳細情報をしっかり伝えてから、商品の価格や購入方法の情報を伝え、購入への検討をさせる


スクリーンショット 2020-05-30 16.32.46

スクリーンショット 2020-05-30 16.40.37

スクリーンショット 2020-05-30 16.40.47

スクリーンショット 2020-05-30 16.41.08

スクリーンショット 2020-05-30 16.41.16

スクリーンショット 2020-05-30 16.41.25

スクリーンショット 2020-05-30 16.41.33

スクリーンショット 2020-05-30 16.41.41

スクリーンショット 2020-05-30 16.41.49

スクリーンショット 2020-05-30 16.41.57

スクリーンショット 2020-05-30 16.42.02

スクリーンショット 2020-05-30 16.42.09


この記事が気に入ったらサポートをしてみませんか?