LPワイヤーフレームの作り方｜原稿とデザインの間に置く配置図の完成例

こんにちは。バナナデスクです。

「ここに大きな写真、その下に説明文」とだけ書いた配置図を渡すと、見た目は作れても、料金に何が含まれるかが抜けることがあります。

LPのワイヤーフレームは、装飾前の設計図です。箱を並べるだけでなく、その場所で読者が何を判断できるようにするかを書いておくと、原稿とデザインをつなげやすくなります。

執筆：バナナデスク｜WEBビジネスの設計・集客・改善

決めるのは、情報の役割と順序

文字を全て「ダミーテキスト」にすると、デザイン完成後に料金説明が入り切らないことがあります。少なくとも判断に必要な文言は、実際に掲載する長さで置きます。文章が決まらない箇所は、担当者と確認事項を注記します。

以下は架空の「サービス説明整理相談」の配置例です。60分の相談、33,000円（税込）、構成メモ一枚を相談後3営業日以内に渡す設定。ページ実装と広告運用は含みません。申込フォームは相談希望を受け付け、契約と日程は別途確認します。

ブロック	読者の判断	入れる内容
W1 冒頭	自分のためのサービスか	既存の説明を整理したい人向け。受け取るのは構成メモ
W2 完成物	何が手元に残るか	構成メモの見本と、何を見る資料かの説明
W3 範囲	今の困りごとを扱うか	対象、提供内容、料金条件、申込前の確認。実装と広告は対象外
W4 料金	費用と範囲を受け入れられるか	税込33,000円、サービス一つ、相談一回、修正の条件
W5 進め方	自分に何の準備が必要か	希望送信、条件確認、正式受付、資料、相談、メモ
W6 受付	送信後に何が起きるか	2営業日以内に対応可否を返す。送信だけでは契約しない

W2の見本がまだない場合、「実績」という箱に置き換えないでください。独自に作った説明用のメモでもよいので、実際に何を渡すかが分かるものを用意し、架空例だと分かる表示を付けます。

構成メモ例：講座の募集ページ

1．対象：初めてオンライン講座を開く個人事業主。

2．提供物：募集ページの見出しと要点を一枚に整理。

3．条件：サービス一つを対象。決済設定とページ制作は含まない。

4．未確認：資料の到着期限、日程変更への対応を依頼者に確認。

「未確認」を書くのは、確認前の条件を勝手に確定しないためです。公開するLPでは、その未確認事項を解消してから受付条件へ反映します。設計中の注記を、そのまま公開原稿に残さないようにします。

見本のPC配置では、W1の説明とW2の構成メモを横に並べます。スマホではW1→W2→W3の範囲→W4以降の順に一列で置きます。横幅がなくなった時に、画像だけが先に出て対象が分からなくなるのを避ける設計です。

MDNのレスポンシブデザインの考え方を土台に、画面幅に応じて列を変えるHTML見本を用意しました。完成したデザインの画像を一枚だけ縮める方式ではないので、文章を編集して配置を見直せます。

編集時には、1280×900と390×844のブラウザ表示で、原稿が欠けず、幅に応じて折り返すことを確認しました。

曖昧な注記	この見本での指示
目立つボタン	「相談内容と条件を見る」はW4の料金条件へ移動。受付ボタンとは役割を分ける
安心できる感じ	料金の直下に、含む作業と含まない作業を同じ文字サイズで置く
スマホ対応	W1説明→W2見本→W3以降の順。390pxで本文を横スクロールさせない
いい感じの画像	メモを渡すサービスだと分かるイメージ。架空の人物や売上グラフは使わない
フォーム設置	相談希望の受付。保存先、完了案内、運営の確認担当は実装時に決めてテスト