お世話になります。林です。

今日は、先日リニューアルしたLPのお問い合わせ率が3倍以上まで上がったため、どのようにして3倍以上のお問い合わせ率を実現したかについてお話したいと思います。AIDMAとかPASONAのような小手先のテクニックではなく、どちらかというと人間心理に基づいた話しになります。そういった話しが好きな方はご覧ください。

うさんくさいLPをまともにするには？

まず、こちらが私が以前広告として掲載していたランディングページです。当時は余裕がなかったこともあってフリー素材を使い、またレスポンシブ対応でお願いしたのですが、十分レスポンシブとはいえないサイトができていました。高校生・浪人生からのアクセスが多く、スマホアクセスが7割ほどを占めていたので、現状のランディングページではなかなか読みにくいな、あとフリー素材を使っているのでうさんくさいなという思いが強まり、このたび、ランディングページを全面的に改訂しました。

もともとは5%程度の問い合わせ率がありましたが、先月競合のサイトがリニューアルしたのと同時に2.5%まで問い合わせ率が下がったので、ランディングページを作り直しました。

まず最初に心がけたのはスマホファースト

まず、最初に見直したのは、とにかくスマホファーストにするということです。レスポンシブで運営するという点については変えなかったので、多少PCで文字が大きく感じても、とにかくスマホファーストでスマホで見てきれいに見えるように文字の大きさなどを調整しました。

マクドナルド創業者・藤田田に学んだ広告の配色思想

私は、もともと広告の配色についての思想の多くを、マクドナルドの創業者の藤田田氏の著作から学びました。つまり、人間が注意を留める色は、信号機でいうところの赤と黄色であり、安心感を持つ色は緑であるという考え方です。この法則に則って、注目して読んでほしい部分については黄色と赤を入れ、逆に安心感をもってお問い合わせをしてほしい部分については、緑を入れました。こうしたレイアウトは、売れるネット広告社が作成したLPなどでもよく見られるので、あながち間違っているとは思いません。

ただ、後述しますが、この配色のメリハリについては、その後Google AnalyticsやHeat mapのデーターを見ていくつか改善を加えました。このことが、ランディングページの配色を落ちつかせ、ランディングページから胡散臭さを排除できる要因になったことは間違いありません。

実際の合格者がページの最初から最後まで案内する

今回のランディングページリニューアルを振り返ってよかった点が二つあります。一つは、実際の合格者が上から下まですべての広告モデルになってくれたために、ランディングページ全体の信用性が非常に上がったことです。

基本的に広告は顔が見える広告の方が良いといわれています。どれほど内容のしっかりした広告でも顔の見えない広告というのは、どういう人が使っているのか分からず不安を掻き立てられるからです。

エーリッヒ・フロムの自由からの逃走などを読むとよくわかりますが、人間というのは正しいものに惹かれるのではなく、力の強いもの(力の強そうなもの)に惹かれるという特徴があります。こうした人間の性質を考えた時に、ランディングページの内容よりも大事なのが、より多くの人がそのサービスを使っている感じがすること、つまり人の気配がすることです。そういう意味でいっても、実際の合格者がランディングページの上から下まで案内してくれたのは本当に良かったと思います。

GoogleAnalytics・HeatMapの結果を元に配色を変更

また、Google AnalyticsやHeat Mapを見ていてわかったことですが、ランディングページであれオウンドメディアであれ、受験生が一番注目をするのはやはり合格体験記であり、それ以外の部分についてはわりと流し読みをするということがわかりました。

このことから、安心して問い合わせができるようにするためにLINE@での相談ボタンを緑にするという方針は変えずに、ただ問い合わせ全般については、一部のキャンペーン案内以外は青基調のデザインに変え、逆に合格体験記のデザインは青基調のデザインから赤基調のデザインに変えました。

これにより合格体験記をより注意して熟読するようになりお問い合わせ率がふえるのではないかという仮説を持っています。

写真素材には徹底的にこだわり抜いて撮影

また、写真素材についてですが、従来はフリー素材をつかっていたため、それぞれのパーツにあまりしっくりくるものがなかったのですが、今回はカメラマンを雇って、ランディングページのそれぞれの素材をラフ化して、それに合うような形で美術ディレクターも付けてかなり丁寧に撮影しました。

やはり同じ合格者でランディングページの上から下まで案内するためには、それにかかるコストはケチってはいけません。写真に対する投資は、今回のランディングページの成功を考える上でも特に重要なものだったと思います。

図もHTMLで実装することでスマホ最適化

また、従来のサイトでは、表やチェックリストを画像化していたのを、HTMLで実装することで、レスポンシブ対応度を高めました。とにかくスマホでもきれいに見えることを最優先に、可能な限り徹底的にHTMLとCSSで実装するというのを心がけたのが今回のLPの特徴です。

一覧性とスマホファーストを両立する方法

また、従来のランディングページでは、他社の場合と弊社の場合を比較する際に2カラムのデザインを使用していたため、一つ一つの文字が小さくなり、非常に視認性が悪いという問題がありました。この提案を受けた時に、デザイナーには1カラムのデザインに変えるようにいったのですが、それだと一覧性が悪くなるからという理由で押し切られてしまいました。これをどう変えるかは今回のリニューアルでの大きな課題の一つでした。

スマホ画面から見た時に一覧性がありながらも読みやすいということをかんがえると、スマホ画面で一覧できる範囲での縦2つ分割のこのデザインは非常に読みやすく好感を持てました。特に強調したい部分が大きくなって見やすいのもいいですし、過程の話についてはとにかくすごいということが分かればいいので、よく出来ているなあという印象があります。

また、毎日学習会の使い方については、一覧性を犠牲にしてでも、とにかくわかかりやすく、一つ一つの動きがちゃんとご理解いただけるようにすることに心を砕きました。全般としてそのような形になっているので、LPの縦長さは増えてしまいましたが、文字が大きくなっているので見やすく、ストレス無くスクロールできるのではないかと考えています。実際このあたりはAnalyticsのコードいれて検証しているのである程度データーが溜まったら前のLPとの比較を掲載します。

細部に神は宿る

また、従来のLPでは教材のスクショが一部雑な部分がありました。こういった微妙な綻びから顧客はサイトに危うさを感じるものなのです。お問い合わせフォームなどにもこの手の綻びがあったので改善したのですが、実際に見てみて使ってみて、こういう小さな綻びを見つけたらすぐに直すべきです。こういう小さなほころびがお問い合わせ率に与える影響は意外にも大きいのです。

右脳と左脳を両方刺激するランディングページを作る

また、今回意識したこととしては、とにかく右脳と左脳の双方を刺激する構成にすることです。ですから文字情報のみにこだわらず、なるべくイラストをふんだんに使い、それが顧客にとってどのような感情をもたらすものなのかについてよく分かるようにしました。これは人間は、論理よりもどちらというと感情に大きく左右されるものだからです。ですから、それぞれの事柄が感情にどのような影響を及ぼすかがひと目でわかるようにしました。

ブサイクでもいいからまともな写真を使う

これは写真についても同じです。私はここ数年で大分太ってしまったので、下の写真の方が見てくれが悪いわけですが、まともそうに見えるので、下の写真を使うことにしました。こういった細かい部分での工夫がお問い合わせ率の改善につながったと私は考えています。