フォント

力強さを感じさせ、ウェイトの幅が広いGoogle fontsの「Noto Sans JP」を採用。

配色

メインカラー：「確固たる意志の強さから感じる色気」をコンセプトに掲げ、商品の着想の源となるオニキス(天然石)の黒色と、無機質で硬いコンクリートを思わせるグレーのモノトーン。

サブカラー：あまり香水を使わない人にも、安心感して受け入れられるよう、落ち着いたネイビーと、清潔・爽快感を感じさせる薄い水色に。

アクセントカラー：色気・女性を魅了するという意味合いを込めて、甘すぎずメイン・サブカラーに調和する青味の強いマゼンダを採用。

画面構成

読者の目線を動かし、スタイリッシュな印象を演出する為、セクションの区切りを斜めの切り返しにしました。

①トップ画像

情熱的なラテン系の男女と「女性を魅了」というフレーズをマゼンダの光彩・太いウェイトで強調することで、女性にモテたい願望のあるターゲットに訴求。

今回、あえてナビゲーションは作成せず、代わりに下へスクロールを促すCSSアニメーションを設置。

②悩みへの共感・煽り

ターゲットが抱えると想定される悩みを簡潔に列挙し、共感の姿勢と不安を煽ります。
不安感を演出する為、ネイビーの背景×白文字に悩む男性の写真を配置。

③解決案の提示(商品の紹介)

どんな香水の香りかが一目で想像できるよう、時間の経過＋材料(合成香料の場合は、香りのイメージ)の画像・図を作成。

※タブレット・スマートフォンで画像が切り替わるよう設定。

③⑩吹き出し

セクションの上に吹き出しをつけることで、重要な箇所である事を示しました。

⑩については、男性の写真の上に水平線で吹き出しをつけることで、クロージングへの切り替えも担っています。

④コンセプト

文章量が多いセクションの為、見出しに要点を記載。着想の源である、天然石：オニキスのイメージを背景に淡く配置する事で、大意を一目で把握出来るようにし、長文読解ストレスと離脱リスクを軽減しました。

⑤香水をつける部位の説明

部位と画像の配置を関連付けました。(上半身は上部。体幹は中心。下半身は下部。)サムネイルが小さい為、番号のみを振り、文章で詳細解説しました。

⑥使用場面

前２つのセクションが文章中心だった為、簡潔に画像と単語のみで構成。
黒背景に白文字、斜めの切り返し角度を逆にして雰囲気をガラッと変えたことで読者を飽きさせないよう意識しました。

⑦円グラフ

jQueryの円グラフを用いて、女性が男性に抱く香りについての調査結果を定量・可視化する事で、香りの印象の重要性について説得力を持たせました。

⑧お客様の声

既存顧客のリアルな声(購入の経緯・不安だった点・実際の使用感・成功体験)を包み隠さず掲載することで、読者の不安を解消し購買意欲を後押し。

⑨返金保証制度

黒背景×ゴールドにすることで、読者への特別感と金銭及び、「買って自分に合わなかったらどうしよう…」という購買への心理的ハードルを低くします。

販売元としては、返金はないに越したことはないので、あえてコントラストを落とす意味合いもあります。同様の意図で、保証諸条件の文章は、通常より小さめに記載しました。

⑩クロージング文

一言で簡潔に「この香水を１プッシュして、(強い意志と自信を付けて女性を魅了する)新しい自分に出会おう！」と、気軽さと香水で得られる将来的なベネフィットを言い切り、購買への決め台詞としました。

商品情報

返金保証・送料無料

正方形のアイコン風にし、一目でお得感が伝わるように
しました。返金保証は以前の文章と関連付けてゴールド。送料無料は、全体の青味と調和しつつ強調させる為、臙脂系の赤を採用。

価格

前述の送料無料と関連付けて、臙脂系の赤を使用。一番伝えたい価格のフォントサイズとウェイトを大きくし、単位(円)→税込表記の順で小さくしました。

購入ボタン

購入への安心感を持って頂くため、緑色を採用。
ホバー時は、発光したようなデザインにしました。