LPデザインは読む順番から決める、成果につながる考え方と確認項目

LPデザインは見た目より先に読む順番を決める

LPのデザインを頼まれたとき、制作の現場で最初に作るのは色見本ではありません。読む人がページの上から下へ進むあいだに、どんな順番で疑問が浮かび、どこで答えを見せるかを並べた「読む順番」の表です。見た目はその順番を読みやすくするための道具で、順番が決まっていないまま色や写真を選ぶと、きれいでも申し込みにつながらないページになりがちです。

この順番は、商品やサービスによって入れ替わります。値段で選ばれやすいものなら料金を早めに見せ、初めての人が不安を感じやすいものなら作り手の顔や進め方を前に出します。どの段を何個置くかといったページ全体の組み立て方は、LPの作り方と構成の基本でまとめています。

LPのデザインで「好み」から入らない理由

打ち合わせで「おしゃれにしたい」「この会社のページのような雰囲気で」という要望はよく出ます。雰囲気の参考は役に立ちますが、それだけで決めると、読む人ではなく作る側の好みに合わせたページになります。参考のページを見るときは、雰囲気よりも、何を最初に見せ、どこにボタンを置いているかに目を向けると、自分のLPに生かせる部分が見つかります。

ランディングページのデザインが普通のホームページと違うところ

ランディングページと普通のホームページは、同じWebページでも役割が違います。ホームページは、いろいろな目的の人がメニューから好きなページを選んで読みます。LPは、広告やSNSのリンクから来た人が、1ページを上から下へ読んで、1つの行動を決めます。デザインの決め方も、この違いに合わせます。

広告の文言とデザインの入口をそろえる

LPに来る人は、直前に見た広告やSNSの投稿の言葉を覚えています。広告で「初回の体験」をうたったのに、LPの最初の画面が会社の紹介から始まると、来た人は自分が探していたものと違うと感じます。広告の見出しと、LPの最初の画面の見出しや写真の雰囲気をそろえておくと、来た人がそのまま読み進めやすくなります。

LPデザインに入る前に決める3つのこと

読む順番を作るには、その前に、誰に向けたページか、何を伝えるか、読んだ人に何をしてほしいかの3つが決まっている必要があります。ここがあいまいなまま作り始めると、途中で見出しを何度も書き直すことになり、デザインもそのたびに崩れます。

誰に向けたページか

「30代から50代の女性」のような広い言い方ではなく、どんな場面で困っている人かを1人思い浮かべます。たとえば整体院なら「デスクワークで夕方になると肩がつらく、仕事帰りに寄れる院を探している人」のように書きます。ここまで決まると、写真に写す場面や、最初の画面の言葉が選びやすくなります。

何を伝えるか

伝えたいことは、たいてい10個以上出てきます。その中から、来た人がいちばん知りたいことを1つ選び、最初の画面で見せます。残りは、読む順番の中で必要になった場所に置きます。全部を同じ大きさで並べると、どれも目に入らなくなります。

読んだ人に何をしてほしいか

ゴールは1つに絞ります。予約、資料請求、問い合わせ、LINEの友だち追加などを全部並べると、読んだ人はどれを選べばよいか迷います。ほかの入口を残したいときは、主のボタンを大きく、ほかは小さな文字のリンクにするなど、差をつけて置きます。

LPデザインのファーストビューに置く4つの要素

ファーストビューは、ページを開いて最初に見える画面のことです。来た人はここで、自分に関係のあるページかどうかを判断します。LPデザインの中で、作る側がいちばん時間をかけるところです。

見出しは読む人の言葉で書く

見出しには、会社が言いたいことではなく、読む人が頭の中で使っている言葉を選びます。「独自の施術メソッド」より「仕事帰りの肩のつらさに」のほうが、その悩みを持つ人の目に留まります。見出しの文章の考え方はホームページの文章の書き方でも説明しています。

写真は「使っている場面」を選ぶ

商品だけ、建物の外観だけの写真より、人が使っている場面や、サービスを受けている場面の写真のほうが、読む人は自分のこととして見やすくなります。素材サイトの写真ばかりだと、どの会社のページか分からなくなるので、店内や作業の様子など、自分で撮った写真を混ぜます。撮り方の基本はホームページの写真の撮り方と選び方にまとめています。

ランディングページのデザインで読み進めてもらう工夫

ファーストビューを過ぎると、読む人は指でページを送りながら、見出しと写真を拾い読みします。1文字ずつ読んでもらえる前提で作らず、見出しだけを追っても話の筋が分かるようにしておくのが基本です。

1つのまとまりに1つの話

ページを、見出しと短い文章と写真を1組にしたまとまりで区切ります。1つのまとまりには1つの話だけを入れ、まとまりの間には余白を取ります。話が変わるところで背景の色を少し変えると、読む人は区切りに気づきやすくなります。

色と文字の大きさに決まりを作る

使う色は、基本の色、アクセントの色、文字の色のように役割で決め、ボタンにだけアクセントの色を使うと、押せる場所が見分けやすくなります。文字の大きさも、見出し、本文、注釈の段階を決めておき、ページの途中で増やさないようにします。

文字と背景の色の差も確かめます。Webのアクセシビリティの国際的な基準であるWCAG 2.1では、通常の文字は背景とのコントラスト比を4.5:1以上、大きな文字は3:1以上にすることが求められています(出典: W3C「Understanding Success Criterion 1.4.3: Contrast (Minimum)」)。写真の上に白い文字を重ねるときは、写真の明るい部分で文字が読めなくなっていないかを見てください。

根拠になる中身を見せる

読み進めた人が次に知りたいのは、本当にそうなのかという根拠です。実際の作業の写真、作り手や店主の顔と言葉、申し込んでから届くまでの流れなど、事実で示せるものを並べます。お客様の声を載せるときは、実際にいただいた声だけを、許可を得て載せます。

LPデザインの申し込みボタンとフォームで迷わせない

最後まで読んでもらえても、ボタンやフォームで迷うと、そこで離れてしまいます。作る側から見ると、デザインの中でいちばん地味ですが、手を抜くと結果に響くところです。

• ボタンの文字は「送信」ではなく「無料体験を予約する」のように、押すと何が起きるかを書く
• ボタンは、ファーストビュー、ページの中ほど、最後など、読む人が決めそうな場所に置く
• ボタンの近くに、料金がかかるか、何分で終わるかなど、押す前の不安に答える一言を添える
• スマホでは、ボタンを親指で押しやすい大きさにし、ほかのリンクと近づけすぎない

フォームは項目を減らす

フォームの項目は、その時点で本当に要るものだけにします。資料請求で住所が要らないなら聞かず、電話で連絡しないなら電話番号は任意にします。必須の項目には印を付け、入力の誤りはその場で分かるようにします。フォームの設置のしかたは問い合わせフォームの作り方で説明しています。

スマホで見るLPデザインの確かめ方

広告やSNSから来る人の多くはスマホで見ます。パソコンの大きな画面で作ったデザインをそのまま縮めると、文字が小さすぎたり、写真の大事なところが切れたりします。また、Googleはインデックス登録と順位づけに、主にスマホ向けのページの内容を使うと説明しています(出典: Google 検索セントラル「モバイルファースト インデックスに関するおすすめの方法」)。

1. 自分のスマホで、広告やSNSのリンクから実際にLPを開く
2. ファーストビューで、見出しとボタンが指で送らずに見えるかを見る
3. 本文の文字が、拡大しなくても読める大きさかを見る
4. 写真の大事なところ(顔や商品)が切れていないかを見る
5. ボタンを押してフォームを最後まで入力し、送ったあとの画面まで進む
6. 家族のスマホなど、画面の大きさが違う端末でも同じことを試す

表示の速さも確かめる

大きな写真や動画をたくさん入れると、ページが開くまでに時間がかかります。Googleが示しているウェブに関する指標(Core Web Vitals)では、ページのいちばん大きな要素が表示されるまで(LCP)は2.5秒以下、操作への反応(INP)は200ミリ秒以下、表示中のレイアウトのずれ(CLS)は0.1以下が「良好」の目安とされています(出典: web.dev「Web Vitals」)。Googleが無料で公開しているPageSpeed Insightsで、自分のLPのURLを入れると確かめられます。

スマホでの見やすさの直し方全般はホームページのスマホ対応の考え方でもまとめています。

LPデザインでよくある失敗と公開前のチェック

作る側として相談を受けていると、うまくいっていないLPには似たところがあります。デザインそのものより、決める順番や確かめ方の抜けから起きることがほとんどです。

表示のルールの詳しい内容は、消費者庁「表示規制の概要」と消費者庁「ステルスマーケティング規制」で確かめてください。業種によっては、医療や健康食品のように別の広告のルールがあることもあります。

公開したあとは、どこまで読まれ、どこで離れているかを数字で見て、少しずつ直していきます。見るべき数字と確かめ方はLPの効果測定のやり方で説明しています。

LPデザインを自分で進めるか頼むかの目安

ここまでの手順は、ページ作成サービスを使えば自分でも進められます。読む順番を紙に書き出し、ファーストビューの見出しを決め、スマホで確かめる、という流れは、作る人が誰でも変わりません。

頼むと決めたら、依頼から公開までの進み方をLP制作の流れで、費用が何で決まるかをLP制作の費用相場で先に見ておくと、見積もりを比べやすくなります。読む順番の表や、伝えたいことのメモを持って相談すると、打ち合わせが早く進みます。

uparia の月額プランなら、1ページのライトは制作費0円・月額2,980円(最低契約期間12か月)で、スマホ対応とお問い合わせフォーム、独自ドメイン、サーバー、SSL、保守が含まれます(ネット販売と特定商取引法の表記は対象外です)。最初から自分のものにしたい方には、買い切りのスタートプラン(3万円〜、1ページ構成〜)もあります。広告やSNS向けのページの相談はLP制作の依頼から、料金の詳しい決まりは資料請求でもご確認いただけます。