コラム コラム
コラム

LP(ランディングページ)のワイヤーフレームとは?作り方の流れから成果を出すLPデザインのコツまで詳しく解説

LP(ランディングページ)のワイヤーフレームとは?作り方の流れから成果を出すLPデザインのコツまで詳しく解説

LP(ランディングページ)を制作する前にワイヤーフレームを作らなければならないのは知っているけれど、具体的にどのような内容を盛り込めばよいのかよくわからないという人も多いでしょう。
この記事では、LP(ランディングページ)のワイヤーフレームの作り方の流れから成果を出すデザインのコツまで詳しく解説します。

LP(ランディングページ)のワイヤーフレームとは?

LPのワイヤーフレームとはLPを作るための設計図に例えることができ、LPを作るのに関わるディレクター・デザイナー・ライター・コーダーなどのスタッフにLPの意図や構成要素などのイメージを共有するのを目的として作られます。

建築家の人が設計図を引いた建物が素晴らしい建築として名前を残すように、LPも成果を上げるためにはワイヤーフレームに適切な情報をわかりやすく納める必要があるのです。

LP(ランディングページ)のワイヤーフレームの作り方

LPのワイヤーフレームの作り方の流れを3STEPに分けてご紹介します。あくまでも一例なのでご参考にしてください。

【STEP1】事前準備

LPのワイヤーフレームを効率良く作るためには、しっかりとした事前準備をしておくことが大切です。
事前準備で行うこととその内容をまとめてみました。

LPを作る目的決定とそれに合わせた情報収集

・LPを見た人が最終的に取ってほしい行動を考えそれを目的にする
・LPに掲載する他社と差別化できる自社の強み、ターゲット顧客が目的とする行動を取った場合のメリット、LPでアピールする商品詳細やお客様の声などの情報を収集する

ペルソナ設定

・自社の商品やサービスの理想的なターゲット顧客の人物像であるペルソナを設定する

フォーマットを決める

・PC・スマホ・タブレットなどの端末の横幅に合わせて自動的にデザインを変えてくれる仕組みのレスポンシブデザインを採用するか、端末ごとにデザインをするか決める

【STEP2】LPの構成を考える

事前準備ができたら、次はLPの構成を考えましょう。LPの基本的な構成は次の3つで成り立っています。
ファーストビューでユーザーの興味を惹き、ボディコピーでユーザーを説得し、クロージングでスムーズにLPの目的を達成するよう意識するのが大事です。

ファーストビュー

・ユーザーがLPに訪問した時に最初に目に入る部分

ボディコピー

・LPの中で商品やサービスの詳細を紹介する部分でユーザーの購入意欲をかきたてる役割を持つ

クロージング

・ユーザーが実際に行動を起こすために必要な部分で具体的にはCTAボタン(予約フォーム、購入フォームなど)を指す

LP(ランディングページ)のワイヤーフレームとは?作り方の流れから成果を出すLPデザインのコツまで詳しく解説

LPサイト構成参考

【STEP3】レイアウトを決める

レイアウトとは情報を配列することを指し、LPにおいてはキャッチコピー、画像、リードコピー、ボディコピー、CTAボタンなどを効果的に配列することを意味します。

レイアウトはLPがユーザーにもっとたくさん読まれ、反応してもらうのを目的に行うため、事前準備の段階でペルソナ設定がしっかりできていると、どのようなことを重視したレイアウトが望ましいかが見えやすくなるでしょう。

成果を上げるLPのデザインのコツとは?

成果を上げるLPをデザインするためには、どのようなことを意識してワイヤーフレームを作ればよいのでしょうか。

5つご紹介します。

消費者行動モデルを意識したデザインにする

2019年、Googleはスマホの普及によって24時間いつでも買い物ができるようになったことを背景に生まれた消費者行動モデルである「パルス消費」を提唱しましたが、パルス消費では、ユーザーがスマホで見つけた商品やサービスに対して瞬間的に購入意欲が高まり、そのまま購入するのです。
このことからパルス消費に対応したLPとするためには、ホームページのファーストビューで購買意欲が瞬間的に高まるよう工夫し、その購買意欲に応えられるようCTAボタンをLPの中で色味や形を統一してわかりやすい形で設置するのが大切だとわかります。
また2022年に公表された「令和4年版消費者白書」で、商品やサービスを購入する際に重視しているものをたずねた所、パルス消費をすることの多いZ世代では次のような結果となりました。

重視する内容品質・性能の良さ価格の安さ見た目・デザイン
10代後半94.2%92.5%83.8%
20代98.1%92.1%83.5%

このデータからLPでパルス消費に対応するためには、顧客へのベネフィット(商品やサービスから得られるうれしい未来)を伝えるため、品質や性能の良さ、価格、デザインについての情報をボディコピーに含めることが重要だと言えるでしょう。

視線誘導を意識する

視線誘導とは、LPなどホームページの画面を見るユーザーの視線の動きをスムーズに誘導するために使われるデザインの手法です。

視線誘導を意識したLPのワイヤーフレームを作ることには、次のようなメリットがあります。

·ユーザーがLPに滞在する時間が長くなる
·ユーザーがLPを読む順番を直感的に理解できるためストレスなく読み進められる
·ボディコピーを最後まで読んでもらえる
·情報が正確に伝えられる

LPのワイヤーフレームを作成する時に知っておきたい主な視線誘導の法則をご紹介します。

項目概要
Zの法則均等に配置された同じ情報を見る場合、視線は左上→右上→左下→右下とZの字を描くように動く
Fの法則文字が多い情報を読み取る場合、視線は左上→右上→左下→右下とFの字を描くように動く
Nの法則縦書きで書かれた文章を読み取る場合、視線は右上→右下→左上→左下とNの字を描くように動く

視線誘導を意識したLPのワイヤーフレームを作ることで、ユーザーに見てほしい順番で情報を見てもらうことができるでしょう。

キャッチコピーは表現方法を工夫する

キャッチコピーの目的はユーザーの興味を惹き、LPの続きを読みたくさせることなので、次のような表現の工夫をしてみることをおすすめします。

・無駄な言葉をできるだけ省いてテンポ良く読めるようにする
・「なぜ」「どうして」「理由」などユーザーに問いかける表現を使う
・ベネフィットを具体的な数値を使って表現する

短くても人目を惹く表現を心がけることで、続きを読んでもらえる確率は大きく上がるでしょう。

ボディコピーはストーリーテリングを意識する

ボディコピーを作成する際は、1つのストーリーを語りながら商品やサービスを紹介するのが効果的です。

この手法をストーリーテリングと言いますが、ストーリーは感情移入しながら読まれやすく、記憶に残りやすいことからボディコピーに取り入れると成果の上がるLPになりやすいのです。
ストーリーを作る際は、例えば次のことを意識してみましょう。

・共感できる主人公を設定する
・主人公が日常生活からどん底を味わい、困難を乗り越えて成功するというV字型のストーリーにする
・ストーリーから自然な形でセールスに移るようにする

V字型のストーリーにするのは、ユーザーの感情を大きく揺さぶることで印象に残りやすくするためです。
ただし作り話でユーザーの心を打つのは難しいので、ストーリーテリングをボディコピーに取り入れるのはそのような事実があった時のみにしましょう。

ボディコピーには続きを読みたくなるテクニックを使う

ボディコピーでは続きが読みたくなる次のようなテクニックを用いるのもおすすめです。
・一文を短くして読みやすくする
・同じ文末表現を繰り返すのは2回までにする
・問いかける表現を効果的に用いる

文末に問いかける表現を用いるとユーザーは続きを読みたくなりますが、むやみに増やすとかえって読みにくくなるため注意しましょう。

emo planningでは漠然としたニーズからでもお客様のホームページに最適なLPを制作します

当社ではホームページをただ作るのではなく、その効果について常に考えるようにしています。

効果にこだわって制作を行うので、制作後の運用施策も引き続きお引き受けし、クライアントと長く伴走するよう心掛けているのです。

LPはホームページを構成する要素の1つではありますが、LPを見たお客様が最終的に取ってほしい行動にスムーズにつなげることができるよう、運用しながら改善し続けていくのが望ましいと言えます。

始めてLP制作に取り掛かる方、今まで制作したLPで成果が上がらなかった方、どのようなお客様においてもまずはじっくりとお話をお伺いし、最適なご提案をさせていただきます。

長期的に成果が上がるLP制作をご希望の方は、ぜひ当社にご相談ください。

まとめ

LPのワイヤーフレームとはLPを作るための設計図に例えることができ、LPを作るのに関わるスタッフにLPの意図や構成要素などのイメージを共有するのを目的として作られます。
この記事も参考にして、ぜひ成果の上げるLPを目指したワイヤーフレーム作りに取り組んでみてください。

一覧に戻る

ホームページに関するお問い合わせ

合同会社emo planning
〒370-1111群馬県佐波郡玉村町南玉146-33

お問い合わせはこちら