「LPのメインビジュアルは、いい画像といいコピーを見つけられるかどうかで決まる」。制作を任された方から、そうした前提でご相談をいただくことがあります。参考になるLPを何千件も収録したギャラリーサイトがいくつも公開されていて、優れた見本を眺めていれば答えが浮かんでくるように思えるからでしょう。ところが、候補の画像が20枚に増えても、決め手はいっこうに出てきません。
弊社はこれまで、検索から来た人に読んでもらう記事や、広告から来た人に読んでもらう文章を数多く設計してきました。その経験から言えるのは、メインビジュアルで最初に決まるのは画像ではなく、誰に何を約束するかの一文だということです。言葉が決まっていないから、画像を選ぶ基準が生まれません。順番が入れ替わったまま止まっている案件は、決して珍しくないと感じています。
本記事では、メインビジュアルという言葉の範囲の整理から、画像を探す前に決めておく3つのこと、公開後に数字が動かないときの見直し方まで、言葉の設計を担ってきた立場で順を追ってお伝えします。
- メインビジュアルとキービジュアル・ファーストビューの範囲の違い
- メインビジュアルを組み立てる4つの構成要素
- 画像を探す前に決めておく3つの言葉と、その決め方の順番
- 差し替えても数字が動かないときに確認する3か所
- 自社で作るか外注するかを分ける判断の材料
LPのメインビジュアルとは
LPのメインビジュアルとは、ページを開いた瞬間に目へ飛び込む、キャッチコピーと視覚素材をひとまとまりにした先頭の面を指します。商品名を大きく置いた帯も、人物写真の上に文字を重ねた画面も、担う役割に違いはありません。ここで訪問者は「自分に関係のあるページかどうか」を判断し、続きを読むか、戻るボタンを押すかを決めています。
現場では呼び方が揺れやすい用語でもあるため、隣り合う言葉との関係を先に整理しておきましょう。
キービジュアルとの呼び分け
キービジュアルは、広告・パンフレット・Webサイトなど媒体をまたいで使い回す中心の絵を指す言葉として使われます。対してメインビジュアルは、そのページの先頭に置かれた面そのものを指します。両者が重なる場面も多く、実務では同じ絵を指して両方の呼び名が飛び交うでしょう。社内やパートナーとやり取りするときには、話題になっているのが「絵」なのか「面」なのかを最初に確認しておくと、後の手戻りが減ります。
ファーストビューとの範囲の違い
ファーストビューは、スクロールせずに見える画面全体を指します。メインビジュアルはその内側の中心部分で、上部のロゴや電話番号、画面の下端にわずかにのぞく次のセクションまでは含みません。面積で言えばファーストビューの大半をメインビジュアルが占めるため、混同されたまま話が進むこともあるでしょう。ただ、修正を依頼する場面で範囲がずれていると、直る場所も想定と変わります。
関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説
メインビジュアルの4つの構成要素
要素に分けて考えると、迷ったときにどこを触るべきかが見えてきます。業種を問わず必要になる4つに絞ります。
キャッチコピー
占める面積は小さいのに、読み進めるかどうかを実質的に決めているのがキャッチコピーです。ここで書くべきは商品名でもキャンペーン名でもありません。訪問者が手に入れる状態のほうです。「初回半額」よりも「初めての方は、まず1回試してから続けるか決められます」のように、読んだ人が自分の次の行動を想像できる形になっているかどうかが分かれ目になります。
サブコピーと補足情報
キャッチコピーだけで説明しきれない条件を引き受けるのがサブコピーの役目です。対象者、価格帯、提供エリア、所要時間といった、当てはまらない人がここで離脱できる情報を置きます。除外条件を書くと機会損失になると心配される方もいますが、実際は逆でしょう。条件に合わない人が先に離れれば、後半のフォームまで進んだ人の質がそろい、営業側の手間が減ります。
画像や動画などの視覚素材
写真、イラスト、実際の画面キャプチャ、短い動画のどれを選ぶかは、コピーで宣言した内容を証明できるかどうかで決めます。「3分で登録が終わる」と書いたなら、笑顔の人物写真より登録画面のキャプチャのほうが証拠になるでしょう。素材は言葉の飾りではなく、裏づけとして選びます。この一点で候補は一気に絞り込めるでしょう。
信頼材料と次の一歩
導入社数、受賞歴、取得資格、メディア掲載といった信頼材料と、ボタンやフォームの入口までを含めて先頭の面と捉えます。信頼材料は数を並べるほど効くわけではなく、コピーで立てた約束に直接関係するものを1つか2つ添える形が扱いやすいと感じています。
4つのうち、先に確定させるのはキャッチコピーとサブコピーです。言葉が決まっていれば視覚素材は「その言葉を証明できるか」で選べますが、逆順にすると、絵に合わせて言葉を後付けする作業になり、伝えたい内容がぼやけます。
関連記事：ランディングページとは？4つのタイプと基本構成、成果が伸びないときの見直し順
画像を探す前に決める3つのこと
ここが本記事のいちばんの要点です。素材探しに時間がかかっている案件のほとんどは、探し方が悪いのではなく、探す前に決めるべき3つが空欄のまま進んでいます。
誰のどんな状態に向けるか
「30代女性」のような属性ではなく、そのページを開いた瞬間の状態で書きます。たとえば「他社で見積もりを取ったが、金額の内訳が分からず判断できずにいる人」のように書いてみてください。属性より状態のほうが言葉を決めやすいのは、状態にはたいてい不満や不安がくっついていて、そこに答える形でコピーが書けるからです。
何を約束するか
読み終えた人が得られる結果を、一文で書き切ります。ここで「安心の品質」「豊富な実績」といった言い方に逃げると、後の工程が全部あいまいになります。品質が何を指すのか、実績が何件でどの業種なのか。約束は検証できる粒でなければ、訪問者は信じようがありません。
見た人に何をしてほしいか
資料請求、無料相談の予約、見積もりフォームの送信のうち、取ってほしい行動を1つに絞り、ボタンの文言をその場で決めます。行動が2つ以上あるページでは、メインビジュアルに置くのは検討段階の浅い人でも押せるほうです。重い行動と軽い行動を並べると、押しやすいほうへ流れ、重い行動は空洞化していくでしょう。
3つが埋まると、素材を見る目が変わります。読者の状態と約束が決まれば、画像選びは候補を絞る作業に変わります。逆に言えば、何十枚見ても決まらないときは、感性の問題ではなく、判断の基準がまだ手元にないだけだと考えられます。
誰に向けた一文かを決めきれないまま、素材だけが増えていませんか
「誰のどの状態に、どの言葉で答えるか」を先に決める手順は、LPに限った話ではありません。弊社は検索から来る人に向けた記事づくりでも、書き始める前にこの順序で言葉を確定させています。
関連記事：LP（ランディングページ）とは？意味・作り方から、集客との役割分担までわかりやすく解説
メインビジュアルの作り方5ステップ
決めた3つを実際の画面に落とし込む手順を整理します。制作会社に依頼する場合も、社内で作る場合も、進み方は変わりません。
広告の管理画面や問い合わせ履歴から、実際に使われている言葉を拾います。想像で作ったペルソナより、訪問者本人が書いた表現のほうが、そのままコピーの素材になります。
読み終えた人が得る結果を、条件付きで書きます。「全員に」ではなく「初めての方は」「◯◯県内なら」と範囲を添えると、後で嘘にならない一文になります。
ボタンに入れる動詞を確定させます。「詳しくはこちら」ではなく「見積もりの目安を見る」のように、押した先で何が起きるかが分かる言い方にします。
ここで初めて画像を探します。約束した内容の証拠になるかどうかだけを基準にして、雰囲気で選ばないようにします。
デザインデータの上ではなく、実際のスマートフォンとパソコンで開き、上から順に声に出して読みます。読んだときに息が続かない一文は、画面上でも読まれません。
手順の順番を変えたくなるのは、たいてい4番目の素材選びを先にやりたくなるときです。ただ、絵から入ると言葉が絵の説明文になってしまい、訪問者の状態から出発した約束になりません。
公開直前になってから「やっぱりコピーを変えたい」となる案件の多くは、1番目と2番目を飛ばして作り始めています。素材の発注や撮影が先に走っていると、言葉を直したくても絵が動かせず、妥協した一文で公開することになります。
参考ギャラリーで書き写すのは絵より言葉
参考LPを集めたギャラリーサイトは、実物を大量に見られる場として役立ちます。ただ、見方を間違えると、候補が増えるだけで判断が進みません。
ほかにも、業種やテイストから探せるSANKOU!や、メインビジュアルのタグから絞り込めるWeb Design Clipなどがあり、実際の制作現場でもよく参照されています。
こうしたサイトを開いたときにおすすめしたいのは、スクリーンショットを保存する前に、その画面が言い切っている約束の一文をテキストで書き写す進め方です。書き写してみると、良く見えたLPの多くが、装飾ではなく言葉の絞り込みで成立していると分かります。真似るのは配色やあしらいではなく、1画面で言い切っている約束の一文です。
- 気に入った画面をひたすら保存して、後でまとめて見返す
- 自社と業種が同じLPだけを見て、言い回しごと寄せてしまう
- 表示されている装飾や動きを、目的を確かめずに実装候補に入れる
- 上位に出てくる有名企業のLPを、予算も認知度も違うまま基準にする
とりわけ避けたいのが、最後の1つです。すでに指名検索で来てもらえる企業のLPなら、説明を省いても成立するでしょう。まだ知られていない段階の商材が同じ省き方をすると、訪問者は何の話か分からないまま離脱します。
差し替えても数字が動かないときの3か所
公開後に手を入れる段になると、多くの現場でまず画像の差し替えが検討されます。ここで視点を反転させましょう。
経営者写真とキャッチコピーを何度か変えてみたのですが、問い合わせ数がほとんど変わりません。デザインの問題なのでしょうか。
Writers-hub編集部
デザインが原因のこともありますが、先に見ていただきたい場所が3つあります。とくに広告から流入しているLPは、ページの中ではなく、ページに来るまでの経路に原因が残っているケースが多いです。
上から順に確認すると、費用のかかる改修の前に片づく項目が見つかることもあります。
広告の文言と入口の言葉が違う
広告のテキストで「初回無料」と書いておきながら、メインビジュアルの一文が「品質にこだわった商品づくり」になっているケースです。ありがちなずれですが、訪問者からすると、押した広告と着いたページが別物に見えます。絵を差し替える前に、広告の文言と入口の言葉が同じかを見てください。同じ担当者が両方を書いていない案件ほど、ここが放置されています。
画像が主役でコピーが従になっている
大きく美しい写真の上に、細い文字でコピーが乗っている画面です。デザインとしては整っていても、スマートフォンで見ると文字が写真に沈み、読まれないまま終わってしまうでしょう。文字の大きさと背景の明暗差を確保できているか、写真を暗くする処理で読めるようにしているかを確かめます。
見ている人の検討段階が合っていない
比較検討の途中にいる人に、いきなり「今すぐ申し込む」を出していないか。あるいは、すでに購入を決めた人に、長い説明を読ませていないか。段階がずれていると、コピーの巧拙にかかわらず数字は動きません。流入元ごとに検討段階は違うため、広告用と検索用でメインビジュアルを分ける判断も現実的な選択肢になります。
3か所を確認しても変化がない場合は、そもそもLPへ来ている人の量と質を疑う段階に入ります。広告費を止めた月に訪問がほぼ消えるなら、ページの改善より先に、費用を止めても人が来る経路を用意するほうが先決だと考えています。
広告を止めた月に、LPへの訪問がゼロに近づいていませんか
メインビジュアルを磨いても、来訪が広告費に連動している構造は変わりません。検索から継続して人が来る状態をつくると、同じLPでも月ごとの数字のぶれが小さくなります。
スマホで最初に見える範囲の考え方
作り込む前に、どこまでが「最初に見える範囲」なのかを押さえておきましょう。実機での見え方は、デザインツールの画面とかなり違います。
実務上の目安として、パソコンは横1,440から1,920ピクセルの幅で組み、確実に見える高さは600から700ピクセル程度と見積もります。スマートフォンは横375から430ピクセル、高さは600ピクセル前後で、いずれもブラウザのアドレスバーや画面下部の操作領域に隠れる分を差し引いた数字です。
※ 数値は端末とブラウザの組み合わせで変わるため、公開前に実機で開いて確認することをおすすめします。
高さの制約が効いてくるのは、要素を詰め込みたくなったときです。約束の一文、対象者の条件、ボタンの3つが最初の画面に収まらないなら、削るのは信頼材料や装飾のほうで、約束の一文ではありません。スマートフォンでは横幅も限られるため、コピーを折り返す位置まで指定しておくと、意図しない切れ方を防げます。
自社で作るか外注するかの分かれ目
制作の進め方は大きく3つに分かれます。予算だけで決めると後から詰まりやすいため、判断の材料を並べておきます。
| 社内のデザイナーが作る | 制作会社に依頼する | テンプレートで作る | |
|---|---|---|---|
| 言葉の設計 | 担当者の経験による | ◎ 第三者の視点が入る | × 自力で決める |
| 最初の公開までの早さ | △ 他業務と並行 | ○ 日程を確保できる | ◎ 数日で出せる |
| 公開後の修正 | ◎ すぐ直せる | △ 依頼と待ち時間 | ○ 自分で差し替え |
| 費用の出方 | 人件費に埋もれる | 見積もりで見える | 月額が中心 |
| 向いている場面 | 継続的に改善する | 立ち上げと大きな改修 | 検証用の簡易ページ |
社内に作れる人がいる場合でも、最初の1本は外部の目を入れる進め方をおすすめしています。自社の商品に詳しいほど、訪問者が知らない前提を省いてしまうためです。逆に、公開後の細かな差し替えまで毎回依頼する必要はありません。言葉の設計と初期の型づくりを外に出し、運用は社内に残す分担が、費用と速度の両面で扱いやすいと感じています。
よくある質問
制作の現場でよくいただく質問をまとめました。
商材によります。使う動きや手順を見せたほうが早い商材、たとえば調理器具や施工の様子などは動画が向くでしょう。一方、読み込みが遅くなると最初の数秒で離脱される可能性があるため、ファイルサイズを抑えられない場合は静止画のほうが確実です。
一息で読み切れる長さに収めます。20文字前後が扱いやすく、長くなるときは主となる一文と補足の一文に分けましょう。文字数そのものより、スマートフォンで3行以上に折り返さないかを基準にすると判断しやすくなります。
変化は出ますが、単独での差し替えには限界があるでしょう。広告の文言、ボタンの行き先、フォームの項目まで含めて経路として整えたほうが、変化を確かめやすくなります。1か所ずつ変えて、変えた項目と期間を記録しておくことをおすすめします。
まとめ｜絵を選ぶ前に約束の一文を決める
メインビジュアルは絵を選ぶ作業ではなく、約束を1画面で確定させる作業です。誰のどんな状態に向けるか、何を約束するか、次に何をしてほしいか。この3つが埋まってから素材を探せば、候補は自然に絞られていきます。
公開後に数字が動かないときも、まず疑うのは絵ではありません。広告の文言と入口の言葉がそろっているか、コピーが写真に沈んでいないか、来ている人の検討段階が合っているか。3か所を順に確認してから、デザインの改修へ進む流れをおすすめします。
私たち合同会社Writers-hubは、検索から来る人に向けた記事の企画と制作、検索とAI検索に対応した集客の設計を担っています。扱う対象がLPでも記事でも、「誰のどの状態に、どの言葉で答えるか」を先に決める順序そのものは変わりません。広告費に連動しない訪問をつくりたい段階でしたら、お手伝いできることがあるはずです。
メインビジュアルの一文を、誰と決めるかが定まっていないなら
言葉の設計から相談したい、あるいは検索からの流入を増やす計画を立てたいという段階でしたら、まずは今の状況をお聞かせください。現状のページと流入の内訳を拝見したうえで、着手する順番をご提案します。
