LPのワイヤーフレームの作り方｜手戻りを防ぐ6ステップ
目次
LPのワイヤーフレームは、「見た目」ではなく「何を、どの順番で、どのくらいの大きさで見せるか」を決めるための設計図です。作るときは構成案をもとにスマホの画面幅でブロックを並べ、実際の文章を入れるほど手戻りが減ります。デザインが上がってから「この情報も入れたい」「順番を変えたい」と修正が続く、制作会社から思っていたものと違うものが届く、といった手戻りの多くは、この段階で防げます。
構成案やデザインカンプとの違い、書き込む内容、作り方の6ステップ、スマホ前提の描き方、注記の書き方テンプレ、ツールの選び方、レビューのチェックリストを順に紹介します。
01LPのワイヤーフレームとは
ワイヤーフレームとは、Webページのどこに何を置くかを、線と箱だけで示した設計図のことです。色や写真、装飾は入れず、見出し、文章、画像、ボタンなどの要素の配置と順番だけを描きます。
LPの場合、ワイヤーフレームは縦に長い1枚の図になります。ファーストビューから最後のCTA（申し込みボタン）まで、ブロックが上から順番に並んだ形です。
構成案・デザインカンプとの違い
LP制作の流れの中で、ワイヤーフレームは「構成案」と「デザイン」の間に位置します。
| 段階 | 作るもの | 決めること | 見た目 |
|---|---|---|---|
| 構成案 | ブロックの順番を並べた表やリスト | どの情報を、どの順番で伝えるか | 文字だけ |
| ワイヤーフレーム | 要素の配置を線と箱で描いた図 | 各ブロックの中で、何をどの大きさで見せるか | 線と箱、グレーのみ |
| デザインカンプ | 完成に近い見た目のデザイン | 色、写真、フォント、装飾 | 完成形に近い |
構成案で「情報の順番」を決め、ワイヤーフレームで「各ブロックの中身と配置」を決め、デザインカンプで「見た目」を決める、という分担です。構成案の作り方は「LP構成の作り方」で詳しく解説しています。以下では、構成案ができたあと、それをワイヤーフレームに落とし込む工程を扱います。
02LPのワイヤーフレームを作るメリット
- 手戻りが減る：情報の過不足や順番のずれを、デザインに入る前に見つけられる
- 認識をそろえやすい：依頼する側と制作する側が、同じ図を見ながら話せる
- 見た目に引っ張られずに判断できる：色や写真がないため、情報の中身と順番だけで良し悪しを判断できる
- 修正が早い：線と箱だけなので、ブロックの入れ替えや追加がすぐにできる
デザインが完成してから順番を入れ替えると、デザインの作り直しに近い作業が発生します。ワイヤーフレームの段階で修正すれば、その手間を大きく減らせます。
03LPのワイヤーフレームに書き込む内容
LPのワイヤーフレームには、次の内容を書き込みます。
| 書き込む内容 | 書き方 |
|---|---|
| ブロックの名前と役割 | 「共感ブロック：悩みを言い当てる」のように、名前と目的を添える |
| 見出し・本文 | できるだけ実際の文章を入れる。未定なら文字数の目安を書く |
| 画像・動画の位置 | 箱に×印を描き、何の画像かを書く（例：「使用中の写真」） |
| ボタン・リンク | ボタンの文言と、押したあとの遷移先を書く |
| 要素の大きさの優先度 | 一番目立たせたい要素がわかるように、大きさで差を付ける |
| 注記 | 動きや条件、素材の手配などの補足（後ほどテンプレを紹介） |
特に大切なのが、見出しや本文に「実際の文章を入れる」ことです。ダミーの文章で作ると、実際の文章が入ったときに、想定より長くて収まらない、逆に短すぎて空白ができる、といったずれが起きます。文章が決まっていない部分も、仮の文章を書いておくほうが、デザインの段階での手戻りを減らせます。
04LPのワイヤーフレームの作り方（6ステップ）
ステップ1：構成案を用意する
まず、ブロックの順番を決めた構成案を用意します。構成案がないままワイヤーフレームを描き始めると、配置を考えながら順番も考えることになり、作業が進みにくくなります。各ブロックの「答える疑問」や「役割」まで書かれた構成案があると、ワイヤーフレームに落とし込みやすくなります。
ステップ2：スマホの画面幅で枠を作る
広告から来る人の多くはスマホでLPを見るため、ワイヤーフレームはスマホの画面幅から作るのがおすすめです。縦長の枠を用意し、一番上にスマホの1画面分の高さの目安線を引いておきます。この線より上が、最初に見える範囲（ファーストビュー）です。
ステップ3：ブロックの枠を上から並べる
構成案の順番どおりに、ブロックの枠を上から並べます。それぞれの枠に、ブロックの名前と役割を書き込みます。この段階では中身を細かく描かず、全体の流れと、ブロックごとのおおよその長さを確認します。
ステップ4：各ブロックの中身を描く
各ブロックの中に、見出し、本文、画像、ボタンなどの要素を描き込みます。このとき、各ブロックで一番伝えたいことが一番目立つように、要素の大きさに差を付けます。すべての要素が同じ大きさだと、どこを見ればいいのかわからないページになります。
広告で複数の訴求を試す予定があるなら、ファーストビューの見出しと画像を訴求ごとに差し替えられる形にしておきます。広告を変えるたびにLP全体を直す作りだと、検証の速さに制作が追いつかなくなるためです。
ステップ5：CTAの位置と文言を決める
申し込みボタンなどのCTAを、どこに、何回置くかを決めます。最後のブロックだけでなく、ファーストビューや、解決策・根拠・料金のブロックの直後など、読み手の気持ちが高まりやすい位置にも置きます。ボタンの文言は「送信」のような機能の言葉ではなく、「無料で相談してみる」のように、押すと何が起きるかがわかる言葉にします。
ボタンの先も、この段階で決めておきます。フォームに進むのか、LINEの友だち追加に進むのかで、LPの中で伝えておくべき内容が変わるからです。LINEに進むなら、登録直後に何を送るかまで決めておかないと、LPで約束した内容と最初のメッセージがずれることがあります。
ステップ6：注記を書き、レビューする
最後に、動きや条件などの補足を注記として書き込み、関係者に見てもらいます。レビューでは見た目ではなく、情報の順番、過不足、目立たせ方について意見をもらいます。レビューの観点は、後ほどチェックリストで紹介します。
05スマホ前提でワイヤーフレームを描くときのポイント
- 1画面に1つの要点：スマホの1画面分で、伝えることを1つに絞る
- 横並びは2つまで：パソコンのように3列、4列と並べると、スマホでは小さくて読めない
- ボタンは押しやすい大きさに：指で押しやすいよう、十分な大きさと周りの余白を取る
- 表は縦に組み替える：横に長い比較表は、スマホでは読みにくい。項目を縦に並べる形も検討する
- 追従ボタンの位置を決める：画面の下に固定して表示するボタンを使う場合は、ほかの要素と重ならないかを確認する
パソコン版のワイヤーフレームが必要な場合は、スマホ版を作ったあとに、要素の並び方を横に広げる形で作ります。スマホ版を先に作ることで、本当に必要な情報だけに絞り込めます。
06ワイヤーフレームの注記の書き方テンプレ
ワイヤーフレームの図だけでは伝わらないことは、注記として書き添えます。注記がないと、制作する側が想像で補うことになり、意図と違うものができる原因になります。
| 注記の種類 | 書き方の例 |
|---|---|
| 動き | 「スクロールで表示されたら、数字が0から増えるアニメーション」 |
| 条件 | 「キャンペーン期間中のみ表示。終了後は非表示」 |
| 遷移先 | 「ボタンを押すとフォームまでページ内でスクロール」 |
| 素材 | 「写真は依頼主が用意。未着の場合は仮の画像で進行」 |
| 文章の状態 | 「見出しは確定。本文は仮。最終の文章は別途共有」 |
| 参考 | 「このブロックの見せ方は、参考サイトAの料金表を参考に」 |
| 確認事項 | 「この数字は掲載の可否を確認中」 |
特に「文章の状態」と「確認事項」は、書いておくと後の手戻りを大きく減らせます。どの部分が確定していて、どの部分がまだ決まっていないのかがわかれば、制作する側も作業の進め方を判断しやすくなります。
07ワイヤーフレームを作るツールの選び方
| ツール | 向いている人・場面 | 特徴 |
|---|---|---|
| 紙とペン | 最初のアイデア出し、打ち合わせ中 | すぐに描けて、修正も簡単。共有には写真を撮る |
| スライド作成ツール | 社内で手軽に作りたい人 | 使い慣れている人が多く、共有しやすい |
| 表計算ソフト | 文章の量が多いLP | 1行1要素で整理でき、文章の修正がしやすい |
| デザインツール（Figmaなど） | 制作会社やデザイナーとやり取りする人 | そのままデザインに進められ、複数人で同時に編集できる |
ツールは、関係者が見やすく、修正しやすいものを選べば十分です。見た目を整えることに時間をかけるより、中身の検討に時間を使ってください。最初は紙で全体の流れを描き、固まってからツールで清書する、という進め方も効率的です。
08LPのワイヤーフレームでよくある失敗と対策
| よくある失敗 | 起きること | 対策 |
|---|---|---|
| ダミーの文章で作る | 実際の文章が入ると収まらない、空白ができる | できるだけ実際の文章、または仮の文章を入れる |
| 色や写真を入れてしまう | 見た目の好みの議論になり、中身の検討が進まない | 線と箱、グレーだけで描く |
| パソコン版だけ作る | スマホで見たときに読みにくい | スマホの画面幅から作る |
| 要素の大きさが全部同じ | どこを見ればいいかわからない | 各ブロックで一番伝えたいことを大きくする |
| 注記がない | 制作する側が想像で補い、意図と違うものができる | 動き・条件・素材・文章の状態を注記に書く |
| レビューで見た目の意見が出る | デザインの段階で決めるべき議論に時間を使う | 順番・過不足・目立たせ方に観点を絞る |
09ワイヤーフレームのレビューチェックリスト
- 構成案の順番どおりにブロックが並んでいるか
- 各ブロックに、名前と役割が書かれているか
- スマホの1画面目で、誰に向けた何のページかがわかるか
- 広告で伝えた内容と、ファーストビューの内容がそろっているか
- 各ブロックで、一番伝えたいことが一番目立っているか
- 見出しや本文に、実際の文章か仮の文章が入っているか
- CTAの位置と文言が決まっているか
- 料金、流れ、よくある質問など、申し込む前の不安に答える情報があるか
- 画像や動画の位置と、何の素材かが書かれているか
- 動き、条件、素材、文章の状態などの注記が書かれているか
- 確定している部分と、未確定の部分が区別されているか
10よくある質問
Q. ワイヤーフレームは、依頼する側が作るものですか、制作会社が作るものですか
どちらが作ることもあります。依頼する側が作る場合は、伝えたい内容がはっきりした状態で制作に入れる利点があります。制作会社が作る場合は、依頼する側がレビューの段階で、情報の順番や過不足をしっかり確認することが大切です。依頼する側が構成案まで作り、ワイヤーフレームは制作会社に任せる、という分担もよくあります。判断の分かれ目は、図を描く技術より、実際の文章を書く時間を社内で確保できるかです。時間がかかりやすいのは、見出しや本文を考え、関係者の確認を集める工程で、他業務と兼務する担当者だとここで止まりがちです。訴求が固まっていて書き手がいるなら、社内で作っても十分に進められます。
Q. ワイヤーフレームの段階で、どこまで細かく作ればいいですか
デザインの段階で迷わない程度まで作るのが目安です。各ブロックの要素と順番、目立たせたい要素、CTAの位置と文言が決まっていれば、デザインに進めます。細かい余白や文字の大きさまで決める必要はありません。
Q. 既存のLPを改善するときも、ワイヤーフレームは必要ですか
改善の内容によります。ボタンの文言や画像の差し替えなど、小さな修正であれば不要です。ブロックの順番を入れ替える、新しいブロックを追加するなど、ページの構成が変わる改善の場合は、今のLPを線と箱で描き直し、変更する部分を書き込んだワイヤーフレームを作ると、関係者と認識をそろえやすくなります。
11まとめ
- LPのワイヤーフレームは、何を、どの順番で、どの大きさで見せるかを線と箱で示した設計図
- 構成案で順番、ワイヤーフレームで中身と配置、デザインカンプで見た目を決める
- 見出しや本文には、できるだけ実際の文章を入れる
- 構成案を用意し、スマホの画面幅で、ブロックを上から並べて中身を描く
- CTAの位置と文言、動きや条件の注記まで書き込む
- レビューは、見た目ではなく、順番・過不足・目立たせ方に絞って行う
ワイヤーフレームの段階で広告との一貫性や情報の順番を固めておくと、デザインの手戻りが減り、公開後の改善も進めやすくなります。Lic.では、LP制作の際に、広告で伝える内容とファーストビューをそろえるところから設計しています。
広告のクリックはあるのに、申し込みが増えない？
広告運用を前提に、離脱防止の設計までふくめたLPや、配信用の広告クリエイティブを制作します。公開後も、配信データをもとに改善を続けます。
- 離脱防止まで考えたLP制作
- 配信用の広告クリエイティブ制作
- 配信データをもとにした継続的な改善
まだ具体的に決まっていない段階のご相談も歓迎です。
