さまざまなWebページのなかでも、CTA（Call To Action）に特化した広告用のWebページは「ランディングページ（LP）」と呼ばれます。ランディングページを作成する際は、コンテンツの流れや配置などの基本的な構成を表す設計図である「ワイヤーフレーム」を作成すると効果的です。
本記事ではランディングページのワイヤーフレームを作成する重要性や具体的な手順を解説します。また、作成時におすすめのツールや注意点などもご紹介するので、ぜひ参考にしてください。
ワイヤーフレームの作成は、Webサイトへの訪問者が意思決定をスムーズに進めるうえで重要な役割を果たします。企業側にとってもコンテンツの品質や作業効率の向上などのメリットが得られます。
本章では、ランディングページの作成においてワイヤーフレームが重要とされる5つの理由を解説します。
ランディングページの訪問者は「商品・サービスについてもっと知りたい」「詳しい資料が欲しい」など、何かしらの目的を持ってアクセスしています。
これらの情報はワイヤーフレームを作成する過程でわかりやすく整理されるため、訪問者は必要な情報を見つけやすくなります。
ワイヤーフレームは、訪問者の思考の流れに合わせて作成されるため、商品情報やCTAを配置する場所などが自然に最適化されます。
これにより、ワイヤーフレームを作成したサイトでは、訪問者がスムーズに意思決定を行うことが可能です。
ワイヤーフレームを作成すると、ランディングページの完成前に視覚的なイメージを共有できます。そのため、デザイナーやエンジニア、マーケター、クライアントなどの関係者が共通認識を持ってランディングページを制作できる体制が整います。
例えば、関係者間で画面のイメージを共有すると、認識のズレが起きにくくなり、プロジェクトの成功に向けてスムーズに業務を遂行できるでしょう。また、「ここにこんな情報を加えたい」「この情報をもっと強調したい」などの具体的な希望も伝えやすくなります。
ワイヤーフレームを作成して視覚的に情報を並べることで、実際のランディングページの訪問者に近い目線で内容を精査できます。その結果、情報の過不足や流れの良し悪しなどを判断しやすくなります。
例えば、「ほかに伝えるべきことはないか」「CTAはどこに配置するか」「どのような順番であれば訪問者の不安要素を解消しやすいか」などを見直し、コンバージョン導線の完成度を高めることが可能です。
ランディングページのデザインや説明文などを作成したあとに修正が発生すると、時間や費用のロスが大きくなってしまいます。
事前にワイヤーフレームを作成しておけば詳細を作り込む前にレイアウトやストーリーの完成度を高められ、後の工程で大幅な修正が発生しにくくなります。結果として、プロジェクトをスムーズに進められるでしょう。
ワイヤーフレームを順序立てて作成すると、効果的なランディングページに仕上げることができます。ここからは、ワイヤーフレームの作成手順を6つのステップに分けて解説します。
ワイヤーフレームは、ランディングページの目的となるコンバージョンによって適切な設計が変わります。まずは「商品の購入」「資料請求」「問い合わせ」など、訪問者に求めるアクションを具体的に設定しましょう。
また、ランディングページの訪問者を具体的に想定した「ペルソナ」を設定することも重要です。年齢や性別、住んでいる地域、家族構成などの人物像を明確にイメージすることで、言葉やビジュアル、訴求の流れを検討しやすくなります。
これらの手順は回り道のように感じるかもしれません。しかし、ランディングページの目的とペルソナが明確になれば後の工程と整合性が取りやすくなるため、結果的に、ランディングページの作成をスムーズに進められるでしょう。
ペルソナについて詳しくはこちらの記事でもご紹介しています。
続いて、設定したペルソナの情報を基に実際の訪問者が抱くであろう疑問や購入に迷うポイントなどを書き出し、整理します。そのうえで、自社の商材が訴求できるメリットを洗い出して、ランディングページに含めたい情報をまとめます。
ランディングページは、上から下へスクロールして閲覧される性質があります。そのため、ワイヤーフレームの構成を検討する際は、この性質を踏まえたうえで訪問者の心理状態を想像しながら、自社が伝えたい情報を効果的に並べることが大切です。
ワイヤーフレームの基本的な構成は次の通りです。
ランディングページの構成や要素について詳しくはこちらの記事でもご紹介しています。
ワイヤーフレームは、手書きでも作成できますが、ツールを選定することでより簡単に作成でき、共有しやすくなります。例えば、Excelなどの一般的な表計算ソフトのほか、ワイヤーフレームの作成に特化したツールも使用可能です。
おすすめのワイヤーフレームの作成ツールは、次の章で詳しくご紹介しますので、参考にしてください。
ツールを選定できれば、実際にワイヤーフレームを作成します。このステップでは、どのようなレイアウトにすれば、情報が視覚的にわかりやすく伝えられるかを意識して枠組みを決めることが重要です。
初めから完璧なワイヤーフレームを目指す必要はなく、都度修正を行いながら、ブラッシュアップしていくのがおすすめです。
ワイヤーフレームが完成したら、プロジェクトの各関係者にワイヤーフレームを共有し、フィードバックを受けます。ワイヤーフレームの作成段階で改善点を発見できれば、ランディングページの作成前に修正できるため、率直なフィードバックを集めることが重要です。
各関係者が納得できるまで修正を繰り返すことは手間に感じるかもしれませんが、積極的に改善に取り組み、より効果的なランディングページを目指しましょう。
こちらの資料では、効果的なランディングページを作成する方法などをご紹介しています。無料でダウンロードできるので、ぜひ参考にしてください。
ワイヤーフレームは手書きでも作成できますが、ツールを使用するとデザイン性が高まり、社内共有もしやすくなります。ここからは、ワイヤーフレームを作成する際におすすめの5つのツールをご紹介します。
出典：HubSpot
HubSpotが提供するContent Hubは、Webサイトやランディングページをノーコードで作成できるツールです。ドラッグ＆ドロップの直観的な操作で、誰でも簡単にランディングページを作成できます。AIが搭載されているので、クリエイティブ作成の大幅な効率化が実現します。
ワイヤーフレームの作成段階からContent Hubを使用することで、その後のランディングページ作成へとスムーズに移行可能です。
基本的な機能は、無料プランでも使用可能です。完成イメージも関係者間で共有しやすく、有効なランディングページの作成に役立つでしょう。
出典：Excel
ExcelやGoogle スプレッドシートなどの表計算ソフトは、方眼紙のように罫線を引くことでワイヤーフレームの作成に活用できます。
さまざまな企業の通常業務で使用されているため、社内外間のやり取りをスムーズに行える点がメリットです。また、グラフ機能を使えば、棒グラフや円グラフなどの視覚的にわかりやすい資料を作成できます。
【料金】
出典：Figma
Figmaは、WebサイトやUIデザインを作成するツールです。ワイヤーフレームを作成後、そのままデザインの作業も行える点がメリットです。
テンプレートが豊富に搭載されており、活用することで簡単にワイヤーフレームを作成できます。基本的な機能は無料で使用できるため、まずは試してみたい方におすすめのツールです。PCにインストールするほか、ブラウザ上で利用することも可能です。
【料金】
出典：Cacoo
Cacooは、複数人で共同作業ができるオンラインホワイトボードツールです。ブラウザ上でワイヤーフレームやマインドマップを作成でき、画面を共有する際は共通のURLを使用します。
30日間の無料お試し期間が用意されており、実際にツールを試すことが可能です。
【料金】
出典：MockFlow
MockFlowは、AdobeFlashのプラットフォームを使用したプロダクトデザインツールです。ドラック＆ドロップエディターを使用すれば、素早くワイヤーフレームを作成できます。
MockFlowではワイヤーフレーム以外にも、画面遷移の設計やAIを用いたUIデザインの作成が可能です。無料プランは基本的な機能を網羅しているので、ワイヤーフレームを作成するツールを検討している場合は試してみると良いでしょう。
【料金】
ランディングページのワイヤーフレームを作成する際は、実際の訪問者となる顧客視点に立つことが重要です。ここでは、ワイヤーフレームを作成するうえで心がけたい3つのポイントを解説します。
ワイヤーフレームを作成する主な目的は、ランディングページの構成を最適化することです。そのため、最初からキャッチコピーや説明文、画像などの細かい要素を作り込む必要はありません。
作成したワイヤーフレームは、社内のフィードバックを受けて調整することが前提です。細かく作り込むとかえって工数がかかるため、必要な要素をシンプルにまとめるように心がけましょう。
ワイヤーフレームの作成ツールやテンプレートには、頻繁に使用する図形や罫線などの素材が揃っているため、迅速にレイアウトを作成できます。
ツールによってはテンプレートが豊富に用意されています。適切なテンプレートを選んで要素を配置したりテキストを整えたりすれば効果的なワイヤーフレームが完成するため、ワイヤーフレームの作成に慣れていない方は積極的に活用すると良いでしょう。
CTAの位置や設置数は、ワイヤーフレームの作成段階で決定しておくことが重要です。ベネフィットの訴求や口コミの直後など、訪問者の関心が高まったり心理的なハードルが下がったりする位置にCTAを配置すると良いでしょう。
なお、訪問者が行動したくなるタイミングには個人差があります。そのため、CTAを複数か所に配置したほうがコンバージョンにつながりやすくなります。
効果的なキャッチコピーやデザインなど、ランディングページの効果を高めるCTAの作成方法についてはこちらのガイドもご覧ください。
情報整理や構成の組み立てを丁寧に行いワイヤーフレームを作成することは、訪問者に響くランディングページの制作に欠かせません。
ワイヤーフレームの作成に慣れていない方は、ツールに搭載されたテンプレートを利用するのもおすすめです。ぜひ、本記事でご紹介した手順を基に、自社の目的やニーズに合ったツールでワイヤーフレームを作成してみてください。