human:※プライバシーポリシーに基づき、スパムメールを送信したり、メールアドレスを第三者に譲渡・売買などは一切いたしません。※Webクリエイターボックスのニュースレターは、どのタイミングであっても配信停止ができます。配信停止を希望する方は、ニュースレターのフッターにある「配信停止」リンクをクリックしてください。MailChimpとは?MailChimpは世界中で愛されているニュースレターの作成支援&配信サービス。残念ながら画面はすべて英語ですが、配信先のメールアドレスを登録するだけですぐにでもニュースレターを送信できる手軽さが魅力です。MailChimpでできることMailChimpでは様々なテンプレートが用意されています。その中から好みのものを選択して利用したり、テンプレートをカスタマイズして利用してもOK。コンテンツの編集は非常に簡単。テンプレートに用意されている画像スペースをクリックすれば、画像をアップロードする画面に切り替わり、任意のものを挿入できます。テキストも同様に編集可能。ボタンや水平線など、新たに要素を加えたいときは、右側のパネルからドラッグ&ドロップでできちゃいます。どの画像がクリックされやすいか?どの題名が一番効果的か?など、インターネットマーケティングの世界ではよく実施されるA/Bテストの機能も用意されています。同じキャンペーンで最大3つまでバリエーションを変えて送信可能。メールの開封率やクリック率、登録者数など、様々な計測&分析ができます。同業者の平均値と比較もでき、よりよいコンテンツを作るための参考になりそう。気になる料金ですが、これだけの機能が揃っていて無料で最大2000人の配信先に、月間1万2000通まで配信できます。多くのユーザーに配信したり、月間配信数を無制限にしたい場合は月額料金が発生します。詳しい料金はMailChimpの料金プランページをご覧ください。読者数を入力すると、それにあったプランが表示されます。オリジナルテンプレートを作成するMailChimpではすでに様々なテンプレートが用意されていますが、Webサイトのデザインに合わせたオリジナルのテンプレートが欲しくなっちゃいますよね。既存のテンプレートから色や画像をカスタマイズして作る方法が一番簡単なのですが、ここでは自力で一から作成する方法を紹介。HTMLメールの基本的なコーディング方法は過去記事「HTMLメール制作のコツや便利なサービスいろいろ」でも書いていますが、おさらい&付け足ししてみます。タグを使ってレイアウトを組んでいました。その頃と同じ手法で、すべてのレイアウトをテーブルで組んでいく必要があります。やっかいなのが、メールクライアントによっては謎の余白ができてしまうこと。タグに以下の指定をすることで解決できます。部分のスタイル指定を無視するため、各要素に直接CSSを指定する必要があります。#fc2;">こんな感じですね。要素にスタイルを指定するのではなく、できるだけ直近の要素に指定するとトラブルを回避しやすいです。書き始めますが、HTMLメールはかなり古いです。Transitionalの書き方でコーディングが始まります。階層深く記述されていくのが基本のコーディング。以下の例では一つ目のテーブルが背景に当たる部分、二つ目のテーブルがコンテンツの入る枠組みとなっています。なるのは不可避なので、コメント必須!どこからどこまでが何のコンテンツになっているのか、わかりやすくしておきましょう。テーブルの幅は600pxが最適です。詳しい説明不要な簡単な注意点ばかりなので、箇条書きにて。高解像度デバイスに対応させるため、表示させたい画像の倍のサイズのものを用意アニメーションGIFは避ける。デバイスによっては表示されない背景画像に頼ったデザインは避ける。レスポンシブデザインレスポンシブWebデザインと同様、HTMLメールでもレスポンシブに対応させるためにはメディアクエリーを利用します。タグを無視するため、モバイルファースト手法で制作していきます。モバイルファーストとは、従来のデスクトップデザイン→メディアクエリーで小さい画面に対応、という順序ではなく、先にスマートフォンサイズで制作しておいて、メディアクエリーでデスクトップサイズに対応させるという手法です。これならメディアクエリーが利用できないスマートフォンアプリでもうまく表示されるでしょう。*/}この書き方だと、デバイスの幅が480pxを超える場合は別のスタイルを適応させる、という指定になります。数値はもちろん変更可能。.(ドット)を先頭に加えます。](角括弧)を使った方法で指定します。いった具合に、角括弧の前にタグを記述。*(アスタリスク)を加えます。MailChimp用のタグをつけて編集可能に上記に注意しながらコーディングすれば、なんとかHTMLメールのテンプレートが作成できるはずです。そこまできたら後もう一歩!完成したHTMLテンプレートにMailChimp専用のタグをつけて、MailChimpの編集画面で画像やテキストの編集ができるようにします。編集可能テキスト/画像テンプレートにはダミーテキストを挿入しておき、その部分をWebサイト上で編集できるように設定します。いう属性を追加するだけ。画像の場合は、まずプレースホルダーになる画像を使用し、こちらのコードを使って変更可能にしておくといいでしょう。この「body」という部分は任意のものに変更してください。重複したらエラーがでてしまいます。ここにテキストが入ります。ここにテキストが入ります。</td></tr>繰り返し表示コンテンツ配信するコンテンツは毎回同じ数だとは限りません。MailChimpの編集画面上で見ると「+」ボタンが表示され、好きなだけ同じレイアウトでコンテンツを追加できます。メールの題名と同じものを挿入できます。メール本文の冒頭に使っている企業も多いですね。さん、ご登録ありがとうございます!</p>配信停止リンクたとえニュースレターの登録を解除したいというユーザーがいたとしても、その方法を隠したり、阻止してはいけません。どのメールにも登録解除のリンク(または解除方法)を記載しましょう。加えるだけなので簡単です。Sheetこんな流れでMailChimpのテンプレートを制作しました!HTMLメールのコーディングは久しぶりだったので、なかなか手間取ってしまった...。みなさんの参考になれば幸いです。Webクリエイターボックスのニュースレター登録もお忘れなく!シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。