ランディングページ（LP）の構成・ワイヤーフレームの作り方を5つの手順で解説

ランディングページはインパクトのあるビジュアルなど、初見の見た目ばかりに注意がいきがちですが、最終的な目的はビジネス・成果へとつなげていくこと、この一言に尽きます。そのため、目的を達成するためのシナリオが、入り口から出口まで自然に描けているのかが重要で、最初のインパクトだけで終わってしまっても意味がありません。だから、インパクトはあったけど、何の商品だったか覚えていないというのは失敗を意味しています。あくまでLPの役割は、来訪したユーザーに対して、行動（コンバージョン）に至らせること。そして、その目的を達成するために、当然ながら入念な下準備が必要不可欠になってきます。

過去にはランディングページの制作工程を戦略設計・情報設計・デザイン開発・実装/コーディングの4つに分類して解説してきましたが、今回はその重要な下準備の中でも情報設計フェーズにあたる構成・ワイヤーフレーム設計について解説していきたいと思います。

画面のどこに何を置くかを決めるだけでなく、ユーザーに何を理解してもらい、どのような順序で行動につなげるのか？という点に目を向けながら、わかりにくいワイヤーフレームとわかりやすいワイヤーフレームの違い、そして仮想事例を用いた5つの作成手順をご紹介します。

ランディングページの構成・ワイヤーフレームはなぜ必要なのか？

一般的なwebページのワイヤーフレームといえば、このようなものが該当するでしょう。

ただ、ランディングページの場合、このように画面の枠を用意しただけでは、まだ十分とは言えません。枠の中にどのような情報を入れ、何を理解してもらうための画面にするのか？というところまで考える必要があります。

ランディングページにはその1つのページ内に、商品やサービスの購入（利用）に至らしめるために、様々な視点を取り入れた情報を効果的に盛り込んでいく必要があり、しっかりと成果をあげる営業担当者のような役割をランディングページに担ってもらうよう組み立てていく必要があります。そのため、上記のような画面設計だけのワイヤーフレームでは意図がわからず、効果的なものを作成することはできません。来訪したユーザーに、この商品を買わなくてはいけないと感じてもらうための論法をいかにワイヤーフレームに落とし込めるか？が情報設計フェーズでは大きなポイントでしょう。

効果的な情報設計とは、興味・関心を持っているユーザに対して、

・あなたのための商品・サービスである理由・根拠は何か？

・その商品・サービスにはどのような利点があるのか？

・他社（他製品）と違って、どこが優れているのか？

・なぜ、優れているのか？

・本当に効果があるのか？

など、お金を支払う価値があることを自然な形で理解できる組み立てになっていることが理想的です。そのため、ユーザーの最終的な意思決定までに必要な情報を、適切なタイミング、納得できる順序で伝えていくための手順・指示を見える化することが構成・ワイヤーフレームの役割にあたるのです。これが、まさにランディングページ特有の情報設計（＝ランディングページの構成・ワイヤーフレームを作る）と言えます。

以上のことから、良いランディングページは、良い構成・ワイヤーフレームがなければ作成することはできません。また、この設計や手順を間違えてしまうと、あとに続くデザインやコーディングの工程では後戻りできなくなってしまうため、構成・ワイヤーフレームの段階でしっかりと方向性や内容を煮詰めておく必要があります。

目的を達成するために、どのように情報を組み立てているのかが「明確にわかる。具体的にわかる。」それが構成・ワイヤーフレームであり、制作工程で必ず必要になる理由とも言えます。

参考記事：【実践編】ランディングページの成果を左右する業界別のユーザーニーズの捉え方

参考記事：カテゴリー別キャッチコピー集。8つの指標で自社LPのキャッチコピーを考える。

ワイヤーフレームをつくる＝プロトタイプをつくる

複数人でランディングページを作る場合や一部の作業を外部に依頼する場合、これから作ろうとしているランディングページの完成イメージを関係者内で正確に共有することは簡単ではありません。具体的なイメージを共有するためには、完成形の手前となるプロトタイプに落とし込み、チーム内で共有することが必要です。

チーム内で作成意図や狙いを具体的に共有することで、意思疎通の認識やズレなどをすり合わせていくこともできます。そして関係者を巻き込んで、客観的なフィードバックを受けることでさらに磨きをかけていくこともできるのです。

ここにデザイナーやエンジニアを交えて意見交換しておけば、その後の作業連携もいっそうスムーズになるでしょう。

参考記事：押さえておきたい「ランディングページのデザインディレクションのポイント」

参考記事：ランディングページ（LP）のデザイン前にデザイナーが理解しておきたいこと

わかりにいくワイヤーフレーム

抽象的なワイヤーフレームは、ページそのものの戦略や方針が見えないため、手戻りも多く、あとからコンテンツを追加したり、削除したりするなど関わるメンバーが疲弊する要因となります。

わかりやすいワイヤーフレーム

この2つのワイヤーフレームを比較する時に見ていただきたいのは、単に原稿が詳しく書かれているかどうかではありません。その情報を入れる理由まで、関係者が同じように理解できるか？という点です。例えば「サービスの特長」という枠だけでは、機能を説明するのか、他社との違いを説明するのかによって、用意する原稿も写真も変わってきます。

ここが曖昧なままデザインに進んでしまうと、見た目は整っていても、伝えたかったことと違うという問題が起こり得ます。ワイヤーフレームの段階で「このセクションを読んだ後に、ユーザーに何を理解してほしいのか」まで話し合える状態にしておくことが大切でしょう。

以上を踏まえ、具体的なワイヤーフレームであれば、検証もしやすく関係者を巻き込んで意思共有がしやすくなります。建設的な議論や新たな気づき、見落としていたポイント、変更した方がよい箇所などを具体的に話し合って進めるためには、良いワイヤーフレームが必要不可欠です。

ランディングページをセクションで分けて考える

ランディングページのコンテンツは、セクションと呼ばれる小さなコンテンツの集まりによって構成されています。下のコンテンツ例では、それぞれのセクションごとに、ユーザーに伝えたい内容が、テキスト、写真、アイコン、イラストなどの各要素を組み合わせて、視覚的に配置されていることがわかると思います。これら複数のセクションを効果的に構成することで、ユーザーに利用価値や購入メリットを感じてもらうことのできるランディングページが完成するのです。

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

最後に、仮想事例を用いて、ランディングページの構成・ワイヤーフレーム作成について手を追って解説していきたいと思います。仮想事例は、プログラミングの自己学習支援サービスとし、これからプログラミングを学びたいと考えているライトユーザーをターゲットに、ランディングページ上で無料会員登録をコンバージョンポイントと定めたと仮定します。

1.ユーザーが抱く疑問を書き出してみる

初心者でもプログラミングが学べる動画サービスがあることをユーザーに伝えるために、どのようなセクションが必要になってくるかを考えてみましょう。対象ユーザー（ペルソナ）のニーズを具体的に想像してみることが効果的です。そのユーザーが抱くであろう疑問点や検討ポイントを思いつく限り書き出してみると良いでしょう。

今回の仮想事例では、すでにプログラミングの学習経験がある人ではなく、これから学ぼうとしている人を想定しています。そのため、いきなり教材の充実度を説明する前に、「何から始めればよいのか」「自分の知識でも取り組めるのか」といった疑問があるのではないでしょうか。

サービスについて説明したい項目から考えるのではなく、ユーザーがまだわかっていないことから考えると、必要な情報が見えてきます。

参考記事：【実践編】ランディングページの成果を左右する業界別のユーザーニーズの捉え方

2.訴求できうる情報を書き出してみる

先にあげたユーザーの疑問点や検討ポイントで書き出したテーマに対して、どのような利点を訴求できるかを書き出す段階になります。あまり深く考えずに、数多く列挙してみることがポイントです。

ここでは、先ほど書き出した疑問と、サービス側が伝えられる情報を照らし合わせてみましょう。例えば「自分でも学べるのか？」という疑問に対して、「動画で学べます」と説明するだけでは、学習方法はわかっても、初心者が取り組める理由までは伝わらないかもしれません。教材のどの部分を見せれば、その疑問への答えになるのか？というところまで考えることで、訴求する言葉と、その根拠となる情報がつながってきます。

3.ユーザーが迷うポイント、不安になるポイントを洗い出し

ここではユーザーに情報を伝える順序を適切に構成する段階にあたります。ランディングページの性質上、上から下へとユーザーはスクロールしていくため、来訪ユーザーの状態や気持ちにあわせて、効果的に情報を並べていく必要があります。仮想事例をもとに、このユーザーはプログラミングを新たに学ぼうとしている段階であるため、オンラインサービスに限らず、様々な学習手段を比較検討している段階とも考えられます。こうしてユーザーのインサイトを俯瞰的に捉えてみることが重要になってきます。

また、比較される相手を、同じような動画学習サービスだけに絞ってよいのか？という点も考えておきたいところです。これから学習を始める人であれば、書籍で独学することや、教室へ通うことも選択肢になり得ます。その中で動画による自己学習を選んでもらうには、どのような点に納得してもらう必要があるのか。競合サービスの機能比較だけでは見えてこない、ユーザーの迷いを捉えることができます。

4.ユーザー心理をもとに組み立てる

このように、ユーザーが懸念しているポイントを整理したり、競合となりうる他の学習手段をまとめたりすることで、何をどの順番で伝えていけば興味を抱いてもらえるのか？を考える材料にすることができます。では、その結果、「自分でも学べるのか？ついていけるのか？」という不安を持ったユーザーが多いと仮定し、そのユーザーに納得してもらうための構成を組み立てみましょう。

ここで意識したいのは、同じ情報でも、伝える順序によって受け取られ方が変わるということです。「自分でも学べるのか」という不安が残っている段階では、教材が豊富であることを伝えても、かえって難しそうに感じられるかもしれません。まず取り組めそうだと思ってもらい、その先に学べる内容を伝えるというように、一つの説明で生まれた納得を、次の説明につなげていくことが構成を組み立てる上でのポイントになります。

5.伝えたい情報をレイアウトする

このように視覚に訴える形でレイアウトを組んでみることで、初めて具体的なイメージが見えてきます。その上で伝えたい情報を追加したり、変更したり、言い回しを変えてみたりと、細かいチューニングを行なっていきましょう。どのような配置やレイアウトがもっとも視覚的に魅力的かを含めていくつかのパターンを検証してみるのが良いでしょう。参考記事：情報量の多いLPをわかりやすくデザインする10の方法

レイアウトに落とし込むと、それまで文章だけでは気づかなかった問題も見えてきます。大切な説明なのに小さく埋もれていたり、一つのセクションに複数の話題が混ざっていたりすることもあるでしょう。その場合は、枠の中に収めることを優先するのではなく、もう一度、何を伝えるためのセクションなのかに立ち返ってみてください。原稿とレイアウトの両方を行き来しながら調整できることも、具体的なワイヤーフレームをつくる意味のひとつです。

良いワイヤーフレームは理屈だけでは作れない

今回できる限り、噛み砕いた形でランディングページの構成・ワイヤーフレームの作り方について解説してみましたが、実際に読んだだけでは理解が難しいかもしれません。自ら手を動かさなければ、得られない気づきがたくさんあります。

是非一度、自ら手を動かして、構成やワイヤーフレームをつくることがどういうことなのか？体験してみてはいかがでしょうか。

ワイヤーフレームづくりを省力化するCVXのご紹介

コンバージョンラボでは、ランディングページのテンプレートを200種類以上搭載したインハウスLP作成・運用支援ツール「CVX」を提供しています。このツールでは、完成したランディグページテンプレートに専用エディタで上書きするだけで、精度の高いランディングページが仕上がるため、上記のようなワイヤーフレームの工程を省きたいという方にもおすすめのツールです。無料トライアルも随時受付ていますので、是非お申し込みください。

CVXについて詳しく知りたい方はこちら

株式会社ヒプスター社が運営する「あるバイHR」にて弊社をご紹介いただきました。