LPデザインの実務｜縦長1ページの設計と視線誘導のコツ

「LPのデザインを任されたけど、縦に長すぎて何から決めればいいか分からない…」そんな状態ではありませんか？

LP（ランディングページ）は、申し込みや購入など1つの行動に絞った縦長1ページです。ふつうのWebサイトと同じ感覚で作ると、きれいなのに成果につながらないページになります。

このレッスンでは、ファーストビュー・セクション分割・視線誘導・スマホ対応という、LPデザインの実務で毎回判断する4つを順番に解説します。

LPデザインの前提：1ページで1つの行動に絞る

LPのゴールは1つだけです。申し込み、購入、資料請求。どれか1つに決めて、ページ全体をその行動へ向けて設計します。ふつうのWebサイトとの違いを先に整理しておきますね。

比べる点	LP	通常のWebサイト
ページ数	縦長1ページ	複数ページ
目的	1つの行動（申し込み等）	情報提供・信頼づくりなど複数
ナビゲーション	置かないことが多い	グローバルナビ（全ページ共通の案内メニュー）を置く
読む順番	上から下へ一直線	訪問者ごとにバラバラ

ナビゲーションを置かないのは、読んでいる人を途中で外に出さないためです。リンクの出口はCTAボタン（Call To Actionの略。申し込みなど行動を促すボタン）だけに絞ります。

何をどの順で載せるかという構成の型（ファーストビュー→共感→解決策→証拠→CTA）は、LPの構成とファーストビューで解説しています。このレッスンは、その構成を「どう見せるか」というデザイン側の話です。

LPデザインの判断基準は「おしゃれかどうか」より「行動までたどり着けるか」。迷ったら、この基準に戻って決めます。

ファーストビューは4つの要素で組む

ファーストビューは、ページを開いた瞬間にスクロールなしで見える範囲のことです。ここで「自分向けのページだ」と思ってもらえないと、下まで読んでもらえません。

入れる要素は基本4つです。

• キャッチコピー：誰向けか＋何が得られるか
• メインビジュアル：商品そのものか、使ったあとの状態
• CTAボタン：申し込みへの入口
• 信頼の根拠：実績の数字・受賞・メディア掲載など

CTAボタンはファーストビューの中に1つ置きます。色はページの中でそのボタンだけに使う差し色にすると、押す場所が一目で分かります。

• ファーストビューだけで「誰向けの、何のページか」を言える
• CTAボタンがスクロールなしで見える
• スマホで開いてもキャッチコピーが読める

セクション分割で縦長を最後まで読ませる

縦長のLPは、途中で飽きられます。読み続けてもらう工夫が、セクションの見せ方です。

まず、セクションの境目を見た目で分かるようにします。いちばん簡単なのは、背景色を交互に変える方法です。白→薄いグレー→白と切り替えるだけで、「ここから話が変わる」と伝わります。

セクション見出しは、本文を読まなくても内容が分かる言葉にします。「特徴」と書くより「朝5分で終わる3つの理由」と書くほうが、流し読みの人にも届きます。

1つのセクションで伝えることは1つだけ。2つ入れたくなったら、セクションごと分けます。

視線誘導は縦一直線が基本

紙のチラシはZ型の視線で設計しますが、LPは縦スクロールなので考え方が変わります。基本は中央1カラム（要素を中央の1列に並べる組み方）の縦一直線です。

要素を中央の1本線にそろえると、目線は上下に動くだけで読み進められます。左右に要素を振るとリズムは出ますが、スマホでは縦積みに変わる前提で組んでください。

CTAボタンは1回だけだと、押したくなった瞬間に押す場所がありません。ファーストビュー・中間・最後の2〜3箇所に繰り返し置きます。ボタンの文言の作り方はCTAとマイクロコピーで扱います。

スマホ前提で設計する

個人向け商材のLPは、スマホで開かれることが多いです。PCのデザインを先に作って縮めるより、スマホの画面から先に設計すると手戻りが減ります。

• 本文の文字サイズは14〜16pxを目安にする
• ボタンは指で押せる大きさ（高さ44px前後）を確保する
• 画像の中に文字を入れすぎない。縮むと読めなくなるので、文字はテキストで載せる

画面幅ごとにレイアウトが変わる仕組みは、レスポンシブデザインのレッスンで解説しています。

ミニ実践：同業種のLPを3本見比べる

手を動かす前に、見る目を作る練習です。10分でできます。

1. LPのデザイン参考サイト（「SANKOU!」「LPアーカイブ」など、無料で見られるギャラリー）を開きます
2. 同じ業種のLPを3本選びます（例：オンライン英会話で3本）
3. ファーストビューだけをスクリーンショットして並べます
4. キャッチコピー・メインビジュアル・CTAボタンの共通点を書き出します
5. 「自分が作るなら何を変えるか」を1つ決めます

同業種でそろえるのがコツです。業種が同じなら狙う相手も近いので、共通点が「その業種で求められている見せ方」として浮かび上がります◎

よくある質問

LPデザインとは何ですか？

申し込みや購入など、1つの行動に絞った縦長1ページのデザインです。ナビゲーションを置かず、上から下へ読み進める前提で、ファーストビュー・セクション・CTAボタンを設計します。

LPを無料で作れるツールはありますか？

Canva・STUDIO・ペライチなどに無料プランがあります。テンプレートから始められるので、練習にも向いています。プランの内容は変わることがあるので、公式サイトで最新の条件を確認してください。

LPデザイナーとは何ですか？

LP制作を専門にするWebデザイナーの呼び方です。デザインだけでなく、構成や広告の知識もあわせて求められることが多い職種です。このレッスンとマーケティング編の内容が、そのまま土台になります。

LPの長さはどのくらいがいいですか？

決まった正解はありません。伝えることを全部載せて、重複を削った長さが適正です。長さそのものより、各セクションが1メッセージに絞れているかを確認してください。

次に学ぶこと

整理します。LPは1ページ1行動。ファーストビューは4要素で組む。セクションは背景色で区切って1セクション1メッセージ。視線は中央1カラムの縦一直線。設計はスマホから。

次のレッスンは「Webサイトデザインの実務」。1ページのLPから、コーポレートや採用などサイトの種類ごとの設計へ進みます。

学ぶ順番の全体はデザインの基本コースにまとめています。