VONDS JOURNAL / ホームページ制作・改善

LPの構成・コピー・改善を、読者の行動から考える。

広告用LPの構成と見せ方を設計したい。
考え方と手順を、実務につなげるために。

LP制作の前にそろえる前提

LP制作の前にそろえる前提訪問のきっかけ:広告や検索の内容を確認。読者の状況:何を知りたい人か整理。提案内容:提供できる内容を決める。完了する行動:相談や申込の終点を決める01訪問のきっかけ広告や検索の内容を確認02読者の状況何を知りたい人か整理03提案内容提供できる内容を決める04完了する行動相談や申込の終点を決める
広告で伝える内容と、ページで実際に提供する内容を対応させます。

広告から人が来ても、問い合わせにつながらない。まずは、広告で伝えた内容、LPの説明、申し込みまでの操作がつながっているかを確かめます。構成・文章・根拠・動作・計測に分けると、どこを直すか具体化できます。

初めてLPを作るときも、既存ページを改善するときも使えるよう、準備から公開後の検証までを整理しました。実際のページと記録を見ながら、比較表と工程図を確認してください。

画面の構成と操作を整理する手描きのワイヤーフレーム
ページの役割と情報の順番を、作る前に整理します。(イメージ写真)写真:Compagnons / Unsplash
この記事でわかること 全8テーマ
  1. 01LPの役割と、目指す行動をそろえる
  2. 02読む人の疑問に沿って、情報を並べる
  3. 03コピーとボタンに、実際の提供内容を表す
  4. 04スマホで読めることと、操作できることを確認する
  5. 05事例と第三者資料を、提案の根拠として示す
  6. 06指標の定義と、ページの動作をそろえる
  7. 07変更の理由を決め、結果を比べる
  8. 08制作と公開後の運用を、依頼範囲に分ける

01LPの役割と、目指す行動をそろえる

LP(ランディングページ)は、広い意味では訪問者が最初に到着するページです。この記事では、広告などから訪れた人へ特定の提案を伝え、問い合わせや申込などへ案内するページとして扱います。目的と、完了とみなす行動を制作前に共有してください。

会社サイトとLPの設計で整理すること
項目具体的な内容
会社サイト会社・サービス・採用など複数の情報を探せる案内
提案用のLP訪問のきっかけに合う提案と、判断から行動までの情報
共通の確認利用者が知りたい条件、根拠、会社情報と窓口

主な行動を明確にすると、説明やボタンの優先順位を決めやすくなります。必要な会社情報や条件まで隠す必要はありません。判断に必要な内容を確認でき、戻って行動を続けられる構成にします。

業界平均のCVRを比較する場合は、集計期間、業種、訪問者の条件、コンバージョンの定義を確認します。母集団や分母が違う数値を、自社LPの合否基準としてそのまま使わないようにしてください。

02読む人の疑問に沿って、情報を並べる

ファーストビューは、ページを開いて最初に見える範囲です。誰に何を提供するかを読み取れるようにし、関心を持った人が詳しい説明へ進めるようにします。特定の配置が成果を保証するわけではありませんので、訪問のきっかけと読者の理解に合わせて調整します。

最初の画面で確かめる情報
項目具体的な内容
対象と提案誰の、どのような課題に対応するか
判断材料実際の画面、提供内容、確認できる実績など
次の行動読む、詳細を見る、相談するなどの行き先
LPを構成する7つの情報
項目具体的な内容
最初の案内提案内容と対象を伝える
課題の整理どんな状況の人に関係するか示す
解決方法提供する内容と利用の流れを説明
特徴他の選択肢との違いを具体化
事例・根拠担当範囲や確認できる証拠を示す
よくある質問条件や依頼前の不安を確認できるようにする
行動の案内フォームや申込など、次の操作へ進める

これは情報を整理するための構成例です。料金や条件を早く知りたい人には、その情報を前に出すなど、順序を調整します。同じ提案でも、サービスをすでに知っている人と初めて読む人では必要な説明が変わります。

構成案から実画面まで確認する流れ

構成案から実画面まで確認する流れ情報を書き出す:提案・根拠・条件を集める。順序を決める:読者の疑問に沿って並べる。構成案を確認:不足と重複を整理する。画面で確認:スマホで全文と操作を確かめる01情報を書き出す提案・根拠・条件を集める02順序を決める読者の疑問に沿って並べる03構成案を確認不足と重複を整理する04画面で確認スマホで全文と操作を確かめる
文章と画面を別々に完成させる前に、構成の段階で確認します。

03コピーとボタンに、実際の提供内容を表す

キャッチコピーには、読者の状況と提供する価値を具体的に書きます。機能名だけで伝わらない場合は、どの作業や困りごとに対応するかを補ってください。提供できない結果や、根拠のない削減時間を約束しないことが前提です。

機能の説明を、利用する場面につなげる
項目具体的な内容
機能何ができる仕組みかを示す
利用場面誰が、どの作業で使うかを書く
条件利用できる範囲や準備が必要な内容を示す

CTA(Call to Action)は、読者の次の行動を案内する文言やボタンです。押した先で何をするか、何が得られるかを、実際の動作と一致させます。無料・短時間などを表示する場合も、その条件が本当に成立するか確認してください。

ボタンの文言と行き先の対応例
項目具体的な内容
資料を見る資料の内容を確認できる画面へ進む
見積もりについて相談する見積もりに必要な情報を伝える窓口へ進む
申込内容を確認する入力内容と条件の確認画面へ進む

色、配置、余白も操作の見つけやすさに関係します。特定の色を万能な正解とせず、周囲の文字や背景との区別、押せることの分かりやすさ、実際の操作を確認します。

数値を掲載する前の確認
項目具体的な内容
根拠記録や集計資料を確認できるか
対象どのサービス・顧客・指標の数値か
条件集計期間、測定方法、対象数が明確か
掲載許諾顧客の実績として公開できる範囲か

04スマホで読めることと、操作できることを確認する

利用する端末は自社のアクセスデータで確認します。制作中からスマートフォンの表示を確認し、文章を読む、条件を探す、フォームを入力するという操作を通して試してください。

スマートフォンでの利用を考えるための端末写真
スマートフォンで、文章と操作の両方を確認します。(イメージ写真)写真:Jakub Żerdzicki / Unsplash
スマートフォンで点検する表示と操作
項目具体的な内容
文字本文が拡大しなくても読め、内容が欠けていないか
画像内の文字文字ごと小さく縮んで読めなくならないか
電話案内対応する番号と受付時間が正しく、操作できるか
入力欄ラベルが分かり、入力する情報に合う形式か
エラーと完了間違いを修正し、最終画面まで進めるか

W3Cのフォーム解説は、ラベル、入力を助ける説明、エラーや結果の通知などを、フォームを使いやすくする項目として説明しています。 出典:Forms Tutorial | Web Accessibility Initiative (WAI) | W3C

レスポンシブデザインは、画面サイズや利用条件に合わせて表示を調整する設計です。見た目だけでなく、各画面幅で内容と操作を確認します。 出典:Learn Responsive Design  |  web.dev

画像や動画を使う際の確認
項目具体的な内容
画像の大きさ表示サイズに合った寸法で用意する
容量画質を確認しながら形式や圧縮を調整する
読み込み順最初に必要な内容と後で読む内容を分ける
表示領域読み込み前に場所を確保し、表示のずれを抑える

表示が遅い箇所を直す進め方

表示が遅い箇所を直す進め方現状を計測:端末と計測条件を記録。原因を分ける:画像・処理・通信を確認。対象を修正:影響する作業を整理して変更。再度確認:同じ条件で表示と操作を試す01現状を計測端末と計測条件を記録02原因を分ける画像・処理・通信を確認03対象を修正影響する作業を整理して変更04再度確認同じ条件で表示と操作を試す
スコアだけで完了とせず、読めることと操作できることを確認します。

05事例と第三者資料を、提案の根拠として示す

事例では、誰に何を行った仕事か、自社がどこを担当したかを示します。感想や数値を使う場合は、元の内容と掲載許諾を確認してください。匿名表現でも、情報の組み合わせで相手が特定されないか確かめます。

事例を整理する順序

事例を整理する順序課題:依頼前の状況を整理する。作業:何をどう実施したか示す。担当範囲:自社が担った部分を明確に。結果の条件:測定と掲載できる範囲を確認01課題依頼前の状況を整理する02作業何をどう実施したか示す03担当範囲自社が担った部分を明確に04結果の条件測定と掲載できる範囲を確認
成果が未計測の場合も、課題と作業・担当範囲を具体的に説明できます。
顧客の声を掲載する確認
項目具体的な内容
元の内容本人の発言や回答の意味を変えていないか
掲載範囲名前・写真・案件情報の許諾を得ているか
成果の表現感想と計測された数値を混同していないか
第三者資料と表示条件の確認
項目具体的な内容
メディア掲載媒体名と掲載日、紙面や画像の使用条件
資格や認証正式名称、対象、有効な状態、表記ルール
受賞受賞対象、主催者、時期、紹介できる原資料

証拠は、関連する説明の近くに置きます。読む人が特徴の根拠を確かめられる位置に配置し、条件を確認してから行動へ進める構成にしてください。実績や資格の量でページを埋めることが目的ではありません。

06指標の定義と、ページの動作をそろえる

改善前に、何を成果として記録するか決めます。問い合わせボタンを押した回数と、問い合わせが完了した回数は別の行動です。どの行動が、どのタイミングで記録されるかをテスト環境で確かめてください。

LPの効果を確認する指標
項目具体的な内容
訪問どの入口から、どの端末で来たか
目的の行動問い合わせ・申込などが完了したか
割合分母と分子の定義をそろえ、同じ期間で比較する
閲覧中の操作スクロールやクリックを、情報探索の手がかりとして見る

GA4では、事業上重要なイベントをキーイベントとして扱います。一般的なCVRを使う場合も、利用者・セッション・イベントのどれを数えているかを明記し、他の資料と定義が一致しているかを確認します。

Googleの公式資料では、事業にとって重要な行動の計測と、キーイベントの設定について確認できます。 出典:[GA4] コンバージョン イベント - アナリティクス ヘルプ

GA4の直帰率は、エンゲージメントのなかったセッションの割合です。「1ページだけ見て離脱した割合」とは同一ではありません。直帰率だけで、読んだ内容や問い合わせ意思を判断しないようにしてください。

GA4のエンゲージメント率と直帰率は、エンゲージメントセッションを基準に定義されています。 出典:[GA4] エンゲージメント率と直帰率 - アナリティクス ヘルプ

ヒートマップを見るときの注意
項目具体的な内容
クリック押された場所と、その先の動作を合わせて確認
スクロール到達した位置と、情報を探す流れを照合
条件計測期間、端末、訪問の入口をそろえる

07変更の理由を決め、結果を比べる

A/Bテストは、異なる案を比較して、指標にどのような差があるかを調べる方法です。何を比較するか、どの指標を使うかを事前に決めます。一度に多くを変えると要因を切り分けにくくなるため、原因を知りたい場合は変更点を絞ってください。

課題と手順を付箋で整理するホワイトボード
変更する理由と、比較する条件を整理します。(イメージ写真)写真:Paymo / Unsplash

改善案を検証する流れ

改善案を検証する流れ仮説を決める:困っている操作と理由を整理。変更案を用意:比較する内容を明確にする。条件をそろえる:指標と期間・対象を決める。結果を確認:差と計測の不備を確認する。次へつなげる:採用・保留と理由を記録01仮説を決める困っている操作と理由を整理02変更案を用意比較する内容を明確にする03条件をそろえる指標と期間・対象を決める04結果を確認差と計測の不備を確認する05次へつなげる採用・保留と理由を記録
一定の日数や件数だけで、すべてのテストの結論が出るわけではありません。
変更案を作る際の確認
項目具体的な内容
見出し対象と提案内容が伝わるか
CTA行き先と操作内容が分かるか
フォーム不要な入力や修正しにくいエラーがないか
根拠特徴や実績を確認できるか
速度表示の遅さが操作を妨げていないか

期間や必要なデータ量は、現状の成果率、期待する差、ばらつきなどに応じて計画します。データが不足する場合は結論を急がず、操作の不具合など確認できる問題から改善してください。流入や広告内容を変えたときは、その変更も記録します。

Google広告の品質スコアは、広告やランディングページなどの品質を診断するための指標です。ページの成果率や広告オークションの直接の入力値と同一視しないようにします。 出典:検索キャンペーンの品質スコアについて - Google 広告 ヘルプ

08制作と公開後の運用を、依頼範囲に分ける

制作会社には、デザインの例とともに、今回の仕事で誰が何を担当するかを確認します。公開できる成果がない場合も、担当範囲、設計の理由、検証方法から提案内容を確認できます。

依頼前に確認する5つのこと
項目具体的な内容
実績担当した作業と、説明できる根拠
改善支援公開後の計測や更新をどこまで担うか
文章構成とコピーを誰が作り、確認するか
スマホどの条件で表示と操作を検証するか
確認の進め方構成案・画面・動作をどの段階で確認するか
見積もりで分けて確認する工程
項目具体的な内容
既存の構成を利用調整できる範囲と原稿・素材の準備
個別の制作構成・文章・デザイン・実装の担当範囲
調査や運用分析・計測・テスト・更新の範囲と継続費用

金額は、含まれる作業と条件をそろえて比較します。制作費だけでなく、公開後の対応、修正、追加作業の条件まで確認してください。必要な範囲が決まっていない場合は、決定事項と相談事項を分けて共有します。

発注前に用意する材料
項目具体的な内容
読者業務、状況、相談したい課題
比較対象参考ページと、参考にしたい具体的な点
自社の特徴提供できる内容と、説明の根拠
目的実現したい行動と、現状の記録
素材使用できる写真・ロゴ・事例・許諾資料

制作プランと支援範囲を確認しながら、依頼する工程を整理できます。

ホームページ・LP制作の案内を見る

現在のLP、訪問の入口、困っている操作、計測した数値を用意すると、改修の優先順位を相談しやすくなります。

自社のLPについて相談する

制作会社の対応範囲を比較する際は、VONDSの制作実績とサービス案内もご覧ください。

株式会社オフィスVONDS 代表取締役 小沢宗弘

AUTHOR & EDITOR

原著:小沢 宗弘

山梨県甲府市を拠点に、ホームページ制作・SEO支援・Web広告運用に取り組んでいます。

再編集:株式会社オフィスVONDS
元記事の実務的な論点を保ちながら、確認手順と公式資料を整理しました。

代表プロフィール・会社案内

参照した一次資料

実務の進め方はVONDS編集部の整理です。本文で参照した仕組み・手順は、次の公式資料で確認しています。

  1. 検索キャンペーンの品質スコアについて - Google 広告 ヘルプ確認日:2026年9月7日
  2. Forms Tutorial | Web Accessibility Initiative (WAI) | W3C確認日:2026年9月7日
  3. Learn Responsive Design  |  web.dev確認日:2026年9月7日
  4. [GA4] コンバージョン イベント - アナリティクス ヘルプ確認日:2026年9月7日
  5. [GA4] エンゲージメント率と直帰率 - アナリティクス ヘルプ確認日:2026年9月7日

LET’S MAKE YOUR WEBSITE

次は、あなたの仕事を
伝えるサイトへ。

まだ言葉になっていないご相談も、
一緒に整理するところから。

制作について
相談する

LET’S TALK

どんなサイトに
していきましょうか。

入力内容を確認した後、メールアプリで送信を確定してください。この画面から自動送信・保存は行いません。

制作実績の実画面

枠内を上下にスクロールできます。
撮影時点の画面のため、画像内のリンクは動作しません。