LPデザインのコツ｜本文の見出し・写真・比較表・CTAを改善する実例

LPデザインのコツは、本文の役割を分けること

最初に、読者が申し込む前に答えを知りたい疑問を書きます。対象は誰か、何をしてもらえるか、他の選択肢と何が違うか、条件は何か、申し込み後に何が起こるか。この疑問に対応させて、見出し・写真・表・CTAを置きます。色や余白の好みだけで判断すると、情報不足と見た目の問題を混同しやすくなります。

このページは「デザインのコツ」を知り、自社の本文を改善するための解説です。多数の参考ページを探すギャラリーではありません。ファーストビューだけを作り込む前に、その後の説明から申し込みまでに、判断材料の抜けがないか確認します。

見た目を直しても説明の順番に迷う場合は、LPの構成設計へ戻り、読者の疑問ごとに載せる情報を決めます。

見出しと余白で、一つの疑問を一つのまとまりにする

同じ話題の見出し・写真・説明は近づけ、話題が変わるところで余白を広げます。すべての段落を枠で囲んだり、毎回背景色を変えたりすると、どの情報が同じまとまりか分かりにくくなることがあります。見出しだけを読み上げて、理解から条件確認まで筋が通るか点検してください。

実際の制作画面では、写真と説明の役割を読む

ユーグレナ様 CONCの公開制作事例から、記事LPの本文を二か所見ます。記事型という一つの形式の例であり、すべてのLPに同じ見た目を勧めるものではありません。Sunday Parkの公開担当範囲には、記事LP制作と広告動画用のモデル撮影などが含まれます。

下の注釈は、画面に見える配置の観察と、自社へ応用するときの問いです。商品の効能、広告表現の適法性、改善成果を認定するものではありません。制作物内の商品説明・価格等は制作時点の内容として掲載しています。

公開記事LPの本文を、二つの役割で見る

① 商品の姿から、説明へ

観察：商品写真を大きく示し、その下に説明の見出しと本文が続きます。自社への問い：写真で分かることと、文章で補うことを分けられているか。

② 使用場面と、短い文章

観察：使用場面の写真が上下にあり、間に短い文章が置かれています。自社への問い：一枚の写真がどの操作を示すか、その説明が近くにあるか。

写真は「何を理解するためか」で選ぶ

商品写真なら形・大きさ・付属品、利用場面なら手順や姿勢、サービス画面なら利用者が確認する情報が伝わるかを見ます。本文の説明と関係しない写真を増やすより、その疑問に答える一枚と短い説明を組み合わせます。人物が写っていることだけでは、利用者の体験や効果の証拠にはなりません。

強調は見出し、比較の違い、主な行動など、役割を決めて使います。赤字・太字・背景色を一つの文へ重ね続けると、重要度を区別できません。商品条件や注意事項を小さくして主張だけを大きく見せる方法は避け、強調した文とその条件を同じまとまりで読み取れるようにします。

比較表は、項目をそろえ、狭い画面の読み方まで決める

たとえば研修の「オンライン」と「会場開催」を比べるなら、対象・時間・準備物・参加方法を同じ順で並べます。一方だけに長所を追加して、他方の空欄を不利に見せないようにします。比較できる事実がなければ「未確認」と書き、推測で埋めません。

PCで横に並べる設計も、スマートフォンで極端に小さく縮小してしまうと読めません。項目が少なければ縦積みのカードへ変え、対応関係が重要な表は表の領域だけ横へ移動できる方法を検討します。W3Cのリフローの解説では、通常の縦読みコンテンツを320 CSSピクセル相当の幅でも情報・機能を失わず読めることを扱い、意味上二次元配置が必要な表などには例外があります。本文全体を横スクロールさせない設計を優先します。

完成例：研修体験会LPの本文を組み直す

以下は実在しない研修体験会の教材用例です。想定読者は初めて部下を持つ管理職。商品条件として「オンライン60分・参加無料・事前課題なし・申込後に参加案内をメール送信」を仮に置きます。実サービスの料金や提供保証ではありません。

改善前は「経験豊富」「学びが多い」と抽象的に説明し、申し込みボタンから離れた場所に条件をまとめていました。改善案では、扱う内容、参加条件、申込後の流れを順番に配置します。色の変更で効果が出ると決めず、読者が必要な条件を説明できる画面にすることを狙います。

見た目を作る前に渡す、記入済みの依頼メモ

同じ体験会を依頼するなら、「落ち着いた感じに」だけで終えず、次のように分けます。以下も架空例の制作指示です。

訴求：何を伝えるか

事前課題なしで参加でき、準備の手間が少ないこと。「面談が必ずうまくなる」とは書かない。

レイアウト：どの順番で見せるか

「部下との面談を練習する60分」の見出し→オンラインで練習する場面→参加条件→申込CTA。CTAの近くに申込後のメール案内を置く。

トンマナ：どんな印象にするか

落ち着いた実用感。余白で情報を分け、見出しとCTAだけに強調を絞る。

参考から使う点と、変える点

このページの改善案から、条件をCTAの近くへ置く関係を使う。写真は自社の開催場面へ替え、参考ページの配色や文面をそのまま写さない。

固定条件と変更可能な部分

正式な体験会名、オンライン60分、無料、事前課題なし、申込後の案内方法は固定。背景色と写真の切り取り方は変更可。ただし文字の読みやすさを再確認する。

初稿で「華やかにしてほしい」と意見が出たら、変えるのが印象か、伝える価値か、情報の順番かを確認します。背景色の修正依頼に便乗して、参加条件やCTAの行き先まで変えないようにします。

改善の理由と、見送った変更も残す

今回は、主なCTAを増やす案と、文字をすべて画像にする案は見送ります。入口は同じ体験会への申込であり、複数の行動を増やす必要がまだないこと、条件をあとから更新・拡大しやすくしたいことが理由です。根拠のない参加者満足度や導入社数も追加しません。

公開後は、CTAクリックに加えて申込完了と対象の合う申込を確認します。閲覧数が少なければ、この変更だけでCVRが上がったとは判定せず、まず利用者の操作で情報が見つかるか確かめます。実験の設計は別途行い、完成した見た目と成果を混同しないでください。

複数の改善案を比較するなら、LPのA/Bテストの進め方で仮説と評価指標を決め、見た目の好みだけで採用しないようにします。

公開前は、文字・操作・情報の欠落を点検する

PCとスマートフォンで、拡大した文字が重ならないか、見出しと説明の順番が崩れないか、固定CTAが注記や入力欄を隠さないか確認します。表や画像は、小さく収めることより、読者が情報を読めることを優先します。

WCAG 2.2のコントラスト解説では、通常の文字と背景は原則4.5:1以上、大きな文字は3:1以上を扱います。ロゴなどの例外もあるため、色名だけで合否を決めず、使用する文字サイズと組み合わせで確かめます。操作対象の大きさの解説には24×24 CSSピクセル以上、または規定の間隔等の条件が示されています。数値だけで使いやすさが完成するわけではなく、主なCTAは押しやすい大きさと間隔を確保し、キーボード操作も試します。

最後に、広告から本文、CTA、フォーム、完了画面までを通して確認します。参考を制作会社へ渡す場合は「この色が好き」に加えて「料金条件を近くで確認できるようにしたい」と目的を添えましょう。制作の相談はSunday Parkのサービス案内をご覧ください。

参考情報・出典

• Sunday Park：CONCダイレクトマーケティング支援事例公開担当範囲と記事LPの設計目的。画像の表示から成果・適法性は推定しない。／確認：2026-10-04
• W3C：Understanding Reflow320 CSS px相当のリフローと二次元配置の例外／確認：2026-10-04
• W3C：Understanding Contrast (Minimum)通常文字4.5:1、大きな文字3:1と例外／確認：2026-10-04
• W3C：Understanding Target Size (Minimum)24×24 CSS pxと間隔等の例外条件／確認：2026-10-04