• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

ShusakuAida.com

スモールビジネスオーナーのための

  • ホーム
  • 無料メールセミナー
  • 提供中サービス
  • ブログ
  • プロフィール
  • お問い合わせ

ホーム - ツール - Unbounceで、オプトインページを作る方法

Unbounceで、オプトインページを作る方法

目次

  • 1. オプトインページとは
  • 2. なぜオプトインページが必要なのか
  • 3. Unbounceでオプトインページを作る方法
    • 3-1. テンプレートを選択する
    • 3-2.ヘッドコピーを作成する
    • 3-3.サブヘッドコピーを作成する
    • 3-4.CTAを作成する
    • 3-5.フォームを作成する
  • 4.モバイルページを調整する
  • 5. まとめ

1. オプトインページとは

オプトインページとは、メールアドレスを登録してもらうページでスクイーズページと言われることもあります。目的は1つだけで、メールアドレスを登録してもらうことです。逆に言えば、それ以外の行動を促す必要はありません。

2. なぜオプトインページが必要なのか

オプトインページが必要な一番の理由は、登録してくれた人に何度も連絡を取るためです。何度も連絡すると嫌われてしまうのでは?と思う方もいると思います。確かに、相手の許可なく一方的にメールを送り続けると、迷惑がられ読まれなくなります。

しかし、オプトインページで集めたメールアドレスは違います。その理由は、自らの意思でメールアドレスを登録しているから。登録者は何らかの悩みがあり、その解決方法を知りたくて登録してくれています。だから、あなたがメールを送れば送るほどあなたに好意をもちます。※もちろん、ちゃんと価値のある内容を送ることが前提です。

そうやって何度も価値を提供し続けることで、信頼関係が出来上がります。信頼関係ができれば、見込み客 → 顧客 → リピーター → ファン → 熱狂的なファン、というかたちで関係を構築することも可能です。

そして、このような関係を築くには何度も連絡をとる必要があります。

3. Unbounceでオプトインページを作る方法

早速オプトインページを作成していきましょう。

3-1. テンプレートを選択する

QRvoKi0mITsKgnPbNOnovowGppve5j3XRBIqoyvBx0 M3NnQt94azgIu6BpZkMVi7BycDFaWM7JCI8fYulOHVjmMRKazjJI0wNzbrk4RvMxXR4TLxMAo47jTjlV gbPZpnYI0Kow

PAGESから「Create New」をクリックし作成ページに進みましょう。

gEjl16 uANTz1aAlB1anBbRx44HIO9IAu6I4Rl3fftIVZUQTYGNjN7xBO6OUBX Tr AZstjoZqpCDkUS3 7bIGnSTMY0EV4XvrKLZLXzgAen4ZXibYLZ8MVzMmWtI9bK7MZwJtVC

①Pick a content typeから作成するコンテンツの種類を選択します

・Landing Pages :ランディングページ(セールスページやオプトインページ)
・Popups :ポップアップ(Webページにポップアップされます)
・Sticky Bars :ステッキ—バー(スクロール中も常に上部表示されます)
・AMP :モバイルページで高速表示される仕組

今回はオプトインページを作成するので「Landing Pages」を選択します。

②Chose a templateからFilter(フィルター)とSort(ソート)を掛けることができます

【Filter】
・All :全て
・Click Through :特定ページへ移動させる
・Coming Soon :近日公開
・Lead Generation :リードジェネレーション
・Consultancy :コンサルタント
・Industry Specific :業界特有
・SAAS Product :サースプロダクト
・Mobile Apps :モバイルアプリ
・Event :イベント
・EBook :イーブック
・Webiner :ウェビナー
・Long-Form Sales :ロングフォームのセールスページ

【Sort】
・Popular :人気順
・Name :名前順
・Recent :最近追加された順

僕の場合は作成するオプトインページのイメージに合いそうなテンプレートを、FilterとSortをかけずに選ぶことがほとんどです。FilterやSortをかけて選択する場合も、一度全てに目を通すと、次回以降作成のイメージが湧きやすくなります。

今回は、「ALLHER」というテンプレートを使いオプトインページを作成します。「Start with this template」をクリックし次に進みます。

3-2.ヘッドコピーを作成する

M lEvjekF5Uhsng2ASx2H3inELV2QOCGzGt2 8UPg XflCorH3lIPaJRgWLicTnZWu3 R7IMFIr18qcmyhtSO13yumWHwhglKZEUVvUe

テンプレートのヘッドコピーを選択し、直接文字を入力すればテキストを変更することができます。テキストの種類やサイズ、カラーやスタイルは右側のプロパティから変更できます。

・Family :フォントの種類
・Size(px) :テキストのサイズ
・Line Spacing(px) :テキストの行間
・Text Color :テキストの色
・Highlight Color :ハイライトの色
・Style : 太文字、斜体、下線、打消し線、上付き文字、下付き文字

3-3.サブヘッドコピーを作成する

UZGQvMA lQoVX 1q3bbRmJDB3cKdw120FGLcB7ihcgNh4Vjjlm 9zyiE5r3ocP8PtHoLhogiYZl 5045SgaFO4amqvRVJVe0lTrfEu5QGovca7sRHo6TfaKh2Cd8k mUakrkwAkS

ヘッドコピーと同じ要領でサブヘッドコピーも作成していきます。また、テンプレートに新たに文字を追加したい場合は、左側にあるテキストマークをドラッグアンドドロップすることで、好きな場所にテキストを追加することができます。

L1Fa2UqH4CEEykRgxgNNLo4UDbGKusd tUcoAy1lotaVd

また、テキスト以外にもセクション、ボックス、画像、ボタン、ライトボックス、フォーム、動画、カスタムHTMLを同じようにドラッグアンドドロップで追加できます。

Unbounceではページに埋め込めるフォーム数は1フォームのみです。もしフォームを増やしたい場合は、カスタムHTMLを使いフォームを追加する方法もあります。

3-4.CTAを作成する

JP1j5OSSL6aIU7DZLcTXGKeZNa9yeUceVTmeh3HB2ud8XVZANGW7QoQhkliZZ982VGD5gh4CkIpfbEVryrc5VZsm6GQi0LoUcDPiwFSY7ptYUZ7JJeMyK hlOe3f a sMNMFa431

CTA(call to action)を作成します。こちらも、通常のテキスト入力方法と同じで、選択しテキストを変更します。フォントの種類や大きさ、色やスタイルも変更も右のプロパティから変更可能です。

3-5.フォームを作成する

x6UmSym9TaXvpxI3YWBfwNqd33LYyZo W PrVeIayihGfnYAzg2FFCfSK83183LnY8 PfHG7 BMThs4HtRBFG7xV5L5kE0ei8f8uGqV452XFJFYG3cPIP7v7vXtC55UqR6h v Uz

フォームを選択し、右側にあるForm から、「Edit Form Fields」をクリックしフォームを編集していきます。

0oE1q6yp8RHkTTl2K9E00 e1Oai6XICPmazijc24XKr1 1cBzoNPnfFhwo2 hYMBLcMaXXdM2bV0O U6IyOP p5 L 1l7mFZi2rKhdalr8enBmql8bu86JsAFRTA1DPr1Kc0vME

このようなフォーム編集画面が現れるので、一つずつ編集していきましょう。

【Pre-Defined Fields】からフォームに必要な項目をクリックすると追加できます。

・E-mai :メールアドレス
・First Name :名
・Last Name :姓
・Phone Number :電話番号
・Age :年齢

「↑」「↓」でフォームの順番の入れ替えができます。ゴミ箱マークで削除できます。フォームを選択すると右側の編集画面が表示されます。

・Field Label :ラベル名を変更
・Hide Label :ラベルを非表示
・Field Placehorder Text :入力画面に記入例を入力
・Auto-generate from Field Label :基本的にはデフォルトのまま
・Validation Options :チェックを入れると入力必須項目となります

QYAjJkrmw u4U9C0X QxedGpnezm7QGZE9KGbGjnkgzztND P6THJ4KO9kL27WobHIQ7Rmnf0 H6UdBp5CiM5ecJOQK7WD sajVyV1p17 KFRCvU82e7KF9Hhvc u4HNXAGGWyvS

次にConfirmationからフォーム登録後の確認ページを編集していきます。

【Confirmation】
・Show form confirmation dialog
 確認メッセージをポップアップ表示します

・Go to URL
 指定したURLへリンクさせます

・Post form data to a URL
 フォームデーターを指定したURLへ投稿します

・Show alert message
 確認メッセージを小さく表示します

・Open URL in lightbox
 あらかじめ作成したライトボックスへリンクさせます

uGbBibEtRQhjqU2exs46x67QNr95gpi9tCy8LuSKb MvMCAaHDvUXShQMfR9BwY6ggq85rbJh2Gl5TgO 2wrKiEfES4XpHorPfg262KP0iqK0 Q8hQtTe3NiJerGgGhg9jz gM

今回はShow form confirmation dialogを選択し「Eidi Confirmation Dialog」をクリックし登録後に表示されるメッセージを作成します。

nqHG55gTojL6BlTF0AAZcWWSAwiyC70CXt5osixObfec4AgDLWj36gsEfDVbS2qkValusNo1d6BKVnFfpkTSoXFnVKpdeITPuBQDceZzhoj27LZLuesYYsAm jUv iKNTR5a o7e

これまでと同じように登録後の完了メッセージを編集しましょう。

4.モバイルページを調整する

Unbounceはレスポンシブ対応しています。画面右下にある「mobile」をONにすることでレスポンシブ対応となります。しかし、現在作成している見え方はPC画面の見え方のため、多少調整が必要です。

GOi1bqTUe1Mulgi05p2j9IhPOEDoPjGczvkJNprxuUeR73BU 8hlcXkf00wbjEh0q2pT88k

右下の「Mobile」のタブをクリックしスマホ画面を表示します。

スマホ画面を表示ではフォントの大きさや、テキストの位置がズレているので一つづつ修正していきます。「0から始めるマーケティング講座」のテキストが不自然なので修正します。

右側の「mobile only」からテキストの大きさを変更します。「Size」から変更すると、PC画面で表示するテキストもサイズが変わってしまうので、必ず「mobile only」から変更しましょう。

画面下のテキストが赤くおおわれているところは、テキスト表示が可能な範囲に収まっていないのが原因です。テキストの位置を修正しましょう。

piv4yI1L02DzRO9a0sLM40agnIW60lCT3U7zXaGDXioxy86Uwr y gCEwrGFv3SXhsRF1tHAujQzipH7Wi OIJ2NS次にフォームの間に不要なスペースがあるため、このスペースを無くします。フォーム全体を選択して、下にある赤枠内の四角から調整できます。

phDJHnr kcPotfiM9cHMShOX5rUAS2bh8LH45D2s1Igl2jROyBZBY9BM12uiX vwoxIHDPRiwKk7S9twj3 zbK9kbNZgcHdSbA0G RbiKjmBY70

不要なスペースをなくすとスッキリとしたフォームになります。他にも修正した方がよい箇所は修正し、全ての修正が完了したら「preview」からPCとスマホの表示画面を確認してください。問題なければ「Published」をクリックしオプトインページを公開しましょう。

5. まとめ

操作方法を覚えれば、オプトインページを作成するのにそれほど時間はかかりません。知識のない人が作っても、プロに負けないオプトインページを作成することができます。また、細かな修正やABテストも直ぐにできるのが魅力です。

ただし、注意すべき点が1点あります。それは、テンプレートを使わず1から作成しようとしなことです。その理由は、作成に時間がかかる、効果が出るかわからないからです。本来の目的は結果を出すことであって、凝ったオプトインページを作ることではない。ということだけ忘れないようにしましょう。

Unbounの契約方法や使い方はこちらのページで説明しています。
→Unbounce使い方ガイド

 

無料メールセミナーはこちら
オンライン講座はこちら
サービスはこちら

 

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする
ShusakuAidaを Follow saku5433
Category: ツール, 記事一覧Tag: Unbounce, Unbounce  使い方, Unbounce オプトイン, オプトインページ
Previous Post:ステップメールとは?作り方の流れと構成の3つのコツ
Next Post:Unbounce、カウントダウンタイマーを設置する方法

MENU

ブログ

サービス

問い合わせ

特定商取引法に基づく表示

PICK UP

「売れない」というビジネスの問題…

人生計画を立てても意味がない理由…

戦略と戦術の違いとは?戦略と戦術…

五常の徳(五徳)に学ぶ、信用の大…

無料メールセミナー

5日間のメールセミナーで
・売れない
・集まらない
・リピートされない

3つの問題を解決します。

詳しく見る

Copyright © 2023 · ShusakuAida.com · All Rights Reserved/プライバーポリシー

Topへ戻る