LP（ランディングページ）のワイヤーフレームとは？ポイントや作り方を解説

「LP（ランディングページ）のワイヤーフレームとは？」

「LP（ランディングページ）のワイヤーフレームの作り方とは？」

上記のような疑問をお持ちの方がいるのではないでしょうか。

LP（ランディングページ）のワイヤーフレームとは、CV獲得に特化したLP（ランディングページ）の設計書といえます。また、LP（ランディングページ）の作り方は下記の流れになります。

1. LPに盛り込む情報・要素を決める
2. 情報・要素の順番を決める
3. サイトのレイアウトを決める
4. ラフを書く
5. 清書をする

本記事では、上記のLP（ランディングページ）のワイヤーフレームの作り方を解説するとともに、ワイヤーフレームを作る上でのポイントやCV（コンバージョン）を高めるための方法も紹介しています。

LP（ランディングページ）のワイヤーフレームを作る際におすすめのテンプレートツールも紹介していますので、LP（ランディングページ）の作成を検討されている方はぜひ参考にしてください。

もし、LP（ランディングページ）を外注して制作しようと検討されている方は、弊社の「伴走LP」がおすすめです。

弊社の「伴走LP」は、月額5万円という価格設定で、LPO・広告運用など一気通貫して対応していますので、詳細を知りたい方や相談してみたい方はぜひ下記をご参照ください。

LP（ランディングページ）のワイヤーフレームとは？LPの設計書

LPのワイヤーフレームとは、LPの「設計書」もしくは「完成予想図」ともいわれ、どのようなレイアウトでコンテンツを配置したいのかが一目でわかるようになっています。

さらに、ワイヤーフレームを基に、制作に携わる各担当者が意見を出し合うこともできるため、より良い成果物・CV獲得を目指すためのコミュニケーションツールとしての役割もあります。

例えば、建築現場では、基礎や骨組みを担当する人、内装をする人、電気を通す人などが別々に作業をしますが、設計図がなければ、何を作っているのかさえ理解できません。ランディングページ制作も同様で、主に下記が関わります。

• ディレクター
• デザイナー
• ライター
• コーダー

これらのスタッフが共通の認識を持つためには、ワイヤーフレームが必要不可欠です。なので、ワイヤーフレームなしでは、一貫性のあるページを作り上げることは困難になってしまいます。

LP（ランディングページ）のワイヤーフレームを作成する前に押さえるべきポイント4選

LP（ランディングページ）のワイヤーフレームを作成する上で押さえるべきポイントを4つ紹介します。

1. 制作する目的と情報を洗い出す
2. ユーザー・ターゲットを分析して軸を決める
3. フォーマットを決める
4. 構成を考える

順に紹介します。

①制作する目的と情報を洗い出す

LP（ランディングページ）のワイヤーフレームを作る際には、制作する目的や情報を洗い出しましょう。

具体的には下記のような情報が必要です。

ユーザーの趣味や志向	・ユーザーが抱きやすい疑問 ・購入した場合のメリット
自社の強み	・他社にはない自社の魅力 ・LPでのアピールポイント
LP（ランディングページ）の目的	・商品購入や資料請求など ┗具体的なCV（コンバージョン）先
必要なコンテンツ	・商品紹介 ・利用者の声 ・Q＆A

上記のような情報を洗い出し、整理した上でワイヤーフレームを作りましょう。

②ユーザー・ターゲット（ペルソナ）を分析して軸を決める

LP（ランディングページ）を作成する上での、目的や情報を洗い出し・整理し終わった後は、ユーザー・ターゲットを分析して軸を決めましょう。

成果を上げるためには、ターゲットのペルソナを設定し、そのニーズや潜在的な課題に基づいて訴求ターゲットを決め、LPを作成することが重要です。

具体的なターゲットを設定せずに作成したLPは、誰にも響かない可能性があります。だからこそ、「このような人に購入してほしい」という具体的なペルソナを設定することが重要です。

ペルソナは、「40代の男性」や「30代の女性」といった曖昧なものではなく、まるで実在する人物のように具体的に描きましょう。

具体的なペルソナの設定としては下記の項目と例を参考にしてみてください。

項目	例
名前	佐藤友喜
住所	埼玉県浦和市
年齢	42歳
職業	総合商社
家族構成	妻・子ども3人
趣味	ネットサーフィン・運動
悩み	会社の部下たちの残業時間が多い。無駄な業務を減らしたい。

③フォーマットを決める

ワイヤーフレームを作成する前に、どのフォーマットで表示するかを考えましょう。

LPはPCやスマートフォン、タブレットなど、さまざまな端末で閲覧されるので、どの端末でも見やすいデザインにすることが大切です。

端末ごとにLPを作成するのか、それともレスポンシブデザインにするのかを事前に決めておくと、作業がスムーズに進められます。

近年では、スマートフォンからのアクセスが増えているため、PCだけでなくスマートフォンにも適した文字数や画像サイズに注意してLPを作ることが重要です。

フォーマットを事前に決めておくことは、LPを訪れる人が快適に閲覧できるかどうかに大きく関わるため、重要なポイントといえます。

④構成を考える

最後に、ワイヤーフレームの構成を考えましょう。LPの目的に合わせて、サイトへの導線を決める必要があります。ワイヤーフレームの構成において重要な要素は、主に次の3つです。

• ファーストビュー
• ボディ
• クロージング

順に紹介します。

ファーストビュー

サイトの第一印象を作るのは、ファーストビューです。70%～90%のユーザーがファーストビューを見てページを離れてしまうと言われています。だからこそ、閲覧者の関心を引くことがとても重要です。

ファーストビューの構成としては下記が挙げられます。

• ヘッドコピー
• メインビジュアル
• 権威付け（数字）
• CTAボタン

上記を意識してファーストビューの構成を考えてみてください。

ボディ

ボディでは、問題を明確にし、それに対する解決策を提案して、ユーザーの共感を得て製品の利点を伝えます。

具体的には、商品の紹介や導入事例など、LPの中心となる内容を盛り込みます。見込み顧客の関心や課題に基づいて、自社の強みや魅力をPRすることが重要です。

ボディの構成は下記になります。

• 問題定義
• 原因の考察
• 商品紹介
• 商品ベネフィット
• 導入事例

上記を押さえ、ボディの構成を作成してみましょう。

クロージング

クロージングでは、ユーザーの興味を引き出し、安心感を与えることで、資料請求やお申込などの成果を上げることが大切です。

CV（コンバージョン）を上げるためには下記のような構成を意識しましょう。

• 導入数（シェア）
• FAQ
• サポート体制
• 問い合わせを行った際の進行方法（スケジュール）

上記の構成と、ファーストビュー・ボディの構成を押さえた上でLP（ランディングページ）のワイヤーフレームを作成してみてください。

【5STEP】LP（ランディングページ）のワイヤーフレームの作り方とは

本章では、LP（ランディングページ）のワイヤーフレームの作り方を5STEPで紹介します。

1. 盛り込む情報・要素を決める
2. 情報・要素の順番を決める
3. サイトのレイアウトを決める
4. ラフを書く
5. 清書をする

順に紹介しますので、ぜひ参考にしてみてください。

【STEP1】盛り込む情報・要素を決める

「①制作する目的と情報を洗い出す」と「>②ユーザー・ターゲットを分析して軸を決める」で洗い出している情報の中で、LP（ランディングページ）に盛り込む情報・要素を書き出しましょう。

【STEP2】情報・要素の順番を決める

「STEP1」にて書き出した情報要素を、どのような順番でLP（ランディングページ）に配置するか決めましょう。

ユーザーにとってニーズのある情報を届けられるように、流れを意識して配置を決めてください。

【STEP3】レイアウトを決める

次に、LP（ランディングページ）全体の構成・レイアウトを決めていきます。前述していますが、LP（ランディングページ）の構成は大きく分けて3つあります。

• ファーストビュー
• ボディ
• クロージング

上記3つを具体的に決めましょう。

【STEP4】ラフを書く

「ラフ」とは、サイトの大まかなイメージを指します。LP（ランディングページ）の全体構成を共有するために、手描きのスケッチをする場合もあれば、最初からデジタルツール（例：Adobe）を使用する場合もあります。

ラフは最終的なサイトの図面ではなく、他のメンバーとのフィードバックや内容の確認に使用されます。そのため、ラフの段階ではデザインの見た目の完成度にはあまりこだわる必要はありません。

【STEP5】清書をする

ラフが完成したら、清書を行いましょう。この段階ではデザインにこだわる必要はなく、LPを構成する要素がわかれば十分です。

次の作業者であるデザイナーやコーダーが理解しやすくするために、わかりやすく作成してください。特に、利用したい色やフォント、素材などがあれば、要望を記載しておくのがおすすめです。

ワイヤーフレームの書き直しに使えるツールとしては、Adobe XDやFigma、Excel、PowerPointなどがあります。ただしツールを使用する際は、サイトの目的や使い慣れているか、他の担当者と共有しやすさなどを基準に選ぶと良いでしょう。

LPは基本的に縦長なので、ツールを使って書き直す場合は、縦幅に制限がないツールが好ましいです。一方で、表示幅に制限があるツールを使う場合は注意が必要です。

CV・成果を獲得するLP（ランディングページ）にするための3つのポイントとは

CV（コンバージョン）を獲得するLP（ランディングページ）にするためのポイントを3つ紹介します。

1. 成功しているLPを参考にする
2. ストーリーラインを考える
3. キャッチコピーをつける

順に紹介します。

①成功しているLPを参考にする

 LP（ランディングページ）からのCV数を向上させるために、成功しているLP（ランディングページ）を参考にしましょう。

成功した例を参考にすることで、自社のLP（ランディングページ）も成果を上げる可能性が高まります。

より効果的なページを作成するためには、まずは自社の業種や目的に合った参考LPを見つけましょう。そして、デザインや構成、メッセージの伝え方など、良い部分を分析してみてください。

その分析を通じて、自社のLPに取り入れるべき要素が明確になります。

②ストーリーラインを考える

LP（ランディングページ）のワイヤーフレーム時点で、ストーリーラインを考えると読み手にとって魅力的になります。

大まかな流れとしては、結起承転 + クロージングを意識してみましょう。ユーザーが欲しい情報の優先度を考え、表示の順番に反映してください。

また、実際に閲覧しているユーザーになったつもりで、順に見られるような構成にすることも重要です。コンテンツの内容が素晴らしくても、情報が散らばっていると読み手に魅力を伝えにくくなります。

情報のつながりやユーザーの心理を考慮して、内容を組み立てることが大切です。

③キャッチコピーをつける

ユーザーの心に響くキャッチコピーを使うことで、彼らの欲求や思いに共感を呼び起こし、印象を残すことができます。商品の説明だけでなく、ユーザーにとっての利点を伝えるためにも、キャッチコピーは重要です。LP内の文言は、単純でわかりやすい文章だけでなく、ユーザーを引きつける魅力的なキャッチフレーズを使うと効果的です。

LP（ランディングページ）のワイヤーフレームを作る際に役立つテンプレートツール3選

本章では、LP（ランディングページ）のワイヤーフレームを作る際に役に立つテンプレートを提供しているツールを3つ紹介します。

• CVX
• Cacoo
• Adobe XD

順に紹介します。

①CVX

引用：CVX

提供企業	株式会社ポストスケイプ
料金プラン	問い合わせ
機能・特徴	・約200種類のテンプレート ・PC/スマートフォン/レスポンシブ対応 ・記事型テンプレート搭載 ・ページ分析 ・A/Bテスト ・クリエイティブ改善
公式サイト	https://lpo.conversion-x.jp/

CVXは、初心者から利用できる優れたテンプレートを提供しているツールです。

約200種類ものLPデザインテンプレートから選ぶことができ、穴埋めのような感覚で簡単に作成できるのが特徴です。

速くかつ効果的にLPを設計し、成果の最大化が期待できます。直感的な操作性と豊富な機能を兼ね備えたCVXは、LPからのCV獲得をサポートする上で頼もしいツールとなるでしょう。

②Cacoo

引用：Cacoo

提供企業	株式会社ヌーラボ
料金プラン	【月契約】 ・プロプラン(個人利用) 660円 ・チームプラン(チーム利用) 1,980円～※3ユーザーから 【年契約】 ・プロプラン(個人利用) 6,600円 ・チームプラン(チーム利用) 19,800円～※3ユーザーから
機能・特徴	・シート数無制限 ・豊富なテンプレート ・ビデオ通話 ・コメント機能 ・エクスポート ・外部サービス連携 ・図の埋め込み ・プレゼンテーション ・リンクで簡単共有
公式サイト	https://cacoo.com/ja/home

Cacoo（カクー）は、オンラインで手軽に使える作図ツールです。

ワイヤーフレームの作成にも適しているため、デザインを効率的に進められます。また、直感的な操作が可能で、メンバーとリアルタイムで協力しながら作業できるのが特長です。

さらに、豊富なテンプレートやアイコンも揃っており、幅広い業種の方々に利用されています。

Cacooを活用して、効果的なLPのワイヤーフレームを作成しましょう。

③Adobe XD

提供企業	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（ランディングページ）のワイヤーフレームを解説しました。ワイヤーフレームの作り方は下記の5STEPで作りましょう。

1. 盛り込む情報・要素を決める
2. 情報・要素の順番を決める
3. レイアウトを決める
4. ラフを書く
5. 清書をする

上記の手順でLP（ランディングページ）のワイヤーフレームを作ってみてください。

また、LP（ランディングページ）を作成して、CV獲得を検討している方は、弊社の「伴走LP」をご利用ください。

伴走LPでは、月額5万円という価格設定で、LPO・広告運用など一気通貫して対応しています。本記事で紹介した作り方でワイヤーフレームから上手く作成できない方や、LP（ランディングページ）制作を外注したくても費用が高くて断念されていた方はぜひ下記よりご相談ください・