LPのワイヤーフレーム作成5ステップ｜作り方のポイントやおすすめツールを紹介

LPのワイヤーフレームはサイト構築における重要な設計書

ワイヤーフレームはサイト構築における重要な設計書であり、LP構築時にまず作成するべきものです。ワイヤーフレームを作成せずにいきなり記事を執筆したり、挿入する画像を撮影してコーディングしたりすることはありません。

設計書を作成せずにLPを構築すると、途中で方向性を見失う可能性があります。サイト全体の作りを決める大事な要素となるワイヤーフレームは、作業をスムーズに進め、統一感のあるLPを構築するのが役割です。

LPは企業サイトの営業担当者的な役割

LPの目的はデザイン性の高いサイトを作ることではなく、サイトに訪れた消費者の購買を促進し、コンバージョンさせることです。サイトの内容だけで購入まで至らせる必要があるため、企業の営業担当と同様の役割を担います。

LP構築時は、どれだけ消費者に行動してもらえるかを考え、魅力的な商品紹介や購買に至りやすい導線などを細かく決めることが重要です。ワイヤーフレームを作成していないと、売上につながらないサイトを制作してしまう可能性もあるでしょう。

営業担当が動かなくても売れるサイトが作成できれば、企業にとっては大きな資産になります。品質の高いLPを作成するために、ワイヤーフレームをしっかりと作り込みましょう。

LP構築の際にワイヤーフレームを作成するメリット

LP構築の際にワイヤーフレームを作成する主なメリットは次の2つです。

下記で詳しく解説します。

担当者間での認識を統一できる

ワイヤーフレームを作成しておけば、担当者間での認識統一が図りやすくなります。設計書を見るだけでページの構成やコンテンツの配置、全体的なイメージが浮かびやすくなり、作業分担しても効率よく進めることが可能です。

LPの作成を制作会社に依頼する場合も、ワイヤーフレームがあれば認識を統一しやすく、スムーズに依頼できます。

LP制作にかかる時間やコストを削減できる

ワイヤーフレームがあれば、LP制作にかかる時間やコストの削減が可能です。設計書があることで自分たちが割り当てられている作業がページ全体のどの部分なのか、他のパーツとどのような関連があるかをすぐに理解できます。

スピーディーに作成でき、認識統一を図れるため手戻りにかかるコストが減らせるのもメリットです。企業によっては数多くのLPを作成しますが、ワイヤーフレームがあれば他のLPを作成する際の指標にもなります。

共通する仕様を持っていれば、時間と手間が省け、サイト間でのデザインの統一も図れて便利です。

理想的なLPのワイヤーフレーム

理想的なLPのワイヤーフレームは、次の2つが挙げられます。

下記で詳しく解説します。

ワンカラムのシンプルなデザイン

LPはサイドバーがないワンカラムのデザインになっているのが理想です。画像やポップを表示できる面積が大きくなり、視覚的な印象が強くなるメリットがあります。

キャッチコピーや商品説明などのテキスト説明も、通常よりフォントを大きくして見やすくするケースが多いです。

スマホでも見やすいデザイン

インターネットはスマートフォンからの使用率が最も高いため（※）、スマホファーストのデザインにすることが重要です。ワンカラムにすることで、画面が細かく分割されず、スマホ表示がしやすい作りになります。

縦スクロールで情報を連続して見られるデザインにすることで、ユーザーにもストレスを与えることなく、購買への導線もスムーズに配置できるでしょう。

レスポンシブ対応にするのは必須ですが、LP作成後は必ずモバイル版のデザインに表示ズレがないかを確認することが重要です。

※参考：総務省令和4年版「インターネットの利用動向」

LPのワイヤーフレーム作成に向けた事前準備項目

いきなりLPワイヤーフレームの作成へ入る前に、事前の調査・分析や準備が必要です。準備項目5つを紹介します。

自社商材を分析する

売り出していく商材を分析することから始めましょう。たとえば以下の条件によって、売り出し方や購入プロセスが異なり、LPの仕様も変わります。

他にも、商材の魅力や使うことのメリットを明確にしておくと、ページ内で強調するポイントを決めやすくなります。商材情報はLPのなかでも大切な項目のため、わかりやすいことが重要です。

もし製品開発元で説明のための画像や動画を用意している場合、ユーザーが参照できる仕様に変更し、LPに掲載するのもいいでしょう。

ターゲット（ペルソナ）を分析する

商材分析とともに、サイトに訪れるターゲット（ペルソナ）分析を実施しましょう。商品とターゲットによって訴求しやすいデザインは異なります。

年齢や性別など、商材の開発時に定めたターゲットをもとに、対象ユーザーのニーズをしっかり分析することが重要です。ユーザーが抱える不安を洗い出し、不安を払拭するような内容も盛り込めると購買欲向上が期待できます。

マーケットリサーチをおこなう

商材とターゲットが決まったら、同業他社のLPを訪れてライバルリサーチをすることが大切です。すでにライバル社が同じような手段で販売しているのか、どのようなオンラインコンテンツを持っているのかをチェックします。

LPは似たような内容になりがちのため、商材やターゲット分析から得た結果をもとに、他社サイトと差別化を図れるといいでしょう。

ページフォーマットを選定する

LPの方向性が決まったら、デザインをモバイルやPCなどの端末ごとに作成するか、レスポンシブデザインにするかのフォーマットを選定しましょう。

前述のとおり、モバイル版のデザインは必須で考える必要があります。

デザインに使用できる素材を確認する

LPは、使用できる素材が多いほどデザインが考えやすく、見やすいサイトにつながります。自社で使用できる素材を確認し、事前に用意しておくとスムーズに進めることが可能です。

素材サイトから使用する場合は、事前に許可が必要かを確認し、状況に応じて許可取りをしましょう。

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

事前準備ができたら、LPのワイヤーフレーム作成に移ります。本記事では、次の5ステップにわけて紹介します。ぜひ参考にしてみてください。

1. ページの流れを決める

ワイヤーフレームの基本構成として、まずはページ全体の流れを決定します。LPは、スムーズにスクロールしやすいことが成功の秘訣です。テンポよくコンテンツを配置することが重要です。

他にも、コンテンツの順番は大きな意味を持ちます。最上部でユーザーの心をつかみ、次に商品の特徴やメリットを理解させ、下部に利用者の口コミで購買意欲を持たせる流れにするとスムーズです。最後に購入フォームや問い合わせフォームを設置し、行動を促します。

上記のように、ユーザーの心の中をイメージしながら、流れを決めることが大切です。コンテンツが変遷するにつれて、ユーザーの購買意欲が高まっていくかを検討しましょう。

2. ページデザインを決める

流れが決まれば、次はデザイン案の選定です。ターゲティングで狙いを定めた層の好みや商品のイメージにあわせて、ページ全体のデザインコンセプトを固めます。

LPは、シンプルであまり色や装飾を多用しない方が、説明や画像に注目できて成果が上がりやすいです。たとえば、自然素材を特徴とする商品であれば、ソフトでナチュラルな雰囲気のイラストや風景を写した画像を使うなどの工夫ができます。

ユーザーが求めるイメージにあったデザインにすることで共感度を高め、商品への信頼度をアップさせることが重要です。記事の文体やアイコンデザインなども、イメージに沿っているか確認しましょう。

3. ワイヤーフレームのラフを作成する

デザイン案は、ラフに書き起こしましょう。この段階ではおおまかなデザイン案で構いません。手書きで作成する場合が多いですが、デジタルで作成したい場合はツールを使用する方法もあります。

ラフは、社内でイメージをすりあわせるために作成することが目的です。認識相違がないかをチェックできればいいため、完成度の高いデザインを求めて描きこむ必要はありません。

4. 制作会社に連携するための清書を作成する

社内でラフデザインのすりあわせが完了したら、制作会社へ依頼するためにデザイン案の清書に移ります。外部の制作会社ではなく、社内のデザイナーや制作担当に依頼する場合もあるでしょう。

清書では、制作会社やデザイナーに連携できるレベルのデザイン案を書き起こす必要があります。手書きではなく、ツールを使用するのがおすすめです。おすすめツールは後ほど紹介します。

5. 制作会社に依頼する

清書が完成したら制作会社に依頼しましょう。認識相違がないよう、念入りに打ち合わせすることが大切です。

制作会社に依頼する際の注意点

制作会社に依頼する際は、次のポイントに注意するとスムーズに進められます。

• トンマナを連携してルールの共通認識を図る
• 使用できる素材はすべて連携する

企業のイメージカラーや、デザインに関するレギュレーションが細かく決まっている場合は、制作会社にもトンマナを連携するとスムーズです。トンマナを決めることで統一感が増し、LPのUIやUXの向上にもつながります。

他にも、使用できる素材はなるべくすべて連携すると、制作会社もデザインや表現がしやすいです。デザイン案の時点で使用する素材が決まっているものは、使用箇所を指定して連携しましょう。

LPのワイヤーフレームを効率よく作成するためのポイント

LPのワイヤーフレームを効率よく作成するためのポイントを4つ紹介します。

下記で詳しく解説します。

サイト全体のテンプレートを決める

LPは複数のセクションで構成される場合が多いため、デザイン構成や色使いなどをあらかじめ決めて統一するとスムーズに進めやすいです。セクションやページごとにいちからデザインを考えると時間がかかり、統一感もなくなってしまいます。

テンプレートを作成しておけば、他のLPを作成する際にも流用できて便利です。

情報を盛り込みすぎない

LPには情報を盛り込みすぎないことも重要です。シンプルなデザインを意識し、魅力的なキャッチコピーや理解しやすい説明画像を用意することに力を入れるといいでしょう。

シンプルにすることで見やすさやユーザーの操作性が上がるとともに、LP構築もしやすくなり効率が上がります。

デザインに迷う場合はデザイナーに任せる

もしデザインに迷う場合は、ワイヤーフレームの作成段階からデザイナーに相談するのもひとつの手です。プロにコンテンツの配置やデザインを相談することで効率も上がり、いい仕上がりが期待できるでしょう。

掲載したい内容を自社で決めたら、デザイン部分はすべてデザイナーに任せる方法もあります。デザインに迷いながら妥協案を提出するよりは、はじめからプロに任せる方が満足のいくものを制作できるでしょう。

分析とフィードバックをおこなう

作成したLPは、公開後も分析とフィードバックを繰り返すと、品質向上に向けた改善案が出てくるでしょう。

はじめのうちはいくつかの異なるテンプレートを作り、どのくらい成果率の差が出るかを比較する方法もあります。トライアンドエラーにより成果率の高いテンプレートが作れたら、他のLPを作成する際にも利用できて便利です。

LPワイヤーフレーム作成に役立つツール

LPのワイヤーフレーム作成に役立つツールを2つ紹介します。

Googleスライド

Googleスライドは、Googleアカウントがあれば誰でも無料で使用できるツールです。パワーポイントと同様の資料が簡単に作成できます。

制作したファイルにリンクを貼ったり、チーム内で共同編集したりすることで、情報をいつでも共有できるのがメリットです。他のGoogle系のアプリとも組みあわせられるのも便利なポイントです。動きもスピーディーでサクサクと制作を進められます。

AdobeXD

AdobeXDは、デザインやレイアウト構成に適したツールです。有料かつAdobeアカウントが必要であることから、Googleスライドよりも始めるハードルは高いですが、その分複雑なレイアウトを自由に編集できます。

細かな点まで指定できるため、制作会社にも明確な指示が出せて便利です。操作はシンプルで、初見でもたいていの操作ができます。共有機能も充実しているため、チームで共同作業する際にも効率的でしょう。

まとめ

LPの構築にワイヤーフレームは欠かせません。本記事では、LPにおけるワイヤーフレームの作り方や、作成時のポイント、おすすめのツールを紹介しました。

売れるLPを作るには、制作会社選びも重要です。ホームページの作成やデザインでお困りの場合は『比較ビズ』に相談してみてはいかがでしょうか？

『比較ビズ』では、必要事項を入力する2分程度の手間があれば、優良なホームページ制作会社を探せます。複数の制作会社に無料で相談できるのも嬉しいポイントのため、ぜひ利用してみてください。

監修者のコメント

株式会社KOP

代表取締役 大石 和明

1987年、東京都大田区生まれ。2010年、ソフトウェア開発会社に入社。業務用クラウドサービスの開発に従事。在籍中は、自社サービスの開発業務をはじめ、顧客企業でのユーザー向けデモンストレーションにも多く携わる。2012年に退社後、中期の海外生活での経験を活かし、帰国後に大田区羽田にて民泊を創設し運営。2013年にホームページ制作を行う個人事業主として創業。その後2017年、株式会社KOPを設立し、代表取締役（現在）に就任。新規事業の立上げ〜収益化のノウハウを活かし、「デザイン×集客」に特化したホームページ制作・Webマーケティングを主軸とした売上アップの仕組み作りを得意としている。

詳しく見る

LP制作で非常に重要なのが、ユーザーの訪問から購入などの目的に向かって一直線で進む導線の設計。

本記事にもある通り、構想を練ることに多大な時間がかかるので、フォーマット化することで時間節約につながり業務効率化することができます。人間の行動にはある程度のパターンがあるため、その行動や感情のパターンに沿ったテンプレートを用意することは可能です。

また、文中の「LP用のワイヤーフレームを作る流れ」で紹介されているステップのうち、前半パート（「商材の分析」「ターゲットの分析」）がとても大事です。どれだけデザインが良く逸品のLPを制作しても、上記が疎かであれば売上には貢献しません。

「ワイヤーフレーム作り」となるとつい「ページの流れを検討」あたりから始めてしまいがちですが、その前段階の「商材の分析」「ターゲットの分析」もしっかりと工程に盛り込みましょう。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。