LPワイヤーフレーム完全ガイド｜初心者でも迷わない作り方とテンプレ活用術

LP制作を任されたけど、「何を載せて、どの順番で、どこに配置する？」で手が止まっていませんか。

この記事では、LPワイヤーフレームの基本から作り方5ステップ、Figmaテンプレや無料ツールの選び方まで、迷わず進める設計手順をまとめます。

LPのワイヤーフレームとは

LP（Landing Page／ランディングページ）のワイヤーフレームは、ページに載せる要素と配置を概略レベルで整理した設計図です。

本記事では、CV（コンバージョン）を「問い合わせ・資料請求・購入など、LPで獲得したい最終成果」として扱います。

完成形のデザインを作る前に「何を・どこに・どんな優先度で置くか」を決めることで、関係者の認識をそろえ、手戻りを減らせます。

定義と役割

ワイヤーフレームとは、ページに載せる要素（見出し、本文、画像、ボタンなど）を四角い枠やテキストで示した概略図のことです。装飾や色は入れず、あくまでも情報の骨格を示すことが目的になります。

LP制作においては、掲載要素・順序・優先順位を先に固めることが重要です。ワイヤーフレームがあると「何を一番伝えたいのか」「どの順番で読者の疑問を解消するか」がチーム内で共有しやすくなります。

配置や強弱を先に決めておけば、デザイン工程で「やっぱりこの要素は不要だった」といった大きな手戻りを防げます。

デザインカンプや構成案との違い

LP制作で混同されやすいのが「構成案」「ワイヤーフレーム」「デザインカンプ」の3つです。作業の流れとしては、構成案→ワイヤーフレーム→デザインカンプの順に詳細度が上がっていきます。

構成案は「どんな情報をどんな順番で伝えるか」をテキスト中心でまとめたものです。

ワイヤーフレームは構成案をもとに配置やサイズ感を可視化した設計図で、まだ装飾は入りません。デザインカンプは色・フォント・画像などを含めた完成イメージで、実装の直前段階にあたります。

それぞれの目的・粒度・主な利用者を下表で整理します。

項目	構成案	ワイヤーフレーム	デザインカンプ
目的	情報と流れを決める	配置と優先順位を可視化	完成イメージを確定
粒度	テキスト中心	枠・見出し・概略	色・フォント・画像含む
主な利用者	企画・ディレクター	デザイナー・クライアント	デザイナー・実装者

実際の構成案やワイヤーフレームを見てみると以下のようになります。

構成案だけでは配置感が伝わらず、デザインカンプでいきなり作り始めると情報設計の修正コストが高くなります。ワイヤーフレームを挟むことで、配置レベルの合意をとってからビジュアルに進む流れが作れます。

成果につながるワイヤーフレームの目的

ワイヤーフレームを作る目的は、単なる「設計図作り」ではありません。

関係者の認識を合わせて手戻りを減らすこと、そして情報設計を最適化してCVにつなげることが本来の役割です。

関係者の認識をそろえて手戻りを減らす

LP制作では、発注者・ディレクター・デザイナー・実装者など複数の関係者が関わります。ワイヤーフレームがないまま進めると、各自が頭の中で描く完成像がずれたまま作業が進み、後から大きな修正が発生しやすくなります。

よくあるズレの例としては「FV（ファーストビュー）に何を入れるかで意見が割れる」「情報の優先順位が共有されていない」「必須要素が後から追加される」といったケースがあります。

ワイヤーフレームの段階で配置と優先順位を可視化しておけば、認識のすり合わせが早い段階で完了します。これが「合意の土台」としてのワイヤーフレームの役割です。

情報設計を最適化してCVにつなげる

LPは読者に「行動」を促すためのページです。そのためには、読者の心理状態に合わせて情報を並べる必要があります。

一般的に読者は「不安や疑問がある」→「内容を理解する」→「他と比較する」→「行動を決める」という流れで進みます。この流れに沿って訴求順を設計することで、読み進めるうちに疑問が解消され、自然とCTA（Call To Action／行動喚起）に向かう構成になります。

ワイヤーフレームの段階で訴求順を整理しておけば、デザイン工程では配置に集中できます。情報設計とビジュアル設計を分けて進めることが、CVにつながるLPを作る近道です。

作成前に決めること

ワイヤーフレームを作り始める前に、土台となる情報を整理しておく必要があります。

ここが曖昧なまま作業に入ると、配置の判断基準がなくなり、何度も作り直すことになります。

目的とKPI、ペルソナを明確にする

まずLPのゴールを1つに絞ります。 「問い合わせ獲得」「資料請求」「購入」など、何をもって成果（CV）とするかを決めないと、訴求の優先順位がつけられません。

次にペルソナを明確にします。ペルソナは属性（年齢・職種など）だけでなく「どんな悩みを持っているか」「今どの検討段階にいるか」「何に不安を感じているか」を具体的に書き出します。

これがあると、どの情報を優先すべきかの判断がしやすくなります。

以下は記入例です。

項目	記入例
目的（CV）	無料相談の申込獲得
KPI	月間申込数（計測方法：フォーム完了）
ペルソナの悩み	LP改善の進め方が分からない

掲載情報を洗い出して競合から型を掴む

次に、LPに載せる情報を洗い出します。自社で言える事実（実績、特徴、料金、導入企業など）を棚卸しし、必要な要素をリスト化します。

洗い出しの際は、競合LPを3〜5本確認しておくと抜け漏れを防げます。競合が共通して載せている要素は、読者が「あって当然」と思っている可能性が高いためです。

リスト化したら、ペルソナの悩みや検討段階に照らして優先順位をつけます。すべてを同じ強さで載せると、かえって伝わりにくくなります。優先順位をつけることで、ワイヤーフレーム上での配置や強弱が決めやすくなるのでおすすめです。

LPの基本構成とストーリー

LPはFV（ファーストビュー）、ボディ、クロージングの3つで構成されます。 それぞれの役割を理解しておくと、情報をどこに配置すべきかが判断しやすくなります。 構成の詳しい考え方については、売れるLP構成の作り方も参考にしてください。

売れるLP構成の作り方｜10大要素とテンプレを最新事例つきで解説

「情報の並べ順が分からず、LP制作が進まない」 「伝えたいことを詰め込んだら、申込みが減った」 こうした失敗の原因は、「構成（情報の出し順）」にあります。 …

ファーストビューからクロージングまでの考え方

FVは、読者が最初に目にするエリアです。

ここで「自分に関係がある」「読む価値がある」と感じてもらえないと、すぐに離脱されてしまいます。FVでは、サービスの価値を一言で伝えることを意識します。

ボディは、FVで興味を持った読者に対して根拠と不安解消を提供するエリアです。

特徴、実績、導入事例、よくある質問などを配置し、読者の「本当に大丈夫か」という疑問を解消していきます。 情報の順番は、読者の心理状態に合わせて設計します。

クロージングは、行動を促す最後のエリアです。

ここでは「今すぐ行動する理由」や「行動しない場合のリスク」を伝え、迷いを消すことが目的になります。CTAボタンの文言や周辺のコピーも、行動を後押しする内容にします。

この3つの役割を意識してワイヤーフレームを作ると、情報の配置に一貫性が生まれます。

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

ここからは、実際にワイヤーフレームを作る手順を5つのステップで解説します。各ステップで何を決め、どんな成果物を出すかを意識すると、作業が進めやすくなります。

ステップ1｜構成要素と訴求軸を整理する

最初に、LPに載せる要素を洗い出します。前述の「作成前に決めること」で整理した情報をもとに、見出し、本文、画像、CTAなど必要な要素をリスト化します。

次に、訴求軸を整理します。訴求軸とは「読者に何を伝えて、どう感じてもらいたいか」を言語化したものです。

ベネフィット（読者が得られる価値）と、それを支える根拠（実績、特徴、事例など）をセットで整理しておくと、配置の判断がしやすくなります。

要素と訴求軸がそろったら、優先順位をつけます。すべてを同じ強さで配置すると、かえって伝わりにくくなるためです。

ステップ2｜ツールを選んで作業環境を整える

ワイヤーフレームを作るツールは複数あります。選定の際は「共同編集ができるか」「コメント機能があるか」「テンプレートが使えるか」「出力形式は何か」「自分やチームが慣れているか」といった軸で比較します。

以下は、代表的なツールの比較軸を整理した表です。

比較軸	確認ポイント
共同編集	複数人で同時に編集できるか
コメント	フィードバックを直接書き込めるか
テンプレート	ゼロから作らなくて済むか
出力形式	PDF、画像、URLなど共有しやすいか
学習コスト	チームがすぐ使えるか

ステップ3｜ラフを作ってレイアウトの当たりをつける

ツールが決まったら、ラフを作ります。この段階では、四角い枠と見出しだけで十分です。配置、順序、強弱を確認することが目的なので、細かい文章やデザインは入れません。

ラフを作る際は、ステップ1で整理した訴求軸と優先順位をもとに、どのセクションをどこに置くかを決めます。この段階で大きな配置変更があっても、修正コストは低く抑えられます。

手書きでもツール上でも構いませんが、関係者と共有しやすい形で残しておくとレビューがスムーズです。

ステップ4｜清書して配置とサイズを具体化する

ラフで配置が固まったら、清書に進みます。清書では、各セクションのサイズ感や余白を具体化し、強弱を視覚的に表現します。

このとき、スマホでの見え方を基準にするのが基本です。多くのLPはスマホからのアクセスが多いため、1カラムを前提に設計しておくと、後から調整しやすくなります。

サイズはあくまで目安として扱います。ピクセル単位で厳密に決めるより、優先順位が伝わることを重視してください。 細かいサイズ調整はデザイン工程で行います。

ステップ5｜レビューして修正し確定する

清書が終わったら、関係者とレビューを行います。レビューの観点は「目的に合っているか」「必要な要素が抜けていないか」「順序は読者の心理に沿っているか」「CTAが一貫しているか」などです。

レビューの際は、判断者を事前に決めておくことが重要です。全員の意見を反映しようとすると収拾がつかなくなるため、最終判断を下す人を明確にしておきます。

レビュー観点	確認内容
目的との一致	LPのゴール（CV）に沿った構成になっているか
要素の抜け漏れ	必須情報が入っているか
情報の順序	読者の心理に沿っているか
CTAの一貫性	ボタン文言やリンク先が統一されているか
優先順位の表現	強弱がデザイナーに伝わるか
ペルソナとの整合	ターゲットの悩みに応えているか
モバイル対応	スマホでの見え方を想定しているか
判断者の合意	最終判断者がOKを出しているか

伝わるワイヤーフレームにするコツ

ワイヤーフレームは「作ること」がゴールではなく、「次工程に正しく伝わること」がゴールです。

作り込みのレベルや注釈の付け方を意識すると、デザイナーや実装者との認識ズレを減らせます。スマホ向けLPの設計については、スマホ向けLP制作ガイドも参考にしてください。

【完全版】スマホ向けLP制作ガイド｜CVを伸ばす作り方・ツール・サイズ完全版

スマホ中心の行動が当たり前となった今、LPもモバイル前提で設計しなければ成果は出ません。 本記事は2025年の最新基準に沿って、ファーストビューの正解、文字…

作り込みレベルと注釈の付け方

ワイヤーフレームの作り込みレベルは、案件やチームの状況によって調整します。 大きく分けると「配置だけ示す」「仮コピーを入れる」「素材指定まで入れる」の3段階があります。

配置だけ示すレベルは、社内でイメージが共有できている場合に向きます。仮コピーを入れるレベルは、文言のニュアンスまで伝えたい場合に使います。

素材指定まで入れるレベルは、外部パートナーに渡す場合や、細かい認識合わせが必要な場合に有効です。

注釈は「このセクションの意図は何か」「どんな要件があるか」「誰が担当するか」を書いておくと、次工程で迷いにくくなります。注釈がないと、デザイナーが意図を推測して作ることになり、認識ズレが起きやすくなります。

モバイルファーストとサイズ設計のポイント

LPのアクセスはスマホからが多いケースがほとんどです。そのため、ワイヤーフレームもスマホを基準に作ることをおすすめします。

スマホを基準にすると、自然と1カラム構成になり、情報の優先順位がつけやすくなります。PC版は後から横に広げる形で調整するほうが、設計の手戻りが少なくなります。

サイズについては、横幅375px前後を目安にすることが多いですが、実際の数値は閲覧環境によって変わります。

ピクセル単位で厳密に決めるより、「スマホで見たときに1画面に収まる情報量」を意識するほうが実用的です。詰め込みすぎると読みにくくなるため、余白を十分に取ることも重要です。

おすすめツールと選び方

ワイヤーフレームを作るツールは多数あります。 ここでは代表的なツールの特徴と、どんな場面で選ぶとよいかを整理します。

FigmaとAdobe XDで作る

Figmaはブラウザベースのデザインツールで、共同編集機能が強みです。

複数人でリアルタイムに編集でき、コメント機能もあるため、レビューのやり取りもツール上で完結しやすくなります。無料プランでもワイヤーフレーム作成には十分対応できます。

本記事向けにサンプルで作成したワイヤーフレームもFigma MakeのAIワイヤーフレームジェネレーターを使用して作成しています。

サンプルワイヤーフレーム（開くと表示されます）

Adobe XDも同様の機能を持ちますが、AdobeはXDの新規開発を終了しており、今後の機能追加は期待しにくい状況です。すでにXDを使い慣れているチームであれば継続利用も選択肢になりますが、新規で始めるならFigmaを検討するほうが無難です。

PowerPointとGoogleスライドで作る

PowerPointやGoogleスライドは、多くの人が使い慣れているため、学習コストがほぼゼロで始められます。社内で共有する際も、特別なツールを導入せずに済む点がメリットです。

Googleスライドはブラウザ上で共同編集ができるため、複数人での作業にも対応しやすいです。一方、デザインツールほど細かい配置調整はできないため、ラフや初期段階のワイヤーフレームに向いています。

清書や詳細な設計が必要な場合は、FigmaやXDに移行するケースもあります。

Excelとスプレッドシートで作る

ExcelやGoogleスプレッドシートは、要素の一覧整理や進行管理に強みがあります。掲載情報のリスト化、優先順位の整理、各セクションの担当者管理などに使うと便利です。

一方、ビジュアルとしてのワイヤーフレームを作るには向きません。配置や強弱を視覚的に表現するのは難しいため、ラフの前段階で情報を整理する用途に限定して使うのが実用的です。

AIと専用ツールで効率化する

最近はAIを活用してワイヤーフレームのたたき台を作る方法もあります。構成案のドラフト作成や、抜け漏れチェックの補助としてAIを使うと、作業のスピードアップが期待できます。

ただし、AIが出力する内容は一般論に寄りやすいため、自社の強みやペルソナに合った調整は必要です。AIをたたき台として使い、一次情報（自社の実績、ターゲットの具体的な悩みなど）を加えて仕上げる流れが実用的です。

無料テンプレートとFigmaテンプレート

ワイヤーフレームをゼロから作るのは時間がかかります。テンプレートを活用すると、作業の初速を上げられます。

テンプレの探し方と選び方

テンプレートの探し方は主に3つあります。 Figma Communityで検索する方法、デザイン素材サイトで探す方法、ツール公式のテンプレ集を使う方法です。Figma Communityでは無料で使えるLPワイヤーフレームテンプレートが多数公開されています。

選ぶ際のポイントも3つあります。 「自分の案件に近い構成か」「編集しやすいか」「余計な装飾が入りすぎていないか」を確認します。見た目が良くても、編集しにくいテンプレートは作業効率を下げます。

以下に、テンプレート選定時のチェック項目を整理します。

チェック項目	確認内容
用途の一致	LP用か、Webサイト全体用かを確認
構成の近さ	自分の案件に近いセクション構成か
編集のしやすさ	要素の追加・削除・移動が容易か
装飾の程度	シンプルで骨格が分かりやすいか
ライセンス	商用利用・改変が可能か
モバイル対応	スマホ版のテンプレートが含まれているか
更新日	古すぎるテンプレートでないか
レビュー・評価	他のユーザーの評価を参考にできるか

BtoBとBtoCのワイヤーフレームで考えることの違い

BtoB向けLPとBtoC向けLPでは、載せる情報や順序に違いがあります。BtoBでは「導入実績」「費用対効果」「導入の流れ」など、比較検討を後押しする情報が重視されます。

BtoCでは「ベネフィットの訴求」「口コミ・レビュー」「限定オファー」など、感情に訴える要素が強くなる傾向があります。

以下に、BtoBとBtoCでよく使われるセクションの違いを整理します。

セクション	BtoB	BtoC
根拠の示し方	導入実績・事例・数値	口コミ・レビュー・メディア掲載
FAQの位置	導入検討の不安解消として中盤〜後半	購入前の疑問解消としてCTA前
CTAの訴求	資料請求・無料相談・デモ依頼	購入・申込・お試し
料金の扱い	問い合わせ後に提示が多い	LP内に明示することが多い

この違いを理解しておくと、テンプレートを選ぶ際や、自社でカスタマイズする際の判断がしやすくなります。

共有と受け渡しチェックリスト

ワイヤーフレームが完成したら、次工程（デザイン・実装）に渡す準備をします。ここで情報が不足していると、デザイナーや実装者が判断に迷い、手戻りが発生しやすくなります。

LP公開後の検証については、LPのABテスト完全ガイドも参考にしてください。

ランディングページ（LP）のABテスト完全ガイド｜成果を出す手順とおすすめツール【2026年版】

LPの成果が伸び悩んでいませんか？Googleオプティマイズ終了後、ABテストの手法に迷っている方も多いでしょう。 この記事では、データに基づく客観的なLP…

デザインと実装で迷わない情報をそろえる

受け渡しの際に最低限そろえておきたいのは、LPの目的とKPI、各セクションの意図、素材の差し替え条件、CTAの遷移先、計測イベントの想定などです。

これらが明記されていると、デザイナーは「なぜこの配置なのか」を理解したうえで作業できます。

素材についても、仮で入れている画像やテキストがあれば「本番では差し替え予定」と明記しておきます。本番素材の入稿タイミングや、誰が準備するかも併せて伝えると、進行がスムーズです。

計測については、GA4（Google Analytics 4）でどのボタンクリックや行動をキーイベントとして計測するか、事前に想定しておくと実装時の抜け漏れを防げます。

以下に、受け渡し時のチェックリストを整理します。

チェック項目	確認内容
LPの目的（CV定義）	何をゴールとするかが明記されているか
KPI	成果指標と計測方法が決まっているか
ペルソナ	ターゲットの悩み・検討段階が共有されているか
各セクションの意図	なぜその配置・順序なのかが分かるか
CTAの遷移先	ボタンを押した後のページや動作が明確か
CTA文言	ボタンのテキストが確定しているか
素材の状況	仮素材か本番素材か、差し替え条件はあるか
素材の入稿担当・期日	誰がいつまでに準備するか決まっているか
計測イベント（GA4）	どのボタンや行動をキーイベントとして計測するか
レビュー済み合意	関係者の合意が取れているか

このチェックリストを受け渡し時に確認することで、「聞いていなかった」「想定と違った」といった手戻りを減らせます。

まとめ

本記事では、LPワイヤーフレームの定義から作成手順、ツール選び、テンプレート活用、受け渡しまでを解説しました。ワイヤーフレームは「デザインの前に情報設計を固める」ための設計図であり、関係者の認識をそろえて手戻りを減らす役割を担います。

本記事のポイントを整理すると、以下のとおりです。

ワイヤーフレームの目的は「作ること」ではなく「次工程に正しく伝わること」です。 本記事の内容を参考に、デザイン工程での手戻りを減らし、CVにつながるLP制作を進めてみてください。