LPワイヤーフレームの作り方｜構成の型と手順を図解

｜広告運用ノウハウ公開中！

より詳しく知りたい方は資料をダウンロード！

LPを作るとき、いきなりデザインから入っていませんか。見た目は整ったのに申し込みが増えないとき、見直したいのはデザインの前の骨組み、ワイヤーフレームです。

この記事では、LPのワイヤーフレームを「基本構成の見本」「3つの型」「作る手順」「スマホでの配置」「公開前のチェック」の順に、図で整理します。公開後に直しやすい区切り方まで押さえると、作って終わりにならないLPになります。

1. LPのワイヤーフレームとは？デザインの前に「読む順番」を決める設計図

ワイヤーフレーム（以下WF）は、LPの画面に「どの情報を、どの順番で、どこに置くか」を決める骨組みです。色や装飾を決めるデザインより前の工程で、広告をクリックした人の期待と不安を、CTA（申し込みボタン）にたどり着くまでに納得へ変える流れを作ります。

成果につながるWFには、次の3つが意図して組み込まれています。

• 情報の順番：読者が知りたい順に情報が並んでいる
• 視線の誘導：ベネフィットや実績などの大事な要素が、自然に目に入る位置にある
• 判断材料の配置：口コミ・実績・限定性などの判断材料が、迷う場面の近くにある

反対に、よくある失敗は3つです。ペルソナが「30代女性・美容に関心あり」のように浅いまま描き始めること、ファーストビューで創業年や技術名など企業側の話から始めること、PCの横長画面で作ってスマホで読みにくくなることです。

2. LPの基本構成｜7つのブロックを上から並べる

多くのLPは、上の7つのブロックの組み合わせでできています。WFを描く前にこの並びを下敷きにすると、入れ忘れが減ります。商材によって、根拠を厚くする、オファーを前に出すといった調整をします。

7つのブロックは、ファーストビュー（①）、ボディ（②〜④）、クロージング（⑤〜⑦）の3つに分けて考えることもできます。

大事なのは、ブロックを「意味のかたまり」で区切ることです。区切りがはっきりしていれば、公開後にどのブロックで離脱したかを読み取れ、弱いブロックだけを差し替えられます（第6章）。

ファーストビューの決め方はLPのファーストビューとは？推奨サイズと設計の手順、オファーの文例はLPオファーの作り方｜CVRが上がる文例25選と心理学7つで詳しく解説しています。

3. ワイヤーフレームの型は3つ｜PASONA・BEAF・QUEST

ブロックの並べ方には、コピーライティングでよく使われる型が3つあります。我流で並べるより、商材と読者の状態に合う型を下敷きにしたほうが、成果を再現しやすくなります。

3-1. PASONA：悩みが深い商材に使う

神田昌典氏が提唱した型で、2016年に「新・PASONAの法則」として改訂されています（出典：版元ドットコム『稼ぐ言葉の法則』）。ダイエット・脱毛・金融・リフォームなど、読者がはっきりした悩みを抱えている商材で使います。要は、問題提起（P）のすぐあとに共感（A）を挟むことです。共感を飛ばして解決策（S）を急ぐと、売り込みに見えやすくなります。

3-2. BEAF：比べて選ばれる商材に使う

コマースデザイン株式会社が提唱した、ネットショップの商品ページ向けの型です（出典：コマースデザイン「BEAFの法則」）。アパレル・ガジェット・コスメなど、欲しいものがある程度決まっていて、比較して選ばれる商材で使います。ベネフィット（B）のすぐあとに、評価や販売実績などの証拠（E）を置きます。ランキングや「No.1」を載せるときは、調査の主体・時期・対象を示せるものだけにします。

3-3. QUEST：説明が必要な高単価商材に使う

Michel Fortin氏が提唱した型です（出典：Michel Fortin「The QUEST Formula」）。記事LPや、仕組みの説明が要るSaaS・投資系の商材で使います。読者を絞り込み（Q）、共感と理解を示し（U）、解決策を示して（E）、欲求を高め（S）、行動へ導きます（T）。

4. ワイヤーフレームを作る5つの手順

4-1. 素材を棚卸しする

競合のLPを3社以上集めて、何を（ベネフィット）・どう（オファー）訴求しているかを並べます。そのうえで自社の訴求軸（価格・機能・感情のどれで押すか）を決め、商品画像・ロゴ・実績・口コミなどの素材をそろえます。

4-2. 手書きでゾーニングする

ツールを開く前に、紙にファーストビュー・本文・オファーの配置を描きます。細部より全体のバランスを先に決めるためです。スマホの1画面に収まる情報量を意識し、余白も含めて配置します。

4-3. LP制作ツールのエディターで組む

紙の図をもとに、LP制作ツールのエディターで部品を並べて組みます。紙の図→デザイン→コーディングと工程を分けないので、確認や修正を「動くページ」で行えます。Squad beyondでは、Version編集画面の［Widget管理］から、カテゴリーや検索で部品（Widget）を選んで追加し、組み立てます（出典：Widgetの使い方｜Squad beyond FAQ）。業種別のサンプルLP（Widgetレシピ）を参考にすることもできます。

4-4. スマホ実機で確認する

文字の大きさ・ボタンの押しやすさ・画像の見え方を、実機でスクロールして確かめます。パソコンのプレビューだけでは、改行の位置や指の届きやすさは分かりません。

Squad beyondでは、作成中の確認用URLを、Squad beyondのアカウントを持っていない人にも見てもらえます。QRコードを読み取れば、スマホでも確認できます（出典：プレビューについて｜Squad beyond FAQ）。

4-5. 公開して検証する

公開がゴールではありません。第6章の区切り方で作っておけば、データを見て弱いブロックから直せます。

5. スマホ前提の配置ルール

PCで作ってからスマホに合わせると、横長の発想で情報を詰め込みがちです。最初から縦長の画面と片手操作を基準にします。

• ボタンは押しやすい大きさに：Appleのガイドラインはボタンのヒット領域を少なくとも44×44ポイント、Webのアクセシビリティ基準WCAG 2.2は最低24×24 CSSピクセル（AA）としている。周りに余白を置いて誤タップを防ぐ
• CTAは指の届く位置に：片手で操作するときは画面の下側が楽に届く。一方で、見る・押す位置としては画面の中央が好まれるという研究もあるので、大事なCTAは本文の流れの中にも置く
• 追従CTAは出す時機を決める：ファーストビューからいきなり出さず、悩みのパートを読み終えたあたりで表示する。実装の方法は追従ボタンとは？事例・実装・CVR改善のコツで解説しています
• ナビゲーションは置かない：他のページへのリンクは離脱の入口になる。1ページ1ゴールにする

出典：Apple「Human Interface Guidelines：Buttons」／WCAG 2.2 日本語訳（WAIC）／Josh Clark「How We Hold Our Gadgets」／Steven Hoober「Design for Fingers, Touch, and People, Part 1」

表示の速さもWFの段階で決まります。ファーストビュー以外の画像は遅延読み込みにする、画像を軽い形式にする、といった指示をWFに書いておくと、制作の段階で抜けにくくなります。

6. 公開後に直しやすいワイヤーフレームにする｜Squad beyondでの進め方

WFは作って終わりの資料ではありません。公開後にヒートマップとABテストで直し続けることを前提に、意味のかたまりごとに区切っておきます。

Squad beyondのヒートマップは、離脱・クリック・CVの3種類です。色は滞在時間の長さではなく、その位置に1秒以上とどまった人の多さを表します（出典：ヒートマップの色について｜Squad beyond FAQ）。青い部分は読まれていないとは限らず、そこまで届いていないだけのこともあるので、到達率や離脱率と合わせて読みます。ファーストビューの出来は、1度もスクロールせずに離脱した人の割合（FVER）で確かめられます（出典：レポートの指標②｜Squad beyond FAQ）。

Squad beyondでは、差し替え案を別のVersionとして作り、同じ配信URLのまま配信割合を決めて出し分けられます。レポートの結果に合わせて、割合を増減できます（出典：Versionの配信割合について｜Squad beyond FAQ）。

最初から正解のWFを一発で作るのは難しいので、たとえば「PASONAに忠実な案」と「結論とオファーを先に出す案」の2つを用意して比べる、という設計も有効です。

7. 公開前のチェックリスト

配信前に、図の3つの観点で1項目ずつ確かめます。見落としやすいのは、広告の訴求とファーストビューのずれです。広告から期待したものと違うページが開くと、読まれる前に離脱されます。

8. LPのワイヤーフレームについてよくある質問

まとめ

LPのワイヤーフレームは、デザインの前に「何を、どの順番で、どこに置くか」を決める設計図です。7つのブロックを下敷きに、商材に合う型（PASONA・BEAF・QUEST）で並べ、スマホ前提で配置を決めます。

公開後に直せるよう意味のかたまりで区切っておけば、ヒートマップとABテストで改善を積み上げられます。まずは自社のLPを7つのブロックに分けて、足りないブロックがないかを確かめるところから始めてください。

　

Squad beyondサービス紹介資料はこちらからダウンロード