ランディングページ制作の基本を網羅したインフォグラフィック



どんなウェブサイトにも訪れる人にはそれぞれのストーリーがあります。そう考えると、誰もが認める完璧なランディングページというのはおそらく存在しないのかもしれません。ただ、一人でも多くの人に理解してもらうために必要なランディングページの制作ルールというのはどうやらあるようです。


次のインフォグラフィックは、インディアナ州を拠点とするEFO(Entry Form Optimization)ファームのFormstack が2010年に発表したもので、発表当時も非常に話題になりましたが、定期的にツイートされシェアされています。ランディングページ制作の基本事項を解説した、とてもよくまとまったインフォグラフィックです。

ランディングページは継続的にさまざまなバリエーションをテストしていくものであるというのは半ば常識になっていますが、その前提となる基本的なルールが網羅されています。


The Anatomy of a Perfect Landing Page - Formstack
http://www.formstack.com/the-anatomy-of-a-perfect-landing-page/





上掲のインフォグラフィックにある、ランディングページを作成する際の10のポイントについて、順を追って見ていきます。


1. ヘッドラインと広告のコピー
・ランディングページのヘッドラインと広告のコピーライティングはお互いに寄り添うこと
・アドワーズだとランディングページの記載内容と広告文の親和性は品質スコアの計算要因になるので、トラフィックコストを下げて効率を高める意味でもヘッドラインと広告は関連性が大事


2. 明瞭で簡潔なヘッドライン
・ヘッドラインは訪問して最初に目につく部分なので、退屈さや複雑さをなるべく避けること
・読者の注意を引くように、コンテンツで伝えたいことを簡潔にまとめること


3. 正しい文法を心がける
・ユーザーに個人情報やカード情報を入力してもらうには信用が重要なので、誤表記や文法がおかしいことは重大なリスクになる


4. 信頼性の高い指標を利用する
・信用の構築には、サイトオーナーシップ、新聞や雑誌に取り上げられた記事、第三者機関やセキュリティの証明書などが有効
・例えば、ACLensというメガネ屋は、VeriSignを利用しだしたところコンバージョンが41%上がって購入単価が58%増加したらしい


5. アクションを促す表現(Call-to-Action)を使う
・ヘッドラインを読んだユーザーに次にどうすればいいのか示してあげることが重要
・例えば、Firefoxでは「Firefox3を試す」から「今すぐダウンロード-無料です」に変えたところ、元のボタンより3.6%ダウンロード率が増加し、テスト期間内でオリジナルより500以上多くダウンロードされたらしい


6. ボタンやアクションを促す表現は目立たせる
・ユーザーがそのサイトに求めていることを見極めること。そして「無料」「最新の」「購入」「今すぐダウンロード」のような言葉を使うこと
・ボタンは目立たせ、アクションを促す表現の右下に設置する。ボタンは大きく、明るい色で、ノンスクロールの位置にあることが望ましい
・オレンジ色や黄色だとユーザーの目に留まりやすい


7. 控えめなリンク
・外部へのリンクが多いと、ユーザーの気が散ってコンバージョンへのマイナスインパクトがあるので避ける
・通常のページであればリンクの多寡は気にしないでもいいが、ランディングページではシンプルを心がける


8. 記述内容に関連する画像や動画
・利用者の証言を集めた動画や製品のイメージを積極的に利用することは、ユーザーによい印象を与え、製品をもっと調べたいという動機づけに繋がる


9. ファーストビューに収める
・スクロールしない範囲に情報を集めることで、ユーザーに伝えたい箇所がどこかを明確にする
・アクションを促すボタンを、ノンスクロールかつユーザーの目に触れやすい位置に設置する


10. 常にテスト!
・ABテストやメッセージ変更の実施、反響のあるフレーズやボタンを模索するなど、常に最適化を心がける
・メッセージや配置転換などのマイナーABテストに加えて、全体のデザインが違うメジャーABテストも行なってみる



以上になります。
他にも、ランディングページの色がユーザーに与える印象などがまとまっており、基本的なことながら改めて参考になりますね。

もちろん、ランディングページは様々な手法や見せ方があるので、異論反論はたくさんあると思いますが、基本を知っていた方が応用が利きやすいという側面はあると思います。自社のサイトに合わせた成功パターンを見つける上での参考になれば幸いです!

コメント

AD

名前

AdMarkeTech-Monthly,16,Advertiser,5,Agency,21,Amazon,4,Attribution,4,Career,16,Data,43,Display,23,Google,57,Market,4,Marketing,23,Media,11,Mobile,20,Retail,6,Search,47,Social,17,State of AdOps,20,Tool,7,Video,12,
ltr
item
AdMarkeTech.(アドマーケテック): ランディングページ制作の基本を網羅したインフォグラフィック
ランディングページ制作の基本を網羅したインフォグラフィック
http://3.bp.blogspot.com/-BAUYRBVPaqY/T7ZP8atlnJI/AAAAAAAAB2g/KttN-pfvoKY/s1600/Landing.jpg
http://3.bp.blogspot.com/-BAUYRBVPaqY/T7ZP8atlnJI/AAAAAAAAB2g/KttN-pfvoKY/s72-c/Landing.jpg
AdMarkeTech.(アドマーケテック)
https://www.admarketech.com/2012/05/blog-post_19.html
https://www.admarketech.com/
https://www.admarketech.com/
https://www.admarketech.com/2012/05/blog-post_19.html
true
1146310882291688261
UTF-8
すべての記事を表示 記事が見当たりません さらに見る もっと読む 返信 返信をキャンセル 削除 By ホーム ページ 記事 すべて見る おすすめ記事 カテゴリ アーカイブ 検索 すべての記事 記事が見当たりません ホームへ戻る Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago フォロワー フォロー プレミアム記事 シェアする コードをコピー コードを選択 クリップボードにコピー Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy