LPのワイヤーフレームとは？ 作り方や成果を挙げるポイント

LP（ランディングページ）を作成する際は、ワイヤーフレームを用意することが非常に有効です。また、今までに使われているLPの成功パターンを参考にすると、簡単に成果を上げられるページを作ることができます。

ワイヤーフレームとは何か、作成方法やどのような効果があるのかなどをご紹介します。LPの作成でお困りの方は、ぜひ参考にしてみてください。

ワイヤーフレームは「LPの設計図」

ワイヤーフレームとは、Webサイトの設計書のことです。サイトの中に組み込む情報や、どこに何を配置するのか、どのような内容を訴求するのかを記して、Webサイトを作成する人たちに共有するために用意します。

LPのワイヤーフレームは、営業のクロージングの役割も持ってます。LPのワイヤーフレームの出来により、売り上げが決まるともいわれているからです。逆に、サイトの内容や商品がどれだけ魅力的でも、見た目だけの良いワイヤーフレームをもとにLPを作ってしまうと、売り上げに貢献できないWebサイトが完成する可能性があります。

ワイヤーフレームを実際に作成する前に、Webサイトにどのような内容を盛り込みたいのか、サイトや商品のターゲットは誰かなどを決めておくことが非常に大切です。Webサイトの方向性を決めずにワイヤーフレームを作ってしまうと、サイトの作成途中で方向性がわからなくなるデメリットがあります。

LPについて詳しく知りたい方は、下記関連記事もご覧ください。
LPOとは？具体的な事例と実践のための手順
「ランディングページ(LP)とは？LPのデザインをまとめたサイトも紹介！」（リスクル）

ワイヤーフレーム作成前のステップ

ワイヤーフレームを作成する際、作成前にきちんとステップを踏むことが大切です。具体的には以下のようなことを行ってください。

おすすめサービス紹介：売れるセールスストーリーを設計するLP制作|株式会社クロスバズ

【ワイヤーフレーム作成前にするべきことの手順】

1. ワイヤーフレームを制作する目的と情報を洗い出す
2. ターゲットを分析し訴求軸を決めておく
3. フォーマットを決めておく
4. ワイヤーフレームの構成を考える

1．ワイヤーフレームを制作する目的と情報を洗い出す

ワイヤーフレームを作成する際は、まず、次のような「作成に必要な情報」を洗い出しましょう。

必要な情報を洗い出した上で、自社のワイヤーフレーム作成を進めていきましょう。

2．ターゲットを分析し訴求軸を決めておく

LP作成の目的や必要なコンテンツが分かったところで、次はターゲット分析と訴求軸の決定を行います。ターゲットのペルソナを設定し、ニーズや潜在的な課題をもとに訴求ターゲットを決めて、LPを作成することが成果を上げるコツです。

具体的なターゲットを決めずに作成したLPは、誰にも刺さらない可能性があります。「このような人に購入してほしい」などのペルソナを決めることが重要です。ペルソナは、「40代のサラリーマン」といった曖昧なものではなく、あたかも実在する人物であるかのように具体的にまとめていきましょう。

上記のように、どのような人に向けて作成するかを、ペルソナの顔や生活している様子が分かるレベルまで細かく設定してみてください。ペルソナを決めたらターゲットを分析し、訴求軸を決めておきましょう。事前に洗いだしたLPに含めたい内容の中から、とくにペルソナの要望に合致した内容を含めて作成することが重要です。

ペルソナ作成については、以下の記事もご参照ください。
ペルソナの作り方【サンプル付き】〜インバウンドマーケティングの視点から解説

3．フォーマットを決めておく

ワイヤーフレームを作成する前に、希望するフォーマットも考えておきます。LPはPCやスマートフォン、タブレットなどさまざまな端末で閲覧されるため、どの場合でも見やすいものにすることが重要です。

端末ごとにLPを作成するのか、変換してレスポンシブデザインとするのかを事前に決めておくと速やかに進められるでしょう。近年は、スマートフォンからのアクセスが増加傾向にあり、PCだけでなくスマートフォンにも最適な文字数や画像サイズを踏まえたLPを作ることが大切です。

フォーマットを予め決めておくことは、LPに訪れた人の閲覧のしやすさに大きく関わるため、非常に重要なポイントになります。

4．ワイヤーフレームの構成を考える

最後に、ワイヤーフレームの構成を考えます。LPの目的に合わせて、サイトへの導線を決めましょう。ワイヤーフレームの構成で決めるべき点は、主に次の3つです。

【ワイヤーフレームの構成で決めるべきこと】

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

各項目について、解説していきます。

ファーストビュー

ファーストビューは、サイトの第一印象となる部分です。ファーストビューを見てページを離脱してしまうユーザーはLPだと70%～90%といわれています。そのため、閲覧している人の関心を引くことが重要です。

【ファーストビューの構成】

• ヘッドコピー
• メインビジュアル（キービジュアル）
• 数字による権威付け
• CTAボタン（申し込みボタンなど）

ボディコピー

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

クロージング

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

LPのワイヤーフレームの作り方

LPのワイヤーフレームを作成する流れは、次のとおりです。

【LPのワイヤーフレーム作成の流れ】

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

ワイヤーフレームはサイトの構成案なので、どの担当者が作らなければいけないという決まりはありません。ただし、一般的にはディレクターが主導で行います。

1. LPに盛り込む要素を決める

まず、ペルソナなどから導かれた、LPに入れるべき内容を書き出しましょう。

ペルソナの設定については、以下の記事を参考にしてください。
ペルソナの作り方【サンプル付き】〜インバウンドマーケティングの視点から解説

2. 要素を表示する順番を決める

1で決めたの要素を、どの順番で配置するかを決めます。ユーザーが知りたい情報をきちんと届けられるように、流れを意識した順番を心掛けましょう。

3.サイトのレイアウトを決める

サイト全体の構成について決めていきます。LPの構成には大きく以下3つの要素があります。

• ファーストビュー：最初にユーザーの目に入る部分
• ボディコピー：商品やサービスの魅力など詳しい情報を伝える部分
• クロージング：問い合わせフォームや購入ボタンなどのCTAを設置する部分

4. ラフを書く

ラフは、サイトの大まかなイメージのことです。想定しているLPの全体構成を共有するために手描きで描くケースもあれば、最初からAdobeなどデジタルツールを使うケースもあります。

ラフは最終的なサイトの図面ではなく、他の担当者とのフィードバックや内容のすり合わせに使うものです。そのため、ラフの時点ではあまりデザインなどの見た目の完成度にこだわる必要はありません。

5. ラフを清書をする

ラフが完成したら、清書を行います。この時点ではデザインにこだわる必要はありません。Webサイトを構成する要素が理解できれば十分です。次の作業者であるデザイナーやコーダーに伝わるように、分かりやすく作成しましょう。

特に利用したい色・フォント・素材などは、要望があれば記載してください。ワイヤーフレームの清書に利用できるツールとしては、Adobe XD、Figma、Excel、PowerPointなどがあります。

しかし、サイトの目的や使い慣れているか、他の担当者との共有しやすさなどの基準で、最適なツールを選ぶとよいでしょう。LPは縦長になることが多いので、ツールを利用して清書する場合は、縦幅に制限がないツールが好ましいです。一方で、表示幅に制限があるツールを利用する場合は注意してください。

成果を挙げるLPにするためのポイント

LPにはある程度成功パターンがあるため、成功しているLPを参考にするのが良いLPを作るための近道です。実際に作成する前に成功しているLPを調べたり、ストーリーラインを考えたりすることが大切です。この項目では、成果をあげるLPにするためのポイントを解説します。

成功しているLPの良い部分を取り入れる

成功例を参考にして自社のLPを作ることは、良いLPを作るのに非常に有効です。参考にする場合は、自社の業種や目的に合わせて、向いているデザインを探すのがおすすめです。いくら良いデザインであっても、業種などが違うと商品イメージなどからかけ離れたサイトができてしまう可能性があります。

また、基本的にLPは1カラムが主流です。カラムとはWebサイトの列の数のことで、メインコンテンツの横にサイドバーがあるデザインだと、2カラムとなります。とくにこだわりやメリットがあるわけではないときは、1カラムのデザインにするとよいでしょう。

参考になるWebサイトがなかなか見つからないという場合は、LPのまとめページを閲覧してみてください。成功しているLPを分析することは、良いLPを作る上で非常に重要です。

構成のストーリーラインを考える

LPの構成は、ストーリーラインを考えると読み手にとって魅力的になります。大きな流れとしては、結起承転 + クロージングを意識してみてください。ユーザーがほしいであろう情報の優先度を考え、表示の優先順位に反映しましょう。

また、実際に閲覧しているユーザーになったつもりで、ほしい情報が順に見られる構成にすることも大切です。いくらコンテンツの内容が良くても、情報がバラバラに記載されていては読み手に魅力を伝えづらくなります。情報の繋がりやユーザーの心理を意識して、内容を組み立てることが大切です。

キャッチコピーをつける

ユーザーの潜在的な欲求や思いに強く共感させたり、印象を残したりするために、キャッチコピーをつけるのがおすすめです。キャッチコピーは商品の説明だけでなく、ユーザーにとってのベネフィットを伝えましょう。

LP内の文言は単純で分かりやすい文章のみにするのではなく、ユーザーを引き付けるようなキャッチフレーズを入れたものにすると良いです。

まとめ

成果を上げるLPにするためには、作成前に必要な事項を洗い出し、ステップに沿って作っていくことが重要です。また、成功しているLPを参考にする、キャッチコピーを付けることも良いLPを作るためのコツとして挙げられます。

ユーザーに寄り添ったLP制作には企画や構成の技量が求められます。もし、LPのデザインや制作でお困りの方は「SEデザイン」までお気軽にご相談ください。

また、LPを効果的に制作・管理できる「Hubspot Content Hub」というCMSサービスの導入支援も行っていますので、あわせてお問い合わせください。