2017/04/13

【エキスパートの仕事術】LP制作・改善の技ありアイデアを公開!

  • このエントリーをはてなブックマークに追加

定期通販ラボ編集部の岡田です。

今回も引き続き、ランディング制作のエキスパートであるアートマチック株式会社の真崎社長に「ランディングページ制作」の秘訣として、ページの解析に役立つ参考指標や、改善手法についてお話を伺って参りました。

エキスパートの視点で見ると、日ごろ私たちが見ているLPにも想像以上にいろいろな気づきや違和感が得られることがわかりました。今回の記事をご参照いただき自社のLP改善のヒントになれれば幸いです。

はじめに見るのはファーストビューでの離脱率

岡田:では真崎社長、今回もよろしくお願いいたします。
実際にLP制作のお話をお伺いするのですが、この段階ではどういった相談や依頼が多いのでしょうか?

真崎社長:はい、一番多いのは「最近売れ行きがよくない」「ファーストビューでの離脱率が70%以上ある」といった基準となる数値を元にした相談が多いです。

岡田:LPの直帰率ですが、70%という数字であれば通販会社のランディングページの指標としては優秀な方ではないでしょうか?広告施策次第では90%に近い直帰率というのもあると思うのです。
 
真崎社長:はい、そうですね、今回は「ファーストビューでの離脱率が70%」という数字を用いまいした。岡田さんのご指摘の数値はGoogle Analyticsで見た「直帰率」ですよね、今回のテーマであるLPの制作や改善といったケースでは、純粋にLPの価値を図るべく「ファーストビューの離脱率」という指標を利用します。

離脱率という数字はGoogle Analyticsで見ると表面的な指標だけしか見えないのですが、ヒートマップツールを導入し、ヒートマップで描画して見るとファーストビューでどのくらいの人が離脱したか、というより細かなお客様の動きや心理変化が見えるので、改善箇所や課題を探すにはおススメです。

Google Analyticsとヒートマップを使った改善の入り口を紹介

例①Google Analyticsで見る「数値」は全体の傾向は見えても、ページの「どこで」や「何を」といった、細部の情報が見えにくい。

ga-sample

 

②解決策としてヒートマップを導入することで、各ページの細部を確認し、適切な改善箇所を探る

hm-sample

③ヒートマップツールからわかることの解説

hm-sampleA

※真崎社長の例で解説しますと、あるページへ1日に100人が訪れていた、ということがGoogle Analyticsで分かったとしても、ヒートマップツールを使い、ファーストビューでの離脱が70%もある(ファーストビュー以下に進む人は30%=30人)というページの中の詳細な状況がヒートマップツールでわかれば、ファーストビュー以下のコンテンツをいくら変えても効果は得ずらく、改善すべきはファーストビューから必要だ。という説明になります。

※ヒートマップを入れてみたいという方に向けておススメの記事はこちら→「ランディングページ最適化の救世主 ヒートマップツール紹介」

役割や立場、関わり方により、参照指標は異なる

岡田:なるほど「離脱率」での判断にはそういった背景があったのですね。今まで直帰率だけを見て判断していました。

真崎社長:広告とLPのマッチングを図るのであれば「直帰率」でいいと思います。今回のケースではLP単体の改善ということでしたので、「ファーストビューでの離脱率」という数値を用いました。

改善には正しい指標の違いを知る必要もあります。コンサルティング会社様や広告会社様であれば、流入施策を中心に見て、全体の流れから「直帰率でLPの良し悪しを判断」というケースが多いのかもしれません。

弊社はデザイン会社なので、価値提供としては作って終わり、ではなく商品の認知・イメージ向上を目指す結果、メッセージ性・デザイン性がアップして売上貢献をする、という点にあるので、全体の俯瞰指標に近い「直帰率」だけではなく、奥行きやどういった課題があるかまでが可視化できる「ファーストビューでの離脱率」を見るようにしております。

ではこちらも最近あった事例を見ながらデザインレビューをしていきましょう、最近会ったケースとしてA案とB案のランディングページをご覧ください。

比較用のランディングページ構成

wf-sample

※本ページでは実際のページの紹介は控えさせていただいております、あらかじめご了承ください。
真崎社長のセミナーやお打合せでは事例を用いたお話も可能とのとこです、ご興味をお持ちいただけた方は真崎社長へ相談されてみてはいかがでしょうか?

LPのQ&A 幅の狭いLPはなぜ通販企業で人気!?

岡田:真崎社長、またひとつお伺いしたいのですが、今好調といわれている通販企業のLPを見ていくと、上記のB案のような横幅の狭いデザインが多いのですが、これはどういった理由なのでしょうか?

真崎社長:良い気づきですね、この傾向はダイレクトマーケティングや通販業界で特に多い傾向と思います。その理由ですがスマホとPCの両方のサイズで表示ができる折衷案をとった表示サイズが640pixel前後のサイズだからです。スマホとPCの両方で閲覧できるサイズの折衷案をとることでリリースの速度や複数ページデザインのコストを調整しているのではという考え方ができます。

特にダイレクトマーケティングや通販業界は最初から完成を狙うことよりも、まずはテストを実施して改善を加えていく、という手法が根付いているので、最初のテストマーケティングの段階でスマホとPCの両方のLPを制作することは、コストとスピードの両面から考えると負担が大きいので、この手法は運用効率の良い施策といえます。

岡田:ベンチャー企業やサービスサイトなどは、A案の画面をいっぱい使ったレイアウトを取り入れていることが多い気がするのですが、これはなぜでしょうか?

真崎社長:おそらく岡田さんがご覧になられているBtoB系のサイトはGoogle Analytics で見ると、おそらくパソコンサイトからの流入がメインであったりするのではないでしょうか? 

そういったケースであれば幅広なレイアウトを取り入れているかもしれません。目立たせることもさることながら、どのコンテンツ部分から読んでもファーストビューに見えるように印象に残す作りとも言えます。

自社に合ったLPはテストをしないと判断できない

真崎社長:実は弊社でも相談内容に合わせて上記で上げた、幅広と幅の狭い2タイプのレイアウトのLPを作成することがあるのですが、弊社で作成した場合は概ね、横幅の狭いデザインが好調です。

これもデザイナーとセールスライティングの視点で紐解いていくと、理由があります。まずは全体の流れといいうのもがあり、横幅が広すぎると目が疲れるので読み進めにくい、という裏付けがあります。人の目の許容範囲には限界というのがあり、読み進ませることで申し込みにつなげるLPにおいては、先に述べた運用効率の面なども考えると幅の狭いデザインの方が1度に入ってくる情報を絞り込めて、読み進めていただくのには適しているのではと思います。

岡田:なるほど、ベンチャー企業やサービスサイトはLPと比べると「読み込ませる文字量」は少なく、その分「だいたい理解した→相談してみよう」につながるよう概要やアイコン中心のデザインが多いかもしれません。

ヒントは「ペルソナ設定」と「雑誌!?」

waza-idea4

岡田:真崎社長とお話していると日ごろ気づかないことに気づけて非常に勉強になります、また改善視点がどんどん湧いてきます。そして真崎社長のようなセールスとデザインの両面からの視点はどのようにしたら身につくのでしょうか?

真崎社長:やはりペルソナをしっかり作りこむことが大事です。ペルソナが設定がされてることによって「この年代の方であれば、こういった生活習慣や、お悩みがあるだろう、そしてこういう方向になれたら理想なのでは」ということをイメージできるようになります。

そしてそういったイメージを膨らませるにはお客様の声などの事実も大事なのですが、雑誌が非常に参考になります。

岡田:雑誌。というと女性誌ですか!?

真崎社長:はい、女性誌は特に良いですね!雑誌というのその年代や、ライフスタイルを目指す人のペルソナ接待が凄くしっかりと作られた上で構成さています。なんとなく読んでいるだけでもペルソナ対象の世代の方のライフスタイルや流行などを知るには特集系のコンテンツも役に立つのですが、私たちのようなデザイナーの視点で見ていくと、カラーやフォント、メインビジュアルに使うべき人のイメージやファッションなど参考になります。

特にカラーやフォントの使い方ですが、雑誌は継続的に購入をしていただきたい商品特性もあり、ペルソナの対象者に嫌われる、違和感を感じさせるカラーやフォントの使い方をしません。これが非常に参考になります。

なかなかイメージしづらいと思うので1つ例を挙げますね、40代女性向けの雑誌と、今回は極端な例として、10代女性向けの雑誌の表紙を並べて比較していただくと、使っているフォントの太さ、色使いなど好まれる傾向が見えてきませんか?

10代女性向けの雑誌は情報がごちゃっとたくさん詰め込まれたように入っていたりもするのですがこれは40代女性向けの雑誌なんかでは見られない傾向でもあります。

こういったペルソナの傾向をくみ取り、LPに取り入れていくと、違和感を感じず、コピーや情報がすっと入ってきやすい「読まれるページ」が作れるヒントになります。

表紙のモデルはペルソナの理想の姿!

真崎社長:表紙に使われているモデルさんをよく見ていくとLPの作り方のヒントがたくさん得られます。こちらもわかりやすい例を出すと、40代女性のオーガニック系の雑誌であれば、若い人に人気の髪の毛の明るいモデルさんが登場することは無いですよね、そういった第一印象と身に着けているファッションなどを参考にLPのメインとなるモデルを決めていきます。

さらにそのモデルさんのライフスタイルを掘り下げていくことで、ペルソナ対象の方が憧れる理由がどういったところにあるのか、といったことも見えてくるのでキャッチコピーの参考になったりします。

【アイデア公開】モデル無しでもできるメインビジュアルの作り方

waza-idea1

真崎社長:あとはモデルさんの選び方なのですが、雑誌の表紙モデルさんを見ていくことでなんとなくこのあたりの方かな、というイメージはできると思うのですが、大事なのは服装です。化粧やヘアスタイルがイメージに近くても、ファッションがペルソナと異なるとメインビジュアルを見たときに違和感を与えてしまい、LPからの離脱理由をつくってしまいます。

岡田:そこまで来た段階ではモデルさんとスタイリストさんをつけて、トータルコーディネートされるんですね

真崎社長:そこまでご協力いただけなくても大丈夫ですよ、ペルソナ設定がしっかり構築できていれば、モデルさんの写真を選択する際に、できるだけペルソナのライフスタイルに合わせた衣装もリアル感を出すためにチョイスすることができますので。

岡田:イメージがハマるモデルさんがいたが、服装が合っていない、という場合も真崎社長であればうまくリアル感を出して調整が可能ということですね!
真崎社長:はい、そういったケースもございます。こういった提案ができるのも「デザイン会社」だからこそ、でしょうか。

デザインの“魅せ方”で、伝え方の制限を超える

真崎社長:他にもテクニックの話になってしまいますが、1月に公開の動画(18分10秒あたり~) の中でも少し触れていたのですが、「薬事法上、言ってはダメだが、ペルソナ設定をした対象には伝わる訴求」というのも試しております。そういった各コンテンツの細部のリアリティにこだわることで、ページ単体の離脱率を下げ、コンバージョンにつながるページの作成・改善を進めて参ります。

さらに細かい点で見ていくと「モデル素材の目線論争」というものがありまして、吹き出しでメッセージを伝える場合は目線とメッセージを同じ向きにした方が視線が行き届きやすく、説得力が増す、であったり、お客様の声に使うのであれば綺麗すぎず、上手すぎない「お客様の自撮り写真」がベターであったりと細部にこだわっていくとテストをして試したい施策や改善点はどんどん出てきます。

 

デザインとセールスライティングに通じた真崎社長の視点で見ていくと、見栄えや流行だけでなく、細部からの改善を組み込んでいかれるのですね、非常に勉強になりました、来月も引き続き、LP制作の現場のお話についてお伺いをする予定です。

※本ページでは事例やテクニックの詳細は非公開ですが、真崎社長の講演セミナーやお打合せではお話いただけるようです、ご興味をお持ちいただけた方は真崎社長へ相談されてみてはいかがでしょうか?

 

事務局からのオススメ情報!

cta_artomatic

関連記事

コメントを残す

*