このは屋 職人 2022.04.17

    【オプトインページの作成方法】WordPress×MailChimpで簡易的に作成する方法

    今回は、オプトインページの役割から具体的な作り方までを解説をしていきます。 ウェブマーケティングにおいて入り口となるページなので、商品販売用とし...

    記事を読む 読了目安 10 分 / AI時代の自作と内製化
    【オプトインページの作成方法】WordPress×MailChimpで簡易的に作成する方法
    AI × DIY × Small Business 読んで終わりではなく、自分の商売に戻す。

    記事の最後で、ネット集客を自分で整えるための無料テンプレートを受け取れます。

    Theme職人
    Updated2022年4月17日
    Next Step記事の末尾で無料テンプレートを受け取れます

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

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

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

    それもそのはず。Facebookユーザーが広告に見慣れてきているので、1ステップ型のいきなり有料商品の販売ではだれも購入してくれなくなりました。(インフルエンサー級の影響力をもったユーザーなら1ステップでも狙えるかも。)

    なので、ほとんどの広告は2ステップ型になっています。

    まずは、オプトインページによって、自分の理想的なペルソナのリストを効率的に集れば、極論プラットフォームに依存しない商売もできますからね。

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

    目次
    このは屋 | 【オプトインページの作成方法】WordPress×MailChimpで簡易的に作成する方法
    このは屋 | 【オプトインページの作成方法】WordPress×MailChimpで簡易的に作成する方法
    このは屋
    (生成AI×デジタルマーケティングスクール)
    スモールビジネス特化の学び舎。スモールビジネスオーナーに向けて、ネットから集客する方法、オンラインで商売する方法、労働集約型から知識集約型へ移行する方法、安定した継続的な収入源を確保する方法…etc。悔いの無い生涯を謳歌する為の、鼻歌まじりの商売と生涯を、ワンストップで、トータルにサポートしている。

    オプトインページとは?

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

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

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

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

    提供側は、自身のノウハウを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(メールチンプ)」で解説していきますね。

    まずは、メルマガ用のオーディエンスを作ります。といってもアカウント作成時に自動的に1つオーディエンスがある状態になります。

    TOPページからメニューバーに表示された、「Audience(2019年10月現在。こちらの項目は、画面の仕様変更で変わる可能性があります。)」から設定画面に移動します。

    詳しい設定方法は以下の動画をご覧になってください。※2019年10月現在ではアカウントに登録するとすでにオーディエンスが1つ存在するので、新規オーディエンスの作成は不要です。

    MailChimpリスト(オーディエンス)の作成方法を解説【2019年4月時点】
    この動画を YouTube で視聴.

    次にフォームの「埋め込みコード」を取得します。

    この埋め込みコードは、どのメール配信サービスにもありますので、確認してみてください。

    MailChimpの場合、

    • Signup formsタブをクリック
    • Embedded formsをクリック
    • Copy/paste onto your siteに埋め込みコードがあります。

    コピーする前に、右側に「Enhance your form」という項目があるので、そこの「Disable all JavaScript」にチェックをいれましょう。

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

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

    この状態で、フォームの埋め込みコードをコピーします。

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

    フォームの埋め込みコードをWordPressの固定ページに貼り付けます。

    エディタは「テキスト」にしてから貼り付けてください。

    配置場所は、ページの構成によります。初めて編集する方は一番下がわかりやすいです。

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

    フォームを確認できると思います。まずは、「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であれば固定ページの上限がないですから。

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

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

    Free Web App 読むだけで終わらず、少し触ってみる。

    無料ウェブアプリで、AIと一緒に考え、整理し、作る感覚を試せます。現在地や次に取り組むことを確認してみてください。

    無料ウェブアプリを見る
    Free Template Kit 読んだ内容を、実際の商売に落とし込む。

    ランディングページ、ブログ、広告、メール。AIと一緒に作り、直し、育てるための型を、まずは手元に置いてください。

    無料テンプレート全13種を受け取る
    GET THE KIT
    まずは、型を手に入れる。

    このは屋は、スモールビジネスが外注業者に依存せず、AIと一緒に自分の商売を作れるようになるための学び舎です。記事を読んで終わりにせず、手を動かすための型を受け取ってください。

    ランディングページ・ブログ・広告・メールまで対応 使い方の解説動画付き AIと一緒に磨くための実践テンプレート
    無料テンプレート全13種の内容イメージ

    無料テンプレート全13種を受け取る

    メールアドレスを入力して送信してください。すぐに受け取り方法をご案内します。

    送信後、無料テンプレート全13種の受け取り方法をメールでお送りします。
    ※「@icloud.com、@me.com、@mac.com等のアドレス」および携帯アドレスは、メールが届かない場合があります。できればGmailアドレス、またはパソコンのメールアドレスをご登録ください。入力間違いを防ぐため、コピー&ペーストでの入力をおすすめします。同業者の方のお申し込みはご遠慮ください。
    無料テンプレートを受け取る
    Next Action 読んだら、型で試す。
    無料テンプレートを受け取る
    このは屋

    スモールビジネスが、AIとテンプレートを味方に、自分の商売を自分で育てるための学び舎です。

    About

    このは屋とは 進め方ガイド 会社概要

    Learn

    無料テンプレート セミナー集 無料ウェブアプリ一覧

    Policy

    利用規約 個人情報保護方針 特商法表記

    Contact

    お問合せ よくある質問 トップページ
    © このは屋合同会社
    利用規約 個人情報保護方針 特商法表記 お問合せ