LPのワイヤーフレームとは？構成から注意点、作成スピードアップの方法

ホームページやLP（ランディングページ）の構成を決めるために、ワイヤーフレームを作成することは非常に重要です。しかし、ただワイヤーフレームを作成しても、それが成果につながったり、効果的な施策になったりする訳ではありません。必要最低限の時間でワイヤーフレームを作成し、成果を出せる構成を作るための方法を解説します。また、ワイヤーフレーム作成にあたって気を付けるべき注意点もあわせて紹介します。

LP（ランディングページ）とは、商品やサービスなどを1枚のページで紹介しているWEBページです。もっと広い意味では、WEBの広告や検索エンジンなどを通して最初に見るWEBページ全般を意味する場合もあります。ここでは、1ページで商品やサービスを紹介するためのページの構成について、説明していきます。

LP制作において、ワイヤーフレームは「設計書」です。家を建てる際に詳細な設計図を決めないまま建て始めれば、窓や扉がちぐはぐで不安定な家が出来上がってしまいます。あるいは、途中で崩壊して完成までに至らない場合もあるでしょう。

ユーザーが正しく情報を受け取り、訴求を通じて商品の良さを知ってその後の購買や成約につなげるためには、必要な情報が必要な箇所に、適切に配置されていなければなりません。設計書がしっかりと機能していれば、飾り付け（デザイン）や建築（コーディング）の際にも迷うことはないでしょう。

ワイヤーフレームはユーザーにとっても、その後の作業をする関係者に対しても重要な工程なのです。

ワイヤーフレームには型があり、その型には情報を正しく伝えるため、ユーザーに訴求するための効果的な要素がいくつも散りばめられています。オリジナリティのあるLPを作成しようとするあまり、型や情報の流れなどを考えないまま作ってしまうと、正しく情報が伝わらないばかりか、誤解が生まれてしまう原因になるのです。

ワイヤーフレームの構成を考えるために、まずは3つの大きな要素に情報を仕分けします。

1. ①ファーストビュー
2. ②ボディ
3. ③クロージング

それぞれの要素について、詳しく見ていきましょう。

商品やサービスの魅力や特徴を一言で表すキャッチコピーやアイキャッチ画像、商品・サービスの内容が配置されているエリアです。

人と人との出会いは第一印象がその後の人間関係に大きな影響を与えます。LPも同様に、「最初の顔」であるファーストビューが何より大切です。サイトを訪れたユーザーは、ファーストビューを見た何秒間かでスクロールするかどうかを決めてしまいます。そのため、視覚的なインパクトのあるデザインや色使い、記憶に残る画像、わかりやすいキャッチコピーが必要です。

ボディ（ボディコピー）部分では、問題を定義づけ、その問題に対する原因を掘り下げ、解決策を示します。そして、ユーザーが商品やサービスを利用することで得られる未来＝ベネフィットを示すことで説得力を持たせ、ユーザーの興味関心などをもとにメリットや商品の魅力などを伝えましょう。

商品の紹介はもちろんのこと、導入事例や実際に利用したお客様の声など、具体的な事例があると訴求が強まります。

締めであるクロージング部分では、ユーザーの疑問や不安を解消し、資料請求やお問い合わせなどのコンバージョンへと繋げていくコンテンツを用意しましょう。

「よくある質問」集や、アフターフォローなどのサポート体制があること、お問い合わせへの動線、問い合わせ後の日程（例：商品受注から発送までのおおよその日数）などがあると、お問い合わせへの心理的な壁が低くなります。

LPのワイヤーフレームにおいては、上記の大まかな3の要素だけでは内容がざっくりとしすぎて作成しづらいかもしれません。この章では、さらに5つの流れを設定し、より説得力のある効果的なワイヤーフレームを作成していくための解説を行います。

1. ①導入
2. ②自分ごと化（問題提起）
3. ③根拠の提示
4. ④不安の解消
5. ⑤アクション

それぞれについて、詳しくみていきましょう。

小説や物語でいう、導入にあたる部分です。ファーストビューやキャッチコピーなど、印象に残る仕掛けを施しましょう。

どのような流れで構成するかも重要です。LPの場合は、「結論」を最初に持ってくるようにしましょう。ユーザーは、検索をする時点ですでに悩みや課題を抱えています。LPはその悩みや課題を解決するために商品やサービスを提供するための宣伝媒体です。最初に結論を持ってきて、「あなたの悩みや課題はこちらの商品・サービスで解決できますよ」と明確なメッセージを打ち出す必要があります。

【ユーザー検索〜LP発見までの流れ】

1. ①悩み、課題を抱えている
2. ②悩み、課題を解決する方法を検索する
3. ③検索という行為の過程でLPを目にする

【例】

1. ①筋肉をつけたいと考えている（課題を抱えている）
2. ②筋肉をつける良い方法はないか行動する（検索する）
3. ③筋トレサイトを閲覧していたら、筋肉のためにはタンパク質が必要だと知る。その際に良さそうなプロテインのLPを見つけた（LPを目にする）

LPでの流入先は、広告（リスティング広告）、オーガニック検索（自然検索）、SNS流入などがあります。しかし、どの流入先から入ってもLPの基本的な考えは変わりません。導入部分から結論を提示することで、ユーザーに「このLPはどのような意図（メッセージ）を持ったLPなのか」が効果的に明示されるのです。

導入部分で「自分の悩み、課題を解決できそうだ」と感じてもらえたら、次に「この商品・サービスは私のために活用できそうだ」と、商品を利用することを「自分ごと化」できるイメージを持ってもらいましょう。

「このようなお悩みありませんか？」「最近、肌ツヤがなくて悩んでいませんか？」など、問題提起をすると「自分のことだ！」と自分ごと化してもらいやすくなります。

実際に商品を使用している愛用者の声やアンケート、使っている動画などを活用して、商品を使っているイメージを持ってもらうのも良いでしょう。

多くの情報が溢れる現代において、「自分に合った情報である」と判断されなければ、ユーザーはすぐに離れていってしまいます。商品の良さやサービスの優秀さをアピールしても、それが「自分のための情報だ」と思われなければ購入までつながらないのです。

問題提起で商品やサービスの良さを伝えたら、次に「なぜそれが良いのか」という根拠を提示しなければなりません。例えば、なぜ痩せるのか、痩せる成分と研究結果について記載しておくと安心感につながります。

しかし、薬機法の兼ね合いではっきりと効果・効能を明文化できない場合などがあります。そのようなケースには、「悩みを解消するためには自社製品が役に立ちますよ」という表現方法が可能です。

例えば、シミやシワに悩んでいる女性に対して「シミやシワが消える」とは書けません。「年齢肌にお悩みの方には、こちらの製品を愛用していただいております」「お悩みのあなたには、こちらをおすすめします」などの提示の仕方があります。

ユーザーは、商品やサービスを購入するまでにさまざまな不安を抱えています。例えば、具体的に「夏までに痩せる！」と言われても、それがどのような成分の作用によるものなのか、科学的根拠があるのか、人体に使用しても問題ない成分のみで作られているのか提示されていなければ、購入にはいたりません。

心理学的には、人はメリットばかりを述べられても、「良いことばかりを言っていて信用ならない」と考えてしまうのです。商品のデメリットと、それを解消するための情報を記載することで、不安を和らげることができるでしょう。

不安をうまく解消することができれば、商品やサービスに対する信頼感が上がります。

ユーザー心理にマッチしたLPでは、クロージング部分まで到達する確率が高くなります。そこまで読み進めているユーザーであれば、購入意欲が非常に高いユーザー（コンバージョンする可能性が高い）と呼べます。最後のアクション（購入・サービス利用）のために「もうひと押しする」工夫を施しましょう。

例えば、「期間限定」「数量限定」など、「今行動しないとこの商品やサービスがなくなってしまう」という焦りを感じてもらう方法があります。「大人気商品のため、次回入荷は未定です」などのプレミアム感を出すと「今しか買えない」という気持ちを助長するものです。

また、コンバージョンにつながるボタンは、わざと目立つような色やデザインにしましょう。あまりに全体のデザインに馴染みすぎているボタンだと、押せることに気づかない・押していいのかわからないストレスをユーザーに与えることになります。

「この商品を購入する」「サービスを申し込む」など、アクションに沿った文言にするとさらにわかりやすくなるでしょう。

LP制作では、いくつかの注意点を知っておくとミスや不整合を防ぐことができます。さらにはLPの説得力が増し、ユーザーへの訴求力もアップします。

LPを作成する前に、まずはペルソナを設定しましょう。売りたい商品やサービスに対して、その商品を必要としている人はどのような人であるか、そしてその人にどのような言葉・ビジュアル・訴求をすれば伝わるのか、事前に調査しておかなければなりません。

公開期限が決められているものであれば、納期に合わせるためにワイヤーフレームがおざなりになってしまうこともあるでしょう。しかし、構成の段階でしっかりと整合性のとれた説得力のあるものが作れなければ、いくら良いデザインであっても商品やサービスの良さが伝わらず、購買やお問い合わせにつながらないのです。

ペルソナ設定では、最低限以下のポイントは決めておきましょう。

• ・年齢
• ・性別
• ・住まいの地域
• ・家族構成

年齢や性別に関しては、ターゲットに対するニーズが大きく変動する部分でもあるので一番最初に決めましょう。住まいの地域は、地域ごとに必要とされるものが異なるため、関東や関西などざっくりとでも良いので決めておきます。家族構成は、一人暮らしか家族で住んでいるかで経済状況やニーズが変わるため、考えておく必要があります。

ペルソナ設定は細かすぎてもターゲット層をイメージしづらくなってしまうため、あくまでも「そこにいそうな相手を想像する」ことが大切です。万人に受ける広告はありません。商品は、必要としている人に届けば購入の機会を得られます。あなたが誰にその商品やサービスを紹介したいか、どのような人ならお客さんになるのかを、具体的に考えてみましょう。

LPの制作段階では、決めなければならないこと、考えなければならないことが数多く発生します。

例えば、コーディングの作業とデザインの作業を同時並行してしまうと、デザインで大幅な変更があった際の修正作業が非常に難しくなってしまいます。ワイヤーフレームの場合では、キャッチコピーと商品の説明を同時に考えてしまうと、どちらも本質を捉えきれないままの伝わらない文章になってしまいます。作業の優先順位を決め、一つずつの作業に集中しましょう。

また、ワイヤーフレームはビジュアルではなく構造に焦点を当てるべきものです。LPに使用する画像やデザインは、いったんざっくりとしたイメージのものを置いておきましょう。

LPを公開すれば、あとはお問い合わせを待つだけ。そう考えたくなる気持ちは強いでしょうが、LPは公開したあとの行動も非常に大切です。

広告の世界は流動性が激しく、人々の心は移り変わるのが早いもの。公開しても思ったように効果が出ていないと感じた場合は、LPのテコ入れを考えましょう。

LPO（Landing Page Optimization＝ランディングページ最適化）とも呼ばれるこの考え方は、中長期的に利益を得るために必要な行動です。ビジネスの世界に絶対の正解はなく、誰も答えを知りません。だからこそ改善点を見つけ、最適化していくことが必要なのです。

ヒートマップを使用して、どこでユーザーが離脱しているかチェックし、離脱が多い部分に画像を入れたり、キャッチコピーを入れたり、文章をリライトしたりして改善する必要があります。しかし、ただやみくもに変更しただけではかえって離脱率を上げてしまったり、違う問題が発生したりする可能性があります。

費用対効果が得られていないと感じた場合には、専門家にLP診断をしてもらいましょう。どの点についてユーザーは不満を持っているのか、逆にどのポイントに注目しているのかがわかり、効果的な施策を打てます。

何本ものLPを作成する必要があったり、初めてワイヤーフレームを作成したりする際に、思った以上に時間がかかってしまうのはよくあることです。ここでは、LPのワイヤーフレーム作成がスピードアップする方法についてご紹介します。

いきなりワイヤーフレームを作成するのではなく、まずは紙に手書きで情報を整理するところから始めましょう。

はじめからツールを使ってワイヤーフレームを作成してしまうと、後から必要な情報が出てきてしまい、同じようなものを何枚も作ってしまう可能性があります。何度も同じ作業をループするため、作成に余計な時間がかかってしまうのです。

紙の利点は、上下左右自由に書き込めるため、考えていることがそのま紙面上で具現化されます。一度思いついたアイデアも後から生きてくることもあるため、なるべくボールペンや消えないペンで書きましょう。ペルソナ設定を行い、ファーストビュー・ボディ・クロージングと大きく3つに分けてから、そこに何の要素を入れるかを箇条書きで入れていきます。ある程度情報が書き出せたら、どの順番で提示すればより伝わるのかの情報整理を行いましょう。

下地がしっかりしていれば、XDやfigmaなどツールに移行しても迷うことや手順が戻ることはありません。コンセプトがしっかりしている構成はデザインもしやすいでしょう。着実に一つずつ決めていくことが大切です。

フレームワークの段階であらかじめいくつかデザインを決めておく場合も多いでしょう。その際には、よく使う「お気に入りパーツ」を、テーマに合わせてあらかじめ作っておく、ストックしておくとスピードが増します。

サイトやLPにおいて、「ボタン」や「テキスト枠」などはほぼ必ず使うものであり、テーマ（かわいい・綺麗・クール・かっこいい）の雰囲気に合ったパーツを用意しておけば、細かいデザインを加えるだけで全く違うパーツが出来上がります。

これはLP作成者がデザイナーである場合に有効な手段ですが、デザイナーと協働する場合には「素材集」などを共有しておくと、非デザイナーでもオリジナリティのあるパーツを使用できます。また、言葉で伝えるよりも「この赤いパーツの縁を丸く」など、パーツを介してデザインを指定すると意思疎通がスムーズに行われるため、作成スピードがアップします。

ワイヤーフレーム上で色の仮置きをする場合、いきなり5色や10色といった複雑な色選びをしてしまうと、全体的にみてごちゃごちゃする原因になります。また、色は多ければ多いほど互いの色同士で影響しあうため、最初はグレーや、多くても3色までにして仮置きしておきましょう。

ワイヤーフレームの段階であまりにデザインをかっちり決めすぎてしまうと、次のデザイン作業に移った際、自由な発想の妨げになってしまうかもしれません。色には「仲の良い色」と「ケンカしあう色」があり、ユーザーが見て不快に思われない色配置にするにはセンスだけではなく、知識や技術も必要です。あなたがデザインを行わない立場であるなら、グレーの濃淡でワイヤーフレームを作成することをおすすめします。

キャッチコピーはファーストビューや各要点に置かれます。とくにファーストビューで大きく提示されたキャッチコピーはユーザーが一番最初に読む言葉であり、短くインパクトのあるコピーはLPのイメージを決定づけます。

ただ、効果的なキャッチコピーや素晴らしい文言を考えるために頭を悩ませることは多々あるでしょう。キャッチコピー作成のポイントはいくつかありますが、まずは「点と線」を意識しましょう。

キャッチコピーとは、ただ単にかっこいい言葉を置いておくためのものではなく、商品の良さやベネフィット（商品やサービスを使ったらお客様がどのような未来・体験を得られるのか）を示さなくてはなりません。一つのキャッチコピーに全て詰め込もうとするのではなく、その後の本文や、ボディ内の小さなキャッチコピーにもつながるように考えましょう。

点々と置いたキャッチコピーが、全体で見た時に一つの流れを持って線のようにつながっていると、LPを読んだ後の説得力が増すだけでなく、個々別々に考えていたキャッチコピーに思考の軸が生まれ、考えがまとまることで作成スピードも向上します。

LP制作において、ワイヤーフレームは欠かすことのできない工程です。ワイヤーフレームの構成がしっかりしていれば、LPで何を伝えたいかがブレることはありません。デザインやコーディングの段階に移っても工程を後戻りする可能性が少なく、ターゲット層に正しく届けられるため、成果も変わってくるでしょう。

もしLP制作にお悩みの際は、ピースにお気軽にご相談ください。

実績多数の経験豊富なクリエイターが、効果的な施策をご提案させていただきます。