LPのワイヤーフレームの作り方とは？作成手順や費用相場も解説

ワイヤーフレームとはLP制作における設計図の役割を有します。船舶にたとえれば航海図のようなものです。LPを作る際に必要不可欠なため、適切な作成方法を知っておくことは非常に重要です。

今回はLPのワイヤーフレームの作り方や作成手順・費用相場などを解説します。本記事を読めば、初心者の方でも一人前にワイヤーフレームを作れるようになるでしょう。

ワイヤーフレームとは

ワイヤーフレームとは、簡単にいえばWebサイトの設計書のことです。サイト内に組み込む情報の配置・順番、訴求ポイントなどを記して、プロジェクトメンバーに共有するための地図ともいえます。

Webサイト制作において、デザイナーとプログラマーの完成イメージに齟齬が生じていると、よいモノ作りにはつながりません。

LPではワイヤーフレームの出来しだいで、売上が左右されるともいわれるほど重要なものです。どれだけ素晴らしい商品やサイトを作ったとしても、ワイヤーフレームの設計や作成がいい加減だと売上に繋がらない可能性があります。

LPにおけるワイヤーフレームの役割

LPにおけるワイヤーフレームの役割は、非常に重要です。具体的には、「目的達成のための情報整理」「Webサイトの設計図」といった役割があります。ワイヤーフレームを作らずにLPの作成を進めてしまうと、購入や資料請求などのCVを得るのは難しくなるでしょう。

LPは一人で作ることは考えにくいため、デザイナーやエンジニアなどプロジェクトメンバーに意図や構成要素を伝える設計図が必要です。また何をどの順番で伝えるべきか、情報の見せ方を話し合う際にも有効です。

目的を達成するための情報整理

ワイヤーフレームは、目標達成のためにどのような情報を組み立てていくべきか明確にする役割を持っています。

基本的にLPは購入や問い合わせ・資料請求など、ユーザーになんらかの行動を起こしてもらうために作成します。

目的によって、コンテンツに含めるべき内容は異なります。ビジュアルで訴求したいならレイアウトにこだわり、画像中心に組み立てるのが有効でしょう。また新卒に向けた採用LPを準備する場合、先輩社員からのメッセージや研修制度など入社後の姿が伝わるようなコンテンツが求められます。

LPに入れる情報はオリジナリティが重要です。競合サイトにはない情報がある・他のサイトより情報量が多い、といった優位なポイントがあるからこそ、ユーザーから信頼を獲得できます。

LPは情報の見せ方が大切なため、ワイヤーフレームを作成する時点で、ターゲットに興味をもってもらうにはどのような手法が適しているか検討することが欠かせません。

Webサイトの設計図

ワイヤーフレームは、Webサイトのレイアウトや構成要素を視覚的にわかりやすく見せるための設計図です。トップページには会社のロゴを設置する、背景にキャッチコピーを太字で入れる、というように、ページ内で何を・どこに・どのように表示するかまとめています。

複数人でLPを作る場合や一部の作業を外部委託する場合、完成イメージを関係者間でシェアするのは簡単ではありません。文章や言葉の説明だけでは伝わりにくいため、プロトタイプの図面を作製するのが有効です。

チーム内で目的や意図を具体化することで、徐々に認識のズレをなくしていけるでしょう。関係者からフィードバックを受ける際も、ワイヤーフレームを土台に話を進められると便利です。

LPのワイヤーフレームを作成する前の3つのポイント

LPのワイヤーフレーム作りでは、押さえておくべきポイントがあります。ポイントを守れば、知識や経験がない方でも効果が出るLPを作れるようになるでしょう。

1. フォーマットを決めておく
2. ターゲットを分析しておく
3. 参考にするLPをいくつか選んでおく

LPで失敗しないためには、事前準備がとても大切です。具体的なターゲット像や、ユーザーからの見え方も考慮したフォーマットの選定、すでに成果が出ていて参考にしたいLPの選定などを行います。

1.フォーマットを決めておく

ワイヤーフレームの作成に取りかかる前に、希望のフォーマットを選んでおきましょう。LPはスマートフォンやタブレット・PCなどさまざまな端末で見られるため、いずれの場合でも見やすいデザインにするのが重要です。

とくに近年は、スマートフォンからのアクセスが増加傾向にあります。文字数や画像サイズなど、細かい部分にも目を向けたコンテンツ作りが求められます。

端末ごとにLPを作成することはもちろん、端末に合わせてデザインを調整するレスポンシブ対応も必要です。

2.ターゲットを分析しておく

どのような人に自社の製品やサービスを届けたいのか入念な分析を行うことで、訴求すべき内容が明確になります。

具体的なペルソナを設定し、ニーズや潜在的な課題などを踏まえた上でコンテンツの内容を決めることがLPで成果をあげるポイントです。

ターゲット設定があいまいだと、せっかく心をこめて作成しても誰にも刺さらないコンテンツになってしまいかねません。

ペルソナは「30代の会社員」だけでは足りず、趣味や嗜好・生活の様子などがわかるレベルまで細かく作るのがおすすめです。

例えば、パソコン販売の場合、ターゲットがIT知識が乏しい高齢者なのか、最先端技術に興味があるビジネスパーソンなのかによって、訴求すべき内容や商品が異なります。

事前に洗い出した内容から、ターゲットのニーズに応じて必要なものは何か絞りこんでいきます。

3.参考にするLPをいくつか選んでおく

LP制作で失敗しないためには、参考にしたい事例をいくつか選んでおくことが大切です。ゼロから何かを生み出すのは非常に困難です。ほとんどの方が何を始めるにしても、熟練者からの指導やすでにある事例を参考にして取り組みを開始しています。

LP制作も同様で、最初は何かを真似する・参考にする姿勢が大切です。ここで勘違いしてほしくないのは、「競合他社やLPで成功しているページをそのまま利用すれば良い」というわけではないことです。

コンテンツの配置場所やポイントなど、模範となる部分を参考例として書き出してみましょう。自社の目指す成果をすでに実証しているLPを参考に、学べる部分がないかを探し、自社のコンテンツにも反映してみてください。

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

LPのワイヤーフレームを作る際は、以下の3ステップを踏みましょう。

1. 訴求したい情報を整理する
2. 構成を考える
3. レイアウトを決める

自社の強みを押し出した上で、ターゲットに刺すための適切な訴求ポイントを見つけることが重要です。訴求効果を最大限に発揮するには、何をどの順番で伝えるかも大切なポイントです。画像や動画の配置・文字の大きさ・フォントなど、細かい部分のレイアウトまで詰めていきましょう。

訴求したい情報を整理する

自社にはどのような強みがあるのか把握し、アピールにふさわしい訴求ポイントを整理しましょう。ユーザーが抱える悩みを解決に導くために、自社を利用するメリットがあることを伝えます。

たとえば、初心者でも学べるプログラミング動画の自主学習サービスにおいて、無料登録者を集めるためにランディングページを作るとしましょう。LPではサービスの特徴や詳細な内容・料金プラン・初心者にもおすすめの理由などを含める必要があります。

初心者に手に取ってもらうには、現在第一線で活躍している利用者の声や、ノンプログラマー向けのコースが充実している旨を伝えると刺さりやすいでしょう。

専属トレーナーが質疑応答に無制限で回答する、競合他社と比較して料金がリーズナブルである、など独自の訴求ポイントを押し出すこともポイントです。

構成を考える

LPでは、何をどのような順番で伝えるかが非常に重要です。コンテンツの内容が適切でも、伝える順番次第ではペルソナに刺さらないものになってしまいます。

LPを作る根源的な目的は「ユーザーに行動を起こしてもらうこと」であり、一種の商談ともいえます。商談では話す内容だけでなく、話す順番も大切です。

LPの基本的な流れは、「ファーストビュー→ボディコピー→クロージング」です。ファーストビューは読者が最初に目にする部分のため、関心を惹くことが何よりも重要です。

「自分には関係ない」と離脱されてしまわないよう、読者の気持ちを代弁するキャッチコピーや画像で興味を惹きつけます。

ボディコピーはその名のとおり、LPの本体を表す部分です。面積としては一番大きな部分を占め、ユーザーの関心を高めるためストーリーや共感できる文章が欠かせません。

クロージングは実際にユーザーが行動を起こす部分で、具体的にはCTAボタンが該当します。ファーストビュー→ボディコピーと読み進めたユーザーは強い関心を示しており、購入まであと一歩の段階まで来ています。クロージングで背中を押してあげましょう。

注意点として、CTAで入力する内容が多すぎると、購入を決意したユーザーであっても離脱されかねません。ユーザーの負担を考慮し、CTAボタンの最適化を進める必要があります。

レイアウトを決める

ストーリー構成まで完了したら、レイアウトを設定しワイヤーフレームの細かな部分を調整していきます。デザインは、LPを構成する要素のなかでも重要な部分です。

今まで成果が出ていなかったLPのデザインを変えたところ、リアクションが倍以上に増加したという事例もあります。デザインを考える際に、基準となるのはターゲット像です。

ターゲット像を明確化すると、デザインで重視すべきポイントが見えてきます。

写真や動画を入れてビジュアルイメージの訴求に努める、強調したい部分を色や太字にする、文字や写真の間隔を統一する、などが具体的な手法です。競合のLPも参考にみてみると、取り入れるべき部分が見えてきやすいです。

LPのワイヤーフレームを作成する際の注意点

LPのワイヤーフレーム作成時の注意点は、以下の4つです。

1. 事前にリサーチや分析をしっかり行う
2. 各要素に明確な理由と根拠をつける
3. ユーザー心理を考慮する
4. 構成にストーリー性をもたせる

ワイヤーフレームは、リサーチや分析によってターゲット像を明確にした上で、何をどこに入れるかの理由・根拠をもって構成しないとユーザーに刺さりません。

また、ライティングにおいては「結・起・承・転」のストーリー構成がユーザーの心を掴む上で大切になります。

事前にリサーチや分析をしっかり行う

LPの目的を達成するためには、事前にリサーチや分析をして課題をはっきりさせる必要があります。LPを作る理由は、商品・サービスの購入や、問い合わせ・資料請求の獲得、セミナー・説明会の集客など多岐にわたります。

目的の実現には、入念なユーザー行動のリサーチや分析が重要です。無料ツールのヒートマップを使えば、現LPの読まれていない箇所・離脱が多い箇所などページ内の問題点を突き止められるでしょう。

各要素に明確な理由と根拠をつける

LPにおいては、各要素を入れる理由や根拠をしっかりと語れることが重要です。なんとなくで決めると効果が出たとしても再現性はなく、関係者から適切なフィードバックを受けるのも難しくなってしまいます。

また複数の意見が出た場合、議論の拠り所となる根拠や理由があれば優先順位をつけられます。「ヒアリングやアンケートの結果を踏まえて、目立つ位置に画像を設置した」というように意図や理由を明確に説明できると、説得力が増すためです。

建設的な議論につながり、効果的な改善を生むでしょう。

ユーザー心理を考慮する

ユーザーの懸念点を整理したり、競合となりうる他のサービスをまとめたりすることで「興味を抱いてもらえるために、何をどの順番で伝えるべきか？」考える材料が得られます。

ユーザーがどのようなことに悩んでいるか、求めている解決策は何かなど、性格や生活環境も考慮した上でターゲットの心理を極力明確にしましょう。

LPを読む読者は通常ページを上から下へと推移していくため、ユーザーの気持ち沿ってストーリー展開を進め、行動変容を促す構成を考える必要があります。

構成にストーリー性をもたせる

ページの冒頭画面で、いきなり商材の効果を知りたいというユーザーの欲求を満たすため、LPには「結・起・承・転」と呼ばれるストーリー展開が求められます。「起・承・転・結」とは異なるため注意してください。

「結・起・承・転」では、基本的に以下の流れで文章やストーリーを構築します。

• 結：難関大学に合格しました！
• 起：成績が上がらなくて困っている…。
• 承：塾や予備校に通ったけど、なかなか効果が出ない…。
• 転：カリスマ講師の動画を見て実践するだけで、成績がぐんと伸びた！

導入から話し始めて最後に結果をもってくる構成が一般的ですが、最初にインパクトを残すことが重要なLPでは、結論を一番上に押し出すのが効果的だとされています。

LPのワイヤーフレーム制作を依頼する際の費用相場と内容の違い

ワイヤーフレーム制作を丸ごと外注に出すのも、有効な戦略です。製品・サービスの開発に時間を取られたり、LP制作の知識やノウハウがなかったりする場合はなおさらでしょう。

LPのワイヤーフレーム制作を外注に出す場合、費用に応じて受けられるサービスに違いがあります。「～30万円」「30万円～100万円」「100万～200万」「200万～」と、それぞれのプランにおける対応内容やおすすめの人を紹介します。

〜30万円

中小の制作会社が請け負う価格帯で、基本的な内容はデザイン制作とコーディングです。「費用をできる限り抑えたい」「短い納期で依頼したい」といった希望をもつ、企業様に推奨します。

具体的な作業内容はテンプレートやWordPressのようなCMSを活用して、簡易的なコーポレートサイトやオウンドメディアを作成することです。

画像やテキストは、依頼者側が用意するケースも珍しくありません。コストを抑えるためにテンプレートを使う場合も少なくないため、デザインにこだわりたい方は要注意です。

30万～100万

デザインやキャッチコピーに凝ったサイトを作れる価格帯です。独自コンテンツが充実した、オリジナリティあふれるLPを実現できます。

作業内容はデザインやコーディングのほか、構成作成を含むライティングまで依頼可能です。100万円近くの予算をかけられるのであれば、上記に加えて戦略設計や企画も任せられるでしょう。

LP制作のノウハウや実績にとどまらず、集客や営業など幅広い視点から目的達成を目指せるものを提供しています。

100万～200万

効果的な戦略を立案し、効果にコミットするLPを実現できる価格帯です。トレンドを踏まえたコンテンツやデザインの提案だけに留まらず、インタビューや撮影などの素材調達まで対応可能です。

規模の大きなLPを作りたい方や、上場企業に適しています。効果を出すためにプロフェッショナル人材がチームを作り、時間をかけて取り組む場合も少なくありません。

価格が安いプランと比較し、制作期間が長期化する傾向にあることには注意してください。もちろん価格が高い分、サービスの対応範囲は広がるため一長一短だといえます。

200万円〜

200万以上のプランでは、SNSとの連動が可能な多機能LPや、難しい動きを組み込んだLPなどを作成できます。大企業で複数のブランドLPを運営したい方、機能性の高いLPにこだわりたい方などに有効です。

片手間に作ったLP・戦略や企画が不十分なLPが失敗に終わりやすいのは事実ですが、200万円以上の費用や時間をかけたからといって、必ず問い合わせにつながるLPになるとも言い切れません。

とはいえ、高価格のプランは仮説に基づき戦略や企画を立案しているため、たとえ失敗したとしても改善して次につなげられます。

関連記事：ランディングページの相場はいくら？4フェーズに分けて解説！

LPのワイヤーフレーム作成はプロに依頼しよう

LP制作におけるワイヤーフレームは情報を整理する設計図のような存在で、必要不可欠です。本記事では作成方法や手順を示しましたが、自分でやるのは難しいと感じた方もいるかもしれません。

LP制作に、たった一つの答えはありません。そのとき扱う商材やビジネスの規模などによってベストな選択肢は異なります。失敗を防ぐランディングページ作りは、自分および競合を知ることからスタートします。

LP制作の知識や経験に自信がない場合は、プロにワイヤーフレーム作成を依頼するのがおすすめです。

しかし、ひとくちにプロといっても多くの制作会社があります。LPマーケティングに成功し、サバンナのような弱肉強食の世界で生き残るためには、自分に合った制作会社を選ぶことが大切です。

制作会社選びで迷った際は、弊社クロスバズのLP制作サービス「バズLP」もご検討ください。バズLPには、このような特徴があります。

• 競合分析に時間をかけ「売れるストーリー」を構築
• 行動心理学を応用し、人間の心理に訴えかける
• 広告運用から改善まで、集客も一任できる

作って終わりでなく、望む成果を出せるよう運用・改善まで責任をもってサポートします。ご相談・お見積りは無料なため、少しでも気になった方はぜひお気軽にご相談ください。

バズLPの詳細はこちら

関連記事：ランディングページ制作代行会社の選び方とは？メリットや費用相場も紹介