LPのワイヤーフレームの作り方【役立つツールやテンプレートも紹介】

LP（ランディングページ）の成果を最大化するには、設計段階での準備がとても大切です。特に、ページの流れや構成を視覚的にまとめるワイヤーフレームは欠かせない要素のひとつになります。

「効率的にワイヤーフレームを作る方法が知りたい」

「便利なツールやテンプレートを活用したい」

そんな方に向けて、本記事ではLPのワイヤーフレームの作り方や押さえるべき3つのポイント、作成に役立つツールなどをご紹介します。

この内容を参考に、より成果につながるLP設計に取り組んでみてください。

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

ワイヤーフレームは図形やテキストボックスで構成された、LPの設計図のようなものです。

ページのレイアウトやコンテンツの配置を、ワイヤー（針金）のフレーム（枠組み）のようにシンプルな線と図形を用いて表現するため、ワイヤーフレームと呼ばれています。

通常、ワイヤーフレームに細かなデザイン要素は含まれず、グレースケールやモノクロで作成します。

ワイヤーフレームを作ることでページのレイアウトやコンテンツの配置、主要な機能、ユーザーの導線などの全体像を視覚的に表現し、デザインの方向性を決定できるのです。

>関連記事：LP（ランディングページ）の基本的な構成や要素を図解付きで解説【テンプレートあり】

LPと通常のWebサイトのワイヤーフレームの違いとは？

LPのワイヤーフレームは特定のCV（コンバージョン）。ユーザーの望ましい行動のことで、申し込み・購入（問い合わせなどが含まれる）が目的で、基本的にシングルページで構成されます。

それに対して、Webサイトのワイヤーフレームは「企業情報」「ニュース」「採用情報」などの目的のために、複数ページのワイヤーフレーム作成が必要です。

作りたいページによって、ワイヤーフレームの形も変化します。

LPのワイヤーフレームを作る目的

ワイヤーフレームを作る目的は、下記の表のとおりです。

ワイヤーフレーム作成の目的

ワイヤーフレームを作っておくと、LPの作成時にさまざまな役に立つでしょう。

ワイヤーフレーム作成で押さえるべき3つのポイント

ワイヤーフレーム作成で押さえておきたいポイントは、以下の3つです。

順番に詳しく解説します。

1.成果の出ているLPを分析する

ひとつめは、成果を出している企業や競合のLPを分析し、チェックすることです。

ノーコードWeb制作プラットフォームStudioでLPを作成し、成果につながった事例を見てみましょう。

TONEBOOK / カシオ計算機株式会社

TONEBOOK｜カシオ計算機株式会社

カシオ計算機株式会社では、スマホから好きな音作りレシピを発見できるアプリ「TONEBOOK」のLPを、Studioを使用して作成しています。

ノーコードで作成できるため制作時間を3分の1ほどに短縮でき、ページ内にムービーを差し込むことで直感的にサービス内容の伝わるLPができました。

my route / トヨタファイナンシャルサービス株式会社

my route｜トヨタファイナンシャルサービス株式会社

トヨタファイナンシャルサービス株式会社では、Studioを活用し、おでかけ情報収集アプリ「my route」のLPを作成しています。

Webサイト制作を外注していた頃と比べ、年間100万円以上のコスト削減、制作期間も約1ヶ月から1日ほどへと大幅に短縮できました。

FAQページの更新も容易にできるようになったため、ユーザーからの問い合わせ数も減り、顧客対応の負担も軽くなっています。

このように、成果の出ているLPをよくリサーチし、自社で応用できそうな部分をカスタマイズして取り入れてみるとよいでしょう。

ほかのLP制作事例は以下のページから確認できます。

効率よくLP制作をしたい方は、以下からLPテンプレートをチェックしてみてください。

2.悩みを解決できるコンテンツ配置にする

ふたつめの押さえるべきポイントは、LP内でユーザーの疑問を解決し、自然にCVにつながるような導線を組むことです。

LPを見に来た段階では、ユーザーはいくつかの懸念点や不安を抱えていると考えられます。

たとえば、以下のようなものです。

このようなユーザーの悩みを、自然な流れで解決する導線を組むことがポイントでしょう。

3.直感的でスムーズなユーザー体験（UX）を提供する

3つめは、直感的でスムーズなユーザー体験（UX）を提供することです。UXとは「User Experience」の略語で、ユーザーが製品やサービスを利用した際に感じる体験のことを指します。

LPにおいては、画面の使いやすさや操作性、情報の見やすさなどが関連するでしょう。

また、デバイス別にデザインを設計することもポイントです。

総務省が令和5年に調査したデータによると、インターネットを見る際に使用するデバイスはスマートフォンと答えた方が72.9%と、もっとも多い結果になっています。

ワイヤーフレームはUXの基盤を作る作業です。ユーザーが迷わず、直感的に操作できるようにページ内の動線をシンプルにするとよいでしょう。

ほかにもCTAボタンやリンクの配置、スクロール動線、スクロールのタイミングなどを考えてワイヤーフレームを設計する必要があります。

LPのワイヤーフレームの作り方

LPのワイヤーフレームの作成手順は、以下になります。

• LPを作る目的と自社の情報を確認する

• ターゲットを分析する

• 全体の構成を考える

• ワイヤーフレームを下書きする

• 下書きしたラフを清書する

順番に見ていきましょう。

>関連記事：LP（ランディングページ）の基本的な構成や要素を図解付きで解説【テンプレートあり】

1.LPを作る目的と自社の情報を確認する

はじめに、LPを作る目的と自社の情報を整理します。

「申し込み」「お問い合わせ」など、LPのCTA（コール・トゥ・アクション。行動喚起のこと）を何にするかを決めましょう。

次に、LPに掲載する自社の情報を整理します。たとえば以下のようなものです。

• ベネフィット（顧客が得られる利益）

• 他社にはない独自の強みや技術

• 商品・サービスの概要（具体的な特徴や機能を説明する）

• 開発ストーリーやブランドの世界観

• 料金・プラン

• 導入実績数、利用者数などのデータ

• 訴求ポイントや競合と差別化できるところ

ページ内に入れたい要素をまとめておくことで、LPの作成時に役に立ちます。

2.ターゲットを分析する

次は、ターゲットの分析です。

定めるターゲットユーザーによって、ワイヤーフレームに入れる要素、構成、デザインは変化します。たとえば、20代女性と50代男性では、興味を持たせるためのデザインや文言が異なるでしょう。

ほかにも以下のような項目を仮に設定して、ターゲットのイメージを詳細化します。

＜例＞

• 名前：山田太郎

• 性別：男

• 年齢：54歳

• 居住地：東京都新宿区

• 家族構成：妻と子ども2人

• 職業・役職：不動産売買の営業職、部長

• 趣味嗜好：釣り、キャンプ

ターゲットをイメージして分析することで、訴求力の高いLPにするための方向性が見えてくるでしょう。

3.全体の構成を考える

ターゲットの分析を終えたら、全体の構成を考えましょう。

製品・サービスの特徴、信頼性のある証拠、CTAボタンなど要素をどの配置にするか、全体のレイアウトを組んでいきます。

近年ではスマートフォンでLPを見るユーザーも多いため、デバイスに合わせたデザイン（レスポンシブデザイン）も意識しましょう。

4.ワイヤーフレームを下書きする

構成が設定できたら、手書きやツールでワイヤーフレームを形にしましょう。

ユーザーの視線を、自然に誘導できるように設計することがポイントです。

ワイヤーフレームの下書きでは、直線や四角形、円などの基本的な図形を使って、ページ内の各要素を表現しましょう。

たとえば、「CTAボタン」「画像」「テキストブロック」「ナビゲーションバー」などの位置を示すために、それぞれの領域を四角形で描きます。

その図形の中に、「キャッチコピー」「CTA」「商品画像」など、仮のテキストを使って各セクションに何が入るのかを明示していきましょう。

ワイヤーフレーム作成後、コンテンツやレイアウトは調整できるため、最初から完璧に設定する必要はありません。

5.下書きしたラフを清書する

最後に、ツールを使って下書きしたラフを清書していきましょう。

この工程では、ボタンやフォームなど下書きで決めた要素の位置やサイズを調整し、より正確なレイアウトに仕上げましょう。色やフォントなどの細かいデザインは省略し、主に線やシェイプ（四角形、円形など）を使って配置を示します。

ワイヤーフレームはあくまで設計フェーズのもので、ビジュアルデザイン（モックアップなど）や実装は別工程です。

清書が終了すれば、ワイヤーフレームの完成です。チームで作業をしている場合は共有し、改善ポイントが見つかれば修正していきましょう。

実際のおすすめツールについては、次項で紹介しています。

LPのワイヤーフレーム作成に使えるツールとテンプレート

Studioはテンプレートをエディターで編集することで、ワイヤーフレームとして活用できます。チームメンバーとの共同編集も可能です。

ノーコードで作成できるため、難しいプログラミングの知識は必要ありません。

ただし、UI（ユーザーインターフェイス。ユーザーが製品やサービスを利用する際の接点のこと。LPにおいてはボタンやフォント、レイアウトがそれにあたる）構造設計に特化したサービスなどとは用途が異なります。

StudioにはLPテンプレートも揃っているため、ワイヤーフレームを作成せずともすぐにLP作成にとりかかることが可能です。詳しくは以下のページをご確認ください。

テンプレートをエディターでカスタマイズすれば、ワイヤーフレームとして使用できますし、チームメンバーとの共同編集も可能です。

テンプレートの内容や使い方を知りたい方は、StudioのYouTube動画で解説していますのでぜひご覧ください。

ツールを活用してワイヤーフレームを効果的に作成しよう

LPのワイヤーフレームは、情報の整理やレイアウトの決定、関係者間の認識共有などのために重要です。

ワイヤーフレーム作成のポイントは下記のとおりです。

• 成果の出ているLPを分析すること

• ユーザーの悩みを解決できる導線にすること

• 使いやすいUXを提供すること

ワイヤーフレームの作成には便利なツールを使うとよいでしょう。ポイントを押さえて効果的に作成すれば、LPの成果も目指せます。

より効率的にLPを作成したい方は、テンプレートや共有機能があるWeb制作プラットフォーム「Studio」がおすすめです。