LP制作手順

LPデザインをおこなう上で最も重要な部分

• 自己流ではなくクライアントさんのイメージを再現する
• トレースをおこないデザインのクオリティを高める・引き出しを増やす

LPにおける3つの壁（3つの壁を越えないと商品は売れない）

読まない→
ファーストビューで対策

信じない→
ボディコピーで対策

行動しない→
クロージングで対策

LPの制作手順

手順1.目的を決める（ゴールを決める）

目的を決めるために、バリュープロポジションキャンパス（サービスを顧客目線で考えるためのフレームワーク）を使って情報や状況を整理する。

仕事が忙しくて家事ができない	問題を抱えている
共働き30代世帯	向けの
家事代行サービス	製品であり
アプリから3タップで家事代行予約を	することができる
競合A社　競合B社	とは違って
予約が簡単に取れる　スタッフ教育が徹底している	が備わっている

手順2.商品のセールスポイント・ターゲットを決める

手順3.LPの構成を決める

1. ファーストビュー
   • キャッチコピー
   • キャッチ画像
   • 権威付（〇〇公認/〇〇さん愛用/累計〇〇個販売など　ハロー効果・錯覚資産をつける）
   • CTA
2. ボディーコピー（心を動かすために共感する→具体的なメリット伝えワクワクさせる）
   • ベネフィット（顧客が商品から得られる恩恵/商品のメリット）
   • 具体的な情報（他とのちがい/選ばれる理由）
   • 関心喚起（ストーリー/共感）
   • 信頼の獲得（お客様の声/証拠）
3. クロージング（行動を促す）
   • 希少性（購入者特典/限定プレゼントなど）
   • 緊急性（先着◯名/期間限定など）
   • 簡便性（簡単3ステップ/メールを入力するだけ/入力1分など）
   • フォームの最適化（簡単に入力できるようにする）

手順4.LPを制作する

LPに使うパーツ

余白・色・比率・レイアウト

成約率の高いLPにするために必要なこと

• 期限を設ける
• 限定制を設ける（先着）
• ボタンを目立たせる

キャッチコピーに悩んだら、本のタイトルを参考にする

LP用テンプレート：colorful・Dangan（有料プラグイン）・クリックファネル

ファーストビューのデザイン

認知度の低いサービスや商品のLPを作成する場合、商品名やサービス名を目立たせるよりもお客様が得られるメリットを際立たせる方が良い

行動してもらい時に矢印使う

フォームやボタンを設置するなら左側に画像右側にフォームやボタン（Zの法則）

LPデザイン　7つの法則

1. 情報の分類・グループ化をする
2. 揃える
3. 反復
4. コントラスト見飽きないように視覚的なメリハリをつける
5. 導線・目線の動きを意識したレイアウト
6. コンバージョンエリアはわかりやすく目立たせる
7. 伝えることは、ひとつにしぼる

LPに使うフォント

フォントは、基本的にゴシック・明朝3種類ずつ ＋ アクセントがあれば良い。

個性的なフォントは読みにくいため離脱の原因になる。

• ゴシック体：A-OTFゴシックMB（モリサワ）・A-OTF新ゴPr5（モリサワ）・ヒラギの角ゴ
• 明朝体：A-OTFリュウミン（モリサワ）・A-OTF A1明朝（モリサワ）・ヒラギノ明朝
• その他：A-OTFフォーク（モリサワ）・はんなり明朝（フリーフォント）

ほかと差別化を図るために有料フォントを使う

ゴシックMB101・リュウミンPRO・秀英丸ゴシック・A1ゴシック・A1明朝・UD新ゴ・UD新丸ゴ・花とちょうちょ・フォークPro

LPに使う配色

• 配色ツールで決める（HUE　http://hue360.herokuapp.com/・Palx　https://palx.jxnblk.com/）
• 配色参考サイトで決める（あらかじめうまくいってる色を模倣していく）
• コーポレートカラーやロゴの色を使う

LPに使う写真素材

• AdobeStock
• PIXTA

具体的な素材の探し方

具体的なキーワードで検索して、魅力が伝わる写真を選ぶ

画像を選んだら、画像検索する

LPの構造：ファーストビュー → サブヘッド → CTA

ファーストビューの役割：ページ全体を通して伝えたい情報をひとめで理解してもらう（他者との差別化・本文への誘導）

ファーストビューのレイアウト：比較検討したときにわかりやすく伝わるように意識する

サブヘッドの役割：なにについて書いてあるのかわかるようにする

CTA：次の行動にストレスなくすすめるようにわかりやすくデザインする（ファーストビューには右上と中央に設置すると良い）

手順5.LPを公開する