ここからはActiveCampaignでできることを数回に分けて解説していきます。ActiveCampaignはメールマーケティングやCRM、セールス、カスタマーサポートなどがオールインワンになっているメール配信ツールです。
しかもWordPressやgoogleなどとも連携がしやすいのも特徴の一つです。低コストで導入しやすいので、今回を機に導入を検討してみませんか？
今回はActiveCampaignでメール取得画面を作る方法について、お話しします。実演付きで解説しますので、皆さんも一緒に挑戦してみてください。
ActiveCampaignでメール取得画面を作る手順
ActiveCampaignのメール取得画面とは、オプトインページやお客様のメール収集するための画面と考えていただければ正しいと思います。ActiveCampaignだけでもメール取得画面を作れるのは、このツールの大きな特徴です。
ActiveCampaignのメール取得画面を作る手順は、簡単にまとめると以下のとおりです。
- フォームを作る
- テンプレートを選ぶ
- パーツを選ぶ
- どのリストに入れるのか設定する
- テストしてみる
それでは早速ActiveCampaignのメール取得画面の作り方を、実演して解説していきましょう。
フォームを作る
上の画像を見てください。こちらはActiveCampaignの内部画面です。メールの取得画面を表示するためには、画面左側のメニューの中にある「Website」というところをクリックしましょう。
こちらがWebsiteを開いたときの画面です。ここで左のメニューの一番上にある三角のようなアイコンにカーソルを当てましょう。すると以下のスクショのように、「Show Navigation」という項目が表示されるはずです。
以下のスクショのように「Website」というメニューが表示されます。いろいろな項目が表示されますが、その中でも「Pages」というところを選択してください。
Pagesをクリックすると、以下のような画面が立ち上がるはずです。ここからページの作成ができます。
ページを作成するためには、画面の右上にある「Start building」というところをクリックしましょう。
Start buildingをクリックすると、上の画面に切り替わるはずです。「Pages」という画面で、まだ何も作成していないので中央に「No pages in this folder」と表示されるはずです。新規作成するのであれば、画面右上にある「Add a new page」をクリックしましょう。
テンプレートを選ぶ
Add a new pageをクリックすると、上の画面になるはずです。
こちらはテンプレートの一覧です。自分で一から作成しなくても、このような素敵なテンプレートが使えます。好みのテンプレートがあるか、いろいろと見ていきましょう。テンプレートのところにカーソルを合わせると、上の画面のように英語のメニューが表示されます。そのなかで「PREVIEW」をクリックすると、該当のテンプレートがどんな感じか、プレビューが表示されます。
プレビューを見ていただくとわかりますが、かなり本格的なメール取得ページを作成できます。中には一般的なホームページと比較しても見劣りしないような本格的なものも見られます。
上の画面をご覧ください。こちらもプレビュー画面の一つです。上部にパソコンとスマホのアイコンが表示されていますね。右側のスマホのアイコンをクリックすると、上の画面のようにスマホ画面で見た場合のプレビューが表示されます。
いろいろなテンプレートがありますが、自分に合ったものを選んでいただいて構いません。今回は以下のテンプレートを使って、今後の作業を進めていきたいと思います。分かりやすくてシンプルだったので、こちらを選んでみました。PREVIEWの上にある「Use this template」をクリックしましょう。下のスクショのようにプレビュー画面の右上にも同じボタンがあるので、こちらをクリックしてもかまいません。
パーツを選ぶ
Use this templateをクリックすると、以下の画面が表示されます。
「Rename Page」というダイアログが表示されました。このページの名前を付けてください、という意味です。NAMEの「Untitled」というところを変更して、任意の名称を設定してください。
今回はあくまでもサンプルなので、「メール取得ページ」と設定してみましょう。そして左下にある「Save」をクリックしてください。
次に以下のような画面になります。テンプレートそのままでは利用できないので、自分仕様に編集しましょう。変えたいところにカーソルを持ってきてクリックすると、以下のように編集画面に切り替わります。
自分の好きなように編集していただいて構いません。画像を変えたり、ロゴを変えたり、文章を変更したりと自分の好きなように編集してください。
今回は一例として、タイトルの「Type your primary CTA here!」というテキストを上のスクショのように「下坂栄里子メルマガ登録ページ」に変更してみました。該当の場所にカーソルを合わせてクリックして、文字入力するだけで変更できるのでそれほど難しくはありません。
メール取得画面を作るにあたって、重要なのはフォームを入れることです。今回のテンプレの場合、「Add Form Below」という箇所がありますね。ここにフォームを持ってくるのが、レイアウト上自然かと思われます。
フォームの入れ方ですが、右側にブロックがいろいろと表示されます。この中から好きなパーツを取り入れることで、テンプレートを簡単に編集できます。フォームを入れたければ、「INLINE FORM」を選択してください。そして以下のスクショのように、所定の位置にドラッグしましょう。
所定の位置にまでドラッグしたら、マウスから手を放しましょう。すると以下の画面に切り替わるはずです。
すると上の画面のように「Add an Inline Form」というダイアログが立ち上がります。その下に「Use an existing form」と「Build a new form」の2種類の選択肢が表示されています。もし既存のフォームを使いたければ、左側をクリックして構いません。しかし今回は、新しく作っていくので「Build a new form」を選択してください。
どのリストに入れるのか設定する
Build a new formを選択すると、その下部の項目が変わります。まず「Inline Form Name」というところに任意の名前を登録してください。今回は「メルマガ登録」にしてみました。
「Form Action」はどのようなアクションにするか、設定する項目です。左側はプルダウンして「Subscribe to a list」を選択してください。そして右側は「Select a list」と表示されているので、皆さんが作ったリストを選択しましょう。今回は「下坂栄里子メルマガ」を選択しました。以下のような感じになりました。
このように設定できたら、右下にある「Start building form」をクリックしましょう。今回はあくまでも一例なので、フォームの名前やアクションなどは適当に変更してください。
このようにフォームが表示されるはずです。デフォルトの場合、このようにシンプルなフォームが表示されます。自分の用途に合わせて、こちらを編集していきましょう。
変更したい箇所をクリックすると、右側に編集画面が表示されます。そして上のスクショのように「メルマガの登録はこちら」と入力すると、ヘッダー部分のテキストが変わりました。ヘッダーの下部のところは説明文になります。
説明文のところを選択すると、右側に<p></p>のタグに囲まれてテキストが書かれているでしょう。この<p></p>タグはそのまま残して、以下のスクショのようにテキスト部分だけ好きなように書き換えてください。
今回は「ご登録いただくとお役立ち情報やクーポンをプレゼントしています」と入力してみました。すると上の画面のように説明文のコメントが変わりました。
同じように説明文の下にある「Full Name」のところはデフォルトでは「Type your name」となっています。こちらをクリックすると、右側に「Field Header」と「Default text」という2つの項目が表示されました。今回は両方とも日本語で「お名前」としてみました。
上の画像のField HeaderとDefault textの下部に注目してください。「Required」という項目があるでしょう。こちらのチェックボックスにチェックを入れておきましょう。こうすると、名前の入力が必須になります。左側の名前の項目に※印がつき、必須になりました。Requiredにチェックを入れておかないと、お客様登録が次に進めません。
その下部にEmailのボックスがあるでしょう。今回はField HeaderとDefault text両方とも「メールアドレス」に設定しました。
Emailの次に「Submit」というボタンがあるでしょう。こちらも自由に変更できます。Submit部分をクリックして、右側の「Label」のところで変更が可能です。今回は「登録する」としてみましょう。
さらにその下には「Marleting by ActiveCampaign」という項目があります。これは「ActiveCampaignを使っていますよ」という宣伝部分になります。これは編集で消すことができます。
上の画像を見てください。「ActiveCampaign」の部分をクリックすると、右側にいろいろなメニューが表示されます。画面下部に「AC Branding」という項目があるでしょう。現在「ON」になっていますが、こちらを「OFF」にします。するとActiveCampaignの部分がなくなります。
ここまで設定すると、上のような画面に仕上がるはずです。これでフォームができました。ほかにもボタンの色を変更するなど、いろいろとカスタムできるので必要なものは変更していきましょう。ここまでできましたら、右上にある「Add to your page」をクリックしてください。すると以下のスクショのような画面が表示されるはずです。
右下の「Add Form Below」というところに注目してください。先ほど設定した通りに、メルマガの登録フォームが表示されました。後は大きさなどを微調整しましょう。
例えばカーソルの指している「Add form below」という部分は必要ありません。こちらを選択すると、右側にゴミ箱のアイコンがあります。ゴミ箱のアイコンをクリックすれば、該当する個所は消去されます。これでウェブページのメルマガ登録ページが完成です。
ここまでできあがりましたら、上の画面右上の「Publish page」をクリックしましょう。すると以下のスクショの画面に切り替わります。
「ページを公開」をクリックする前に、「メール取得ページ」の右隣に「…」があります。こちらをクリックすると上のスクショのようにいくつかメニューが表示されます。この中でも一番上にある「Rename」を選択してください。
Renameをクリックすると、上の画面が表示されるはずです。「Page Details」の各項目を設定しましょう。現在NAMEの項目には「メール取得ページ」と記載されています。日本語のままだとURLとしてふさわしくないので、英語に変更しておきましょう。そこで今回は「mail」に変更してみました。変更できたら、画面右上にある「Publish page」をクリックしてみましょう。クリックした後の画面が、以下のスクショです。
「Finish setting up your page to publish」の「URL」の項目に注目してください。先ほど設定したように「mail」になっていますね。
URLが変更されていることを確認したら、左下にある「Publish」をクリックしてください。問題なければ、以下のスクショのようなメッセージが表示されるはずです。
画面右上のところに「Your page was successfully published！」というメッセージが表記されていますね。これは「あなたのページが問題なくパブリッシュできました」という意味です。
テストしてみる
「Your page was successfully published！」の下部に「View live」というボタンがあります。こちらをクリックしてみましょう。すると以下のスクショのように、作成したメルマガ登録ページのプレビューが表示されます。
まず上部のURL欄を見てみましょう。URLの最後の部分が「mail」になっているのが確認できますね。プレビューを見ると、「メルマガの登録はこちら」にある名前とメールアドレスを入力して、「登録する」をクリックすれば、こちらのメールリストに登録されます。これでメール取得画面のページができあがりました。
メール取得画面のページがきちんと登録されているか、確認してみましょう。先ほどと同じ要領で「Website」のメニューのなかの「Pages」を選択してください。Pagesをクリックすると、以下のスクショのような画面が立ち上がるはずです。
上の画面のように先ほど作成した「mail」が表示されています。mailの下に「Published」という項目がありますね。Publishedが表示され、その隣のチェックボックスが緑色になっていれば、完了していることを意味します。Publishedの下には、URLも記載されています。こちらをクリックしても、先ほど作成したメール収集ページにアクセスできます。
まとめ
いかがでしたか？
今回はActiveCampaignでメール取得画面を作る方法について、お話ししました。メルマガ登録ページを作成するのは難しそうと思う人もいるかもしれません。しかしActiveCampaign には、さまざまなテンプレートが用意されています。
テンプレートを利用すれば、テキストや画像、ロゴなどを自分のものに変更するだけで良いので比較的簡単に作れます。ActiveCampaignだけでも、ここまで見てきたようにほかのWebサイトと比較してもそん色ないだけのウェブページが制作できます。メルマガ登録ページを作成したければ、ぜひとも活用してみてください。