LPワイヤーフレームとは?重要性や作成のポイントをご紹介

LPワイヤーフレームとは?重要性や作成のポイントをご紹介

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

「商品のLPを作りたいけれど、どこから手を付ければよいのかわからない……」

「デザイナーに依頼する前に、自分のイメージを整理したい」

そのようなお悩みをお持ちの方も多いのではないでしょうか。

コンバージョンにつながる効果的なLP(ランディングページ)を作るには、本格的なデザイン制作の前に「ワイヤーフレーム」と呼ばれる設計図を作ることが重要です。

本記事では、LPのワイヤーフレームの基本から作り方まで、デザインの専門知識がない方でも理解できるよう、具体例を交えて解説していきます。

LP制作を検討している方は、ぜひ参考にしてください。

ご相談・お問い合わせフォーム – 株式会社PENGIN

LPのワイヤーフレームとは?

LPのワイヤーフレームとは、建築の設計図のように、完成後のイメージを共有するための簡単な下書きのようなものです。

色やデザインにこだわる前に「どの情報をどこに配置するのか」といった基本的な構成を決めるために作成します。

具体的には以下のような要素を配置していきます。

  • 商品の特徴やメリット
  • 価格や申込み方法
  • お客様の声や実績
  • 問合せフォーム

ポイントは、装飾の色使いなどの細かいデザインは後回しにして、まずは情報の配置を決めることです。

シンプルな四角形や線のみで表現するため、デザインの専門知識がなくても作成できます。

以下の記事で、LPとは何かについて詳しく解説しているので、あわせて参考にしてください。

ランディングページ(LP)とは?メリットや制作手順の基本ステップ、運用するためのポイントを解説

ワイヤーフレームとデザインカンプの違い

ここで、よく混同される「ワイヤーフレーム」と「カンプ」の違いについて解説します。

ワイヤーフレームは、モノクロでシンプルな骨組みを表すものです。

主に以下を決め、クライアントやチームと共有するために作ります。

  • どの情報をどこに配置するか
  • 各セクションの大きさはどうするか
  • ボタンやフォームをどこに置くか

一方、デザインカンプは完成見本のようなものです。

実際のLP同様、色や画像、文章も入った状態で作成します。

デザインカンプの作成は、専門的な知識や技術が必要になるため、通常はデザイナーに依頼することになります。

2つの違いを簡単にまとめると、ワイヤーフレームは「情報の配置を決める設計図」デザインカンプは「完成イメージを確認するための見本」です。

LPワイヤーフレームの必要性

ではなぜ、LPの制作前にワイヤーフレームを作る必要があるのでしょうか。

もっとも重要な理由は、商品の魅力を効果的に伝えるための情報整理です。

ワイヤーフレームを作成すれば、以下のような効果を期待できます。

  • 必要情報の漏れや抜けを防げる
  • 情報の優先順位を明確にできる
  • あとからの修正や追加がスムーズになる
  • デザイナーや制作会社への依頼がスムーズになる

たとえば、制作会社に「LP制作をお願いします」と依頼するだけでは、イメージの共有が難しく、修正が何度も発生する可能性があります。

ワイヤーフレームがあれば「ここにこの情報を入れたい」「この部分をもっと強調したい」などの具体的な希望を共有しやすくなるでしょう。

ワイヤーフレームを作成する前には、以下のポイントを考慮しておくことが重要です。

  • 商品のメリットや特徴を書き出し、優先順位を付ける
  • ターゲットの気持ちになって情報を組み立てる
  • 最終的な目的(購入や資料請求)に向けた流れを作る

何度もワイヤーフレームを作りなおさないためにも、上記のポイントに注意する必要があります。

LPワイヤーフレーム作成における3つのポイント

ここでは、ワイヤーフレーム作成のための具体的なポイントをご紹介します。

商品の魅力を最大限に伝えコンバージョンにつなげるために、以下のポイントを意識して作成しましょう。

  1. セクションを効果的に配置する
  2. ベネフィットを伝えることを意識する
  3. ストーリー性のある構成にする

以下で順に解説します。

1.セクションを効果的に配置する

LPは、情報をいくつかのセクション(区画)に分けて構成します。

効果的なセクションの配置を考えられると、商品の魅力を順序立てて伝えられます。

主なセクションは以下の通りです。

  • ファーストビュー
  • 実績
  • お客さまの声
  • よくある質問
  • CTA

ファーストビューとは、スクロールせずに最初に表示される画面のことで、LP制作で最も重要な部分といえます。

商品名や最も伝えたい情報を大きく表示したり、目を引く画像と簡潔なキャッチコピーを入れたりすると、効果が出やすくなります。

ワイヤーフレームの段階では、どこに設置するかを考えればよいため、具体的なキャッチコピーやデザインの考案は不要です。

もう一つ重要なのが「CTA(Call To Action)」、つまり購入や問合せを促すボタンです。

たとえば「いますぐ無料で体験する」「資料請求はこちら」といったボタンを、ユーザーの行動を促すタイミングで配置します。

ワイヤーフレームの作成時には、どこに設置するのかをユーザーの目線になって考えることが重要です。

以下の記事でも、LPの構成に欠かせない要素について詳しく解説しているので、あわせてお読みください。

LPの構成に欠かせない7つの要素は?コンバージョンを得やすくするためのポイントも解説

2.ベネフィットを伝えることを意識する

商品の機能や性能を並べるだけでは、ユーザーの心に響くLPは作れません。

大切なのは「この商品を使うことで得られるメリット(ベネフィット)」を、適切な場面で明確に伝えることです。

ワイヤーフレームの段階では、詳細なテキストを決定する必要はありませんが、どこにベネフィットを伝えるためのキャッチコピーを入れるかを考える必要があります。

そのためにも、ワイヤーフレームを作成する前にペルソナを設定し、ユーザーの悩みを解決することを第一に考えるとよいでしょう。

たとえば、ユーザーの視点に立って「悩み→解決→効果」の流れで情報を構成すれば、商品の価値を印象付けて効果的に伝えられます

 3.ストーリー性のある構成にする

ユーザーに最後まで飽きさせず、商品の魅力を伝えるには、ストーリー性のある構成にすることが重要です。

文章の構成としてAIDMAの法則(注意→興味→欲求→記憶→行動)やPASONAの法則(問題提起→煽り・共感→解決策→絞り込み→行動)など、起承転結のような流れを取り入れるとよいでしょう。

ストーリー性のある流れで構成すれば「なぜこの商品が必要なのか」「どう申し込めばよいのか」まで、自然な流れで理解してもらえます。

最後まで目を通してもらい、コンバージョン(目標となる行動)を達成してもらうLPにするためにも、ワイヤーフレーム作成の段階でストーリー性のある構成を考えることが重要です。

ご相談・お問い合わせフォーム – 株式会社PENGIN

LPワイヤーフレームの作成手順

ここでは、LPワイヤーフレームの具体的な作成手順をご紹介します。

基本的な作成方法は、通常のWebサイトのワイヤーフレームと同じですが、LPならではのポイントを意識して作成しましょう。

手順は以下の通りです。

ステップ作業内容LPならではのポイント
1.必要な要素を洗い出す商品情報や掲載したい内容をリストアップ商品のベネフィットを重点的に整理
2.サイトマップを作成する情報の階層と流れを整理一枚のページで完結する導線を設計
3.レイアウトを設計する各セクションの配置を決定CTAの配置を意識した構成にする
4.実際にワイヤーフレームを作る選んだツールで作成開始スクロールの長さを意識
5.レビューとフィードバックをもとに修正する関係者と共有して改善点を検討購入や問合せまでの動線を意識

上記の手順を参考に、商品のベネフィット整理や、CTAの配置を考慮したレイアウトの作成など、コンバージョンを意識しながら組み立てることが大切です。

ポイントを押さえながら各ステップを進めれば、コンバージョンにつながる効果的なLPのワイヤーフレームを作れるでしょう。

LPワイヤーフレームの作り方は、以下の記事でも詳しく解説していますので、あわせて参考にしてください。

ランディングページ(LP)の作り方をステップごとに解説|押さえておきたいポイントや注意点もご紹介

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

LPワイヤーフレームの作成手順について理解したところで、実際に作成する際の注意点についても触れておきましょう。

手順通りに進めても、肝心なポイントを抑えながらワイヤーフレームを作らないと満足のいくLPには仕上がりません。

以下、3つの注意点を意識してワイヤーフレームを作りましょう。

  • コンテンツの機能や動作が目的からずれていないかチェックする
  • ストーリー性があるか確認する
  • ワイヤーフレームの段階でデザインしすぎない

順に解説します。

以下の記事ではツールを使用したワイヤーフレームの作り方を紹介しています。

【AdobeXD】ワイヤーフレームの作り方解説!便利なテンプレートも紹介!

コンテンツの機能や動作が目的からずれていないかチェックする

ワイヤーフレームの作成を進めていくうちに、本来の目的からずれてしまわないよう常にチェックしながら作業を進めましょう。

目的を見失ってしまうと、不要な情報が増えてしまったり、本来伝えるべきメッセージが埋もれてしまったりします。

作成前の段階で「入れたい情報」「ページの目的」「ターゲットとなるペルソナ」を明確にしメモなどに記録しておくのがオススメです。

メモを確認しながら作業を進めれば、大幅なズレを防げるでしょう。

ストーリー性があるか確認する

前の章でも解説しましたが、ストーリー性のある構成になっているかを常に意識する必要があります。

以下のような流れを意識するのがよいでしょう。

  1. 悩みや問題提起
  2. サービス情報の提供
  3. ベネフィットの訴求
  4. ロジックやエビデンスの提示
  5. お客様の声の紹介
  6. コンバージョンへの誘導

ストーリー性を意識せずに作成してしまうと、ユーザーが途中で離脱してしまったり、情報が断片的で伝わりにくくなってしまったりします。

LPはひとつの「物語」のように構成することが重要です。

ワイヤーフレーム作成の段階から、ストーリー性を意識して取り組むようにしましょう。

ワイヤーフレームの段階でデザインしすぎない

つい起こしがちなミスが、ワイヤーフレームの段階でデザインしすぎてしまうことです。

デザインしすぎてしまうと、あとからの修正が難しくなったり、伝えたいことが埋もれてしまったりします。

ワイヤーフレームはあくまでも設計図のため、コンテンツの配置のみに注力してシンプルに作成するのを心がけましょう。

以上の点に注意してLPワイヤーフレームを作成すれば、コンバージョンを達成できる効果的なLPを設計できます。

まとめ

LPワイヤーフレームは、LP制作における重要な設計図であり、コンバージョンにつなげるWebサイトを作るために必須となる資料です。

情報の整理やストーリー性のある構成、そしてシンプルなデザインを心がければ効果的なワイヤーフレームを作れます。

しかし、効果のあるLPワイヤーフレームを作成するには知識や経験も必要です。

もし、自社でLP制作のための十分なリソースがない場合は、Web制作会社への依頼も検討してみてはいかがでしょうか。

PENGINは、LPワイヤーフレームの作成から、デザイン・コーディング・運用まで、Web制作に関するあらゆるサービスを提供しています。

Web制作についてお困りのことがございましたら、お気軽にご相談ください。

なお、以下の記事では、LPのコンバージョン率を上げる施策も解説していますので、あわせてチェックしてください。

LPにおけるCVR(コンバージョン率)の平均は?CVRを上げる7つの方法を徹底解説!

ご相談・お問い合わせフォーム – 株式会社PENGIN