ワイヤーフレームとは
一言でいうと
「白黒の設計図」
デザインではなく、情報をどこに置くかだけ決める図です。
デザイン前の状態↓
┌──────────────┐
│ キャッチコピー │
│ 説明文 │
│ [申し込みボタン] │
└──────────────┘
┌──────────────┐
│ 悩み │
│ ・続かない │
│ ・上達しない │
└──────────────┘
色・フォント・装飾
→ 全部まだ考えない
LPワイヤーフレーム基本構成
LPはほぼこの順番です
① ファーストビュー
② 悩み
③ 解決
④ サービス説明
⑤ 実績・お客様の声
⑥ 料金
⑦ CTA
これを箱で並べるだけ。
ワイヤーフレーム実例
例：乗馬オンラインサービスLP
① ファーストビュー
┌──────────────────┐
│ キャッチコピー │
│ 「自宅で乗馬が上達する」 │
│ │
│ サービス説明 │
│ │
│ [無料体験はこちら] │
└──────────────────┘
ここは
キャッチコピー
説明
ボタン
メイン画像
② 悩みセクション
┌──────────────────┐
│ こんな悩みありませんか？ │
│ │
│ ・練習時間が取れない │
│ ・上達が遅い │
│ ・教えてくれる人がいない │
└──────────────────┘
LPは基本
悩み → 解決 → 商品 の順番。
③ 解決
┌──────────────────┐
│ その悩み解決できます │
│ │
│ ・オンライン指導 │
│ ・動画添削 │
│ ・チャット質問 │
└──────────────────┘
④ サービス説明
┌──────────────────┐
│ サービス内容 │
│ │
│ [画像] 説明文 │
│ │
│ [画像] 説明文 │
└──────────────────┘
ここは
画像＋文章 の並びが多い。
⑤ お客様の声
┌──────────────────┐
│ お客様の声 │
│ │
│ ★★★★★ │
│ 「上達しました！」 │
│ │
│ ★★★★★ │
│ 「分かりやすい」 │
└──────────────────┘
⑥ 料金
┌──────────────────┐
│ 料金プラン │
│ │
│ 月額 9800円 │
│ │
│ [申し込みボタン] │
└──────────────────┘
⑦ CTA（最後のボタン）
┌──────────────────┐
│ 今すぐ始めよう │
│ │
│ [無料体験はこちら] │
└──────────────────┘
LPは最後に必ずボタン。
ワイヤーフレームの作り方
方法① 紙に書く
四角を書く
↓
中に文字を書く
↓
縦に並べる
これだけ。
方法② Figma
プロは
→ Figma
でワイヤー作ります。
やること
四角を置く
↓
テキスト置く
↓
並べる
色は
白
グレー
黒
だけ
ワイヤーフレームの考え方
LPはこの流れで作る
興味
↓
悩み
↓
解決
↓
サービス説明
↓
信用
↓
料金
↓
申し込み
これLPのテンプレ構造です。
LPワイヤーフレームテンプレ
[ファーストビュー]
キャッチコピー
説明文
ボタン
[悩み]
問題点
悩み
[解決]
解決方法
[サービス説明]
サービス内容
[実績・お客様の声]
レビュー
[料金]
価格
[CTA]
申し込みボタン
LP制作の順番
① ターゲット決める
② 悩み書く
③ 解決書く
④ LP構成作る
⑤ ワイヤーフレーム
⑥ デザイン
⑦ STUDIO
デザインは最後の方です。
