オプトインページの作成方法!WordPressとMailChimpで簡易的に作成する方法とは。

今回は、オプトインページの役割から具体的な作り方までを解説をしていきます。

ウェブマーケティングにおいて入り口となるページなので、商品販売用として作成するランディングページと同じくらい大事ですね。

さて、仕事柄Facebookで広告が表示されるとクリックしてどんなページが表示されるのか確認してしまうことが多いのですが、ここ最近の傾向としてこのオプトインページを出稿しているユーザーが多いです。

Facebookユーザーが広告に慣れて、1ステップでのランディングページでは成績が芳しくないのか、それともまずはリスト取りに乗り出す方が多いのか。

詳しい理由はわかりませんが、ほとんど1ステップでの広告は見かけなくなりました。

確かに、オプトインページによって、自分の理想的なペルソナのリストを効率的に集めることが出来たら、ビジネスもやりやすくなりますからね。

なので、今回は具体的な作り方も交えて、このオプトインページについての解説を進めていきます。

オプトインページとは?

オプトインページには、様々な呼び名があります。リスト取りページ、ランディングページなど、人によって違います。

なので、呼び方はぶっしゃけなんでもいいです。オプトインページって呼び名は、ちょっと無機質なので、メルマガ読者のメールアドレスを集めるページといった感じで覚えておいてもらえればと思います。(最終的に集めたリストは、メルマガに移行する為)

今回のこの記事内では、一般的なオプトインページとします。

オプトインの意味は、加入・参加・承認などの意味があります。

提供側は、自身のノウハウをPDFに収めたレポートを無料で提供する変わりに、メールアドレスの登録を促します。

登録者も当然、同意の元なので承認したということですね。この瞬間が、オプトインしたということになります。

言葉の響きというか印象により、いかがわしいように感じますが、使う側に誠意があれば、全然良心的な手法なんです。

人によっては、一部のプロダクトローンチによるビジネスの影響で、騙されるといったイメージがありますが、良心的に利用している方も多いので、ぜひ悪いイメージは払拭してほしいです。

オプトインページの役割とは?

通常の商品販売用のランディングページが一般的でオプトインページもランディングページの括りなので、ウェブマーケティングにおいて混乱しがちですが、この2つページには明確な違いがあります。

  • ランディングページ(商品販売用)→ 有料(セミナー、動画講座の販売)
  • オプトインページ → 無料(無料PDF、無料メール講座、無料動画講座)

といった違いですね。

オプトインページでのコンテンツは、基本的に無料です。

中にはDVDを無料オファーとし、送料だけ負担してもらうといった方法もありますが、数百円なので問題ないでしょう。

一般的なのは、無料レポートですね。PDF自体は、Wordで編集とデザインが出来てしまうので、手が出しやすいですし、PDFなので仮に上手くいかなくても、在庫をかかえることもない訳です。

そういったものを無料で提供するのが、オプトインページ。

そこから、ステップメールにより自分のコンテンツに触れてもらい、気にいったユーザーは最終的に商品販売用ランディングページ(フロントエンドセミナーなど)に案内する。

これが、セオリーとなっています。

例え、ここで気に入ってもらなくても大丈夫。ランディングページでの購入がなくても、メールアドレスは手元にあるからです。

つまり、このメールアドレスに対してメルマガを発行できるんですね。

正直、メルマガで徐々にファンになってもらった方が長い目で見た場合、いいと思っています。

あなたも、同じことを頼むなら付き合いが浅い知人に比べ、付き合いが長い友人の方を絶対選択するでしょう。

こうしてメルマガ読者を獲得できる為、立ち位置的にも入り口なので、オプトインページの作成は商品販売用ランディングページと同じくらい重要になってきます。

これから相手にするお客さんを集めるページになってきます。

そして、オプトインページで紹介する無料オファーも同じくらい重要。これが魅了的なものでないと、誰も見向きもしてくれませんからね。

無料オファーについては、また別の機会で解説します。

オプトインページの作り方

では、さっそく具体的なツールを交えて、作り方を解説していきます。難易度順に解説していきますね。★が少ないほど、簡易的に作成できます。

オススメツール

WordPress固定ページ(難易度:★)

WordPressの固定ページを使って、オプトインページの作成が可能です。しかも、簡易的に。

画像の配置や、テキストの入力は「ビジュアルエディタ」から出来るので、WordPressに慣れている方なら数時間もあれば形になってしまいます。

あとは、メール配信サービスとの連携をすれば、オプトインページの完成。

WordPressをお使いの方も最近増えてきた為、もしかしたらお馴染みかもしれませんね。

この固定ページで作成したオプトインページを広告出稿している方も多いです。

個人的には、ページの量産がしやすいし、管理しやすいのでこの方法が一番効率的ですね。

サンクスページもこの固定ページで作成できます。

余談ですが、煩雑になってきた固定ページ一覧は「CMS Tree Page View」というプラグインで管理するのがオススメ。

CMS Tree Page View – 固定ページの記事一覧をツリー表示にできるWordPressプラグイン

ペライチ + WordPress(難易度:★★)

ページ作成ツールのペライチとWordPressを使い、オプトインページの作成ができます。

方法は、ペライチのボタン要素にWordPressの固定ページで作成したページのURLを指定するだけ。

この際に、元のページを参照したいユーザーの為に別ウィンドウにチェックを入れておくと、いいです。

固定ページ側は、先程説明した固定ページ作成するオプトインページの画像や文言のない、フォームだけといったページです。

2つのツールの連携をすることになるので、少し難易度が高めです。

また、ペライチの場合、同じページにフォームを埋め込むことができます。

その場合、有料プランの「プレミアムプラン」(2018年4月現在で¥1,980 / 月。)にする必要があり、プレミアムプランで使える「HTML埋め込み」要素を使い、メール配信サービスとの連携を行います。

フォーム作成に使うHTMLを解説

オプトインページを作成する場合、メール配信サービスとの連携が不可欠です。

やはり、ある程度自動化しないとウェブマーケティングの恩恵を受けることができませんし、本業にも影響しかねません。

なので、フォーム作成の際にメール配信サービスとの連携をすることになります。

といっても、ある程度フォームを設置するためのコードは用意されているので、あくまで微調整の為のHTMLの知識です。

今回は、海外のメール配信サービス「MailChimp(メールチンプ)」で解説していきますね。

まずは、無料オファー用のリストの作成からです。TOPページからメニューバーに表示された、「Lists」から作成画面に移動します。

以下の記事がわかりやすいです。(リストの作成参照)

MailChimp(メールチンプ)の使い方 無料から利用できるメール配信サービス

リストを作成すると、一覧となって表示されますね。で、使用するリスト名をクリックしてください。

Signup formsタブをクリック > Embedded formsをクリック > Copy/paste onto your siteの下にフォームコードがあります。

これでフォームを取得できました。

これをWordPressの固定ページに貼り付けます。エディタは「テキスト」にしてから貼り付けてください。

配置場所は、画像や構成があると思うので、一番下ですね。

最初に、フォームコードの下の方にある、

<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script> 〜 </script>

を、削除します。その下の<!–End mc_embed_signup–>のコードも削除で問題ないです。

このコードはjavaScriptというプログラミング言語のコードで、登録情報に問題があるとポップアップでエラーメッセージを表示してくれるものです。

一件、便利ですが、これだとサンクスページに移動しなくなり、仕組み的に不便なので、削除してしまいます。

と、ここまではMailChimpの仕様なので、あとはご自身の仕様メール配信サービスに応じて当てはめてみてください。

次に、コードを貼り付けた状態で「ビジュアル」にしてください。

フォームを確認できると思います。まずは、「delete」キーで余計な余白を詰めてしまいましょう。

それで、MailChimpの場合、海外のツールなので見出しやこの項目は必須ですといったテキスト、ボタンテキストが英語になっていますね。

ボタンテキスト以外は、ビジュアルエディタで変更が可能なので、任意のテキストに変更しましょう。

で、ボタンテキストです。

テキストエディタに移動し、

<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>

の、コードを探してください。

このinput type=”submit”が送信ボタンになります。

ちなみに、メール配信サービスによって異なるかもしれません。他ですと、button type=”button”の可能性もありますね。

それで細かいですが、value=”Subscribe”という値が確認できると思います。この値を変更することで、ボタンテキストを変更することが出来ます。

例えば、「無料で受けとる」に変更したいとすると、value=”無料で受けとる”ですね。

この編集により、ボタンテキストを変更できます。

あとは、ビジュアルエディタで見出しや項目に対する文言の編集が可能だと思います。

これでフォームの設置が完了です。

こういったコードの編集ですが、実際のプレビューページで確認後に、変更したい文言をコピーし、GoogleChromeの検索機能を使うと該当箇所が把握できます。

Windowsであれば「Ctrl + F」、Macであれば 「command + F」です。

フォームコードは、何度でも取得できるので基本的間違えても大丈夫なので安心して編集してみてください。

オプトインページの構成

次にオプトインページの構成です。基本的に、商品販売用ランディングページのような文章量は必要ありません。

オプトインページの場合、長すぎるのは逆効果かもしれませんね。

構成は以下になります。

  • ヘッダー画像(ターゲット、ヘッドライン、無料オファー名を記載)
  • 登録フォーム
  • ベネフィト
  • 無料オファーの目次
  • プロフィール
  • 再び、登録フォーム

ヘッダー画像ですが、ターゲット(できるだけ具体的に)、ヘッドライン、無料オファー名を記載と無料PDFをスクリーンショットした画像を配置するといいですね。

スクリーンショットするソフトは調べるとたくさんあります。「スクリーンショット ソフト おすすめ」で知らべてみてください。

ちなみに、私は「Skitch」というソフトを使用しています。

Macの無料キャプチャ注釈ソフトSkitchの導入と使い方

画像編集は、「Pixlr Editor(ピクセラエディタ)」という画像編集ツールを使用して作成できます。

画像編集ソフトPixlr Editorの使い方 – 簡単にできる!ブログ記事のアイキャッチ画像の作り方

画像編集に関してですが、そこまで凝ったデザインでなくても大丈夫だと考えています。最低限の違和感のない配置であったり、配色である必要はあるんですが、デザイン自体に高級感というかキレイさは必要ないです。

あまりテキストエフェストを施したようなきらびやかなデザインは、自分たちとは無縁な世界のように写り、ちょっと引きますし手が出しにくい印象です。

登録フォームについては、先程説明した手順で設置していただけれと思います。ページの一番下に配置と、ヘッダー画像の下に配置ですね。

あとは、ベネフィット文と無料オファーの内容を目次にしたものを記載、最後にプロフィールです。

ベネフィット文では、無料オファーを受け取った場合に出来るようになることを「〜できる」といった文章にします。

受け取った後の未来を具体的に想像されることで、気にならせることが出来ます。

また、現状こんな悪い状態だけど、これを受けとることでこういう良い状態になれます。といった、ビフォー・アフターの振れ幅が大きければ大きいほど効果的です。

無料オファーの内容と目次は、そのまま記載ですね。目次が多ければ多いけど、パッケージ間が出て魅力的です。

そして、プロフィールでは、なるべく具体的に実績を記載しておきましょう。数字化して具体的にすると効果的です。

構成自体は、ランディングページに比べてとてもシンプルだと思います。

オプトインページについては、顧客となるユーザーの入り口なので力の入れどころはページの文字数よりも、やはり無料オファーとそれに関連したステップメールです。

有料級なコンテンツであればあるほど、登録率も高いですしユーザーは満足します。なので、オプトインページの役割と、ページの作成手順の大枠がわかったら、次は魅了的な無料オファーを作成していきましょう。

編集後記

今回は、オプトインページの作り方を解説しました。

この無料オファーとオプトインページといったリスト取りの仕組みは、正直1つ作ればいいってもんではありません。

どれがユーザーの興味を引くのかは、公開してみないとわからないので、複数つくり、テストする必要があります。

外注まかせではお金ばっかかかってしまいますし、どうせなら自作した方がいいので、今回のWordPressの固定ページで作成する方法をご紹介しました。

おそらく、コツさえつかんでしまえば、複数作ることは簡単だと思います。WordPressであれば固定ページの上限がないですから。

なにより、自分で仕組みを回している感がして、より実践のモチベーションもあがると思います。

一度、大枠の型を作っていただいて、複製機能を活用し、効率的に量産していきましょう。

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

このは屋の最新情報をツイッターで