sutudio nob-san

web
accede

accede化粧品のランディングページ

ツール
photoshop / illustrator / dreamweaver
技術
xhtml1.0 / css2.1
ゴール
アクシードミネラルtype3を購入してもらう。
問題
新しい化粧品を利用する際の不安の払拭と、新規顧客をいかに継続利用につなげるか。
制作期間
20時間
URL
http://studionobsan.jp/works/web/accede/index.html
詳細
授業の課題で作成した、オールインワン化粧品販売のランディングページです。
お客様の不安を解消し、理想のイメージや購買欲求を膨らませるために、購買心理学を研究し導入を試みました。(本格的に心理学理論を導入するのは今回が初めてです)

下記が意識した心理学理論です。
  1. 心理学的を意識した要素の配置
  2. メタウォンツ(心からの欲求)
  3. NLP推進システム
  4. 説得に影響を与える6つのパターン
  5. メタプログラム:時間軸
  6. メタプログラム:説得の感覚VAK
  7. メタプログラム:論理と感情
  8. メタプログラム:チャンクのレベル
  9. メタプログラム:目的志向型と問題回避型

>> accede化粧品ランディングページはこちら

基本的な考え

ページ先頭の1画面に収まる範囲がユーザーが最初に目にする情報なので、その中に必要な要素を配置してユーザーの購買欲求を高めるデザインを意識しました。そうする事で訪れたユーザーがすぐに魅力を感じ購買行動につながるコンテンツを目指しています。
また、上記の行動を促進するために購買ボタンを最初の画面内に設置して、決断したユーザーがすぐに購入できるようにしました。(購買ボタンは途中と最後にも設置しています。)

【メインのビジュアル】

右上に、レタッチをしたモデルの写真を配置。(右上は心理学的に未来やゴールを想像させやすい)
その視線の先には化粧品の写真があり、視線の導線を作っている。また背景画像は水の画像をベースに瑞々しさをイメージするグラフィックに仕上げました。
他には、印象つけた要素は下記の様に違うテーストに仕上げました。

  1. 目立たせたい箇所の色相はなるべく離れた色を使用
  2. リアルなグラフィックの上に情報を載せる場合、シンプルなデザインにする

【購買行動につなげる流れ】

ユーザーの購買行動のイメージはNLPの推進システムを参考にした。

  1. 躊躇(迷わせるきっかけ作り)
  2. 欲求不満、気持ちの揺れ(効果的アピールによるひとおし)
  3. 欲求、買うか買わないかの2者択一(最後にひとおし)
  4. 購買行動
サービス紹介ページ

購買行動につなげるコンテンツの組み立て

【NLP推進システムについて】

  1. 躊躇(迷わせるきっかけ作り)
    ●キャッチコピーとインパクトで第一印象を形成→メインのビジュアルで実現
    ●独自性もアピール→コンテンツ全体でもそうだがメインビジュアルでも商品特徴をアピール

  2. 欲求不満、気持ちの揺れ(買ってからの自分は満足するか)
    ●信用の裏付けとキャッチコピーでしっかりした印象を狙う→楽天ランキングなどの情報を掲載
    ●リスク回避のアピール→初回限定全額返金補償をアピール

  3. 欲求、買うか買わないかの2者択一(最後にひとおし)
    ●特典と希少性でユーザーの背中を押していくが、このコンテンツでは一ヶ月限定のキャンペーンで特典と希少性をアピールしている

  4. 購買行動
    ●最終段階は実際の購買行動だが、購入しやすいように購入ボタンを最初と途中と最後に設定している。
    また、購入ボタンのパネルには必要な情報を凝縮してレイアウトしている。

その他の心理学

【説得に影響を与える6つのパターンより】

  • 社会証明性の原理→みんな持っている事に魅力を感じる
    アンケートの掲載やリピート率80%以上のキャッチコピー、楽天ランキングでアピールした。
  • 希少性の原理→入手困難が心からの欲求につながる
    一ヶ月間のキャンペーンでアピール

【NLPメタプログラムより】

●時間軸を意識する

未来にシフトさせ不安を増大→あなたのお肌は大丈夫の問いかけ
未来を創造→メインビジュアルとか、使用法をイメージしたイラスト
漠然とした不安を和らげる解消→アンケートや開発者の声の掲載

●説得の感覚VAK

人間は五感を持つ動物で、その中でNLP心理学的に主要な感覚は
V(視覚)、A(聴覚)、K(対感覚)の3つの感覚である。それらを意識したデザインを目指した。

  1. V(視覚)へのアピール
    基本的なデザインによりアピール
  2. A(聴覚)へのアピール
    情報量からアピールして信頼性を高める
  3. K(対感覚)へのアピール
    質感やグラフィックのディテールにこだわり、体感覚を刺激する
サービス紹介ページ

その他の心理学

【論理と感情・感覚(説得される2つのルート)】

●論理によって説得されるルート

商品特徴から価値を見出して商品購入に至ります。
ページの中で商品特徴を繰り返し訴えてます。

●感情・感覚によって説得されるルート

直感から商品購入に至ります。
とにかくビジュアル細部の創りこみにこだわりました。メインビジュアルは”この商品を使うとこんなに綺麗になって肌が潤う”という印象になるように意識してデザインしました。

【チャンクレベル】

●情報を”細かく緻密に捉えるか”と”全体的に捉えるか”
  1. 先頭の画面で必要十分な情報を配置し、さらに詳しい情報を続けて配置しています。
  2. また全体としては情報量が多く詳細に情報を捉えるタイプ向けですが、全体的に捉えるタイプ向けには項目に使用するフォントのデザインやジャンプ率を変えるなどして、なるべく情報を拾いやすくなるように工夫しています。

【目的志向型と問題回避型】

  1. 目的指向型の人に対しては、ビジュアルやアンケートでの喜びの声、利用方法の紹介で使った未来を想像させます。
  2. 問題回避型の人に対しては、不安に着目し安心させる流れを作ったり、返金補償で購入に至るハードルが下げる事を意識しています。

以上が今回導入した心理学理論。メタプログラムの種別や解説に関しては、正式なNLP理論と少し違う点もありますがご了承下さい。
(参考文献:NLP会話力ノート、クエスト アートワークセラピー講座・テキスト)

Page Top

Copyright @ 2012 studio nob-san.All Rights Reserved.