デザイン前の設計図——LPのワイヤーフレームの作り方
LP(ランディングページ)を作ろうとして、いきなり色やフォントを決め始めて手が止まってしまった——そんな経験はありませんか。見た目を作り込む前にやるべきなのが、ワイヤーフレーム(設計図)づくりです。どんなブロックをどの順で並べるかを先に固めておくと、後の作業が驚くほどスムーズになります。この記事では、ワイヤーフレームの意味と作り方を初心者向けに解説します。
なぜ先に設計図を描くのか
ワイヤーフレームとは、色や画像を入れる前の、いわば線と箱だけで描いた骨組みです。地味な作業に見えますが、これを飛ばすと「デザインは綺麗なのに何を伝えたいか分からないLP」になりがちです。
見た目から作り始めると、配色やあしらいに気を取られ、肝心の「どんな順番で読ませて、どこで申し込んでもらうか」がおろそかになります。先に骨組みで流れを固めておけば、デザインや原稿の段階で迷わず、後からの大きなやり直しも減ります。
1必要なブロックを書き出す
まずは、このLPに載せるべき要素をすべて箇条書きにします。代表的なブロックは次のとおりです。
- ファーストビュー(キャッチコピーとメイン画像)
- 悩みへの共感、商品の紹介、特徴やメリット
- お客様の声、実績、よくある質問
- 申し込みボタンや入力フォーム
この段階では順番も見た目も気にせず、必要そうな材料を出し切るのが目的です。後で取捨選択するので、思いつくだけ挙げておきましょう。
2読ませる順番に並べ替える
書き出したブロックを、訪問者の気持ちが動く順に並べます。基本は「興味 → 共感 → 納得 → 行動」の流れです。
3紙やツールで形にする
並び順が決まったら、実際に箱を描いていきます。凝ったツールは不要で、紙とペンでも十分始められます。
縦長の枠を用意し、上から順にブロックの箱を積み重ね、それぞれに「ここに見出し」「ここに画像」「ここにボタン」と書き込むだけです。文字の大きさやボタンの位置の目安もメモしておくと、後でデザインに移すときに迷いません。慣れてきたら無料の作図ツールを使うと、修正や共有が楽になります。
4原稿(ワイヤーの中身)を埋める
箱が並んだら、それぞれの中に入る文章を仮で書き込みます。ここで設計図と原稿を行き来しながら詰めるのがポイントです。
仮の見出しやボタン文言を入れてみると、「この情報が足りない」「この順番だと唐突だ」といった穴が見えてきます。お客様の声を載せるブロックなら、どんな声を何件並べるかもここで決めておくと、後で素材を集める段になって慌てずに済みます。原稿が固まれば、いよいよデザインへ進めます。
よくある質問
Q. ワイヤーフレームは綺麗に作り込む必要がありますか?
Q. 原稿とワイヤーフレームはどちらを先に作るべきですか?
まとめ
ワイヤーフレームは、色やデザインを決める前にLPの骨組みを固める設計図です。いきなり見た目から作ると流れがおろそかになりがちですが、必要なブロックを書き出し、読ませる順に並べ、紙やツールで形にして、仮の原稿で中身を埋めれば、伝わるLPの土台ができます。作り込みは不要で、構成と流れが分かれば十分。設計図と原稿を行き来しながら詰めることで、後のデザインや素材集めがぐっと楽になります。
関連記事: LPの基本構成・よくある型