「LPを作ったのに、問い合わせが増えない」
「バナーは、どんなサイズで、何を載せればいいの？」
結論から申し上げると、LPとバナーは「一度作って終わり」ではなく、「届けたい人に合わせて作り、計測して直す」ものです。LPは、ファーストビュー・ボタン・フォームを中心に、読む人が迷わない順番で組み立てます。バナーは、媒体が推奨するサイズで作り、複数の案を比べて改善します。
この記事では、総合広告代理店フリーザロックエージェントが、LPの基本構成、バナーのサイズと作り方、計測と改善の進め方をまとめます。
LPとバナーの役割
バナーは、WEBサイトやアプリの広告枠に出す画像の広告です。目にとめてもらい、クリックしてもらう役割があります。
LP（ランディングページ）は、広告をクリックした人が最初に見るWEBページです。商品やサービスを理解してもらい、問い合わせや申し込みにつなげる役割があります。
バナーで伝えたことと、LPの内容がずれていると、読む人は「思っていたのと違う」と感じます。バナーとLPは、セットで考えることが大切です。
LPの基本構成
LPは、上から下へ1本の流れで読まれます。一般的には、次のような順番で組み立てます。
| パート | 載せる内容 | ポイント |
|---|---|---|
| ファーストビュー | キャッチコピー、メインの画像、ボタン | だれの、どんな悩みに応えるかを一目で伝える |
| 悩み・共感 | 読む人がかかえる悩みや状況 | 「自分のことだ」と感じてもらう |
| 解決策・特長 | 商品やサービスの特長、選ばれる理由 | 特長を3つ程度にしぼって伝える |
| 使い方・流れ | 申し込みから利用までの手順 | 手順を図や番号で示し、不安をへらす |
| 料金・よくある質問 | 料金、条件、よくある質問と答え | 申し込む前の疑問に先回りして答える |
| 申し込み（CTA） | ボタン、フォーム | 次にすることを1つにしぼる |
※CTA（Call To Action）は、「問い合わせる」「申し込む」など、読む人に取ってほしい行動をうながす部分のことです。
ファーストビューの作り方
ファーストビューは、ページを開いて、スクロールせずに見える範囲です。読む人は、ここを見て「読み進めるかどうか」を決めます。
・だれに向けたページかを示す：届けたい人と、その人の悩みを言葉にします。
・いちばんの価値を短く伝える：特長をたくさん並べず、1つに決めます。
・広告との一貫性を持たせる：バナーと同じ言葉や画像を使うと、迷わず読み進められます。
・スマートフォンで確かめる：スマートフォンの画面は小さいため、文字の大きさや画像の見え方を実機で確認します。
ボタンとフォームのポイント
ボタンは「押すと何が起きるか」がわかる言葉にする。「送信」より「無料で資料を受け取る」のように、行動と結果がわかる言葉にします。ボタンは、ページの途中と最後など、読み終えたところに置きます。
フォームの入力項目はしぼる。入力する項目が多いと、途中でやめる人が出やすくなります。本当に必要な項目だけにします。必須と任意の区別、入力例、エラーの表示もわかりやすくします。
バナーは媒体の推奨サイズで作る
バナーのサイズは、出す媒体ごとに決まりがあります。Google広告ヘルプによると、レスポンシブディスプレイ広告（画像や文章を登録すると、枠に合わせて自動で組み合わせて表示される広告）の規定は次のとおりです。
| 素材 | 比率 | 推奨サイズ | 最小サイズ |
|---|---|---|---|
| 横長の画像 | 1.91:1 | 1,200×628 | 600×314 |
| スクエアの画像 | 1:1 | 1,200×1,200 | 300×300 |
| 横長のロゴ | 4:1 | 1,200×300 | － |
| スクエアのロゴ | 1:1 | 1,200×1,200 | － |
※単位はピクセル。ファイルサイズの上限は5,120KBです。見出しは、短い見出しが半角30文字（全角15文字）以内、長い見出しが半角90文字（全角45文字）以内です（Google広告ヘルプより）。
サイズを指定して作る画像のバナーでは、Google広告ヘルプで、次のサイズがよく表示されるサイズとして紹介されています。
| 表示される場所 | サイズの例（ピクセル） |
|---|---|
| パソコン | 300×250、336×280、728×90、300×600、160×600 など |
| スマートフォン | 300×250、300×50（320×50相当）、300×100 など |
規定は変わることがあります。制作の前に、各媒体の最新のヘルプを確認します。
バナーのデザインのポイント
・伝えることは1つにしぼる：バナーは小さく、見られる時間も短いです。言いたいことを1つに決めます。
・小さいサイズでも読めるか確かめる：300×50のような小さな枠では、文字が読めなくなりがちです。サイズごとに文字の量を調整します。
・商品や人物をはっきり見せる：何の広告かが一目でわかるようにします。
・LPとデザインをそろえる：色や写真、言葉をそろえると、クリックしたあとも迷いません。
A/Bテストで比べる
A/Bテストは、2つの案を同じ条件で出して、どちらの反応がよいかを比べる方法です。たとえば、キャッチコピーだけを変えたバナーを2つ用意し、クリックされた割合を比べます。
・一度に変えるのは1か所：複数の場所を同時に変えると、何が効いたのかわからなくなります。
・ある程度の数がたまってから判断する：表示やクリックの数が少ないうちは、たまたまの差かもしれません。
・結果を記録する：どの案で何を変えたかを残し、次の案づくりに生かします。
計測して直す
LPとバナーは、出したあとの数字を見て直していきます。まず、何を「成果」とするか（問い合わせ、資料請求、購入など）を決め、計測の設定をしてから広告を出します。
| 見る数字 | 意味 | 低いときに見直すところ |
|---|---|---|
| クリック率（CTR） | 広告が表示された回数のうち、クリックされた割合 | バナーの画像、コピー、出す相手 |
| コンバージョン率（CVR） | LPを見た人のうち、問い合わせなどの成果に至った割合 | ファーストビュー、構成、ボタン、フォーム |
| スクロールの深さ | LPのどこまで読まれたか | 読まれずに離れている場所の内容 |
だれもが使いやすいページにする
画像に代わりのテキスト（alt属性）を入れる、文字と背景の色の差をはっきりさせる、などの工夫で、より多くの人が使いやすいページになります。ウェブアクセシビリティ（だれもが使えるようにすること）の日本の規格として、JIS X 8341-3:2016があります。
また、2024年4月1日施行の障害者差別解消法の改正で、事業者による「合理的配慮」の提供が義務になりました。WEBページで何が求められるかは状況によって異なるため、具体的な対応は専門家に確認することをおすすめします。
まとめ：作って、計測して、直す
・LPは、ファーストビューから申し込みまで、読む人が迷わない順番で組み立てる
・ボタンは行動がわかる言葉に、フォームは入力項目をしぼる
・バナーは媒体の推奨サイズで作る。Googleでは横長1,200×628、スクエア1,200×1,200が推奨
・A/Bテストは1か所ずつ変えて比べ、計測した数字をもとに直す
制作費の目安は広告クリエイティブ制作の費用相場、広告表現の注意点は広告の表現で注意したい法律と権利をご覧ください。
