LP作成：ECサイトデザイン基礎④【オンライン】

2025/5/9 「ECサイトデザイン基礎④」の記録です。

講師：田中　里枝先生

LP（ランディングページ）とは？

LPとは、検索結果やWeb広告などからアクセスする最初の着地点となるWebページのこと。
主な目的は「コンバージョン（購入・申し込みなど）」を獲得することです。

• 広告から来たユーザーを確実に掴み、優良顧客へと導くページ
• 縦長構成でストーリーを語り、訴求力を高めるのが特徴
• Web広告と密接に連動するため、バナーとの親和性も重要

 LPの基本構成とストーリー設計

LPは上から下に読み進める構成で、段階的にユーザーを惹き込みます。大切なのは「ストーリー」を意識すること。

【３ステップ構成】

1. 掴み（キラースペース）
   → キャッチコピー・ビジュアルで一気に心をつかむ
2. 説明（5W1Hで論理的に）
   → 「何を、誰が、なぜ、どこで、どうやって」明確に伝える
3. 魅せる（アピール・メリット訴求）
   → 商品の強みや特典、口コミや実績を具体的に見せる

ワイヤーフレームとデザインカンプとは？

Web制作の最初のステップは、「設計図＝ワイヤーフレーム」の作成です。

• ワイヤーフレーム＝レイアウトや情報の流れを線で表現した骨組み
• デザインカンプ＝見た目の完成イメージ。Photoshopなどで作成

制作現場ではこの用語の使い方が会社によって異なるので、柔軟に対応しましょう。

レイアウト設計のステップ解説

🪄 STEP①：掴み（キラースペース）

• 最初にユーザーの目を引くスペース
• キャッチコピー＋ビジュアルが命
• 現在・過去・未来の要素をシンプルに盛り込む

🪄 STEP②：説明（5W1H）

• When（いつ）／Where（どこで）をまず提示
• Who（誰が）／What（何を）を続けて明示
• Why（なぜ）／How（どのように）で納得感を

🪄 STEP③：魅せる（アピール）

• 自信があるポイント（主観）
• 実績・評価（客観）
• メリット・お得感（第三者への訴求）

🪄 STEP④：目的（コンバージョン）

• 電話・メールでの問い合わせ
• カート購入、SNSフォロー、店舗誘導など
• 誘導ミスや情報漏れはクレームのもと、丁寧に設計

LP設計の基本構成（掴み → 説明 → 魅せる → 目的）

1. 結（目的）＝ゴールの設定

   • 商品購入？ 会員登録？ 問い合わせ？
     → どんな行動をしてもらいたいのか、まず最初に明確に決める。

2. 起（掴み）＝興味を引く導入

   • キラースペース（キャッチコピー・ビジュアル）

   • 最も見られるエリアで印象を決定づける

3. 承（説明）＝ロジカルな情報提供

   • 5W1H（いつ／どこで／誰が／何を／なぜ／どうやって）

   • ユーザーの不安を取り除く丁寧な説明がカギ

4. 転（魅せる）＝感情を動かすアピール

   • 実績・お得感・レビュー・Before/After

   • 最後に強く印象づけ、行動を後押し

誘導と対策のポイント

ユーザーを目的へ導くには？

• 入り口（バナーや広告） → LPへ誘導
• LP上で「掴み→説明→魅せる→目的」と段階を踏んでナビゲート
• 離脱ユーザーをふるい落としつつ、優良顧客を確実に誘導

クレーム対策や注意点

• 情報不足による誤解を避けるための「注意書き」
• 権利や著作物の記載（コピーライト）
• スマホでの視認性や文字サイズにも注意

まとめ：LPは「営業」するWebページ

LPは単なる情報提供ページではなく、**「ユーザーの心を動かし、行動を起こさせる営業マン」**のようなもの。

• しっかりストーリーを設計する
• 「目的」から逆算して全体を組み立てる
• 訴求力と親切設計が成果に直結する