Webコンサルティングユニット2017年新卒採用でPLAN-Bに入社。クリエイティブユニットのWebデザイナーを経て、現在はランディングページの成果にコミットするチームで、CVR改善業務に従事。良いランディングページとは?ランディングページを制作していく流れ1戦略設計(要件定義)2情報設計(ワイヤーフレーム作成)3デザイン4コーディングランディングページで効果を出すために、デザインで気をつけるポイントファーストビューコンバージョンエリアエントリーフォームまとめ近年、EC市場の拡大やスマートフォン利用者の増加に伴い、インターネット広告市場は拡大し続けています。2018年のインターネット広告費用は、1兆7,589億円までに成長しており、地上波テレビ広告費の1兆7,848億円に迫ってきています。インターネット広告市場が拡大しているということは、広告の受け皿となるランディングページのニーズも当然ながら高まってきていると言えます。広告費をつぎ込み集客ができたとしても、集客先であるランディングページが魅力的でなければ、コンバージョンには繋がらず、結果的に売り上げにはインパクトしません。インターネット広告を効果的に運用していく上で、ランディングページはとても重要です。インターネット広告と合わせてランディングページは最適化していくことで、より効果を高めることができます。このランディングページ最適化のことを、LPOと言います。今回は、そんなランディングページの効果を高めるためのデザインについてお話ししていきます。そもそもランディングページとは?ランディングページとは、サイト訪問者が最初にアクセスするページのことを指します。下層ページを持つWebサイトの場合、サイトの中で、ユーザーが最初にアクセスしたページがトップページであれば、トップページがランディングページとなります。企業情報ページに最初にアクセスしたのであれば、企業情報ページがランディングページとなります。上記は広義的な意味でのランディングページです。一般的に使われているランディングページは、インターネット上で配信されている広告を経由して訪れたユーザーの着地先である縦長レイアウトの1ページ完結型サイトのことを指します。一般的なWebサイトは、トップページから複数の下層ページに分岐しており、情報の抜け漏れがないように網羅的に構成されています。ランディングページの場合は、通常サイトのような下層ページは存在しません。ページの目的に合わせて必要な情報だけを厳選し、1ページで完結するように構成されているのです。以下の図が、サイトとランディングページの違いです。一般的なWebサイトには、様々な目的を持ったサイトが存在します。企業の顔として自己紹介の役割を持つ「コーポレートサイト」や、企業や商品の世界観を伝えるための「ブランディングサイト」、人を採用することを目的とした「採用サイト」などがあります。そのようなサイトと比べると、ランディングページの目的はいたってシンプルです。ランディングページの目的は、広告を経由してページに訪れたユーザーに「お問い合わせ」や「資料請求」などの行動を起こしてもらうことです。要するに、コンバージョンを獲得することがランディングページの目的なのです。良いランディングページとは?ランディングページの目的が、コンバージョンの獲得と明確なので、制作をする際は、どれだけコンバージョンが獲得できるページにするかが重要となってきます。格好良いデザインであっても、いくら情報整理ができているページであっても、コンバージョンがとれなければ良いランディングページとは言えません。どのようなランディングページが、コンバージョンを獲得することができるのかと疑問でしょう。ランディングページには、広告を目にして、広告の内容に興味を持ったユーザーが流入してきます。ユーザーは表示された広告に惹かれて、商品やサービスについて詳細が知りたいと感じていると言えます。その知りたいという要求に対しての解答を、ランディングページ上に準備できているかどうかが、良いランディングページかどうかを判断する基準の一つになります。ランディングページは1ページに情報をまとめているページであるため、手軽に制作できるものと思われがちですが、いざ制作を進めていくと簡単ではありません。ランディングページを制作していく流れランディングページを制作する時に、何も考えず、行き当たりばったりで進めてしまうと、作業の効率が悪くなるだけでなく、効果の出ないランディングページが出来上がってしまいます。LPOを行うことで効果を出していくことは可能ですが、折角ランディングページを制作するのであれば、設計段階から効果を出せるように考えることが大切です。そのためには、全体の流れを把握しておく必要があります。先ほど述べたように、ランディングページの最終目的はページに訪れたユーザーに定めたコンバージョンをしてもらうことです。その最終目的を達成することを念頭に置きながら、全ての工程を進めていく必要があります。一般的なランディング制作の流れは以下になります。それぞれの工程で何をしていくのか、詳細を説明します。1戦略設計(要件定義)戦略設計では、これからプロモーションしようとしている商品やサービスにとって、どのようなランディングページが必要なのかを考えていきます。・どのようなユーザーがランディングページに訪れるのか・ユーザーに何を伝えたいのか・ユーザーにどのような行動を起こしてもらいたいのか(コンバージョンポイント)などを、明確にしていきます。競合となりうる商品やサービスのランディングページが、どのような訴求をしているのか、どのようなコンバージョンポイントを用意しているのかを調査する必要があります。競合を調査することは、自社のランディングページを制作するための参考にするだけでなく、競合と自社を差別化をするためにも必要です。競合他者が、どのようなユーザーに対して、どのような施策を行なっているのかをあらかじめ頭に入れておきましょう。ユーザー目線になって競合と自社を比較することで、今まで気がつかなかった自社の商品やサービスの魅力発見にもつながります。2情報設計(ワイヤーフレーム作成)情報設計とは、ランディングページを作る上で必要な情報を整理することです。ここでは、戦略設計で想定したユーザーやコンバージョンポイントに合わせて、全体のストーリーを設計し、またそのストーリーに必要なコンテンツの情報を具体化し、最終的にその内容をワイヤーフレームに落としていきます。ストーリーを設計する際は、「どのようなサービスなのか。」「誰のためのサービスなのか。」「サービスを受けた時にユーザーにはどんなメリットがあるのか。」「競合との違いは何なのか。」といった、ユーザーに伝えるべきポイントを洗い出し、それらの話をどういった順番で提示するかを決めていきます。この時に重要なのは、いかにユーザー目線になって考えられるかです。どのような順番で情報を提示すればユーザーが欲しい情報に到達でき、結果コンバージョンに至るのかを考えていきます。提示する順番が決まったあとは、コンテンツごとに見出しや本文などのテキスト内容を決めていきます。テキストの内容まで詰めることができたら、そのテキストを元にレイアウトを詰めていきましょう。この時のレイアウトとは、情報の強弱をつけたり、グループ化をしたりと言う意味で、あくまでの情報整理のためのレイアウトです。この段階でワイヤーフレームに落とし込むことをオススメします。ワイヤーフレームはデザインをする上での設計図となるので、テキスト内容以外のグラフやイラストに必要な数値データなども用意します。3デザインワイヤーフレームが出来上がったら、いよいよデザインです。作業に入るのは危険です。ワイヤーフレームを読み込み、全体の流れを理解していきます。その上で、デザインのトンマナやレイアウトなどの全体的な方向性を考え、完成イメージが浮かんでから作業にはいりましょう。私のオススメは、手書きでデザインラフを描くことです。ワイヤーフレームはあくまでも情報整理を目的としたものなので、それぞれの情報をよりわかりやすく表現するためにどのようなデザインにするか、ラフを描くことで、頭の中を整理し、作業をスムーズに進められます。4コーディングデザインが完成したら、コーディング作業に入っていきます。ランディングページ制作の中で、コーディングは最後の工程であるため、ここでのクオリティがランディングページ全体の品質に影響します。基本的な動作の不具合がないか、レイアウトの崩れがないかを確認するだけでなく、ユーザーの目線からみて、使いやすいページになっているかを意識して組んでいきます。見た目以外の表示速度であったり、フォームの動作も、良いランディングページの判断基準の一つとなります。実際に自分がランディングページに訪れたユーザーと仮定し、ページをみたときにストレスがないかを確認しましょう。ランディングページで効果を出すために、デザインで気をつけるポイントランディングページの基本的な理解ができたところで、効果のでるデザインのポイントをお話していきます。ランディングページ制作の流れを見ていくと、効果の出るランディングページ制作をするためには、デザインだけでなくその前段階の設計が重要ということはおわかりいただけたでしょうか。ページに訪れるユーザーや、商品・サービスによって細かなデザインは異なってきます。今回は、コンバージョンに大きく影響すると言われている「ファーストビュー」「コンバージョンエリア」「フォーム」の3つのエリアにおいて、デザインをする際に気をつけるポイントをお伝えします。ファーストビューファーストビューとは、ページに訪れたユーザーが初めてみる画面のことを指します。ファーストビューの役割はユーザーの心を掴み、ファーストビュー以下のコンテンツを読んでもらうためのきっかけ作りです。デザインをするときに気をつけるポイントは、訪れたユーザーが一目見て、何のサイトなのかがわかるようにすることです。ファーストビューに載せる要素は優先順位をつけて、極力少なくした方が訴求力の高いファーストビューになると言われています。少ない情報でいかにユーザーに伝えたい内容を伝えるかが重要なので、キャッチコピーの見せ方や、掲載する画像はこだわりましょう。コンバージョンエリアコンバージョンエリアとは、ユーザーをランディングページの目的(コンバージョン)に促すための、行動を後押しするテキストや、行動を起こすためのボタンを配置するエリアのことを指します。デザインをするときに気をつけるべきポイントは、他のどの要素よりも目立たせるということです。ランディングページは他のWebサイトと比べ、情報量が多く長いため、コンバージョンエリアが目立たないと、ユーザーの目に留まらず読み飛ばされてしまうこともあります。他のどの要素よりも目立たせる方法はいくつかあります。ランディングページで利用しているメインカラーと同系色は避け、印象に残るカラーを選びましょう。次に大きさですが、エリアを広く取って差をつけましょう。その他には、他の要素にはない装飾を施す方法などもあります。エントリーフォームユーザーがランディングページでコンバージョンするためには、コンバージョンボタンを押した後、エントリーフォームに記入する必要があります。最後の最後でユーザーを離脱させないために、エントリーフォームのデザインはかなり重要となってきます。デザインの際気をつけるポイントは、使い勝手を考えユーザーにストレスを与えないかということです。入力項目が多かったり、入力がしづらかったり、ユーザーがストレスを感じるようなポイントは全て潰していきましょう。デザインとは離れますが、ユーザーにストレスを与えないためには、システム部分での工夫も必要です。・どの項目が必須なのか一目でわかるようにする・入力漏れがある場合は、リアルタイムでエラーを表示する・入力補助を行うなど、ユーザーの入力時の手間を減らすようにしましょう。まとめいかがでしたでしょうか?効果の高いランディングページを制作する上で一番大切なのは、「ユーザーの目線」に立つということです。弊社が取り扱うLPOサービスの施策の流れや概要をご紹介しております。CVRを上げたい、LPに課題があると感じるけれどどうしたら良いかわからない、そもそも今のLPが良いのかわからない、そんなお悩みにお応えします。無料で資料ダウンロードが可能です。資料ダウンロードありがとうございました。資料のダウンロードが可能になりました。下記のボタンより、資料をご確認ください。CREATIONMARKETINGDMP/AIRSS購読ファンになるページトップに戻る株式会社PLAN-Bは確実な成果に特化したデジタルマーケティングカンパニーです。企業に役立つ情報を発信します。