6. 小泉成器株式会社（家庭用品） ブランドLPサイト #1日1サイトレビュー
こんにちわ、ayakaです。
今回は、小泉成器株式会社のブランドLPサイト「【公式】MONSTER （モンスター）ダブルファンドライヤー | スペシャルサイト | 小泉成器（コイズミ）」をレビューさせていただきます！
サイト選びは下記から行いました。
レビュー
⓪このサイトを選んだ理由:
・豪快で大胆な動画やイメージキャラクターを前面にアピールしているLPサイトが新鮮だと感じたため。
・動画を用いているLPサイトとコーポレートサイトの違いを探求したいと思ったため。
（次回は、動画を用いているコーポレートサイトをレビューします！）
① サイト概要:
・商品プロモーションビデオ、写真
(取り扱い商品: MONSTER (モンスター) ダブルファンドライヤー KHD-W765：https://www.koizumi-onlineshop.jp/c/beauty/khdw765)
・商品の性能紹介
・Twitterフォロー＆リツイートキャンペーン情報
② 目的:
・商品詳細情報ページ、商品オンライン購入ページボタンクリック数、CV数を増やすため。
③予想ターゲット層:
・速く髪を乾かせて、乾かすと髪がツヤツヤになるドライヤーを求める女性の中で、筋肉質男性アイドルを好む10代から50代の女性がメイン
④全体の印象:
-良い印象の内容
・ファーストビューで、筋肉質の男性アイドルが格闘シーンの振る舞いや決めポーズをしている動画があり、そのアイドルとドライヤーのイメージが心に強く残った。
・動画の背景色とサイトの背景色で同じグラデーションが使われていて、サイト全体で動画内の神秘的な世界観を味わうことができた。
・PC版ではカーソルの位置が黒線の〇で表示されていて、ボタンに触れると線が肌色に変化して〇の中に＋が出現する、又は〇全体が肌色に変化する等の配慮があり、他サイトへリンクするボタンが分かりやすかった。
・PR動画の直後に数値や写真を用いたドライヤーの性能の説明があることで、動画で感じた大胆さが直後の性能の数値や写真で助長された。
・ファーストビューでの動画に加え、「KHD-W765 DETAILボタン」と「KOIZUMIオンラインショップで購入するボタン」の直後でも同じ男性アイドルの決めポーズ写真があり、更に男性アイドルとドライヤーの印象が心に残った。
・PC版では左にサイドメニューがあり、・を押せば該当箇所に即移動できるので、見たいコンテンツにすぐ移動できて良いと思った。
-改善すると良い点
・(問題点):
スクロールすると右下に「special movie」ボタンが出現するが、その色が肌色で、サイトの中間地点でベースの背景が肌色のときに背景とそのボタンの色が同化して、ボタンの文字が見えなくなるという欠点があると感じた。
(改善策):
ベースの背景が肌色のときはボタンの色を緑にする等の色の設定をすると、そのボタンがサイトのどの位置でも目立ち、閲覧者に男性アイドルとドライヤーを更に強調できると考える。
・(問題点):
PC版の左サイドメニューで、それぞれの・がどのコンテンツに移動するかが分からない点やサイト全体のコンテンツ構成が一目で把握できない点で欠点があると感じた。
閲覧者は、素早くサイトの概要を知れた方が低ストレスで閲覧できるため、ショップページ等へのアクセス数を増やしやすくなると考える。
(改善策):
・にカーソルをかざしたときに・の右側に肌色又は緑色でジャンプするコンテンツ先の名称が表示される形に設定することが挙げられる。
・(問題点):
iOS版ではページの右上にハンバーガーメニューがあり、サイト内のコンテンツ一覧が記載されている。全てのコンテンツ名が表示されるまでの時間と、特定のコンテンツ名をクリックしてから該当コンテンツが表示されるまでの時間が、長いと感じた。
(改善策):
それらのモーション時間を短縮すること。通常のサイトと同様にハンバーガーメニューを展開すると全項目を即見れて、特定の項目をクリックすると該当コンテンツに即ジャンプするように設定すること。
⑤配色:
暗い緑、明るい緑と暗い肌色
(左からCharleston Green, Dark State Gray, Ming, Dark Cyan, Tan Crayola)
上記の左(Charleston Green)から右の色(Tan Crayola)までのグラデーション
・ベースの背景全体
左から２番目(Dark Slate Gray)と３番目の色(Ming)のグラデーション
・「KHD-W765 DETAILボタン」と「KOIZUMIオンラインショップで購入するボタン」の背景
右から二番目の色(Dark Cyan)
・Twitterフォロー&リツイートキャンペーン内の賞品一覧の背景と応募要項内容の背景
一番右の色(Tan Crayola)
・「KHD-W765 DETAILボタン」と「KOIZUMIオンラインショップで購入するボタン」の文字
・左サイドメニュー、Twitterフォロー&リツイートキャンペーンの賞品コース名、見出し「HOW TO ENTRY」「OUTLINE」
・ページ最下部のTOPボタン
⑥フォント:
・Noto Sans JP
・Rajdhani:
しっかりとした直線で描き、かつ大きな丸みを加えたsans-serifフォント
強さをアピールしつつも柔らかさも演出したいときに適するフォント
Noto Sans JP
・ファーストビューの動画部分に記載されているブランド名とキャッチコピー
・ページの左サイドメニュー内で最上部の文字以外の全て
・ドライヤーの性能紹介コンテンツの中で製品型番「KHD-W765/R」以外全て
・Twitterフォロー&リツイートキャンペーン内で、見出しとして黒い背景に白文字で記載されている日時、賞品名「A賞、B賞、C賞」、見出し「HOW TO ENTRY」「OUTLINE」以外
・フッダー
Rajdhani
・ページの左サイドメニュー内の最上部の文字
・ドライヤーの性能紹介コンテンツの中で製品型番「KHD-W765/R」
・「KHD-W765 DETAILボタン」と「KOIZUMIオンラインショップで購入するボタン」の文字
・graphic写真の名称
・Twitterフォロー&リツイートキャンペーン内の見出しとして黒い背景に白文字で記載されている日時、賞品名「A賞、B賞、C賞」、見出し「HOW TO ENTRY」「OUTLINE」
・ページ最下部のTOPボタン
参考:
⑦余白:
・サイトのレイアウトを、ドライヤーの写真や短いキャッチコピーでドライヤーを宣伝するというシンプルな宣伝スタイルに合わせるため、隣接したコンテンツの間の余白とコンテンツ内の余白が広く設定されている。
⑧競合サイト:
⑨このサイトのデザインから学べる事:
・商品・サービスについての理解を深めて心に残りやすくする方法の１つに、ファーストビューでPR動画と紹介したい商品・サービスの概要をセットで配置する方法があること。
・PR動画を用いる場合でサイトの雰囲気に統一感を出すためには、PR動画を先に制作して、その後動画の雰囲気にサイトの配色やフォントの雰囲気等を合わせる形でサイトを制作することが必要。
・強さを出しつつ、優しく読みやすい雰囲気も演出したい場合は「rajdhani
」というフォントを用いると良いこと。
・PR動画等の特定のコンテンツをサイト内のどの位置でも強調したい場合、そのコンテンツを示すボタンの色が常に背景と反対の色になるように設定することが重要である。
・LPサイトからのショップページへのアクセス数を増やすには、サイトの中間地点又は前半の方で商品・サービスの詳細リンク、ショップページへのリンクボタンを設置すること。
サイトの後半に初めて設置する形になると、サイトの途中で他サイトへ移動してしまう人のショップページへのアクセスを集められないため。CV数を高めるには、ショップページへのアクセス数を増やすことが重要。
・サイトの特定のパーツにモーションをつけるのは良いが、それが閲覧者にとって不便となりえないか考えながら、慎重に機能を加えることが重要である。それができて初めてUIとしての効果を発揮する。
例えば、iOS版のハンバーガーメニューにおいても、閲覧者が低ストレスでサイトを閲覧できるようにするということを考慮する必要がある。
iOS版で閲覧者する人は、通常のサイトのようにメニュー一覧が全て即表示され、メニュー項目のボタンを押した後に該当コンテンツに即移動することを好む、つまりサイト内の移動で頻繁に１テンポ待つことを望まないと考えるため。
PC版の外観
iOS版の外観(PC版との相違点のみ)
参考サイト
記事作成にあたり上記で示したサイトの他、下記のサイトを参考にさせていただきました。
参考になるサイトを作成して下さった皆さん、ありがとうございました。
最後までお読みいただき、ありがとうございました。
クリエイティブを通じて、多くの人をワクワクさせる人材になりたいと思い、日々鍛錬しています！この思いに共感頂ける方はサポートしていただけると嬉しいです😊