LPのワイヤーフレームの作り方｜基本レイアウトの図解とテンプレート

LPを作ろうとして、いきなりデザインツールを開いていませんか。そこから始めると、たいてい途中で要素が足りなくなって作り直しになります。

間に必要なのがワイヤーフレームです。何を・どの順で・どこに置くかを、色や写真を決める前に確定させる工程で、ここを飛ばすと後工程がすべて揺れます。

この記事では基本レイアウトを図で示したうえで、作り方を5ステップに分けて解説します。そのまま使えるテンプレートの構成と、作図ツールの選び方までまとめました。

LPのワイヤーフレームとは？構成案・デザインカンプとの違い

ワイヤーフレームとは、LPの設計図です。どの位置にどんな要素を置くかを、線と枠だけで表したものを指します。

「LP ワイヤーフレーム」を実務に落とし込むうえで要点になるLP設計の基本からデザイン、効果測定、改善施策までの品質基準を、StockSunでは『ランディングページ制作ガイドライン』として無料で配布しています。

》【無料DL】「LP ワイヤーフレーム」の設計でCVRを上げる方法｜『ランディングページ制作ガイドライン』をダウンロードする

色やフォント、写真は入れません。この段階で見た目を作り込むと、レイアウトの議論が「なんとなく好き嫌い」にすり替わってしまうためです。あえて素っ気なく作るのが正しい作り方になります。

混同されやすい3つの言葉を整理しておきます。

← 横にスクロールできます →

順番は構成案 → ワイヤーフレーム → デザインカンプです。構成案が固まっていないままワイヤーフレームを描くと、途中で要素が増えて枠が入りきらなくなります。

構成そのものの考え方は専門記事にまとめています。まだ何を載せるか決まっていない段階なら、先にそちらを読んでください。

▼合わせて読みたい
LP構成の型と要素の並び順｜実物のLPを分解して解説

ワイヤーフレームは何のために作るのか

目的は2つあります。ひとつは関係者の認識を揃えることです。

LP制作にはディレクター・ライター・デザイナー・エンジニアが関わります。建築でいえば基礎・内装・電気を別々の人が担当するようなもので、設計図がなければ全員が別のものを作ってしまいます。

もうひとつは手戻りを前倒しにすることです。線と枠だけの状態なら、順番を入れ替えるのも要素を足すのも数分で済みます。同じ変更をデザイン完成後にやると、作り直しになります。

ワイヤーフレームを省いて浮いた時間は、たいてい後工程で倍になって返ってきます。急ぐ案件ほど、ここは飛ばさないでください。

どこまで作り込むべきか

ワイヤーフレームには粒度の段階があります。用途に応じて使い分けてください。

← 横にスクロールできます →

自社内で完結するなら清書まで、外注するなら詳細版まで作ると認識のずれが減ります。逆に、社内合意の段階で詳細版を作るのは時間のムダです。手戻りが起きるのはこの段階だからです。

粒度を上げるほど直しにくくなる、という性質も覚えておいてください。丁寧に描いたものほど、関係者は修正を言い出しにくくなります。意見が欲しい段階では、あえて粗く描くのが正解です。

【図解】LPワイヤーフレームの基本レイアウト

まず全体像です。LPは縦1本の流れなので、レイアウトも上から下への3ブロックで考えます。

← 横にスクロールできます →

ファーストビューのレイアウト

ファーストビューは画面1枚分に収める前提で描きます。スマートフォンで見たときの縦幅を先に決め、その枠内に要素を配置してください。

置く要素は4つです。

• ヘッドコピー
  誰向けか、何が得られるかを1〜2行で。最も面積を取る要素になる。
• メインビジュアル
  商品そのもの、利用シーン、利用後の状態のいずれか。枠だけ描いて「何の写真を入れるか」をメモしておく。
• 信頼の要素
  導入社数、受賞歴、実績年数など。小さな帯で構いない。
• CTAボタン
  スクロール前に押せる位置に1つ。ここを省くと、すでに決めている読者を取りこぼする。

ワイヤーフレームの段階では、ヘッドコピーの文字数まで概算で決めておくのがコツです。枠の大きさだけ決めて中身を後回しにすると、実際の文章が入らないことがあります。

配置の並び順は、商材の認知度で変わります。知られていない商材なら、対象を絞る一言を最上部に。すでに比較検討されている商材なら、条件やキャンペーンを先に出す枠割りにします。

もうひとつ、ファーストビューでよく忘れられるのがスクロールを促す要素です。画面の下端に矢印やコンテンツの一部を見せておくと、続きがあることが伝わります。枠を画面ぴったりで切ると、そこで終わりだと誤解されることがあります。

ファーストビュー単体の設計は専門記事で詳しく扱っています。

▼合わせて読みたい
LPのファーストビューとは？3秒で離脱を防ぐ構成要素と改善手順【事例あり】

ボディのレイアウト

ボディは全体の7割を占めます。長くなるぶん、1画面に1メッセージを守ることが読みやすさを決めます。

並べる順番は、問題提起 → 原因の説明 → 解決策の提示 → 根拠 → 導入事例 → お客様の声、が基本形です。読者の頭の中で「そうそう」「なるほど」「本当に？」「なら大丈夫そうだ」と進む順番になっています。

ワイヤーフレームでは、ここに途中CTAの位置も入れておきます。ボディの区切りごとに1つ置くのが目安で、読者が納得した瞬間に押せる場所を用意する意図です。

枠の切り方にもコツがあります。1つのメッセージにつき1枠を割り当て、間に十分な余白を取ってください。区切りが見えることが、読みやすさの正体です。詰めるほど読まれなくなります。

図解を入れる位置も、この段階で決めておきます。手順・比較・仕組みの3つは図にすると理解が速くなるため、該当する枠には「ここは図」とメモしておきます。あとから図を足そうとすると、前後の余白が足りなくなります。

お客様の声の枠は、人数分をあらかじめ確保しておいてください。3人分なのか5人分なのかで、必要な縦幅がまったく違います。素材が集まっていない段階でも、何人分載せるかは決められます。

クロージングのレイアウト

クロージングでは、残った不安を消して行動してもらいます。FAQ・申込の流れ・サポート体制・フォームを並べます。

枠を描くときの注意は、関連サービスの案内やコーポレートサイトへのリンクを置かないことです。親切のつもりの導線が、そのまま離脱口になります。

フォームは項目数まで決めておいてください。ワイヤーフレームで「氏名・メール・電話」と書いておけば、実装段階で項目が増えるのを防げます。

項目が増えるのは、たいてい社内の各部署から「この情報も取りたい」という要望が出るからです。ワイヤーフレームの段階で確定させておけば、後から増える圧力に対して「設計時に決めた」と言えます。

FAQの枠も、質問数を決めておきます。載せるのは営業の現場で実際に聞かれる質問だけで構いません。当たり障りのない問答を並べても、読者の不安は消えません。

最後の枠には、もう一度CTAを置きます。ここまで読んだ人は最も関心が高い状態なので、ページの一番下でボタンを探させないでください。

LPワイヤーフレームの作り方5ステップ

ここからは手を動かす順番です。手描きから始めて構いません。

STEP1盛り込む要素を洗い出す

まず材料を全部出します。商品情報、他社との違い、お客様の声、実績数値、よくある質問、料金。この時点では多すぎて構いません。

出す材料は4つの観点で拾うと漏れません。

• ユーザーの状態｜どんな悩みを持ち、何に疑問を感じているか
• 自社の強み｜他社にない要素、アピールしたい点
• LPの目的｜購入なのか資料請求なのか。CV地点を具体的に
• 必要なコンテンツ｜商品紹介・利用者の声・Q&Aなど、載せると決まっているもの

ここで削る作業を始めると手が止まります。取捨選択は次のSTEPでやるので、まずは出し切ってください。

材料が足りないと感じたら、社内にあるものを探してください。営業資料、過去の提案書、問い合わせフォームの自由記述、商談の録音。LPを作る作業の半分は、すでにある情報を集めて並べ直すことです。

競合3社のLPも、この段階で見ておきます。ギャラリーサイトで眺めるより、実際に広告を検索して着地したほうが実態に近いものが見られます。今まさに出稿されているLPが、その市場の現役の型だからです。

STEP2要素の順番を決める

洗い出した要素を、読者が知りたい順に並べ替えます。自社が言いたい順ではありません。ここを取り違えると、会社紹介から始まるLPができあがります。

判断の基準は、読者がどこから来たかです。悩みを自覚して検索してきた人と、SNS広告で偶然見た人では、最初に見せるべき情報が違います。

ここで入りきらない要素が出てきたら、思い切って落とします。1本のLPに全部載せようとすると、どのメッセージも薄まります。

順番に迷ったら、既存顧客に「何がきっかけで申し込んだか」を3人だけ聞いてみてください。悩みを解決したくて探していたのか、条件を比べて決めたのか、会社を信用したのか。その答えがそのまま並び順の正解になります。

落とした要素は消さずに残しておきます。A/Bテストで試す候補になりますし、2本目のLPを作るときの材料にもなります。

STEP3レイアウトを決める

並べ替えた要素を、ファーストビュー・ボディ・クロージングの3ブロックに割り振ります。そのうえで、各要素を画面のどこに置くかを決めます。

ここで重要なのがどの画面幅で描くかを先に決めることです。LPは広告経由が多く、スマートフォンからの流入が過半を占める商材が少なくありません。

PCの横幅を前提に3列で並べた要素は、スマートフォンでは縦に積まれます。この時点で意図した比較が崩れることがあるため、スマホ幅で描いてからPC版に広げる順番が安全です。

各要素の高さの配分も、この段階で決めます。ファーストビューは画面1枚分、ボディは全体の7割、クロージングは2割。この比率から大きく外れていたら、どこかに情報を詰め込みすぎています。

あわせて、追従ボタンを置くかどうかもここで決めておきます。縦に長いLPでは、画面下部にボタンを固定しておくと、読み終えた瞬間に押せる状態を作れます。後から足すと、他の要素と重なることがあります。

STEP4ラフを描く

ラフは大まかなイメージです。紙とペンで構いませんし、最初からツールを使っても構いません。

この段階では見た目の完成度にこだわらないでください。ラフの役割は、関係者と「この流れでいいか」を確認することだけです。きれいに描くほど、修正を言い出しにくくなるという副作用もあります。

関係者に見せるときは、必ず一緒に目的を伝えてください。「このLPは資料請求を取るためのもの」という前提が共有されていないと、感想レベルの意見が集まります。

レビューの観点も先に配っておくと効率的です。「ターゲットに合っているか」「3秒で何のサービスか分かるか」「CTAが見つけやすいか」の3点に絞れば、好みの話になりません。

作る側にとって最もつらいのは、修正指示が「もう少しいい感じに」で来ることです。観点を決めておくと指示が具体的になり、往復の回数が減ります。

STEP5清書する

ラフが固まったら清書します。ここでもデザインは作り込みません。要素の種類・順番・大きさが分かれば十分です。

次の担当者が迷わないよう、補足のメモを添えておくと親切です。使いたい色の方向性、参考にしたいLP、写真の希望などを枠の外に書いておきます。

LPは基本的に縦長なので、縦幅に制限のないツールを選んでください。スライド形式のツールで作ると、ページをまたいで分断されて全体の流れが見えなくなります。

ワイヤーフレームが固まったら、次はライティングとデザインの工程です。全体の進め方は流れの記事にまとめています。

▼合わせて読みたい
LP制作の流れ8ステップ｜各工程で発注側が準備するものとつまずきポイント
LPの作り方10ステップ｜自分で作るための手順とツールの選び方

そのまま使えるLPワイヤーフレームのテンプレート

ゼロから枠を並べるより、型に当てはめるほうが速く固まります。よく使う3パターンを、要素の並びとして示します。

← 横にスクロールできます →

違いが出るのは2番目です。通販型は条件から、サービス型はCTAから、BtoB型は実績から入ります。読者が何を知りたがっているかが商材で違うためです。

この表をそのまま枠に起こせば、ワイヤーフレームの初稿になります。あとは自社の材料を当てはめて、不要な枠を削ってください。

ただし型どおりに作ると競合と同じ構成になります。骨格は借りたうえで、1〜2箇所だけ意図的に外すのが差別化のコツです。

テンプレートを自社用に調整するときの手順

そのまま使うのではなく、3つの観点で手を入れます。

• 不要な枠を削る
  自社に材料がない要素は落とする。お客様の声がまだ集まっていないなら、無理に枠を残さず担当者の経歴などに置き換える。
• 厚くする枠を決める
  商材の性質で変わる。通販なら写真と根拠、サービスなら不安の解消、BtoBなら実績と課題整理を厚くする。
• 順番を1箇所だけ入れ替える
  流入元に合わせて調整する。比較サイト経由なら条件を前に、SNS広告経由なら悩みを前に持ってく。

調整が終わったら、枠の数を数えてください。スマートフォンで10スクロール前後が、BtoC商材のひとつの目安です。BtoBや高単価商材ではその2倍になることもあります。

LPワイヤーフレームの作図に使えるツール

ツールは機能の多さで選ばないでください。実務で効くのは3点だけです。

• 縦幅に制限がないか｜LPは縦長なので、1枚に収まらないツールは向きません
• 関係者がコメントを書き込めるか｜修正指示をツール上で完結できると往復が減ります
• リンクひとつで共有できるか｜ファイルを送り合う運用は、必ず版が食い違います

← 横にスクロールできます →

料金体系は各社で改定されるため、金額は公式サイトでご確認ください（Figma／Cacoo／CVX）。

なおAdobe XDは2023年4月1日をもって単体プランの新規販売が終了しています。Adobe公式の案内によると、現在は既存契約の更新か、Creative Cloudコンプリートプランでのみ利用できる状態です。ワイヤーフレーム作成のツールを新たに選ぶ段階であれば、対象から外して検討してください。

すでにコンプリートプランを契約している組織であれば、引き続き使えます。ただし新しく参加するメンバーが単体では導入できないため、チームで共有する前提の案件では別のツールに寄せるほうが運用は楽になります。

ツールで作るか、紙で描くか

初稿は紙で構いません。むしろ紙のほうが速く、その場で描き直せます。関係者を集めて方向性を決める場面では、紙のほうが議論が進みます。

ツールが必要になるのは、次の担当者に渡す段階からです。デザイナーやエンジニアが受け取って作業を始められる形にするために清書する、という位置づけで考えてください。

ツール選びで迷ったら、社内で既に使っているものを優先します。新しいツールを導入すると、関係者にアカウントを作ってもらう手間が発生し、それだけで数日止まることがあります。

LPワイヤーフレームを次の担当者に渡すときに添えるもの

ワイヤーフレームだけを渡しても、受け取った側は判断に迷います。実務では次の4点を添えると、往復の回数が減ります。

← 横にスクロールできます →

3番目の参考LPで最も大事なのは、「なぜ良いと思ったか」の1行です。これがないとデザイナーには見た目しか伝わりません。「配色が上品」なのか「価格の見せ方が分かりやすい」なのかで、作るものは変わります。

渡し方も工夫できます。ファイルを送るのではなく、コメントを書き込めるリンクで共有してください。修正指示がツール上に残ると、言った言わないが起きません。

外注する場合は、この4点をそのまま発注書に転記できます。依頼先ごとの対応範囲と費用感は専門記事にまとめています。

LPワイヤーフレームでよくある7つの失敗

実際の制作現場で繰り返し見てきたものを挙げます。どれも描き始める前に防げます。

失敗①構成案なしで描き始める

何を載せるか決まっていないまま枠を並べると、途中で要素が増えて配置がやり直しになります。ワイヤーフレームは「配置」を決める工程であって、「内容」を決める工程ではありません。

順番を守ってください。構成案が先、ワイヤーフレームが後です。

失敗②デザインを作り込んでしまう

色や写真を入れると、レビューの論点が「配置」から「見た目の好み」に移ります。そうなると本来決めるべき順番の議論ができません。

グレースケールで描くのが確実です。あえて素っ気なくしておくことで、中身の議論に集中できます。

失敗③PC幅だけで描く

作業はPCでするため、PC幅で描いて終わりにしがちです。しかし広告経由の流入はスマートフォンが中心の商材が多く、そちらが崩れていては意味がありません。

横に3つ並べた要素が縦に積まれたとき、意図が保たれているかを必ず確認してください。

失敗④文字量を想定せずに枠を切る

枠の大きさだけ決めて中身を後回しにすると、実際の原稿が入らない事態が起きます。特にヘッドコピーとお客様の声で起きやすい失敗です。

各枠に「何文字くらい入るか」をメモしておくだけで防げます。ライターへの発注時にもそのまま使えます。

失敗⑤決裁者に見せずに次工程へ進む

最終的にOKを出す人が、デザイン完成後に初めて登場して差し戻しになる。これが最も損失の大きい失敗です。

ワイヤーフレームの段階で決裁者の合意を取ってください。線と枠だけの状態なら、その場で直せます。

失敗⑥1枚に情報を詰め込みすぎる

枠を細かく区切って要素を詰めると、実装した時点で読みづらいページになります。ワイヤーフレームの段階では余白が多すぎるように見えても、文章と画像が入ると必ず埋まります。

1画面に1メッセージを守ってください。迷ったら、その枠で伝えたいことを1行で言えるか確認します。言えないなら分割の合図です。

失敗⑦計測の設計を忘れる

ワイヤーフレームは見た目の設計だと思われがちですが、公開後に何を測るかもここで決められます。CTAを複数置くなら、どのボタンが押されたかを区別できるようにしておく必要があります。

ボタンごとに名前を振っておくだけで構いません。実装段階で気づくと、タグの設定をやり直すことになります。

公開後の改善で何から手をつけるかは、改善専門の記事に整理しています。

▼合わせて読みたい
LP改善方法のチェックポイント10選！LPOで成功するための手順や役立つツールもご紹介！
LP制作会社おすすめ35選【2026年最新】目的別カオスマップ・費用相場・失敗しない選び方

LPのワイヤーフレームに関するよくある質問

LPのワイヤーフレームとは何ですか？

LPのどの位置にどんな要素を置くかを、線と枠だけで表した設計図です。色や写真は入れません。構成案（何を・どの順で載せるか）を画面上の配置に落とす工程で、この後にデザインカンプへ進みます。

ワイヤーフレームは何のために作るのですか？

目的は2つです。ディレクター・ライター・デザイナー・エンジニアの認識を揃えることと、手戻りを前倒しにすることです。線と枠だけの状態なら順番の入れ替えが数分で済みますが、同じ変更をデザイン完成後にやると作り直しになります。

ワイヤーフレームと構成案は何が違いますか？

構成案は「何を・どの順で載せるか」という内容の設計、ワイヤーフレームは「それを画面のどこに・どの大きさで置くか」という配置の設計です。構成案が先で、ワイヤーフレームが後になります。順序を逆にすると、要素が入りきらず配置をやり直すことになります。

ワイヤーフレームは自分で作れますか？

作れます。デザインスキルは不要で、紙とペンでも成立します。必要なのは自社の商材と顧客を言語化する力なので、営業経験のある方のほうが良いものを描けることも珍しくありません。清書だけツールを使う進め方が現実的です。

ワイヤーフレームの作成にどのくらい時間がかかりますか？

材料が揃っていれば、初稿は数時間で描けます。時間がかかるのは描く作業ではなく、その前の要素の洗い出しと順番決めです。関係者のレビューと修正を含めると、数日から1週間を見ておくと安全です。

ワイヤーフレームのテンプレートはありますか？

本記事の「そのまま使えるテンプレート」で、BtoC通販型・BtoCサービス型・BtoB型の3パターンを要素の並びとして示しています。この表を枠に起こせば初稿になります。作図ツール側にもテンプレートが用意されていることが多いので、あわせて確認してください。

ワイヤーフレームだけ外注できますか？

できます。構成案とワイヤーフレームの作成のみを受ける制作会社やフリーランスは存在します。デザインと実装は自社で行える場合、設計の質だけ担保する方法として有効です。依頼先ごとの対応範囲は依頼先比較の記事を参照してください。

▼合わせて読みたい
LP制作の依頼先はどこがいい？フリーランス・制作会社・クラウドソーシングを実額比較

ワイヤーフレームにダミーテキストは入れるべきですか？

意味のないダミー文字より、実際に入る文章の要約を1行だけ書くほうが有用です。文字量の感覚がつかめますし、ライターへの発注時にもそのまま使えます。清書の段階では、少なくともヘッドコピーだけは実文言を入れておくことをおすすめします。

スマホ版とPC版を両方作る必要がありますか？

流入の大半がスマートフォンなら、スマホ版だけ作ってPC版は実装時に調整する進め方でも成立します。逆にBtoBでPCからの閲覧が中心なら、PC版を主に作ります。両方作る場合は、横並びの要素が縦に積まれたときに意図が崩れないかを必ず確認してください。

まとめ｜LPのワイヤーフレームは「配置」だけを決める工程

ワイヤーフレームは、LPのどこに何を置くかを線と枠だけで決める設計図です。色も写真も入れません。あえて素っ気なく作ることで、レイアウトの議論が見た目の好みにすり替わるのを防げます。

作り方は5ステップ。要素を洗い出し、順番を決め、3ブロックに割り振り、ラフを描いて、清書する。時間がかかるのは描く作業ではなく、その前の洗い出しと順番決めのほうです。商材タイプ別の骨格を借りたうえで、1〜2箇所だけ意図的に外すと競合との差がつきます。

決裁者の合意はこの段階で取ってください。線と枠だけならその場で直せますが、デザイン完成後の差し戻しは作り直しになります。設計の段階から相談したい場合は、材料の整理からお手伝いできます。