LP（ランディングページ）のワイヤーフレームの作成手順【2024年最新版】

LP（ランディングページ）を制作する際には、ワイヤーフレームをどのように作成するのかが非常に重要です。しかし、ワイヤーフレームの役割や作成手順などがわからず悩んでいるという方も多いでしょう。そこで今回は、ホームページ制作会社などさまざまな外注先を比較検討できる「アイミツ」が、LPのワイヤーフレームとは何なのか解説するとともに、作成手順や成功させるためのポイントを紹介していきます。LP制作を検討中という方は、ぜひ参考になさってください。

【相談前にまずは会社一覧を見たいという方はこちら】
ランディングページ（LP）に強いホームページ制作会社一覧

【費用感を知りたいという方はこちら】
LP制作（ランディングページ）の費用・相場

ワイヤーフレームについて詳しく知りたい方は、以下の記事も参考にしてください。

はじめに、LP（ランディングページ）のワイヤーフレームとはどのようなものなのかを確認していきましょう。まずはランディングページ制作の流れを紹介してから、ワイヤーフレームの役割について解説していきます。

ランディングページ制作は、基本的に以下の流れで進んでいきます。

1.企画、目的設定
2.ターゲットや訴求方法の設定
3.構成、ワイヤーフレームの作成
4.コンテンツライティング
5.デザイン制作
6.コーディング
7.リリース、効果測定

どの工程も欠かすことができず、非常に重要であることは間違いありませんが、なかでも重要なのが3ステップ目の構成やワイヤーフレームの作成です。ちなみに、もしもLP制作を外部のWeb制作会社に外注するという場合には、ワイヤーフレームを用意していなくても問題はありません。

LP（ランディングページ）制作におけるワイヤーフレームの作成は、そのあとのコンテンツ制作やデザイン、コーディングなどを進める上で非常に重要な役割を持っています。ワイヤーフレームは言わばLPの設計図。LP内のどこに、どのようなコンテンツを配置するのかをわかりやすく示すことによって、完成イメージを共有でき、スムーズにLP制作が進んでいくと期待できるでしょう。

つまり、LP制作において適切にワイヤーフレームを作成することは、スピーディな納品や修正時間のカットなどにもつながると言えます。

ワイヤーフレームと一口に言っても、その種類は1つではありません。潜在ユーザー向けと顕在ユーザー向けの2つに分けられるため、それぞれどのような内容なのか確認していきましょう。

潜在ユーザー向けのランディングページ、及びそのワイヤーフレームとは、TwitterやInstagram、FacebookなどをはじめとするSNS広告からの遷移先URLを想定して作成されます。

潜在ユーザーが対象となるため、CTA（＝Call To Action：行動喚起）の目標はそこまで高めに設定する必要がありません。ある程度製品や商品に対する安心感を与えつつ、フォームと一体になったページをベースとしてワイヤーフレームを作成しましょう。

一方顕在ユーザー向けのランディングページ、及びワイヤーフレームを作成する場合には、SNS広告ではなくリスティング広告をクリックした遷移先URLとして制作する必要があります。これはリスティング広告が、ニーズが明確化している顕在層をターゲットとした広告だからです。

顕在層は、製品やサービスに対してのニーズがすでに高まっている状態であることから、CTAのハードルを高めに設定しておくことが効果的です。検討フェーズに応えるための「お問い合わせ」や「お申し込み」、「資料請求」などといったCTAコンテンツを盛り込んで構いません。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

それでは、LP（ランディングページ）のワイヤーフレームを作成する際にはどのような手順に沿って行われるのか確認していきましょう。

LPのワイヤーフレームを制作する際には、分析による情報整理を経たのちに訴求ポイントを明確にしておきましょう。ここで行う分析でおすすめなのが、3C分析です。市場や顧客、競合、そして自社のそれぞれの現状をきちんと把握することによって、今後の市場動向やニーズなどを把握できます。

分析を行うことによって競合他社のアピールポイントや弱みを掴めるため、一方で自社はどのような強みがあるのかも同時に把握でき、自社がアピールするべき訴求ポイントを明確にできるでしょう。

ワイヤーフレームを制作する上での訴求ポイントの把握まで完了したら、ユーザー心理をベースにストーリーを構成していきましょう。

このフェーズでは、ユーザーがどのようなことに悩んでどのような解決策を求めているのかをはじめ、生活環境や性格などといった細かなポイントまで分析し、どのようなストーリーであれば訴求できるのかを考える必要があります。ユーザー心理を軸とすることを忘れずに、「結・起・承・転」と呼ばれるランディングページならではの流れに沿ってストーリーを構成しましょう。

ランディングページのストーリー構成まで完了したら、レイアウトを設定しワイヤーフレームを具体的に作成していきましょう。先にも述べたとおり、ランディングページにおけるワイヤーフレームとは、設計書のようなもの。完成イメージを共有するためにも、イメージ通りのデザインに仕上げて修正を減らすためにも重要となります。わかりやすいワイヤーフレームを作成することを心がけながら進めていきましょう。

最後に、ワイヤーフレームを作成する上でどのようなポイントをおさえておくべきなのかを確認していきましょう。

ワイヤーフレームを作成する際には、競合他社のランディングページを参考とすることも効果的です。

例えば競合他社が公開しているランディングページを確認してみると、どのような構成でどのような要素を盛り込み、どのようなCTAが設置されているのかなどといった点を参考にすることができます。勉強の一環として、他社ランディングページを参考にワイヤーフレームを書いてみるのもおすすめでしょう。

ワイヤーフレームを作成するにあたってLPのストーリーを構成する際には、PCやスマートフォンなどではなく手書きで行ってみるのも効果的です。

紙にストーリーを書き出すことによって全体の流れを把握しやすいほか、クライアントの事前すり合わせもしやすい、他者からのフィードバックや意見なども反映しやすいなどといったさまざまなメリットがあるため、まずは手書きでストーリー構成を考えてみましょう。

つづいては、ホームページ制作を外注した際にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

今回は、LP（ランディングページ）制作におけるワイヤーフレームの作成について解説してきました。ワイヤーフレームの作成は、顧客分析や競合分析、自社分析、ユーザーニーズを元にしたストーリー作成などを行う必要があり、これまでにLP制作の経験がないという場合にはなかなかハードルが高いかもしれません。

それでもLPの成果をあげたいという場合には、LPに強いホームページ制作会社に依頼するのも1つの手段です。アイミツではご要望を伺った上で、条件に合うLPに強いホームページ制作会社を無料で複数社ご紹介可能です。会社選びでお困りの方は、お気軽にご相談ください。

【相談前にまずは会社一覧を見たいという方はこちら】
ランディングページ（LP）に強いホームページ制作会社一覧

【費用感を知りたいという方はこちら】
LP制作（ランディングページ）の費用・相場