LP（ランディングページ）を作成する際は、はじめにワイヤーフレーム（LPの設計図）を用意することをおすすめします。LPのコンバージョン率（CVR）は、ワイヤーフレームの完成度によって大きく変動するためです。

本記事では、ワイヤーフレームの基礎知識や作成方法を、実際の例を示しながら解説します。ワイヤーフレームの作成に役立つおすすめツールも紹介するため、LPの作成に課題を感じている方はぜひ参考にしてください。

LP作成時に重要な「ワイヤーフレーム」とは？

LPの作成時に重要な「ワイヤーフレーム」とはどのようなものなのでしょうか。以下では、ワイヤーフレームの基礎知識と、LP作成における必要性を解説します。

ワイヤーフレーム（WF）とは

出典：Figma

ワイヤーフレームとは、Webページのレイアウトやコンテンツの配置を示した設計図のことです。その名のとおり「ワイヤー（線）」「フレーム（枠組）」で構成されたWebページの骨組みを指します。

ワイヤーフレームは、コンテンツ・機能の位置関係やナビゲーションの流れなど、Webページの基本的な構造を表すためのものです。そのため通常は、デザインや装飾などといった余計な要素を排除して作成されます。

ワイヤーフレームを作成することで「何を」「どこに」「どのように」配置するのかが明確になるため、Web制作にかかわるすべての人のなかで共通認識を構築しながら作業ができるようになります。

LP作成時にワイヤーフレームは必要なのか？

ワイヤーフレームは、LP作成において必要不可欠です。

LPに掲載する情報は、メインメッセージやアイキャッチ画像、CTA、商品説明など多岐にわたります。これらを設計図なしで配置するとなると、後々になって「CTAはここにも追加が必要だった」「やっぱり情報の配置を入れ替えるべきだ」などといった課題が生じるおそれがあります。

このような修正を、本格的にデザインを作り込んだ段階で行うのは容易ではありません。いちから構成を作り直すことになるため、それまでに費やした工数やコストが無駄になってしまうのです。

ワイヤーフレームをあらかじめ作成しておけば、骨組みの段階で修正すべき箇所が明確になるため、LP構築の最終段階で大幅な修正が発生することはなくなります。ワイヤーフレームの作成は一見遠回りにみえるようで、実際はLPの作成を効率化してくれる手段なのです。

また、ワイヤーフレームはユーザーエクスペリエンス（UX）の設計にも役立ちます。「クリックしやすい位置にCTAが配置されているか」「コンテンツの配置はユーザーの思考プロセスに合致しているか」などを考慮しながら設計図を構築することで、ユーザーにとって使いやすく、わかりやすいLPが完成します。

ユーザーをコンバージョン（CV）へ導くうえでUXの向上は欠かせないため、効果の高いLPを作成するうえでワイヤーフレームは必須といえるでしょう。

≪関連記事≫
・LP（ランディングページ）とは？目的、HPとの違い、作り方やおすすめ作成ツール解説！

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

LP作成時にワイヤーフレームを用意する目的は、大きく2つあります。

• 関係者間でコミュニケーションを促進するため
• 合意形成を図るため

ワイヤーフレームは、プロジェクトをスムーズに進行するうえで重要な役割を果たすのです。以下で詳細を解説します。

関係者間でのコミュニケーション促進

ワイヤーフレームを作成する目的の一つは、関係者間でのコミュニケーションを促進することです。LPの公開に際しては、デザイナーやコーダー・エンジニア、マーケター、プロジェクトマネージャー、クライアントなどが関与します。これらすべての人が共通認識を持ってLPの作成を進めるうえで、画面のイメージを共有することは非常に重要です。

ワイヤーフレームを作成することで得られる効果には、以下のようなものがあります。

• 視覚的なイメージをもつことで、LPの全体像を把握しやすくなる
• デザインやレイアウトの具体性が増し、関係者間の認識の齟齬を抑制できる
• LPの設計や機能などに関して意見のすり合わせができるため、全員が同じ方向を向いて作業できる

関係者間で共通の理解を醸成できるため、プロジェクトの成功に向けてスムーズに業務を進行できるのです。

合意形成を行いながらLPの作成が可能

LPのみならず、Webデザインのプロセスには多くの工数が発生します。そのような状況下において、LPの構築がほとんど完了した段階で重要な関係者（クライアントや責任者など）から根本的な修正を依頼された場合、それまでに費やした多くの労力が水の泡となってしまいます。そのうえ、プロジェクト全体のスケジュール遅延も避けられなくなるでしょう。

ワイヤーフレームを作成すれば、企画の骨子段階でステークホルダーの合意を形成できるため、上記のような問題を防ぐことができます。デザインの方向性が正しいことを最終的な構築に進むまえに確認することで、無駄な修正・変更の発生を抑制できるのです。

さらに、ワイヤーフレームがあることで、関係者はLPについて具体的な議論を行いやすくなります。骨組み段階でさまざまな角度からフィードバックを収集できれば、関係者全員が納得する形にLPを進化させることが可能です。

LPのワイヤーフレームで可視化すべき要素

LPのワイヤーフレームで確認すべき事項は「どのような機能を実装するのか」「ユーザーをCVに導く導線は適切か」などです。そのため、要素の色や形といったビジュアルデザインは盛り込む必要がありません。

不必要な視覚的要素があると、設計にかかわるメンバーがLPの本質を理解する際の妨げになってしまいます。LPのワイヤーフレームには、以下で解説する要素のみを盛り込むようにしましょう。

エリア定義

ワイヤーフレームでは、LPの各セクションや領域について明確な役割付けをしておきましょう。LPは、通常以下の3エリアで構成されています。

ファーストビューは、ユーザーがスクロール不要で閲覧できる画面領域のことです。ユーザーは、ページを訪問した最初の10秒でページに滞在するか否かを決めるというデータもあります。そのためファーストビューでは「あなたが求めている情報はここにある」ということをはっきりと訴求し、ユーザーの離脱を抑制する必要があります。

ボディは、商材が「ユーザーの役に立つ理由」を根拠とともに解説するエリアです。商材に対しての理解を深めつつ、データの裏付けによって信頼性を高める役割を担います。

ユーザーにアクションを起こしてもらうには、彼らが抱えている不安や疑問をすべて払拭しなければなりません。このエリアでいかにユーザーをスッキリさせ、信頼感を高められるかがCVの成功率にかかわります。

そして、ボディによって不安が解消されたユーザーに、最後の決断を促すのがクロージングエリアです。「今決断すること」のベネフィットを提示することがポイントになります。

このように、LPのワイヤーフレームでは各エリアがどのような役割を担うかをあらかじめ定義しておきましょう。その結果、それぞれのエリアに盛り込むべきコンテンツがおのずと定まり、方向性にブレのないLPが完成します。

表示コンテンツの優先順位

LPの各エリアがどのような役割を担うかを定めたら、次はコンテンツを「どのような順番で」「どれくらいの大きさで」配置するのかを可視化します。

通常、LPの各エリアに表示させるコンテンツには以下のようなものがあります。

ほかにも盛り込みたい要素がある場合は、ユーザーのニーズと自社のアピールしたいポイントを鑑みてコンテンツの優先順位を検討します。

ユーザーの目線は「上から下」「左から右」に流れるため、それを見越して配置を決めることが大切です。コンテンツのサイズや余白の有無によってもユーザーの注目度合いが変化するため、優先度が高いコンテンツから配置を決めていきましょう。

一般的に、何度もスクロールしないと情報を確認できないページにユーザーはストレスを感じます。そのため優先順位が高い情報は、できる限り上部に配置することがポイントです。

コンテンツの種類

ワイヤーフレームでは、「アイキャッチはスライド画像で」「商品説明は動画で」「CTAはボタン型で」といったように、LPに盛り込むコンテンツの種類を明確化しておく必要があります。それぞれのコンテンツがどのような機能・役割を果たすのかを、各関係者が理解できるようにするためです。

出典：GeeksforGeeks「How To Create a Wireframe in Software Design?」

コンテンツの種類を可視化することは、レイアウトのバランス感や統一感を保つうえでも役立ちます。

LP ワイヤーフレーム例

「ワイヤーフレームとはどのようなものか？」を理解するうえでは、実際にワイヤーフレームの実物を参考にするのが近道です。以下では、見た目に違いのある数種類のワイヤーフレームを紹介するため、作成に使用するツールや精度によってどのような違いが生じるのかをご確認ください。

以下は、手書きでスケッチしたワイヤーフレームです。抽象的でざっくりしていながらも、構成や配置する要素については明確に定めています。

出典：ACADEMY「20 Wireframe Examples for Web Design」

同等に単純なワイヤーフレームでも、デジタルツールを用いると以下のようなものも作成できます。

出典：ACADEMY「20 Wireframe Examples for Web Design」

さらに精度の高いワイヤーフレームは、以下のようにより現物に近い仕上がりになります。

出典：Dribbble（Adam Kalin）

このように、ビジュアルデザイン（画像やコンテンツの色など）は可視化されておらず、「どのエリアにどのようなコンテンツを配置するのか」を線や枠組みで明確に表現しているのがワイヤーフレームの特徴です。

LPのワイヤーフレームの作成方法

ここではLPのワイヤーフレームを作成する手順を確認していきましょう。作成は、以下の5ステップに沿って行います。

1. 目的とターゲット層の明確化
2. 情報構成の検討
3. ワイヤーフレーム作成ツールの選定
4. ワイヤーフレームの作成・清書
5. フィードバック収集

1. LP作成の目的とターゲット層を明確にする

まずは、LPを作成する目的とターゲットユーザーを明確にすることから始めます。

LPは「ユーザーをCVに導く」ことに特化したページのため、ユーザーに最終的に起こしてほしいアクション（CV）をあらかじめ定めておくことが大切です。LPにおける代表的なCVの種類には、以下のようなものがあります。

• 商材を購入してもらう
• 資料のダウンロードと引き換えに連絡先情報を入力してもらう
• 機能や料金の詳細について問い合わせをしてもらう

最終目標が「購入」ならば、ユーザーの不安や疑問をLPのなかでしっかり解消したうえで、購買意欲を醸成できる情報（メリットや導入実績、お得情報など）を効果的に訴求する必要があります。

資料のダウンロードを促したい場合は、その資料がユーザーにとってどのように役立つのかを論理的に説明し、入力フォームへの導線をわかりやすく設計することが重要になるでしょう。

このように、LPで訴求すべきポイントや盛り込む内容、文言などは目的によって変わります。そのため「ゴール」は、ワイヤーフレーム作成の第一段階で明確化しておくことが大切です。

また、CVに導きたいターゲット層も同時に検討しておく必要があります。ターゲットセグメントに応じてLPを使い分けている企業も少なくないほど、ターゲットによって作成すべきLPの質は変わってくるためです。

たとえば、20代の女性ターゲットと50代の男性ターゲットでは、刺さるデザインや文言が異なるのは当然のことでしょう。ユーザーの行動を喚起するLPを作成するためには、目的の明確化とターゲット設定が必要不可欠です。

2. 情報構成を考える

次に、ワイヤーフレームの情報構成を検討します。

「ファーストビューのキャッチコピーとアイキャッチ画像でユーザーを惹きつけて、直下にCTAボタンを設置し、ボディには商品の特徴を説明したテキストを横並びで配置して……」といったように、ユーザーの思考プロセスを鑑みてコンテンツの配置・導線を最適化していく作業です。

情報構成を検討する際は、以下のポイントを考慮しましょう。

• ユーザーがスムーズに内容を理解できる流れになっているか
• ユーザーが求める情報をストレスなく取得できるか
• ユーザーがすぐにアクションを起こせるようCTAを効果的に配置しているか

情報構成は、LPの完成度を大きく左右する要素です。不安な部分がある場合は、ここで一旦関係者に意見を求めてもよいでしょう。

3. LPのワイヤーフレームを作成するツールを選定

続いて、ワイヤーフレームを清書するためのツールを選定します。

選択肢は手書きやExcelのほか、「Figma」や「Balsamiq」などといったワイヤーフレーム作成専用ツールもあります。専用ツールは直感的に操作しやすく、高品質なワイヤーフレームを作成可能です。各メンバーとの情報共有も効率化するため、活用を検討してみると良いでしょう。

ツールを選定する際のポイントは以下のとおりです。

• プロジェクトに必要な機能が過不足なく搭載されているか
• チーム全体が簡単に利用でき、操作方法をすぐに理解できるか
• 各メンバーが同時にワイヤーフレームを編集できるか
• 価格が予算に適しているか

これらの基準を考慮して、プロジェクトのニーズやチームの要件に最も適したワイヤーフレーム作成ツールを選択しましょう。

4. ワイヤーフレームを作成・清書する

用いるツールが定まったら、いよいよワイヤーフレームを作成していきます。ワイヤーフレームの作成に慣れてない場合や、ある程度作り込んだワイヤーフレームを作成する場合は、事前に手書きでおおまかなスケッチを行ってからツールで清書するのもよいでしょう。

ここでの注意点は、フォントや色などのビジュアルデザインを極力排除することです。余計なデザイン要素が盛り込まれていると、ワイヤーフレームの「実装すべき機能や導線設計を確認する」という本来の目的達成の邪魔になってしまいます。

「エリア定義」「表示コンテンツの優先順位」「コンテンツの種類」を可視化することを重要視しつつ、まずは実際に手を動かして作成してみましょう。いきなり完成形を目指さず、都度修正を行いながらブラッシュアップしていくことをおすすめします。

5. フィードバックを得る

ワイヤーフレームを作成し終えたら、各関係者にワイヤーフレームを共有しフィードバック（改善提案）を得ます。

フィードバックは、LPの完成度を高めるうえで必要不可欠です。ここでしっかりワイヤーフレームを突き詰めることで、優れたユーザー体験（UX）を生み出すLPに進化させることができます。

ワイヤーフレームの段階で修正箇所が明確になれば、LPの細部を作り込むまえに方向性を改善可能です。あとから修正するのは大変なため、ここで複数の関係者からの率直なフィードバックを得て、さまざまな角度からワイヤーフレームを評価することが重要になります。

提案された変更箇所をワイヤーフレームに適用し、また関係者に共有する、という流れをステークホルダー全員が納得できるまで繰り返すことが大切です。

LPのワイヤーフレームの種類

ワイヤーフレームには、特徴や精度が異なる以下4つの種類があります。

• 手書きワイヤーフレーム
• ローフィデリティ（Low-fidelity）ワイヤーフレーム
• ミッドフィデリティ（Mid-fidelity）ワイヤーフレーム
• ハイフィデリティ（High-fidelity）ワイヤーフレーム

それぞれの詳細を実際の図面とともに確認していきましょう。

手書きワイヤーフレーム

手書きのワイヤーフレームは、ペンと紙や、ホワイトボードを用いてスケッチするという最もシンプルな方法で作成されます。構造やデザインを端的に示すうえで、余計な手間がかからないことがメリットです。

手書きとはいえ、以下のようにある程度作り込んだワイヤーフレームを作成することもできます。

出典：ACADEMY「20 Wireframe Examples for Web Design」

手書きでワイヤーフレームを作成するデメリットは、手書きの取り組みをデジタル化する手間が発生することです。あくまで手書きのスケッチは「下書き」としてアイディア創出目的で活用し、細部を表現する際はワイヤーフレーム作成ツールを使用したほうが効率的に作業を進行できるでしょう。

ローフィデリティ（Low-fidelity）ワイヤーフレーム

ローフィデリティ（Low-fidelity）ワイヤーフレームとは、詳細な部分を作り込まない簡素なワイヤーフレームを指します。「fidelity」は、デザインの精度や詳細度を指す用語です。つまり、ローフィデリティワイヤーフレームは「低精度なワイヤーフレーム」と言い換えることができます。

通常この種類のワイヤーフレームは、スケッチやシンプルな図面で作成され、デザインの詳細は排除されます。一例として、以下のローフィデリティワイヤーフレームをご覧ください。

出典：ACADEMY「20 Wireframe Examples for Web Design」

コンテンツの種類・配置を線と枠線で表現し、要素の重要度は色の濃淡で示していることがわかります。

ローフィデリティワイヤーフレームは、あとで作り直すことを前提とした下書きのようなもので、作成に多くの時間を要しません。そのため、以下のようなタイミングで使用されることが一般的です。

• LPのデザインを始めたばかりのとき
• 複数のワイヤーフレームを作成する必要があるとき
• プロジェクトを迅速に完了する必要があるとき

ミッドフィデリティ（Mid-fidelity）ワイヤーフレーム

ローフィデリティワイヤーフレームを一歩発展させたものが、ミッドフィデリティ（Mid-fidelity）ワイヤーフレームです。ミッドフィデリティワイヤーフレームでは、要素間の余白や見出し、ボタンなどをより詳細に示します。

出典：DIGITALSILK「What Is A Wireframe In Web Design?」

最終的なUIデザインに近い精度で作成するため、通常は専用のワイヤーフレーム作成ツールを用いて作成します。ミッドフィデリティワイヤーフレームを活用すべきタイミングは以下のとおりです。

• 複数のページで構成されるWebサイトを設計するとき
• ローフィデリティワイヤーフレームの品質を向上させたいとき

プロジェクトに時間の余裕がある場合は、ローフィデリティワイヤーフレームを作成した次の段階としてミッドフィデリティワイヤーフレームを作成することもあります。特に、デザインの詳細やスタイルについて早期に確認したい場合や、クライアントにデザインのビジョンをより具体的に伝えたい場合には、ミッドフィデリティワイヤーフレームが役立つでしょう。

ハイフィデリティ（High-fidelity）ワイヤーフレーム

ハイフィデリティ（High-fidelity）ワイヤーフレームは、LPの完成形に最も近い形を表現できるワイヤーフレームです。前述した2種類のワイヤーフレームよりも作成に多くのリソースが必要となるため、ワイヤーフレームの草案がすべての関係者に承認され、方向性が確立した段階で作成すべき種類だといえます。

ハイフィデリティワイヤーフレームは専用のワイヤーフレーム作成ツールで作成され、以下のようにコンテンツの内容や構成が精密に表現されていることが特徴です。

出典：ACADEMY「20 Wireframe Examples for Web Design」

ハイフィデリティワイヤーフレームを活用すべきケースは以下のとおりです。

• 完成形のイメージを他者に共有したいとき
• ユーザーインターフェイス（UI）要素をより正確に判断したいとき

ステークホルダーにプレゼンテーションを行う際に活用すれば、相手に具体的なイメージを伝えられることに加え、作り手のプロフェッショナリズムを示す効果もあります。開発チームに対して、実装するデザインを詳細に指示したい場合にも役立つでしょう。

ハイフィデリティワイヤーフレームの作成には時間と予算がかかるため、使いどころを十分に吟味したうえで活用することをおすすめします。

LPのワイヤーフレーム作成ツール

ワイヤーフレームを作成する際に役立つツールを紹介します。無料で活用できるものから、本格的な専用ツールまで幅広く取り上げるため、ぜひ参考にしてください。

手書き

「とにかく手軽に作成したい」「まずは下書きから始めたい」という場合は、手書きでワイヤーフレームを作成してみましょう。直感的にスケッチできるため、即座にアイディアを形にできます。

デジタルツールでは実現しにくいクリエイティブな表現が可能で、デザインに個性が加わることが特徴です。ふと思い浮かんだアイディアをメモしておく際にも役立つでしょう。

ただし、手書きには以下のようなデメリットがあります。

• 修正や変更に時間がかかる（一から書き直しが必要になる場合もある）
• 要素を正確に表現しづらい（コンテンツのサイズなど）
• 複数人での編集・共有がしづらい

これらを考慮すると、通常はデジタルツールを使用して作成するほうが効率的に作業を進行できます。特に、精度が高いワイヤーフレームを手書きで作成するのは非効率なため、中精度～高精度のワイヤーフレームを作成する際は専用ツールを用いることをおすすめします。

Figma

出典：Figma

Figmaは、ブラウザ上で簡単に使えるデザインツールです。Microsoftや楽天、Zoomなど国を問わず多数の有名企業で導入されています。ソフトをインストールする必要がなく、ブラウザさえ起動できれば場所を問わずにファイルへアクセスが可能です。

Figmaの主な特徴やメリットには、以下のようなものがあります。

• 【デザインの共有がしやすい】URLを共有するだけでチームメンバー全員が同じファイルを編集・閲覧できる。
• 【無料で利用可能】「スタータープラン」は無料かつ無制限に利用可能。（ファイル数制限あり）
• 【常に最新データが維持】作業がリアルタイムで反映されるため、都度保存する必要がない。

アメリカで開発されたツールである一方、国内ユーザーも多いことから、2022年には日本法人が設立されました。日本語サポートも徐々に充実してきているため、今後さらなる利便性の向上が期待できます。

Excel

エクセル（Excel）は、米Microsoft社が提供している表計算ソフトです。業務で日常的に使用している方も多いツールですが、ワイヤーフレームはExcelでも作成できます。

Excelでワイヤーフレームを作成する最大のメリットは、新しいツールの操作方法を学ぶ必要がないことでしょう。Excelを使い慣れている組織にとっては、日常業務の延長線上で作業ができるため、ワイヤーフレーム作成のハードルが低くなります。すでに組織内でライセンスを取得している場合は、追加コストが発生しない点もメリットです。

以下のようなアバウトなものであれば、専門知識がなくても簡単に作成できるため、デザイン初期の段階では活用しやすいでしょう。

ただし、Excelはワイヤーフレーム専用ツールではないため、複雑なデザインを施すための機能は搭載されていません。「ワイヤーフレームの下書きを迅速に作成したい」という場合に活用してみるとよいでしょう。

miro

出典：Miro

Miroは、複数人での共同作業を実現するオンラインホワイドボードツールです。オンライン会議におけるホワイトボード機能をはじめ、プロジェクト管理機能やマインドマップ機能、ワイヤーフレームツールなどが搭載されています。

テンプレートやワイヤーフレームライブラリが用意されているため、ごく短時間でデザイン作成を実現できます。パーツをドラッグ＆ドロップするだけの直感的な操作により、Webデザインの知識や経験がなくても簡単にワイヤーフレームを作成可能です。

Miroの特徴やメリットは以下のとおりです。

• 【すべての情報を一箇所に集約可能】フィードバックの収集や議論など、すべてのコミュニケーション履歴を1つのボード内に収集できる。
• 【リアルタイムな共同作業】コメントや＠メンションなどで意見交換を活性化しつつ、複数人でリアルタイムにデザインを作成・編集可能
• 【豊富なテンプレート】複数のワイヤーフレームテンプレートを活用できる

ただしMiroは、ワイヤーフレームを作成したあとのデザインフェーズには対応していません。UIデザインやビジュアルデザインを設計する際は、Figmaをはじめとするデザインツールが別途必要になります。

デザインフェーズへ移行する際の手間を最小限に抑えたい場合は、はじめから専用のデザインツールでワイヤーフレームを作成することをおすすめします。

Adobe XD

出典：Adobe

Adobe XDは、米Adobe社が提供するWebデザイン・プロトタイピング用のソフトです。同社のグラフィックデザインツールではPhotoshopやIllustratorが有名ですが、Adobe XDはUI/UXデザインに特化しているため、ワイヤーフレームの作成には最適なツールだといえます。

デザイナーや開発者などのプロフェッショナルに広く活用されているツールですが、Adobe XDは2023年1月に単体販売を終了しています。Adobeのサブスクリプションサービス「Creative Cloud」において、アプリ使い放題のコンプリートプランを契約すれば使用可能であるものの、現在Adobe XDのアップデートはほとんど行われていません。

今後も開発の継続や新機能の追加はそれほど見込めないため、これからデザインツールを導入しようと考えている方は、Adobe XD以外の選択肢を検討したほうがよいでしょう。

Sketch

出典：Sketch

Sketchは、オランダのBogemian Coding社が提供するMac OS用のデザインツールです。世界中の多くのデザイナーに愛用されており、長年にわたってUIデザインをけん引してきたサービスだといえます。

SketchはWeb制作に特化しているため、ワイヤーフレーム作成はもちろん、プロトタイプ検証も可能です。主な特徴やメリットは以下をご覧ください。

• 【動作が軽い】グラフィックツールと比較して圧倒的に軽快に動作する。
• 【直感的な画面操作】操作が簡単で学習コストが低い。
• 【豊富な外部連携】外部連携できるサービスが多いため、データ移行の手間がかからない。

SketchはMac専用ツールのため、利用できるユーザーが限定されることがデメリットです。加えて、ローカル環境へのインストールが必要なことから、ブラウザ上で機能するFigmaのような製品を求めている場合には不向きだといえます。

オフライン環境でも作業したい場合はSketch、複数のユーザーでリアルタイムに共同作業を行いたい場合はFigmaのほうに分があるでしょう。

Balsamiq

出典：Balsamiq

Balsamiqは、米Balsamiq Studios LLCが提供しているワイヤーフレーム作成ツールです。シンプルで直感的なインターフェースが特徴で、ドラッグ＆ドロップでワイヤーフレームの構成要素を組み立てることができます。

主な特徴やメリットは以下のとおりです。

• 【豊富なパーツ類】ワイヤーフレームに必要なパーツが揃っており、1から作成する必要がない。
• 【手書き風のデザイン】パーツがあえて低精度に作られているため、ユーザーはアイディアの創出に専念できる。
• 【ワイヤーフレームの作成に特化した機能】余計な機能が搭載されていないがゆえ、操作に迷うことなく瞬時にワイヤーフレームを作成できる。

Balsamiqは、あくまでローフィデリティワイヤーフレームを作成するためのツールです。そのため精度の高い洗練されたデザインを作成したり、ボタンの色やフォントなどを細かく設定したりすることには不向きだといえます。

デザインを公開できる状態まで作り込む場合は、FigmaやSketchのようなデザインツールを検討しましょう。

ワイヤーフレーム、モックアップ、プロトタイプの違いとは

ワイヤーフレームと類似した言葉に「モックアップ」「プロトタイプ」があります。それぞれの用途や特徴は以下のとおりです。

以下では、それぞれの用語の意味やワイヤーフレームとの違い、どのように使い分けるべきなのかを解説します。

モックアップとは

出典：Justinmind

モックアップとは、Webページの完成形を視覚的に表現したものです。実物のように作成された「模型」と考えるとわかりやすいでしょう。

モックアップの特徴は、ワイヤーフレームにはない要素（色、コントラスト、イメージ画像など）が含まれることです。完成形のイメージがより詳細に伝わるため、開発フェーズに入るまえに関係者全員でデザインの確認を行う際に役立ちます。

モックアップは、ワイヤーフレームでLPの基本的な骨格を構成したのちに作成されることが一般的です。ただし、小規模なプロジェクトや単純なデザインの場合、モックアップがワイヤーフレームを兼ねることもあります。

なお、モックアップには操作性や機能性などの動的な要素は含まれません。あくまで静的なイメージを再現する目的で活用され、動作を確認する際には別途「プロトタイプ」を作成します。

プロトタイプとは

出典：Mockplus

プロトタイプとは、Webページのデザインや機能を実際に動作する形で作成した試作品のことです。LPのユーザビリティを評価し、機能やナビゲーションのテストを行ううえで使用されます。

プロトタイプは、モックアップに動的な要素を追加したもので、クリックやスクロールなどの操作を通じてLPの挙動をシミュレーションできます。検証・改善を繰り返して複数回作成するため、関係者全員にワイヤーフレームおよびモックアップの承認が得られてから作成することが一般的です。

LPにおける課題の抽出や改善に役立つことはもちろん、「ユーザーがCVに至る道のり」を実際の動作を通じて評価することができます。

それぞれどのタイミングで活用するのか？

ワイヤーフレーム、モックアップ、プロトタイプは通常、以下のように使い分けがなされます。

• ワイヤーフレームを使うタイミング

LPデザインの初期段階で活用します。ワイヤーフレームが関係者全員に承認されたのちにモックアップを作成するため、モックアップの作成段階に入ってからワイヤーフレームを修正することは基本的にありません。

• モックアップを使うタイミング

ワイヤーフレームの完成後、さらに詳しくデザインの細部を表現するために作成します。最終的な試作品である、プロトタイプの作成準備として活用されることが一般的です。

モックアップはLPの完成形を視覚的に表現しているため、ステークホルダーにLPのデザインをプレゼンテーションする際にも役立ちます。

• プロトタイプを使うタイミング

モックアップが承認されたのち、LPデザインの最終段階で活用します。プロトタイプの目的は、本番実装前に修正すべき箇所をすべて洗い出し、改善することです。実際の動作をテストし、フィードバックをもとに改良を繰り返すため、結果としてプロトタイプは複数回作成することになります。

高精度なプロトタイプは、ユーザビリティテストやステークホルダーへのプレゼンテーションにも使用されます。

作成・使用の順番は必ずしも「ワイヤーフレーム→モックアップ→プロトタイプ」でなければならないというルールはありません。プロジェクトによっては、モックアップを作成せずにプロトタイプを作成する場合や、これらの工程が同時に進行する場合もあります。

ワイヤーフレーム、モックアップ、プロトタイプの作成順序や進行方法は、プロジェクトの目標や作業スタイルによって柔軟に変更可能です。

まとめ

LP作成におけるワイヤーフレームは、関係者間のコミュニケーションを強化し、プロジェクトをスムーズに進行するうえで重要な役割を担います。さらに、ページの使いやすさやわかりやすさをユーザー目線で検証できることから、結果としてCVR向上に直結するLPへと進化させることにも寄与します。

完成度の高いLPを目指すうえでは、適切な手順を踏み、チーム内外のコミュニケーションを重視しながら制作に励むことが大切です。ぜひ本記事で紹介した内容を参考に、ワイヤーフレームの作成にチャレンジしてみてはいかがでしょうか。