ネット広告を活用されている方であれば、誰もが知っている「ランディングページ」という言葉。
ランディングページと言われると最初に思い浮ぶのは、縦長のページという方も多いのではないでしょうか。

ランディングページでは、LPOという言葉に代表されるよう各社のマーケターが試行錯誤を繰り返す一方で、「ランディングページに◯◯の法則を取り入れると効果的であったり、ボタンは◯◯色だとCTRが高くなる」などと、まことしやかにささやかれています。

その結果、どれが本当に効果的なのか分からなかったり、中には、鵜呑みにして制作を依頼したものの、どこか代わり映えしない、せっかく制作したのに結果に繋がっていない、という話をよく耳にします。

今回は、論より証拠として幅広い業種で年間100件以上ものランディングページ制作をこなす株式会社FREE WEB HOPEの代表取締役社長 相原氏に「効果の出るランディングページ制作に必要なポイント」を伺ってきました。

また、それぞれのポイントに相原氏よりコメントも頂いていますので、ぜひランディングページ制作の参考にしてみてはいかがでしょうか。

株式会社FREE WEB HOPE

aihara2.png
相原 祐樹あいはらゆうき
ランディングページ制作の株式会社FREE WEB HOPE代表取締役。
都内で数少ないランディングページ制作専門会社で、年間100本以上の制作を手掛ける。
BtoC,BtoB等ジャンルを問わず幅広く制作を行っており、最大コンバージョン率32%を
叩き出す等、ランディングページ制作・運営のスペシャリスト集団。

ランディングページ制作におけるデザインのポイント

1. レスポンシブデザインは採用しない

ユーザーの閲覧しているデバイスに合わせて均一に表示ができるレスポンシブデザインが一般的となりつつあります。
ランディングページにおいては、オリジナルで制作することをオススメします。
なぜなら、レスポンシブデザインの可変性の高さがランディングページにおいてはデメリットになるからです。

具体的には、レスポンシブデザインは、変化を前提としたレイアウトで設計するという制限があり、それが訴求にも制限を生じてしまっては本末転倒になってしまいます。
だからこそ、制限に囚われずに各デバイスで閲覧するユーザーに対して、最適な訴求ができるオリジナルデザインでランディングページは制作するべきです。

相原氏のコメント:
オリジナルデザインのスマホページでは、あらゆる部分にこだわりを発揮することができます。
例えば、「ボタンのサイズを親指で押しやすいサイズにする」「スマホで見やすいように上下の余白を取る」、PCユーザーとスマホユーザーの傾向の違いから、不要なコンテンツを削除し、代わりに「スマホ版にしかないパートを追加する」など、レスポンシブでは実現できない事も可能です。

ある資料請求のお客様で、スマートフォンユーザー向けに資料のPDFをスマホで見やすいように最適化したところ、資料からの問い合わせが倍以上になりました。
このように、デバイスごとにレイアウトを最適化するだけでなく、コンテンツを最適化する事も重要です。

2. CTAとなるボタンの色は反対色で目立たせ、かつ周りのコピーも拘る

一般的にCTAとなるボタンの色は、購買欲などの欲望を刺激しやすい赤色が目を引きやすくクリックされやすいと画一的に言われていますが、全てのランディングページに対して赤色が最適な色とは限りません。

仮に赤色をベースとしたランディングページに、赤色のボタンでは逆に目立たなくなってしまいますので、最適な色を選ぶ際は基本的に反対色を用いましょう。
さらに、ボタン周辺にはクリックの後押しとなるコピーを記載し、文面にも拘るのがポイントです。

相原氏のコメント:
例えば、CTAの部分のコンテンツ全体に青色の背景を敷いて、ボタンを黄色にする等、CTAパートそのものを目立たせるのもアリです。
ただボタンを目立たせてクリック率を上げるというよりも、ランディングページは流し読みされる傾向が強いので【問い合わせの具体的な内容】を頭に入れてもらう意味でも目立たせたほうが良いでしょう。
「あ、このページでは資料請求が出来るんだ。」「電話問い合わせは24時間対応か」など、最終着地を頭に入れてもらいながら読み進めて貰うためにも、なるべく目立たせましょう。

ランディングページ制作における構成のポイント

3. 広告からのストーリーを考えた構成にしよう

ランディングページの構成は、”広告からのストーリーを考えて制作するべき”ということは、一般的にも言われていることですが、それを実践できているのは少ないようです。
改めて、ご説明すると構成を考える際、ランディングページに訪れる前の状態、つまりユーザーが検索し、広告をクリックするシーンから遡る必要があります。

ユーザーが、それぞれのタイミングでどんな気持ちを抱いているかをストーリー立ててランディングページの構成は考えましょう。

相原氏のコメント:
ランディングページの多くはPPC広告やメルマガからの流入です。
よく、ランディングページを制作するときに、どんな内容を入れるのかばかり重要視してしまい、「この商品を買うとこんなメリットがありますよ!」といった内容に終始しがちです。
ユーザーに刺さるページを作るうえでも欠かせないことが、ユーザーを知ることです。
誰が、どこで、なぜ、検索をしてどんな広告文をクリックしてきた人がページを見るのかを最初に想定しておくと、ランディングページのコンテンツ作りでの迷いを払拭できます。

4. ランディングページの構成には、いくつかの疑問点を残そう

縦長のランディングページをはじめ、網羅的に情報を記載することがランディングページ制作におけるベストプラクティスだと思われがちですが、逆に抜け漏れない情報量が機会損失を生み出す場合もあります。

なぜなら、ランディングページで完結してしまうことにより結果的にユーザーが質問をする隙を与えない、つまり接触ポイントを自ら絶ってしまうからです。
そのため、ランディングページの構成にはわずかに疑問点が生まれるポイントを設けましょう。

相原氏のコメント:
Web上で完結する予約であったり、物販の場合には情報を漏れ無く記載しましょう。
BtoBでの問い合わせや(営業が必要)、資料請求など、ページで完結できない場合はどんな問い合わせがほしいか?を念頭に置きましょう。
数量限定などもこの傾向が顕著で、「まだありますか?」と問い合わせが来ることが多いです。

ランディングページ制作におけるコピーライティングのポイント

5. ファーストビューのキャッチコピーは結論から始まり、簡潔に伝える

ランディングページに訪れたユーザーが最初に目にするのがファーストビューです。
このファーストビューでユーザーが良し悪しを判断する時間は約3秒と言われ、わずかな時間と限られた表現(おおよそファーストビューの高さは550px)の中で、どれだけユーザーの心を掴めるかはキャッチコピー次第と言っても過言ではありません。

キャッチコピーを考える際は、はじめに結論を伝え、「要するに」と心のなかで唱えながら、簡潔に魅力を一言で伝えられる言葉を選びましょう。

相原氏のコメント:
先ほどの検索ストーリーを考えたうえで「このページは私に必要なものだ!」と即座に思ってもらうことが重要です。
ランディングページの一番の敵は読まれないこと」ですので、どうであれば興味を惹くか、人が読みたくなるか、欲しくなるかを考えて制作します。
また、キャッチコピーを置くキービジュアルの直下のパートの見出しがチラっと見えていると読み進んでもらえやすいです。

6. ボディコピーは選ばない理由を潰すこと

キャッチコピーで引き込むことに成功した後も、ボディコピーでより詳細な説明や商品の魅力を伝える必要があります。
ここでは、ユーザーが思わず読み進めてしまうような展開が求められ、商品を選ばない理由を潰していきましょう。
実際にボディコピーを書く際は、以下のように対話形式で書くと作りやすいでしょう。

高品質な独自配合の成分が配合されている商品です。でも高いんでしょ?日に換算すれば、わずか◯◯円です。他にももっといい製品があるんじゃない?A社、B社と比べてもココが優れています。でも今じゃなくていいよね?今なら特別にキャンペーン価格で提供しています。

と、このように買わない理由を潰していきます。

相原氏のコメント:
人は感情で物を購入してロジックで正当化させる、と言われています。
あなたも、何か物を購入したあとに「まぁ安かったし」「最悪返品できるし」と、購買行動を正当化したことはありませんか?僕はいつも衝動買いしたあとにはわかっていてもこれをやってしまいます(笑)
つまり、買わない理由を潰すときにも、感情に訴えかけ、最後には逃げ道を作ってあげると尚良しです。
返品保証、最安値保証、アフターフォローが今だけ無料、などなど。

ランディングページ制作におけるパフォーマンス面のポイント

7. 表示速度を高めるためのコーディングをしよう

表示速度の遅さは、ランディングページのパフォーマンスを下げる大きな原因となります。

以下、海外の調査記事を一部和訳して抜粋。

表示速度が1秒遅くなるにつれ起こるパフォーマンスの低下

ページビューが11%低下
・コンバージョン率が7%低下
・カスタマー満足度が16%低下
引用元:Aberdeen Group

そのため、いかに表示速度を早められるかが重要ですので、ランディングページ制作では、以下のポイントを意識したコーディングを行ないましょう。

CSSやJavascriptなどの外部読み込みファイル数を減らす
・画像の最適化(画像のスリム化)
・コード内にある不要なスペースや改行を無くす

相原氏のコメント:
読み込みの遅いページで、何も表示されないまま閉じたことはありませんか?
ページスピードインサイトや、GoogleAnalyticsを確認し、表示が遅くなっていないかチェックしましょう。

8. ランディングページ制作の基準にするべき解像度はいくつか

ランディングページを制作する際、気をつけたいのが解像度です。
誤った解像度で作ってしまうと、実際にWeb上から見たときに小さすぎる、大きすぎるといった問題が発生しますので、解像度の基準は1024×768をベースに制作するデザイナーに伝えましょう。

相原氏のコメント:
ほとんどのデザイナーは大きな画面で制作しています。
既にサイトを運営している場合はユーザーのデバイスの環境をGoogleAnalyticsでチェックしましょう。そして、一番多い層に合わせて制作していきましょう。
デスクトップよりもスマホよりも、ノートパソコンの方が多い事だってあり得ます。
ちなみに、テキストを入れる場合は16〜18pxの大きい文字の方が読まれやすいですよ。

ランディングページ制作・ネット集客のプロフェッショナル集団のFREE WEB HOPEとは

今回お話をお伺いした株式会社FREE WEB HOPEは、ランディングページ制作やリスティング広告運用を強みとするネット集客のプロフェッショナル集団です。
特に、ランディングページ制作においては、年間で100件以上制作し、業種も街の接骨院から大手法律事務所まで多種多様。SEMを中心に毎日1~2件ほどの問い合わせがあり、少数精鋭で運営していることからもお断りせざるを得ないほどの反響があるそうです。

なぜ、そこまで反響があるのかをお伺いすると、そこには同社の徹底したPDCAサイクルがあるからだといいます。
わずか10名弱の人員で年間100以上ものランディングページ制作をこなし、データ分析・改善までのプロセスを実行することで得た結果をノウハウとして蓄積していく”実践して証明する”企業努力が同社の売れ続ける理由の一つと言ってもいいでしょう。

さらに、同社の強みとしているのが”コピーライティング”であり、専門のコピーライターが、キャッチコピーをはじめボディコピーといったテキスト情報でユーザーの感情に訴えかける訴求には特に力を入れているとのこと。
確かに、同社が手がけたランディングページを拝見すると他社と比べても文章量が多い印象です。

まとめ

改めて今回ご紹介したポイントの中には、ネット上に溢れる「ランディングページで成果を出す◯◯」などの情報とは反する内容もあるでしょう。
しかし、それは至極当然の話で、全てのランディングページに通用するポイントはそう多くありません。

なぜなら、各社のターゲットユーザーや扱う商品やサービスによって訴求すべきポイントが異なることからも、一つの成功事例を応用して取り入れることが必ずしも抱える課題の本質的な解決になるとな限らないからです。
ご紹介したポイントも踏まえて、「自社のランディングページに必要なものはなにか」を取捨選択する一つの材料として参考にしてみましょう。

なお、今回お話を伺った株式会社フリーウェブホープから、この記事をご覧になられた方限定で、集客力をアップさせる為のWEBページ診断レポートの作成をして頂けることになっています。
今現在ランディングページを持っていても持っていなくても、この診断レポートを受け取る事が可能で、通常依頼された場合には8万円で制作している診断レポートを無料で送付可能です。

具体的には下記の4点が診断レポートの内容です。

・今の集客方法をより効果的なものに変える具体的な方法
・ページの具体的な改善指示
・これから制作する場合は、ターゲットへの訴求方法の提案
・アクセス解析から見るユーザーの好み

これらのレポートは数値を混ぜこぜにした難解なものではなく、誰にでも理解可能なように、データにコメントを付けたレポートです。

>>>ランディングページ制作のお問い合わせはこちら