成果の出るランディングページ(LP)の構成案と改善ポイントのセオリー2018年6月20日その他ランディングページ(LP)とは、広義の意味では、GoogleやYahoo!などの検索結果ページやバナー広告などから訪問者が最初に訪れたページのことをいいます。ページに到着(landing)するという意味でランディングページ、または略してLPと呼ばれています。ランディングページ(LP)には上記のような広義の意味で捉えるランディングページと狭義の意味で捉えるランディングページがあります。Webに携わる人が思い浮かべるランディングページとは、次で説明する狭義のランディングページと考えるのが一般的です。狭義のランディングページとはどのようなものなのでしょうか?スポンサーリンク狭義のランディングページとはここでいう狭義のランディングページとは、広告施策用に制作された1ページで完結する縦長のページのことをいいます。ランディングページ(LP)とは、インターネット広告経由でやってきたお客様にサービスの紹介からお申し込みまでを担う、ネット上の営業マンと考えることができます。営業のセールストークを1枚のページにまとめて伝えるため情報量が多くなり、縦長のページになることが多いです。ランディングページの特徴ターゲットにサービス(商品)をアピールしやすいターゲットユーザーが抱える課題や悩みに対して、意図した行動(予約・購入など)をしてもらうことに特化しています。下記のような目的に特化したページとなります。ターゲットユーザーが抱えている課題と解決方法を紐付けて提案するため、ユーザーの期待値が上がりコンバージョンへとつながりやすくなります。ページ遷移の必要がないため離脱が少ない一般的に、ページ遷移ごとに最低でも30%のユーザーがそのサイトから離脱するといわれています。ランディングページはユーザーに見てもらいたい内容を見てもらいたい順番で1枚にまとめることができるので、途中離脱なくコンバージョンにつながる確率が高くなります。低コストで柔軟に制作できるページ構成の制限がないため自由度の高いデザインが可能になります。既存のWebサイトを最適化するよりもランディングページを新規に制作したほうがコストが低くなることもあります。このように商品やサービスを購入してもらうために活用されているランディングページですが、魅力を正しく伝えるにはいくつか見るべきポイントがあります。次からは商品やサービスを魅力的に見せるランディングページの見せ方と構成内容についてご説明します。ランディングページを構成する基本要素ランディングページ企画するにあたって、どんなコンテンツを用意する必要があるかを説明します。ランディングページは基本的に下記の6つの要素で構成されています。プロフィール、会社概要)安心(お客様の声、インタビュー)クロージング(いま行動させる、いま行動したほうが得、行動しないと損)メインビジュアル(キャッチコピー)機能や特性ではなく、ターゲットにとっての価値やベネフィットを伝えたキャッチコピーを入れましょう。メインビジュアルに入れるべき内容はこのあと詳しく説明します。結果(速さ、簡便さ、メリット、デメリットの解消、ビフォーアフター)購入するとどんなメリットがあるかを説明するコンテンツを用意します。メリットを訴求するのに以下のコンテンツが考えられます。速さを訴求するいかに早く顧客の抱える問題を解決できるか。例:営業マンが即訪問!簡便さを訴求するいかに簡単に顧客が抱える問題を解決できるか。例:導入するだけ!メリットを訴求するそれを利用することで得られるメリット。例:電気代70%カット!デメリットの解消を訴求するそれを利用することで解消されるデメリット。例:初期投資0円!ビフォーアフターそれを利用することでどのようは変化が起こるか。こだわりポイント、サービスの提供プロセス、Q&A、他社との違い、メリットを提供できる理由)商品やサービスを購入してもらうには、メリットを提供できる理由を説明するコンテンツを用意して、ユーザーに納得してもらう必要があります。サービスの構成要素を入れる。例:国産、無添加!こだわりポイントインパクトのある数字でこだわりポイントを伝えると効果的です。例:しじみ200個分のオルチニン!サービス提供のプロセス商品・サービスの提供プロセスを説明する。他社との違い他社との違いを比較検討できる魅せ方を用意する。プロフィール、会社概要)メリットを提供できる根拠を客観的に証明するために、取得した資格や実績、専門家の意見を掲載することで信頼性が高まります。有名人の紹介やテレビ、雑誌での紹介実績も効果的です。数字で表現できる客観的な事実。誰もが知っている有名人やその業界の権威による推薦文を入れる。マスコミ掲載テレビ、雑誌、新聞、ラジオ、その他各種メディアで取り上げられた実績。所属している専門団体やそこでの役割、特筆すべき活動内容。例:○○学会で公演実績などプロフィール開発担当者のプロフィールと会社の所在地や代表名などの会社情報。安心(お客様の声、インタビュー)自分と同じ立場のユーザーがどう評価しているか気になるものです。ユーザーは得したいというよりも損をしたくないという心理が強く働くため、精神的な負担を取り除いてくれるコンテンツを用意します。購入者に取材した記事クロージングいま行動させる、いま行動したほうが得、行動しないと損と思わせるひと押しです。保証をアピール送料無料、30%割引、特典付き、効果がなかったら返金、無償交換、アフターサポートなど成果を出すためのランディングページ(LP)改善ポイント効果のあるランディングページの表現や見せ方について解説します。広告と整合性があるかインターネット広告と飛び先のランディングページの内容は一致させる必要があります。広告をクリックして訪問してきたユーザーは、その時点ではそのサービスに興味を持っています。広告文と関連のあるキャッチコピーをファーストビューに表示したり、関連コンテンツを用意して、「まさに求めているランディングページ」だと認識してもらえるようにします。広告バナーとランディングページの内容を一致させる広告キーワードとLPのキャッチコピーを統一する広告文と関連のあるキャッチコピー・コンテンツを用意して、ユーザーの求めているランディングページにします。各デバイスに対応しているかPCだけでなくスマートフォンに対応したランディングページを用意しましょう。PCのみに最適化したランディングページだけですとスマートフォンで表示した際に表示が小さくなるなど可読性に欠けたランディングページになります。各デバイスに対応する方法として「レスポンシブ」と「PC用、スマホ用を別で用意」する方法があります。それぞれメリット・デメリットがあるため一概にどれが有利かは難しいところですが、PC用とスマホ用をそれぞれ別で用意したほうが柔軟なサイト設計をすることができます。レスポンシブでランディングページを用意する場合、変形することを前提としてページを設計するので、レイアウトなどデザイン上なんらかの制限がかかることがあり、柔軟な対応が難しいといったデメリットがあるからです。レスポンシブサイトをスマホで表示した際に、キャッチコピーや画像、ボタンなどが小さく表示されているページも見受けられます。これらを読みやすく、見やすく改善するだけでコンバージョンが増えることもよくあります。レスポンシブにもメリットはあります。それはワンソースで管理できるという点。頻繁に更新するならレスポンシブは大きなメリットになると思います。どちらにもメリット・デメリットはありますが、ユーザー視点で考えると各デバイスごとにランディングページを用意した方が、ユーザーに優しいサイト設計をしやすいといえます。ファーストビューで魅力を伝えているかファーストビューとはページを開いてスクロールせずに見える範囲のことをいいます。ファーストビューで訪問者の気持ちをしっかり捕まえられているランディングページは、ページ最下部まで読んでもらえる確率が高まります。2018年現在、主流となっているPC、スマホの解像度は下記のとおりです。PCの解像度1920×1080、1366×768PCサイトのファーストビューをデザインする際は1000px以内を目安にするといいでしょう。5系)、360×640(GALAXYなど)ファーストビューには、以下の内容を意識してメインビジュアルをデザインしましょう。機能や特性ではなく、ターゲットにとっての価値やベネフィット(良い体験)を伝えたキャッチコピーにする。〇〇コラーゲンの無料モニターに参加したい30歳以上の女性の方へ。〇〇SIMで毎月のスマホ代が4,000円節約できました!瞬間的に効果を連想できるメインビジュアルになっているか伝えたい内容とビジュアルイメージを一致させます。英会話教室のランディングページでしたら、外国人と楽しく会話をしているメインビジュアルなどを用意します。ちなみにメインビジュアルに人物写真を使う場合は、男性よりも笑顔の女性のほうが信頼度が上がるといわれています。商品を紹介するランディングページでは、人物写真よりも商品写真を載せたほうがコンバージョン率が高くなるという傾向があります。権威付けがされているか〇〇受賞、〇〇ノミネート、大手クライアント導入、公的機関の承認など、権威付けの表示はユーザーに信頼感を与えます。フォロワー数など具体的な数字があるとユーザーの目を引きつけ、安心感を与えます。お問い合わせボタンファーストビューにお問い合わせボタンを置き、ユーザーのアクションを促します。スマートフォンではスクロールの負担がそれほどかからないので、ファーストビュー内にムリに入れる必要はありません。ファーストビューの下には配置しておきましょう。「流し読み」でも内容が伝わるかユーザーの基本動作は「流し読み」です。何かが目に止まらない限り、中身を深く読んでくれることはありません。読まなくても内容が伝わるようにするために、簡潔にメリットを伝える見出しや、イラスト、画像などでユーザーの興味を引くような工夫が必要です。長文は離脱の原因になります。ユーザーの心理的な抵抗を少なくするために、読みやすさに配慮した見せ方をする必要があります。アクション)ボタンは目立つかコンバージョンに直結するCTAボタンは、確実に目立つものでなくてはいけません。視認性が悪くないか(背景と同化していないか、小さくないか)視認性が悪いとせっかく用意したボタンも無駄になります。クリッカブルとわかるようにボタンらしくデザインしましょう。目立たせるためにアニメーションCSSで動きをつけてクリックを促す方法も効果的です。24時間電話対応可」などをいれて、クリックを促しましょう。複数配置しているかコンテンツの合間に複数配置して、いつでもアクションできるようにしましょう。鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより早く捉えることができる。Nänni教授)※鋭角のイメージは「触るな」「立ち去れ」「引っ掻く」。鋭いオブジェクトから連想されるネガティブなイメージへ展開する傾向があるとのこと。脳神経学者は鋭角への嫌悪感を「回避反応」と読んでいます。ボタンの色を緑色にする各色が人にもたらすイメージは下記のとおりです。信号機を考えるとイメージしやすいです。良いとされていますが、ページ全体のカラーも考慮して決めるようにしましょう。お問い合わせフォームは平易かフォームとランディングページを1ページに収めるページ遷移するごとに少なくとも30%の訪問者が離脱すると言われています。お問合わせはフォームはランディングページ内に入れた、一体型にしておきましょう。フォームの入力項目は最小限にするフォームの入力時に離脱するケースは少なくありません。スマートフォンでの入力は大きな負担となるため、必要な情報のみ要求するようにしましょう。サービス提供者情報を表示しているか電話番号、メール、住所、責任者など企業情報を載せましょう。以前、ユーザーテストをした際、企業情報をチェックするユーザーがとても多くいました。意外とよく見られている箇所だと思われますので、しっかりと情報を入れておきましょう。ネガティブな情報を入れる特にコンプレックス系のサービスを扱う場合は、ネガティブな情報を入れるのも効果的です。アンチエイジング商品の場合、「30歳を過ぎるとコラーゲン数が20代の半分に!」など、危機感をあおるコンテンツを用意してコンバージョンへと促します。高額商品の場合、まずは無料/格安のお試しを用意して集客する高額商品の場合、最初はモニター募集・トライアル募集などの見込み客集めにフォーカスし、集客後にクロスセル・アップセルを狙います。適切なタイミングでアップセルアップセルをする場合は入力が完了し、気持ちに余裕ができた時に提案したほうが効果的です。問い合わせフォームの確認画面で、よりお得感を訴求したサービスをアピールしてアップセルをおこないましょう。サービス、商品の選択肢を多くしすぎない基本的にユーザーは課題を早く解決したいと思っています。選択肢が多いとどれを選択すべきか迷ってしまい離脱する原因となるため、できるだけ1つにしましょう。お気に入りボタンを入れる高額であればあるほど、比較検討する時間が必要です。お気に入りボタンを入れてランディングページに戻りやすくする仕組みを用意しておきましょう。他社と比較検討しやすい見せ方になっているか特にBtoBを扱うサービスの場合、担当者が比較検討しやすいように機能を表組にするなど、閲覧しやすい見せ方をしましょう。クロージング」の掲載順もよく考えましょう。基本的には紹介した流れで構成するとよいですが、芸能人などの有名人が推薦しているサービスは、あえてページの上部に推薦記事を配置することでユーザーの気持ちを引きつけ、後半のコンテンツをじっくり読む気にさせるなどの手法もよく使われます。競合のランディングページをチェックして、どんな構成になっているかを調査してみるのも参考になります。競合のランディングページを調査し、これまで説明してきた内容を抑えてランディングページを作成すれば、成果の出るランディングページとなるでしょう。最後にこの記事を書くにあたって、とても参考になった書籍を紹介します。ページ前半は、ランディングページを構成する要素を説明し、後半はリスティング広告に関する内容になっています。紹介していますが、実際の現場でもすぐに使える内容となっており、私も実務で活用しています。ランディングページで売上アップを考えているなら一読するのをおすすめします。PostsWordPressでブログを作ったらまずやる26項目このブログをはじめてまだ2ヶ月も経っていないので、まだまだアクセスは少ないのです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【無料】漢字もOKの日本語フリーフォント/毛筆体・手書き風など【無料】漢字もOKの日本語フリーフォント/明朝・ゴシック・丸ゴシックWindows上でXAMPPを使用してローカルにバーチャルホストを設定する方法Mac上でMAMPを使用してローカルにバーチャルホストを設定する方法WordPressの本番環境をローカル環境で再現する方法5ステップでマスターする!初心者から始めるWordPress勉強法ローカルサーバーをXAMPPで構築してWordPressをインストールする方法Photoshopで継ぎ目のないテクスチャの作り方ファーストビューが大事なのは知っている。Entry【無料】漢字もOKの日本語フリーフォント/毛筆体・手書き風など放射線模様を描くのに超便利。素材profileかれこれ十年以上デザインに関わる仕事をしています。今ではWebデザインを中心に、ディレクションやライティングなどをしています。TwitterではWebに関する情報を中心に個人的な気になる話題を気ままにつぶやいています。