主婦ノマドのブログ

場所や時間にとらわれない働き方、ブログ運営やアフィリエイト、ライティングテクニックなどなど。

ブログの投稿にはアフィリエイト広告、およびアドセンス広告が含まれる場合があります。

MailChimp(無料)を使って、はてなブログの新規記事をメール購読者に通知する方法

無料で使えるメールマガジン配信サービスMailChimp(メールチンプ)を使って、はてなブログの新規記事を登録読者にメールで配信する方法を説明します。

 

 

無料メルマガ配信サービスMailChimp(メールチンプ)について

f:id:hanagardener:20180608012013p:plain

MailChimp(メールチンプ)はアメリカをベースとしたメールマーケティングの会社です。有料版と無料版がありますが、メール登録者が2,000人以下で月に12,000通のメール配信までなら、無料で使用できるという優れたサービスです。しかも、いわゆるステップメルマガのようなメール配信もできるので、かなり気になりますよね。

 

デメリットは、操作画面がすべて英語だということです…。そのうち、日本語にも対応してくれると思いますが、ここ数日、この英語管理画面と格闘していました。

 

私はまだ使い始めたばかりですが、はてなの私のブログにも基本のメルマガとして、新規投稿をお知らせするメール配信システムを設置したので紹介しておきます。

 

無料メルマガ配信サービスMailChimp(メールチンプ)登録方法

f:id:hanagardener:20180608012000p:plain

まず、自分のアカウントを開設します。MailChimp(メールチンプ)の公式サイトから「Sign up free」をクリックして必要事項を記入しましょう。

 

  • Email:メールアドレス
  • Username:好きなユーザーネームを入力
  • Password:英数字で大文字と小文字、記号、番号を使って8桁以上で入力します。

 

入力が完了したら、「Get Started!」をクリックします。そうすると、登録し多メールアドレスに確認メールが届きます。そのメールの中にある「Activate」というボタンをクリックします。

f:id:hanagardener:20180608013036p:plain

そうすると上記のようなロボット認証がでるので、「I'm not a Robot」をクリックしてください。

 

f:id:hanagardener:20180608013131p:plain

 

First Name(名前)とLast Name(姓)を入力します。

 

f:id:hanagardener:20180608013244p:plain

 

ビジネスの名称とURLを入力するようにメッセージが出ます。自分のブログ名を記入してもいいし、会社を持っている人なら会社名でもいいと思います。ウェブサイトのURLは、もしなければツイッターやフェイスブックのURLでもいいようです。

 

 

f:id:hanagardener:20180608013819p:plain

 

住所を入力します。これは、発信するメルマガのフッターに入るようになっていて、スパム対策として、入力が必須になっています。

 

  • Address line 1:通り名や番地
  • Address line 2:建物の名称など(空欄でも可)
  • City:市区町村
  • State:都道府県
  • Zip:郵便番号 (ハイフンはいらないかも)
  • Country:国名を選択

 

f:id:hanagardener:20180608014124p:plain

 

オンラインで何か販売していますか、という質問です。YesかNoを選んでContinueをクリック。

 

f:id:hanagardener:20180608014249p:plain

 

次にフェイスブックやツイッターアカウントを関連付けることができます。記入しなくてもかまいません。

f:id:hanagardener:20180608014400p:plain

次の画面では、E-コマースやマーケティングに関するニュースレターを受け取るかどうか聞いています。多分英語のレターなので、無視して「Let's Go!」をクリックしました。

 

以上でアカウントの登録は完了です。これで準備ができました。ここから、はてなにメール購読機能を導入する方法を説明します。

 

 

1. メールリストを作成する

f:id:hanagardener:20180608015134p:plain

 まず、メールリストを作成します。画面の上のバーに表示されている「Lists」をクリックすると上のような画面になります(何も登録していない人は空っぽのはずです)。

 

ここで、画面の右上にある「Create List」という黒っぽいボタンをクリックします。

f:id:hanagardener:20180608015523p:plain

  • List name:メールリストの名前を付けます。自分が分かりやすい名前を。
  • Default From email Address:メールの送信者(メルマガ発行者)アドレスを記入。
  • Default From Name:メールの送信者(メルマガ発行者)の名前を記入。メール受信者にはこの名前で届くので、受け手が分かりやすい名前を付けます。
  • Remind people how signed....:メール受信者にこのメールが届けられる事情を説明します。例えば「このメールは○○メール購読者に送信しています」みたいな感じ。メルマガのフッターに記載されます。「Write a short...」の部分を消して上書きします。

 

スクロールして、

 

 

f:id:hanagardener:20180608020610p:plain

 

  • Enable double opt-in:メール登録者に登録の確認メールを送信します
  • Enable GDPR fields:GDPRフィールドを挿入したい場合はクリックします。
  • Notification:メールリストの登録や解除の連絡を受け取るメールアドレスを設定します(Editで編集できます)
  • Daily summary:リストへ新規登録の有無にかかわらず、毎日通知を受け取りたい場合はここにチェック。
  • One by One :リストへ新規登録や解除があるたびに通知を受け取りたい人はここにチェックマークを入れます(上の段が登録、下の段が解除)。

 

 「Save」ボタンを押して完了です。

 

 

f:id:hanagardener:20180608021549p:plain

 

「ノマドのブログ」メール購読リストと名前を付けて作ってみました。この状態ではまだメール登録者がゼロで、フォルダは空っぽです。メール登録がゼロだと、後でメルマガをデザインするときにうまくできないので、とりあえずテストとして自分のメールアドレスを登録しておきましょう。

 

Add contactsの横の▼をクリックして、「Add a subscriber」を選択します。

f:id:hanagardener:20180608022100p:plain

 

そうすると、メールアドレスを入力する画面になります。メールアドレス以外の項目は空欄でもかまいません。私は、名前に「テスト用」として自分のメールアドレスを登録しました。

 

f:id:hanagardener:20180608022202p:plain

 

スクロールしてこの画面。住所は空欄でもいいですが、国名はJapanを選んでおく方がいいと思います。たしか、登録者住所のタイムゾーンで予約配信する機能があったような気がするので。

 

その下の「This person gave me…」というのは、「この人のメールを登録する許可をいただいています」という意味です。ここにチェックがないと、手動によるメールアドレス登録はできません。チェックマークを入れて、一番下の「Subscribe」ボタンを押します。

 

f:id:hanagardener:20180608022631p:plain

 これで、「Manage contacts」から「View contacts」を選択すると、登録したメールアドレス一覧が表示されます。

 

いよいよメルマガをデザインしていきます。

 

2.キャンペーン(メルマガ)を作成する

f:id:hanagardener:20180608023753p:plain

MailChimpでは、メルマガのことは「Campaign(キャンペーン)」と呼びます。画面の上のバーにある「Campaigns」をクリックすると上のような画面になるので、右上の「Create Campaign」という黒っぽいボタンをクリックします。

 

f:id:hanagardener:20180608024028p:plain

するとこのようなポップアップ画面が開きますので、左下の「Create an Email」を選択します。

 

f:id:hanagardener:20180608024248p:plain

その次に表示される画面の上部、左から2番目の「Automated」を選ぶとこのような画面になります。「Share blog updates」を選んでクリック。

 

f:id:hanagardener:20180608024503p:plain

 

Campaign Nameのところに任意のタイトルを付け、その下のListsの中から対象となるメールリストを選択します。「Begin」をクリックして保存します。

 

f:id:hanagardener:20180608024731p:plain

次にRSSフィードの入力と送信時間の設定を行います。

 

RSSフィードが分からない場合は、ブログのURL(私のブログならhttp://nomado.hatenadiary.com/)をそのまま入力すれば、自動的にRSSフィードを取得してくれます。

 

ブログの新規投稿があった日の何時にメルマガで通知したいか(送付する曜日も)を設定できます。登録者がメールを開封してくれそうな時間帯を選ぶとよいと思います。

 

画面の右下にある「Next」というブルーのボタンをクリックします。

 

f:id:hanagardener:20180608025159p:plain

 

メルマガの送信者を選ぶ画面です。リスト全員に送付するので「Entire list」にチェックを入れたまま「Next」をクリックします。セグメントを使ってリストの中からメール送信者を選ぶこともできるみたいですね。

 

f:id:hanagardener:20180608025610p:plain

 Email subjectには、表示させたいメールの件名を入力します。デフォルトでは、英文で記載されているので、適当に日本語に直しておきます。後からでも編集ができるので、テストメールなどを見てから修正しましょう。

 

From nameには、メールに表示させたい送信者名を記入します。デフォルトで記入されている名前を変更したい場合はこの画面から行います。

 

また、From email addressにも、先ほど設定したメールアドレスが記載されているので、変更したい場合はここで修正できます。

 

さらに下にスクロールすると、トラッキングの設定ができるようになっています。必要に応じてチェック印を入れます。ここで、チェックができない項目は無料版では使えない機能です。

 

確認したら、画面右下の「Next」で次へ進みましょう。

 

f:id:hanagardener:20180608054431p:plain

 

メルマガのテンプレートを選びます。LayoutsもしくはThemesから選べるようです。私は、この画面で見ている一番上の段、真ん中の「Tell A Story」を選びました。

 

 

f:id:hanagardener:20180608055748p:plain

 

ここからメールのデザインをいじっていきます。

 

左側のデザインに、デフォルトですでに画像やロゴをアップできる部分やテキストの入力ボックスが設置されています。マウスオーバーすると、編集や削除ができるアイコンが表示されます。

 

右側に表示されているのは、様々な要素が追加できるボックスで、左側へドラッグしてドロップすることで追加してレイアウトを決めることができます。

 

f:id:hanagardener:20180608060524p:plain

ブログの更新情報をメールに書き込みたいので、「RSS Items」というボックスを選んで画面左側の編集画面に挿入します。これは、メール購読者に新規記事を案内するなら、ぜひ使いたい機能です。

 

後はいろいろ、削除したり、挿入したり、みなさんの工夫次第で個性的なメールデザインを作ってみてください!

 

f:id:hanagardener:20180608073608p:plain

 

こんな風にリンクボタンや画像、シェアボタンを挿入することも可能です。そして、保存したいときには「Save &Close」ボタンをクリックします。

 

f:id:hanagardener:20180608073757p:plain

 

ある程度デザインが決まったら、プレビューを見ることも可能です。

 

画面上の黒いバー、「Preview & Test」から「Enter Preview mode 1」を選択すると、プレビューを見ることができます。こんな感じ。

 

f:id:hanagardener:20180608074112p:plain

 

モバイル(Mobile)を選択すれば、スマホ画面のプレビューも確認できます。「いい感じかも」と思ったら、テストメールを送ることができます。

 

同じように「Preview & Test」で「Send a test email」を選択すると、ポップアップでメールアドレスの確認画面が表示されます。そこにテストメールを受信するメールアドレスを記入して「Sent Test」ボタンを押します。

 

テストメールを確認して、気になる点があれば、戻って編集できます。OKなら、「Next」で最後の仕上げです。

 

 

f:id:hanagardener:20180608074654p:plain

 

このような最終確認の画面が表示されますので、不備がないか確認しましょう。問題がなければ、画面右下にある「Start RSS」ボタンをクリックします(ここでメールリストが空っぽの状態だとエラーになります)。

 

「Comform RSS Start」という確認画面が表示されますので、「Start Campaign」をクリックしてメルマガを有効化します。その後に画面が切り替わり「Done and Done!」というメッセージがでれば、メルマガは有効化されています。

 

メッセージに記載されている配信時刻に、メルマガが配信されます。

 

ここまでで一仕事、って感じですね!

 

でも、まだやることが残っています。メールの登録画面設定です。あと少しですので、お付き合いください。

 

3.登録フォームを作成する

メール購読者の登録画面を設定します。ダッシュボードから、画面上部に表示されているメニューの「Lists」、そして該当するメールリストの名称をクリックします。

 

f:id:hanagardener:20180608075609p:plain

 

登録したメールリストの上部に表示されるメニューから、「Signup forms」を選ぶと上のような画面になります。

 

その人の好みによると思いますが、私が使うのは、Embedded formsとSubscriber pop-upです(画像では2番目と3番目)。

 

Embedded forms(ブログ挿入用のシンプルな登録フォーム)

f:id:hanagardener:20180608075907p:plain

 

 

ここでは、ブログに挿入するためのシンプルなメール登録フォームを作ることができます。私はシンプルな登録フォームが好きなので、Embedded formsでできるだけシンプルなものを作成します。

 

Classic、Suppre slim…と並んでいるところで、「Super slim」を選びます。メールアドレスの入力だけで登録できるフォームを作成できます。

 

f:id:hanagardener:20180608080321p:plain

 

こんな感じになります。むちゃ、シンプルですよね。Include form titleに好きな文言を記入します。ここでは、「メール登録でブログの最新投稿の通知を受け取る」と入力しました。このタイトル(見出し)を表示させないっためには「Include form title」のところのチェックボックスを空欄にします。

 

そして、「Copy/paste onto your site」のところに出ているコードをコピーします。

 

あとは、はてなブログで、メール登録フォームを出現させたい場所にコードを貼るだけです。ただし、オリジナルのコードでは「Email address」とか「Subscribe」とかが英語になっていますので、私は日本語に直して使っています。

 

placeholder="email address"をplaceholder="メールアドレス" に、 value="Subscribe"のところを value="送信する" に変えてみました。

 

これで、こんな感じ。

f:id:hanagardener:20180608081226p:plain

 

私の場合は、これにタイトルを付けてPCとスマホの記事下に表示するようにしています(この記事投稿時点)。

 

Subscriber pop-up(ポップアップで表示されるメール登録フォーム)の作成

次にポップアップのメール購読フォームを作ります。ポップアップは、サイトを訪れた人に向けてより効果的にアピールできる反面、ややウザい印象を与えてしまうこともあります。ですので、使用するときには慎重に試してみてください。

 

f:id:hanagardener:20180608082117p:plain

 

先ほどの「Signup forms」で「Subscriber pop-up」を選びます。そうすると、こういうシンプルな画面が表示されますので、ここからカスタマイズしていきます。

 

 Formatの部分では、ポップアップをどのように表示させるかを決定します。私は、右側からニュルっとでる「Slide」を選択しました。

 

Displayは、サイト訪問者にどのタイミングでメール登録フォームを出現させるかを選ぶことができます。訪問してすぐに表示させたいのであれば「Immediate」になりますが、それはちょっと押しが強すぎるので、その他のものを選ぶ方がよいと思います。

 

  • After 5 seconds:サイト訪問後5秒後
  • After 20 seconds :サイト訪問後20秒
  • Scroll to middle of page:ページの中央までスクロールした時
  • Scroll to bottom of page:ページの最終までスクロールした時
  • On exsit:サイト離脱時

 

 

その他、画像追加やテキストの編集は「Content」から、テキストやボタンリンクの色変更は「Design」からできます。出来上がったら、右下にある「Generate code」をクリックします。そして、最後に右下に表示される「Publish」というボタンをクリックしてください。

 

f:id:hanagardener:20180608083409p:plain

確認画面が出ますので、そこでも「Publish」をクリック。その後、「View code」をクリックするとコードが表示されますので、それをコピーして自分のはてなブログのヘッダーに挿入します。

 

この「Publish」ボタンを押さないと、システムが有効化されないので、忘れずにクリックしてください。

 

ここで、はてなブログのどこにコードを挿入するかでちょっと悩みました。PC表示の方は、デザインからPCカスタマイズでヘッダ(タイトル下)に挿入することで、きちんと表示されているようです。

 

ただ、スマホの方も同じようにヘッダのタイトル下に挿入しても、他の要素と被ってしまい、うまく表示されませんでした。

 

はてなブログ管理画面から設定の「詳細設定」で「headに要素を追加」でも、スマホはきれいに表示されません。ちょっと、ここだけが課題(現在保留中)です。もし、ご存知の方がいれば教えてください。

 

 

 記事下に挿入した分に関しては、PCもスマホもきちんと表示されているので、もしこの記事が役に立ちましたら、ぜひ、メール購読をお願いします(ズズイッと下にスクロールすると、メール入力が出てきます)!

 

(また、現在設定したばかりなので、ちょっと不安です。万が一、何か不具合があったらコメントからご連絡いただけますと助かります。)