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

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

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

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

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

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

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

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

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

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

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

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

①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.ヘッドコピーを作成する

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

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

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

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

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

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

3-4.CTAを作成する

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

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

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

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

【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　：チェックを入れると入力必須項目となります

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. まとめ

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

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

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