「LP（ランディングページ）のワイヤーフレームとは？」「ワイヤーフレームの作り方とは？」このような疑問をお持ちの方がいるのではないでしょうか。
LPのワイヤーフレームとは、CV（コンバージョン）獲得に特化したLPの設計書といえます。
本記事では、上記のLPのワイヤーフレームの作り方や作る上でのポイント、CVを高めるための方法を解説します。
StockSun株式会社が運営する「伴走LP」は月額5万円～運用のお手伝いを行うことができます。
今なら初期費用50％OFF、LP作成まで実質無料でご支援いたします。
オンライン相談は無料です。問い合わせ率をアップできるLPを作成しましょう！
＼CRV爆上げ！実績５万件以上！／
【無料】LPの相談をする目次
LPのワイヤーフレームとは、LPの「設計書」もしくは「完成予想図」ともいわれ、どのようなレイアウトでコンテンツを配置したいのかが一目でわかるようになっています。
さらに、ワイヤーフレームを基に、制作に携わる各担当者が意見を出し合うこともできるため、より良い成果物・CV獲得を目指すためのコミュニケーションツールとしての役割もあります。
例えば、建築現場では、基礎や骨組みを担当する人、内装をする人、電気を通す人などが別々に作業をしますが、設計図がなければ、何を作っているのかさえ理解できません。
ランディングページ制作も同様で、主に下記が関わります。
これらのスタッフが共通の認識を持つためには、ワイヤーフレームが必要不可欠です。
ワイヤーフレームなしでは、一貫性のあるページを作り上げることは困難になってしまいます。
LPを外注したい方には月額5万円というリーズナブルな価格設定で、LPO・広告運用など一気通貫して対応している弊社の「伴走LP」がおすすめです。
オンライン相談は無料です。高品質なLPで売り上げを伸ばしましょう！
＼CRV爆上げ！実績５万件以上！／
【無料】LPの相談をするLPのワイヤーフレームを作成する上で押さえるべきポイントを4つ紹介します。
順に紹介します。
LPのワイヤーフレームを作る際には、制作する目的や情報を洗い出しましょう。具体的には下記のような情報が必要です。
| ユーザーの趣味や志向 | ・ユーザーが抱きやすい疑問 ・購入した場合のメリット |
| 自社の強み | ・他社にはない自社の魅力 ・LPでのアピールポイント |
| LPの目的 | ・商品購入や資料請求など ┗具体的なCV先 |
| 必要なコンテンツ | ・商品紹介 ・利用者の声 ・Q＆A |
上記のような情報を洗い出し、整理した上でワイヤーフレームを作りましょう。
LPを作成する上での、目的や情報を洗い出し・整理し終わった後は、ユーザー・ターゲットを分析して軸を決めましょう。
成果を上げるためには、ターゲットのペルソナを設定し、そのニーズや潜在的な課題に基づいて訴求ターゲットを決め、LPを作成することが重要です。
具体的なターゲットを設定せずに作成したLPは、誰にも響かない可能性があります。
だからこそ、「このような人に購入してほしい」という具体的なペルソナを設定することが重要です。
ペルソナは、「40代の男性」や「30代の女性」といった曖昧なものではなく、まるで実在する人物のように具体的に描きましょう。
具体的なペルソナの設定としては下記の項目と例を参考にしてみてください。
| 項目 | 例 |
| 名前 | 佐藤友喜 |
| 住所 | 埼玉県浦和市 |
| 年齢 | 42歳 |
| 職業 | 総合商社 |
| 家族構成 | 妻・子ども3人 |
| 趣味 | ネットサーフィン・運動 |
| 悩み | 会社の部下たちの残業時間が多い。無駄な業務を減らしたい。 |
ワイヤーフレームを作成する前に、どのフォーマットで表示するかを考えましょう。
LPはPCやスマートフォン、タブレットなど、さまざまな端末で閲覧されるので、どの端末でも見やすいデザインにすることが大切です。
端末ごとにLPを作成するのか、それともレスポンシブデザインにするのかを事前に決めておくと、作業がスムーズに進められます。
近年では、スマートフォンからのアクセスが増えているため、PCだけでなくスマートフォンにも適した文字数や画像サイズに注意してLPを作ることが重要です。
フォーマットを事前に決めておくことは、LPを訪れる人が快適に閲覧できるかどうかに大きく関わるため、重要なポイントといえます。
最後に、ワイヤーフレームの構成を考えましょう。LPの目的に合わせて、サイトへの導線を決める必要があります。ワイヤーフレームの構成において重要な要素は、主に次の3つです。
順に紹介します。
サイトの第一印象を作るのは、ファーストビューです。70%～90%のユーザーがファーストビューを見てページを離れてしまうと言われています。
だからこそ、閲覧者の関心を引くことがとても重要です。ファーストビューの構成としては下記が挙げられます。
上記を意識してファーストビューの構成を考えてみてください。
ボディでは、問題を明確にし、それに対する解決策を提案して、ユーザーの共感を得て製品の利点を伝えます。
具体的には、商品の紹介や導入事例など、LPの中心となる内容を盛り込みます。見込み顧客の関心や課題に基づいて、自社の強みや魅力をPRすることが重要です。
ボディの構成は下記になります。
上記を押さえ、ボディの構成を作成してみましょう。
クロージングでは、ユーザーの興味を引き出し、安心感を与えることで、資料請求やお申込などの成果を上げることが大切です。
CVを上げるためには下記のような構成を意識しましょう。
上記の構成と、ファーストビュー・ボディの構成を押さえた上でLPのワイヤーフレームを作成してみてください。
今すぐLPを外注したい方には月額5万円というリーズナブルな価格設定で、LPO・広告運用など一気通貫して対応している弊社の「伴走LP」がおすすめです。
オンライン相談は無料です。貴社のコンセプトに合わせたLPを作りましょう！
＼CRV爆上げ！実績５万件以上！／
【無料】LPの相談をする本章では、LPのワイヤーフレームの作り方を5STEPで紹介します。
順に紹介しますので、ぜひ参考にしてみてください。
「①制作する目的と情報を洗い出す」と「>②ユーザー・ターゲットを分析して軸を決める」で洗い出している情報の中で、LPに盛り込む情報・要素を書き出しましょう。
「STEP1」にて書き出した情報要素を、どのような順番でLPに配置するか決めましょう。
ユーザーにとってニーズのある情報を届けられるように、流れを意識して配置を決めてください。
次に、LP全体の構成・レイアウトを決めていきます。前述していますが、LPの構成は大きく分けて3つあります。
上記3つを具体的に決めましょう。
「ラフ」とは、サイトの大まかなイメージを指します。LPの全体構成を共有するために、手描きのスケッチをする場合もあれば、最初からデジタルツール（例：Adobe）を使用する場合もあります。
ラフは最終的なサイトの図面ではなく、他のメンバーとのフィードバックや内容の確認に使用されます。そのため、ラフの段階ではデザインの見た目の完成度にはあまりこだわる必要はありません。
ラフが完成したら、清書を行いましょう。この段階ではデザインにこだわる必要はなく、LPを構成する要素がわかれば十分です。
次の作業者であるデザイナーやコーダーが理解しやすくするために、わかりやすく作成してください。特に、利用したい色やフォント、素材などがあれば、要望を記載しておくのがおすすめです。
ワイヤーフレームの書き直しに使えるツールとしては、Adobe XDやFigma、Excel、PowerPointなどがあります。
ただしツールを使用する際は、サイトの目的や使い慣れているか、他の担当者と共有しやすさなどを基準に選ぶと良いでしょう。
LPは基本的に縦長なので、ツールを使って書き直す場合は、縦幅に制限がないツールが好ましいです。一方で、表示幅に制限があるツールを使う場合は注意が必要です。
LPを外注したい方には月額5万円というリーズナブルな価格設定で、LPO・広告運用など一気通貫して対応している弊社の「伴走LP」がおすすめです。
オンライン相談は無料です。費用の相談やプランを確認しに行きましょう！
＼CRV爆上げ！実績５万件以上！／
【無料】LPの相談をするAIを活用したランディングページの作成や改善を考えているのであれば、実質無料で使える伴走LPがおすすめです。
ここからは伴走LPの概要について、詳しく見ていきましょう。
「伴走LP」は、初期費用ゼロで始められる定額制のランディングページ制作サービスです。
AIを活用したデータ分析と人の手による分析を組み合わせ、コンバージョン率（CVR）の最大化を目指します。
さらに、月1回の改善レポートやヒートマップ分析を通じて、継続的なパフォーマンス向上を支援しているのも特徴です。
伴走LPの特徴や強みは上記に示した通りです。無料テンプレート以上の成果を目指すなら、伴走LPの利用を検討してみましょう。
伴走LPは月額5万円から利用可能です。また、利用するにあたって初期費用は発生しません。
ランディングページ制作と継続的な改善を月額5万円で受けられるのは、非常に魅力的といえるでしょう。
さらに、初回相談は無料となっており、ニーズに応じた最適な提案を行っています。伴走LPを利用する際の特典は、以下の3つです。
テンプレートでは満足できなかったり時間やリソースに余裕がなかったりするなら、伴走LPは効果的な選択肢となります。
まずは無料のテンプレートを試して、その後にさらなる品質向上を目指すような使い方も問題ありません。
オンライン相談は無料です。LP運用をまるっと任せて貴社のリソースを有効活用しましょう！
＼CRV爆上げ！実績５万件以上！／
【無料】LPの相談をするCVを獲得するLPにするためのポイントを3つ紹介します。
順に紹介します。
LPからのCV数を向上させるために、成功しているLPを参考にしましょう。成功した例を参考にすることで、自社のLPも成果を上げる可能性が高まります。
より効果的なページを作成するためには、まずは自社の業種や目的に合った参考LPを見つけましょう。そして、デザインや構成、メッセージの伝え方など、良い部分を分析してみてください。
その分析を通じて、自社のLPに取り入れるべき要素が明確になります。
LPのワイヤーフレーム時点で、ストーリーラインを考えると読み手にとって魅力的になります。
大まかな流れとしては、結起承転 + クロージングを意識してみましょう。ユーザーが欲しい情報の優先度を考え、表示の順番に反映してください。
また、実際に閲覧しているユーザーになったつもりで、順に見られるような構成にすることも重要です。
コンテンツの内容が素晴らしくても、情報が散らばっていると読み手に魅力を伝えにくくなります。
情報のつながりやユーザーの心理を考慮して、内容を組み立てることが大切です。
ユーザーの心に響くキャッチコピーを使うことで、彼らの欲求や思いに共感を呼び起こし、印象を残すことができます。
商品の説明だけでなく、ユーザーにとっての利点を伝えるためにも、キャッチコピーは重要です。
LP内の文言は、単純でわかりやすい文章だけでなく、ユーザーを引きつける魅力的なキャッチフレーズを使うと効果的です。
LPを外注したい方には月額5万円というリーズナブルな価格設定で、LPO・広告運用など一気通貫して対応している弊社の「伴走LP」がおすすめです。
オンライン相談は無料です。まずは貴社に合うLP施策について話を聞きに行きましょう！
＼CRV爆上げ！実績５万件以上！／
【無料】LPの相談をする本章では、LPのワイヤーフレームを作る際に役に立つテンプレートを提供しているツールを3つ紹介します。
順に紹介します。
引用：CVX
| 提供企業 | 株式会社ポストスケイプ |
| 料金プラン | 問い合わせ |
| 機能・特徴 | ・約200種類のテンプレート ・PC/スマートフォン/レスポンシブ対応 ・記事型テンプレート搭載 ・ページ分析 ・A/Bテスト ・クリエイティブ改善 |
| 公式サイト | https://lpo.conversion-x.jp/ |
CVXは、初心者から利用できる優れたテンプレートを提供しているツールです。
約200種類ものLPデザインテンプレートから選ぶことができ、穴埋めのような感覚で簡単に作成できるのが特徴です。
速くかつ効果的にLPを設計し、成果の最大化が期待できます。
直感的な操作性と豊富な機能を兼ね備えたCVXは、LPからのCV獲得をサポートする上で頼もしいツールとなるでしょう。
引用：Cacoo
| 提供企業 | 株式会社ヌーラボ |
| 料金プラン | 【月契約】 ・プロプラン(個人利用) 660円 ・チームプラン(チーム利用) 1,980円～※3ユーザーから 【年契約】 ・プロプラン(個人利用) 6,600円 ・チームプラン(チーム利用) 19,800円～※3ユーザーから |
| 機能・特徴 | ・シート数無制限 ・豊富なテンプレート ・ビデオ通話 ・コメント機能 ・エクスポート ・外部サービス連携 ・図の埋め込み ・プレゼンテーション ・リンクで簡単共有 |
| 公式サイト | https://cacoo.com/ja/home |
Cacooは、オンラインで手軽に使える作図ツールです。
ワイヤーフレームの作成にも適しているため、デザインを効率的に進められます。
また、直感的な操作が可能で、メンバーとリアルタイムで協力しながら作業できるのが特長です。
さらに、豊富なテンプレートやアイコンも揃っており、幅広い業種の方々に利用されています。Cacooを活用して、効果的なLPのワイヤーフレームを作成しましょう。
| 提供企業 | Adobe Inc. |
| 料金プラン | ■Creative Cloud コンプリートプラン ・個人 7,780円/月(税込) ・法人 10,780 円/月(税込) ・学生・教職員 初年度2,180 円/月 (2年目以降は3,610円/月) |
| 機能・特徴 | ・デザイン ・プロトタイプの作成 ・Creative Cloudライブラリと連携したデザインシステム |
| 公式サイト | https://helpx.adobe.com/jp/support/xd.html |
Adobe XDは、デザインとプロトタイプ作成を一つの場所で管理できるツールです。
PhotoshopやIllustratorなどのグラフィックソフトとの相性が良く、柔軟かつ迅速に高品質なワイヤーフレームを作成できます。
また、リアルタイムでの共同作業機能を活用することで、チーム全体で効率的にデザインプロセスを進めることも可能です。
なお、Adobe XDは単体での販売は終了していますが、「Creative Cloud」のコンプリートプランで利用できます。
LPを外注したい方には月額5万円というリーズナブルな価格設定で、LPO・広告運用など一気通貫して対応している弊社の「伴走LP」がおすすめです。
オンライン相談は無料です。今すぐ売れるLPを作りましょう！
＼CRV爆上げ！実績５万件以上！／
【無料】LPの相談をするワイヤーフレームの作り方は下記の5STEPで作りましょう。
上記の手順でLPのワイヤーフレームを作ってみてください。
また、LPを作成して、CV獲得を検討している方は、弊社の「伴走LP」をご利用ください。
「伴走LP」では、今回紹介したワイヤーフレームの制作まで一気通貫で対応し、ランディングページを最適化するサポートを提供しています。
初動からCVRの高いランディングページを作成したい企業にとって、最適なパートナーとなります。
オンライン相談は無料です。貴社の魅力を伝えるために今すぐ行動を起こしましょう！
＼CRV爆上げ！実績５万件以上！／
【無料】LPの相談をする
エステサロンに人気のホームページ制作会社おすすめ11選【2025年最新版】
2飲食店に人気のホームページ会社おすすめ13選！【2025年最新版】
3アニメーションの作り方は？具体的な制作方法と押さえるべき5つのポイントを解説
4買取ビジネスにおけるランディングページ（LP）の基本構成と成功のポイントを徹底解説
5採用ランディングページ（採用LP）とは？作成方法と成功事例、デザインのポイントを徹底解説
6ランディングページ（LP）の離脱率・直帰率を改善してCVRを向上させる方法
7EFO（入力フォーム最適化）とは？意味や効果的な施策、成功事例、ツールを徹底解説
8全国で人気のホームページ制作会社おすすめ17選比較ランキング！【2025年最新版】
9美容系のランディングページで成果を出す！構成・デザインのポイントと参考事例を徹底解説
10記事LPの勝ちパターンとは？顕在層・潜在層どちらも狙えるストーリー構成を徹底解説
