インターネット・アカデミー オフィシャルブログ
About

少しの工夫でCVRを上げる、ランディングページ制作のポイントとは?

2016年6月25日

少しの工夫でコンバージョン率を上げる、ランディングページ制作のポイントとは?

商用のWebページを持っているなら、少しでもコンバージョン率(CVR)(ある期間における、ページビューやユニークユーザー数に対するコンバージョン件数の割合のこと)を上げたいものですよね。 そんな時、Webページのデザインを工夫することで、コンバージョン率を上げることができるかもしれません。
本日は、少しのデザイン変更で効果をアップできる方法をご紹介しましょう。

ランディングページの意味とその形式

ランディングページとは、様々なインターネット広告やリンクをクリックしたときに表示されるWebページのことです。
特に、広告をクリックしたときに表示されるランディングページにおいては、1ページで完結するよう、情報量を多くし、長いスクロールになっているものが多くあります。その理由は、メニューを置いて他ページに移る仕組みだと、来訪者の興味が薄れて離脱する可能性があるからです。 1ページで完結していると、来訪者が「あ、これ気になるな」と思ったときに、スクロールするだけで気軽に読んでもらえるため、コンバージョン率アップに効果的とされています。

「ターゲット」と「訴求テーマ」を明確に

ランディングページを作成する上で大事なポイントは、「ターゲット」と「訴求テーマ」を明確にすることです。
どんなユーザーに読んでほしいのか、何がコンバージョンとなるのか。検索で来てもらうのか、バナー広告で来てもらうのか。これをまずはユーザーの立場で考えます。

「ターゲット」と「訴求テーマ」の2つを明確化することで、どんなデザインがふさわしいかが決まってきます。 例えば、ターゲットが高齢者ならば、フォントサイズを大きめにして、フォームの入力項目をなるべく少なめにします。 女子高生がターゲットなら、ポップで明るい色使いが効果的かもしれません。

訴求テーマについては、何を訴求したいのか、できるだけ端的にわかりやすく表現できるよう心がけましょう。「価格の安さ」「高品質」「安全性の高さ」など、商品の強みが何かを考えてみましょう。

CTAを工夫する

CTAとは「Call to Action」の略で、例えば「カートへ入れる」「資料請求する」といった、コンバージョンにつなげるためのボタンです。 このCTAがページの中で埋もれてしまい、目立たないせいでコンバージョンに繋がらないケースもあります。 CTAを変更しただけでコンバージョン率が上がった、ということもよくありますので、CTAをいろいろと工夫してみて下さい。具体例を次にご紹介します。

・色の変更

色を変えるだけで効果が出ることがあります。 Firefoxの分析では、緑色のボタンが一番クリック率が高かったという結果が出ています。 (参照:Firefox is Green - Blog of Metrics
この傾向は、当然ターゲットやサイトによっても異なるでしょう。大事なことは、A/Bテストなどを繰り返し、自分たちのWebコンテンツに対して最もコンバージョンに寄与する色を把握することが大切だということです。

・形の変更

四角いボタンや角丸のボタン、商品の形をしたゴーストボタン(背景を透過したボタン)に変えてみるなど、目につきやすいボタンとするにはどうしたらいいか、工夫してみましょう。

・大きさの変更

特に最近はスマートフォンやタブレット端末からのアクセスが増えているので、大きくてタップしやすいボタンになるようにサイズを調節しましょう。 サイトをスマートフォンやタブレット端末から見たらどう見えるか、必ずチェックしましょう。

・表示位置の変更

サイトの訪問者がスクロールせずともCTAをクリックできるように設置するのが原則です。しかし、ブログ記事のように読み物になっている場合は、記事の内容を読み終えた後にクリックできるよう設置する方が効果的な場合もあります。

・文面の変更

色や形を目立たせるだけではなく、ユーザーの興味を引くCTAだとより効果的です。 たとえば「期間限定30%OFFセール中! 資料請求はコチラ」 と言った一言があると、コンバージョン率は上がりやすくなります。 ただし、あまり文章が長くてもよくありません。端的に一言でアピールできると効果的です。

まとめ

ページやボタンを作り替えれば一安心かと言うと、そうではありません。 デザイン変更前のコンバージョン率と変更後のコンバージョン率を比較して、正しくテストを繰り返しましよう。 テストを重ねるうちに、次第にあなたのページの来訪者に好かれるデザインがどんなものかがわかってくるでしょう。

関連講座

本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。

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

現在、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発とインターネット・アカデミーのカリキュラム開発を担当する。

海外支店責任者として、アメリカとインド、日本を行き来する。5年間、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発と普及活動を行ってきた経歴を持つ。

日本の新宿校、渋谷校インストラクター。主にWebマー ケティングとクリエイティブ系の授業を担当。

バンガロール校インストラクター。デジタルマーケティング が専門分野。

Google認定Webマーケティング講座の企画・開発に携わる。「PHPカンファレンス2011」で講演。「PHP公式資格教科書」の執筆など

バンガロール校支店長。Webプロデューサー、インストラクター、エリアマネージャを経て、現在はグローバル展開のビジネスディベロップメントを担当。

「W3C"HTML5 Tour"」での講演や、インド校にてWebデザイナーおよびチーフインストラクターを勤めた経歴を持つ、人気キャリアプロデューサー。

フランスにあるW3CのEUホスト、ERCIM(欧州情報処理数学研究コンソーシアム)に常駐し、Webの研究を行うインド人インストラクター。Webマーケティングに精通している。

テーマテーマ

最新の記事最新の記事

スタッフ別ブログスタッフ別ブログ