公開 更新

guide · UI・操作

LPの構成の作り方|読み手の疑問から並べる

LPに載せる文章や写真はあるのに、並べる順番が決まらない方へ。読み手の疑問から構成を作り、解説・比較・紹介の違いを見本で確かめます。料金や条件の置き方、スマホでの読み順、自分の原稿で試すワークまで紹介します。

UI・操作を学ぶ余白灯舎の場面

写真を置き、特長を書き、申込みボタンも付けた。それでもページを上から読むと、どこか話がつながらない。そんなときは、装飾を足す前に「次に知りたいこと」が続いているかを見てみます。

ここでいうLPは、一つの商品・サービスや催しを紹介し、申込みなどの行動につなぐページです。検索から最初に訪れたページを広く指す場合もありますが、今回は紹介ページの構成を扱います。

ミナLPの構成見本をまねたんですが、写真のあとに何を書けばいいか迷ってしまって。
レンその写真を見た人は、何を確かめたいだろう。見本の次の箱より、そこを見よう。

先に、読み手が決めたいことを一つ書く

「申し込んでほしい」は作る側の目的です。読み手の側へ移すと、「初めてでも参加できるか確かめたい」「予定と費用が合うか比べたい」など、申込みの手前にある疑問が見えてきます。

たとえば、初心者向けの写真講座を紹介する練習用のページを考えます。読者がまだ講座の存在を知らないなら、何をする講座かを先に伝えます。すでに内容を知り、日程だけを見に来る人なら、日程への入口がすぐ見つかる方が役立ちます。

ページの最初に置く答えは、「写真を学べます」だけで終わらせません。「スマホで小物を撮る初心者向けに、窓辺の光と背景を使った撮影を練習する講座」のように、対象とする作業が浮かぶ文へ整えます。これは説明用の架空例です。実際の講座では、教える内容や持ち物を主催者の案内に合わせてください。

まず紙に「このページを読む人は、何を確かめてから申し込むか」と書き、その下へ疑問を置きます。全部が同じ強さに見える場合は、情報の優先順位を決める方法で、今必要な情報と補足を分けられます。

解説・比較・紹介で構成の順番を変える

同じ講座を扱っても、読者の用事が変われば構成も変わります。三つの型を、正解のテンプレートとしてではなく、並べ方を考える出発点として見比べます。

ページの用事 読み手が最初に確かめたいこと 本文を並べる例
撮り方を知る解説 自分のスマホで何をすればよいか 撮れる条件→準備→撮影手順→うまくいかない場合
講座を比べる比較 自分に合う候補はどれか 学びたいこと→対象や形式の違い→同じ条件の費用→確認先
一つの講座を紹介するLP 内容と参加条件が自分に合うか 対象と内容→練習の具体→持ち物・日程・料金→申込みの流れ

解説を読みに来た人へ、手順を渡す前に講座への申込みを繰り返すと、最初の用事が残ります。反対に、参加を決めた人へ長い撮影の基礎講座を読ませる必要もありません。

AIDAなどの消費者行動モデルは、「内容への関心を持てる材料があるか」「次の行動が分かるか」といった不足の確認に使えます。全員が同じ段階を同じ順序で進む前提にせず、読者がすでに知っていることから説明を始めましょう。

一つのLPで異なる用事を受けるなら、冒頭に内容の短い説明と、日程・料金へ移る目次を置く方法があります。初めての人は上から読み、知っている人は必要な条件を確かめられます。

見出しと画面を一緒に作る手順

先に文章を全部書いてから箱へ詰め込むと、似た説明が別の場所へ散らばりがちです。見出しの下に、答えと、その答えを確かめる材料を一組で置いてみます。

読み手の疑問 見出しの例 近くへ置く材料
私でも参加できる? スマホで小物を撮る、初めての方向けの講座 対象者、必要な端末、扱う撮影内容
何を練習するの? 光の向きと背景を変えて撮り比べる 練習の流れ、実際に扱う作例と条件
当日は準備できる? 持ち物・会場・日程を確認する 必要な物、場所、開始・終了時刻
いくらかかる? 参加費に含まれるものを確かめる 総額、別途必要な費用、変更・取消の条件
申し込むとどうなる? 日程を選び、申込み内容を確認する 入力する項目、確定の時点、その後の連絡

これは構成の見本なので、実在しない料金や成果の数字は入れていません。「実績」欄を設けたからといって、未確認の満足度や参加者の声で埋める必要はありません。見せられる作例や講座内容から、何を判断できるかを考えます。

並べた紙面は、駅の案内板のようなものです。行き先と乗り場が離れていれば、視線を何度も往復させます。LPでも、価格だけ大きくして、何が含まれるかをずっと下へ置くと、頭の中で対応させる作業が増えます。この比喩が助けるのは情報の近さであり、申込みが増える効果までを示すものではありません。

料金は適用条件と、作例は何を変えた例かと一緒に置きます。再認と想起を扱うNN/gの解説は、必要な情報を見ながら判断できる設計を勧めています。ここではその考え方を、文章と比較材料の配置へ応用しています。

関連する情報を近づける考え方は、デザインでは近接と呼びます。そのまとまりをどの順に見てもらうかは、視線誘導の仕事です。まず情報を組にし、そのあとで大きさや余白を調整すると、見た目と説明の順番を一緒に考えられます。

迷いやすいのは、強調と説明が離れたとき

「今すぐ申込み」だけが目立つのに、当日の時間が見つからない。魅力的な写真の下に、何を体験できるかの説明がない。こうしたときは、ボタンの色より、その手前で残っている疑問を確かめます。

不安を強めるコピーから始める必要もありません。「その撮り方では売れません」より、「背景に生活用品が写り込むときは、撮る場所と画角から整えられます」の方が、困りごとと作業を結び付けて説明できます。相手の状態を決めつけず、何を試せるかを具体化します。

比較表では、行ごとに同じ条件をそろえます。一方は参加費だけ、もう一方は材料費込みの総額では比べにくくなります。分からない項目を空欄やゼロにして有利に見せず、「確認が必要」と読める形にします。強調色も、どの条件で選んだ候補かを説明してから使います。

選択肢が多いときは、数を削る前に、対象者や参加方法で整理できないかを考えてみてください。「三つなら選べる」と決めるより、今回の読者が比べる項目を減らせるかを見る方が、原稿の具体的な修正につながります。

スマホの読み順と申込み前を確認する

PCで左右に並ぶ内容も、スマホでは上下になります。左列の講座Aを全部読んだあと、右列の講座Bが続くと、Aの料金を覚えてからBと比較することになります。料金、形式、持ち物など、同じ項目を近くで見比べられる表示を検討しましょう。

実際の画面では、次の順でたどります。最初の画面で対象と内容を理解できるか。目次から料金へ移れるか。申込みの前に必要な条件を読めるか。ボタンの文言から次に起きることが分かるか。横に収まることと、読みながら判断できることを分けて確かめます。

たとえば、ボタンの次が日程選択なら「日程を選ぶ」、申込み内容の確認なら「申込み内容を確認する」と、行先に合う名前を付けます。まだ申込みが確定しない段階で「申込み完了」とは書きません。操作の見え方は押せると分かるボタンの作り方で確認できます。

冒頭が長くなったら、ファーストビューに置く内容へ戻り、最初に必要な答えを整理します。料金や対象条件を削って短くするのではなく、初めに全体をつかみ、必要な節へ進める入口を用意します。

自分の原稿で、疑問のつながりを試す

今日のワーク:見出しを読み手の疑問に戻す

作りかけの一ページを開き、見出しを紙へ書き出します。その横に「この節を読む前の疑問」と「読んだ後に分かること」を一行ずつ添えてください。

  1. 同じ疑問へ答える節があれば、一緒にできるか考える。
  2. 答えの根拠や適用条件が遠くにあれば、近くへ移す。
  3. 次の疑問に答える節がない場合は、必要な材料を一つ書く。
  4. 最後の案内を押した後に何が起きるか、言葉にする。

見直したページは、制作に関わっていない人にも「どんな人向けで、いくらかかり、次に何をするページか」を探してもらうと、制作者には見えにくい迷いを確かめられます。好みの感想だけでなく、どの情報を探したかを聞いてみましょう。

写真の次に置くものが決まらなかったら、その写真を見て生まれる疑問を一つ書いてみてください。ページを整える手がかりは、見本の箱の数より、読み手が次へ進めるつながりの中にあります。