⑥メルマガ登録ページの作り方

こんにちは画家の黒沼です。

前回はメルマガスタンドの設置方法
について解説しました。

 

今回は、メルマガ登録ページの作り方、
考え方を紹介していきます。

 

まず、はじめにおさらいです。

ペルソナをイメージ

ペルソナのためのブログ記事を
100記事書く

8000PV突破

メルマガ登録ページを
作ってメルマガ開始

順調に進んでいる方は
ここまで、そろそろ来ている
と思います。

 

この後さらに進んでいき、
下記の流れで作業していきます。

 

ペルソナをイメージ

ペルソナのためのブログ記事を
100記事書く【壁①】

8000PV突破

メルマガ登録ページを作って
メルマガ開始【壁②】


無料講座を作って
ステップメールで流す


セールスプロモーション
のメールを書く


コンテンツを作る

コンテンツ販売ページ(LP)を
作りコンテンツ販売【壁③】

 

このプロセスの中で、突破が
難しい壁が3つあります。

 

壁①が100記事書く
根性が試される壁です。

壁②は1日1人以上登録される
メルマガ登録ページ作りの壁です。

壁③はコンテンツが売れるか?
の壁です。

 

正直、壁②が最も強敵です。

壁①は時間をかけてコツコツやれば
突破できます。

壁③は正解の「型」を守ってLPを
作れば突破できるでしょう。

 

しかし、壁②はお客さんの反応を見ながら、
カイゼンを繰り返し、

より登録率の高いメルマガ登録ページを
目指す必要があるのです。

 

今回解説する、メルマガ登録ページを作る
というのが難易度が最も高いのです。

なので、例えうまくいかなくても
へこまず頑張っていきましょう。

 

(ブログ開設から3年近く経った
私の場合でも、定期的に
メルマガ登録ページは
カイゼンしています。)

 

メルマガ登録ページの基本構成

メルマガ登録ページはカイゼンを
繰り返していくものだとはいえ、

もちろん基本的な構成はあります。

はじめはこの「型」を守って
作ってみましょう。

 

各パートの考え方、作り方

ヘッダー

ヘッダーはこのように、こちらを向いている
講師の写真が良いでしょう。

明るい雰囲気で、あなたの専門性が
伝わる場所、服装であることが重要です。

 

人物写真ではない場合、このような
目を引くブランドイメージの伝わる写真
でも良いでしょう。

(メルマガ講座を受けたお客様にとっての
理想の未来を感じさせるような
憧れる写真が良いです。)

 

キャッチコピーに関しては

コピーライティングの回
解説したポイントを押さえて、

ペルソナが「これこそが私に必要だ!」
「登録しなきゃ損だ!」と思わせる
コピーを考えましょう。

 

基本的にブログ読者さんは、

自分のメールアドレスを入力するのが
不安ですし、億劫です。

なので、【無料】【不器用で絵がド下手~】
のようなフレーズを盛り込み、
ハードルを下げています。

 

ヘッダー画像には情報をたくさん盛り込みたい
ですが、

スマホで見たときに字が小さすぎて
読めなくなる事態は避けなくてはいけません。

 

このように、ヘッダーの上にヘッドコピー
(1枚も絵が売れない~の部分)や

ヘッダーの下にブレッド
(メルマガ内容の箇条書き)を書くのも良いでしょう。

登録フォーム

メルマガ登録フォームはいくつか設置します。
読者さんがページを読み進める中で、
登録したいときにすぐに登録してもらうためです。

メルマガ登録フォームの設置方法は↓の
記事で詳しく解説しています。

ステップメールと登録フォームの設置方法

お客様の声/推薦の声

メルマガをやっていると、メルマガ読者さん
と交流が深まり、感謝の声が
届くことがあります。

メルマガに登録したら訪れる
素晴らしい未来や、体験をイメージ
させるには

実際登録した人の声を見せるのが
1番なのです。

読者の声がない最初のうちは、友人や知人、
リアルの生徒などに協力してもらい
コメントを頂きましょう。

↓のインタビュー記事がそのまま
メルマガ登録ページの推薦の声として
貼ってあります。

個展で4枚も絵を売った画家さんが現れました。

特典

メルマガ登録者が無料で
もらえるプレゼントです。

ここで重要なのは、

「プレゼントの中身の良し悪しは、
登録するまでわからない。」

ということです。

つまり、登録する前から価値が伝わる、
欲しい!と思われるタイトル
重要なのです。

ここでも、コピーライティングの力
が生かされます。

 

「フランスおすすめギャラリーガイド~
安全に楽しむために」

このような、プレゼント内容の特徴の説明
に終始しているタイトルでは

欲しいと思われません。

 

全く同じプレゼントの中身でも、
タイトルをこのように変えたらどうでしょうか?

「100枚絵を売った画家が教えたくなかった
㊙ギャラリー15選~フランス編」

このプレゼントの中身を読むためだけに
メルマガ登録してくれる人がいそうですよね?

ちなみに、↑のような立体的な本の
CG画像はboxshotというサイトで
無料で作れます。

ストーリー

自己紹介、またはメルマガ開発秘話を
書きましょう。

読者さんを没入させハートを
動かすようなストーリーを
書きましょう。

だいたいこのような流れで書いていくと
ハートを動かすストーリーを
書くことができます。

①平凡ながらも楽しい毎日
②挑戦するも挫折
③失敗の連続
④転機
⑤最初の成功
⑥成功の連続
⑦経験知を皆さんにシェアします
⑧次成功するのはあなたの番です。

私のブログのトップページは
①の前に現在の実績をアピールして、

あとはほぼ⑧まで型通りに書いています。
↓ご参照ください。

画家を目指す全ての人へ

メルマガ登録ページの例

ここまで紹介した方法で
実際に作ったメルマガ登録ページを
お見せします。

ちょっとしたマイナーチェンジも
含まれていますが、参考に
なると思います。

また、型通り作ったけど
上手くいかない場合は
マイナーチェンジも参考にして
みてください。

最初は真似でも構わないので、
是非ここまで解説した内容を
ふまえ作ってみてください。

メルマガ登録ページ サンプル

スマホとパソコン両方で確認

現在、半分以上のユーザーが
スマホであなたのページを
見ていると思います。

なので、メルマガ登録ページは
スマホで見たときにも

ちゃんと見やすいものに
なっているか?

実際に自分のメールアドレスを
登録したら、届くのか?を
確認しておきましょう。

 

バナーを貼っていこう

メルマガ登録ページは完成しても、
そのままでは、

ほとんど見てもらえません。

そこで、ブログの目立つ部分に
バナーを張っていきましょう。

おすすめはブログのトップページの
ヘッダー部分、サイドバーや、
各記事の下などです。

バナーをサイドバーやヘッダーに貼る方法

外観→ウィジェット
と進み、サイドバーをクリック

テキストを選び
ドラッグアンドドロップ

メディアを追加

バナー画像を選択して
カスタムURL選択
リンク先のURLを入力し

投稿に挿入

保存ボタンを押す

ヘッダーの場合もやり方は同様です。

ヘッダーの場合
トップページ上部
の部分から操作します。

 

各記事の下に貼る方法

この部分から操作して
バナーを張っておくと

全ての記事の下や
記事タイトルの下に

バナーを張ることができます。

モバイルアンカーとは

モバイルアンカー(固定バナー)
設置方法を紹介します。

モバイルアンカーとはこのように、
スマホで見たときに画面の下に
追尾表示されるバナーリンクのことです。

このモバイルアンカーは
あなたのどのブログ記事を見ている時にも
表示されます。

これを設置して、メルマガ登録ページへの
リンクを張っておくと、

より多くの方にメルマガ登録ページを
見てもらえます。

モバイルアンカーの貼り方

モバイルアンカーを張るための
プラグイン Custom CSS and JS
をインストールします。

Add HTMLをクリック

下記のHTMLコードをコピペします。
青字の部分は各自のURLを貼りましょう。

<div class=”fix_menu_smartphone”>
<a href=”https://ここにメルマガ登録ページのURLをコピペ“><img class=”alignnone size-full wp-image-6941″ src=”https://ここに表示させたい画像のURLをコピペ” alt=”” width=”976″ height=”153″ /></a>
</div>

コピペしたら必ず公開/更新ボタン
を押しましょう。

 

表示させたい画像のURLの探し方

メディアを開き、画像を選択すると
表示される→のURLが画像のURLです。

予め↑のようなモバイルアンカー用の画像を
作っておきましょう。
(781px×195pxくらいがおすすめです。)

 

Add JS Codeをクリック

次は下記のJSコードをコピペします。

 

<script type=”text/javascript”>
$(function(){
if ((navigator.userAgent.indexOf(‘iPhone’) > 0
&& navigator.userAgent.indexOf(‘iPad’) == -1)
|| navigator.userAgent.indexOf(‘iPod’) > 0
|| navigator.userAgent.indexOf(‘Android’) > 0) {
var bH = $(‘.fix_menu_smartphone’).height();
$(‘body’).css(‘margin-bottom’,bH+’px’);
}else{
$(‘.fix_menu_smartphone’).css(‘display’,’none’);
}
});
</script>

コピペしたら必ず公開/更新ボタン
を押しましょう。

Add CSS Codeをクリック

次は下記のJSコードをコピペします。

.fix_menu_smartphone{
position: fixed;
bottom: 0px;
left: 0px;
z-index: 10000;
}
.fix_menu_smartphone img{
width:100%;
}

最後に入力した3つのコードの

(画像では関係のないものが
1つあり、4つになっていますが、)

星が青くなっているか確認し、終了です。

カイゼンの繰り返しが重要

メルマガ登録ページの作り方を
解説してきましたが、

10%以上の登録率
メルマガ登録ページが作れれば、
最高でしょう。

(1日に30人が閲覧した場合、3人
登録してくれるような
メルマガ登録ページです。)

 

登録率を分析してみよう

Googleアナリティクス
メルマガ登録ページの閲覧者数を
チェックしてみましょう。

まず初めにページレポートをクリック

メルマガ登録ページのURLを見つけます。

過去7日間で127人(1日当たり、18人ほどです。)

この期間に12人メルマガ登録があったので
登録率は9%ですね。
(もう少し上げたいところです。)

 

ここからカイゼンしていくわけですが
下記の2つの分析、施策をしてみてください。

そもそもメルマガ登録ページが見られていない場合

メルマガ登録ページが
そもそも見られていない場合

バナーやモバイルアンカーの
キャッチコピーを変更しましょう。

 

↓代案のバナーの例

コピーライティングの力を駆使して、
ブログ読者さんが思わずクリックする
コピーを書いた代案のバナーを作りましょう。

 

メルマガ登録ページを見る人は多いが登録してもらえない場合

Googleアナリティクスでメルマガ登録ページ
の閲覧者数をチェックした結果

1日30人がメルマガ登録ページを
閲覧していた。

なのに、1人しかメルマガ登録
してくれない

 

この場合、登録率は30分の1、
つまり3%なので、
カイゼンの余地ありです。

 

この場合、敗因として考えられるのは、

メルマガ登録ページの内容がつまらない
メルマガ登録フォームが機能していない

のいずれかでしょう。

メルマガ登録ページの内容は
コピーライティングの力
使ってもう一度、

コピーを変えたり、バナーの画像を
変えたりしてカイゼンします。

ヘッダーのカイゼンを真っ先に試して
みましょう。

 

 

このように、私はこれまでに何度も
登録率をチェックしながらヘッダーを
変えてきました。

もし、イメージできない場合は
始めに、ヘッダーのデザインを複数
用意しておき、

全て、7日間程度掲載し
最も反応率の高いものを選ぶ
というテストをすると良いでしょう。

 

メルマガ登録フォームが機能しているか
どうかは、自分のメールアドレスを
登録してみることでテストできます。