ワイヤーフレームの作り方！LP制作で成果を上げるために

2022.9.9

LPだけに限らず、Webマーケティングにおいて重要な役割を担っているワイヤーフレーム。自社でLPを制作する場合から、制作会社へ依頼する場合まで幅広い面でワイヤーフレームの構築は大切です。

そもそもワイヤーフレームとはどういうものなのか、どのように設計していけばいいのか。

今回はLPで効果を発揮させるためにも見直してほしいワイヤーフレームのポイントなどと合わせて、その重要性について解説します。

1：ワイヤーフレームとは設計図？
2：成果を上げるワイヤーフレームの設計とは
3：□ワイヤーフレームを作成しなければいけない理由とは
●□ワイヤーフレーム作成時の注意点をご紹介！
5：ワイヤーフレーム設計のポイント
- 「ながら」の制作はNG
- 成功事例のパターンを活用する
6：まとめ

ワイヤーフレームとは設計図？

LPなど、Webページのコンテンツや情報などを一面に表示したものをワイヤーフレームと言います。制作の指示を出すディレクターやデザイナー、コーダーといった各担当者と制作の完成図の認識を合わせるための橋渡しとしての役割を持っています。

「どのコンテンツをどこに、どのように配置するのか」といったレイアウトの設計図を目に入る図にしておくことで、制作途中や制作後の認識違いを軽減することにも繋がります。

一般的にデザインやコーディングといった工程の前に作成されます。例えば家を建築する際の設計図面や、絵を描く前のラフ画といったようなものです。

要注意！LPで効果を出すなら構成が重要？

2019.09.03

成果を上げるワイヤーフレームの設計とは

制作会社へ依頼する際に、説明が足りていなかったのではないか。また修正に時間がかかると実際にリリースするまでに時間もかかってしまいます。また制作会社にとっても、制作を急かされてしまったり、両者にとって制作に不安がある。

そんな状況を打破するためにも、ワイヤーフレームを正しく設計し、制作側も依頼する側も納得のいくLP制作に繋げていきましょう。

まずは、ワイヤーフレームを作る際の簡単な流れを説明します。

情報を整理する

まずはLPに表示させたい内容を整理しましょう。会社名や商品名、キャッチコピーなどの基本的な情報から、企業にとって重要な内容まで必要な情報を全て書き出しましょう。

競合サイトを参考にしながら書き出してみたり、必要なものは何かを想像しながら整理していくことがおすすめです。

さらに書き出した情報をグループ分けし、優先順位をつけてからレイアウト作業に移行するとより効果的です。

下書き

整理した情報をどのように表示させていくべきなのか、手書きで構成していきましょう。PCなどで作成するよりも、手書きの方が修正点を早く入れることができ、追加や削除が気軽なためなるべく手書きの作成がおすすめです。

商材をしっかりアピールした構成に、キャッチコピーの入れる場所やアクションを起こしてもらいたいポイントなどを考えながらレイアウトしていくことが大切です。

清書

下書きを作成できた後、ツールを使って清書を行います。下書きは何度も修正を繰り返すため手書きを推奨していましたが、清書段階ではデータを気軽に共有できるためツールを利用することがおすすめです。清書はデザインも取り入れながら完成図に最も近いものを作成します。他の担当者と共有するため、クライアントとの相違点などはないか確認しながら作成しましょう。

zoom_in画像クリックで拡大

制作費用はこちら

□ワイヤーフレームを作成しなければいけない理由とは

LPの新規作成やリニューアル時に作成するワイヤーフレームですが、必ず作成しなければいけないのでしょうか。
ワイヤーフレームを作成しなければいけない理由は、次の3つです。

1つ目は、LPのレイアウトを決めるためです。
ワイヤーフレームの一番の目的は、LPのレイアウトを決めることですよね。
LPには、入れ込むべきコンテンツがあるので、先にデザインを決めてしまうと、必要な情報が足りないなんてことになりかねません。
盛り込みたいコンテンツを上手に組み込めるように、ワイヤーフレームを用いてレイアウトを決めることが重要になるのです。

2つ目は、レイアウトや機能を制作者どうしで共有することです。
LPを制作する際には、ディレクター、ライター、デザイナー、エンジニア、コーダーなど、複数の担当者がいることがほとんどです。
さらに、クライアントがいる場合にはクライアントの担当者や決裁者の意見をくみ取る必要があります。

そこで、ワイヤーフレームに情報をまとめておくことで、内容を追加・訂正した場合の記録として活用できるという利点があります。
後々認識のずれが発覚して、トラブルに発展することも防げるでしょう。

3つ目は、ページ内容のアイデアを出したり、議論をしたりするためです。
ワイヤーフレームは、分かりやすくシンプルな線と文字だけで作られているため、アイデアを出し合うたたき台として最適です。
初期段階のワイヤーフレームは、シンプルなラフにとどめ、まだデザインを固めないことで、議論の幅を狭めないことがポイントです。

□ワイヤーフレーム作成時の注意点をご紹介！

ワイヤーフレーム作成時に、押さえておくべきポイントと注意事項を紹介します。

1つ目は、各要素に明確な理由と根拠をつけることです。
ユーザーにとってその情報が必要な理由や、優先順位がどうなるのかなど、要素そのものと配置の理由を明確化しましょう。
建設的な議論を行いやすくなるうえに、作成後に仮設の検証を行うことで改善しやすくなるというメリットがあります。

2つ目は、事前にリサーチや分析をしっかり行うことです。
なぜそのLPを作るのか、リニューアルを行うのか、といった目的を明確にすることで、議論を行う際の優先事項が分かりやすくなります。
目的を明確化するために、事前にリサーチや分析を行って課題をはっきりさせる必要があります。

3つ目は、デザイン作成ではなく情報設計を目的にすることです。
ワイヤーフレームの目的は、デザインを決めることではなく、情報を設計することです。
前述したように、ワイヤーフレームを検討する段階ではデザインについては議論せず、構成要素について内容や根拠、配置を決めることを優先しましょう。
デザインはワイヤーフレームが完成した後にデザイナーが行うため、ワイヤーフレームの段階で検討しても二度手間になってしまうでしょう。

4つ目は、ワイヤーフレームはシンプルに作成することです。
ワイヤーフレームは、簡単に変更できるようにしておくことが重要です。
検討する間に多くの変更が加えられるためです。

ワイヤーフレームの段階でしっかり議論しておくことで、LPの完成度が高まります。
完成した後の改修コストを抑えることにもつながるでしょう。

5つ目は、完成時のワイヤーフレームにはできるだけ実際のテキストを入れることです。
完成イメージをより鮮明にするためにも、完成時のワイヤーフレームには実際のテキストを入れた方が良いでしょう。
早い段階で修正しておけば、大きな改修にはつながらず、必要とする時間や労力などのコストも少なくて済みます。

ワイヤーフレーム設計のポイント

ワイヤーフレームを制作する際には制作手順だけでなく、さまざまなポイントがあります。LP制作の現場以外にもWebマーケティングを行う上で、ワイヤーフレームを設計することがあれば、ご紹介するポイントに注意しながら制作してみましょう。

「ながら」の制作はNG

ワイヤーフレームを作成し「ながら」、デザインを制作したりコーディングを進めていくことはNGです。フィードバック項目を減らし、認識を合わせるために制作しているワイヤーフレームを完成させる前にLP制作にとりかかってしまうとワイヤーフレーム作成の意味がなくなってしまいます。

修正が増えると制作会社としても仕事が増え、依頼した企業にとっても時間がかかってしまうため事前にワイヤーフレームで修正点やトンマナといったポイントを把握しておくことが大切です。

ワイヤーフレームはあくまで準備であり、準備をどれだけ丁寧に行うかで最終的なクオリティも異なります。

成功事例のパターンを活用する

LPは縦に長いスタイルが特徴的です。そのためどのような順番で情報を伝えていくかが重要になり、ユーザー心理を捉えながら制作していく必要があります。まずは競合他社やLPで成功しているページをそのまま利用するのではなく、コンテンツの配置場所やポイントなどをワイヤーフレームの参考例として書き出してみましょう。

競合他社との差別化を図ることもLP制作には重要ですが、ワイヤーフレームの設計段階では成功例を活用することで、より商材やブランドイメージを効果的にアピールできるような構成を考えることに役立ちます。