包括的なメーリングリストガイド

ほとんどのオンラインコミュニケーションがソーシャルネットワークに切り替わっているという事実にもかかわらず、メーリングリストはマーケティングキャンペーンの重要な部分です。

マーケティングメーリングについて言えば、最初に思い浮かぶのは、単純なメッセージではなく、HTMLレターです。

電子メールの作成は、単純なWebページの作成によく似ていますが、留意すべき重要な違いがいくつかあります。 また、電子メールは魅力的というよりも、印象的な手段であることを忘れないでください。

多くの場合、ユーザーは大量のメールを受信しますが、ユーザーが特定の時間にアクセスするWebサイトとは対照的に、必ずしも都合の良い時間に来るとは限りません。 これは、次の文字に移る前に注意を引くために一瞬しかいないことを意味します。

読者の注意を引く瞬間があることを忘れないでください。効果的な電子メールの編集がより簡単で楽しくなります。

モバイルソリューションまたは障害

今日、ほとんどの人がモバイルデバイスからメールをチェックしているため（すべての文字のほぼ半分がモバイルアプリケーションで読み取られます）、正しく表示されない場合に美しいメールを作成するのに時間を費やすことは意味がありません。

最終的に、サブスクライバーが携帯電話からメールをチェックするときにレターが見栄えが悪いか、まったく読まない場合、後で動作中のコンピューターでチェックする可能性はありますか？ 無視できると思います。 実際、それらのほとんどは手紙を削除するか、さらに悪いことに、ニュースレターの購読を中止する可能性があります。

モバイルデバイスには2つのソリューションがあります。 最初のケースでは、ユーザーの画面のサイズに応じて、サイズと内部の要素のサイズを変更するレターを作成できます。 シンプルなデザインにはこれで十分です。 または、さまざまな画面サイズに適応するレスポンシブデザインを作成できます。

それぞれのソリューションには長所と短所があります。 最初のアプローチは、コードの観点から非常に簡単に実装でき、ほとんどすべてのデバイスで機能する可能性が高いです。 ただし、画面サイズを大幅に縮小しても、明確に区別できる非常に単純なテンプレートにのみ適しています。

レスポンシブデザインは開発がはるかに難しく、すべてのモバイルブラウザでサポートされているわけではありません（ただし、サポートは今後改善される可能性があります）。

レスポンシブデザイン

レスポンシブデザインは、おそらくサイズ変更可能なレイアウトよりも、ほとんどのHTMLフィードで実用的です。 これは、小さな画面では、圧縮された文字が読みにくくなる可能性が高いためです。

ニュースレター向けのモバイルソリューションを開発することが重要である理由については既に説明しました。 レターテンプレートを直接設計するときに覚えておく必要があるいくつかのポイント。 次の点はモバイルレイアウトに適用する必要がありますが、レターの大画面バージョンにも適用できます。

1. レイアウトはかなり狭く、およそ500〜600ピクセルの範囲である必要があります。 これにより、デスクトップデバイスとモバイルデバイスの両方でメッセージが正しく表示され、サイズ変更時にメッセージが腐食する可能性が低くなります。
2. フォントが十分に大きいことを確認してください。 さまざまなプラットフォームの最小フォントサイズに注意してください。そうしないと、テキストが意図したサイズより大きくなり、レイアウトが損なわれる可能性があります。 たとえば、iOSデバイスの最小フォントサイズは13ピクセルです。
3. 「タップ」できる要素はこれに適しているはずです。 これは、ユーザーが最初の試行で簡単にアクティブにできるように、十分に大きく他のリンクから分離する必要があることを意味します（おそらく、2番目のリンクがないため）。
4. display:noneを使用して、不要なアイテムを非display:none 。 デスクトップコンピューターやタブレットの画面上で便利なものは、スマートフォンの画面上の迷惑なゴミになります。 小さな画面のモットーは「少ないほど良い」です。

コードを書き始める前に、モバイルバージョンとデスクトップバージョンの両方の両方の設計フレームワークの概要を説明します。 それは価値があります。 行動を促すフレーズやその他の重要な情報がある場所に特に注意してください。 モバイル版では、これが最も重要です。

タイポグラフィ

多くのデザイナーは文字のグラフィックコンポーネントに焦点を当てていますが、タイポグラフィは（多くのサイトよりも）重要な部分です。 デフォルトで画像をブロックする電子メールクライアントの数を考慮すると、受信者に表示されるのはテキストコンテンツのみであることが判明する場合があります。

画面サイズに関係なく読みやすくするために、大きなフォントの使用を検討してください。 さまざまな画面の行の長さを覚えておいてください。 長すぎたり短すぎたりしてはいけません。 前者の場合、目が行から行に切り替わるのは困難であり、2番目の場合は、画面をスクロールしすぎることが必要になります。

特に2つ以上の段落がある場合は、見出しなどの書式設定を使用して、テキストを斜めから読みやすくします。

一般に、ニュースレターのタイポグラフィは、ウェブのタイポグラフィとそれほど違いはありません。ただし、前述の事実は例外であり、読者が最初に見る可能性のある唯一の事実です。

さまざまな目的のために、さまざまな手紙

サブスクライバーに送信できる（またはWebスタジオの場合はクライアント用に開発できる）さまざまな種類のレターがあります。 それぞれに独自の目的があり、それぞれに最適な方法で作成する必要があります。

ニュースレター

ニュースレターは、最も一般的な種類のメールの1つです。 多くの場合、付随するテキストの小さな部分を含む多くのリンクが含まれていますが、コンテンツが長い記事である場合はあまりありません。 どちらの場合も、レターにはアクションコールが1つも発音されない可能性が高くなりますが、代わりに複数のリンクがあります。

このような機能は、文字のバランスの取れた内容の遵守がそれらに依存するため、テキストのデザイナーと著者に挑戦します。 多くの場合、注目を集めるストーリーや、重みの少ない追加コンテンツとのリンクのように見えます。

たとえば、大きくて魅力的なデザインのプラスチクのニュースレター 。

通知

ニュースレターのもう1つの一般的なタイプは、通知です（トリガーメールとも呼ばれます）。 誰かが友達リクエストを送信したときにFacebookから送信される手紙、または新しい読者がいるときにTwitterで送信される手紙-そのような郵送の例。 サイトのプライバシーポリシーの変更の通知など、広告が含まれることもあります。 これらは通知であるという事実にもかかわらず、多くの場合、それらはあなたからのある種のアクションを伴います（たとえば、上記の場合、アカウントの検証）。 原則として、このような手紙は非常に短く、要点まではっきりと書かれており、行動を促すフレーズがはっきりと記載されています。

例として、 Proper Labsからの手紙。 サイトの新しいバージョンの立ち上げのお知らせ。

取引通知書

トランザクションレターは、ユーザーが特定の方法でサイトまたは会社と対話するときに送信されます。 これは、完全な購入または何かのサブスクリプション、またはオンラインストアでの未完成の購入などです。 このような手紙は、ユーザーに情報を提供する（注文確認の場合など）か、サイトに戻るよう促す（放棄されたバスケットの場合）のいずれかです。

トランザクションメールの良い例は、 One Eyed Catです。 また、オフライン企業が電子メールマーケティングを使用する方法も示しています。

マーケティングレター

マーケティングレターは、会社があなたとの協力を確立したいときに送信されます。 「特別オファー」、新製品、または類似のものが含まれている場合があります。 多くの場合、これらの手紙は、会社が他の場合に送信するものとは大きく異なります。

これらのレターは、サブスクライバーがアクションを実行するために特別に設計されています。 たとえば、サブスクリプション、購入などです。 行動を促すフレーズは、このような手紙の主要かつ最も重要な要素ですが、もちろん他の要素は、読者が望ましい行動を取るように促すためにこの呼び出しをサポートする必要があります。

コミュニティには優れたセールスレターがあります。これは、従来の企業がメールニュースレターを使用して顧客を引き付ける方法のもう1つの好例です。

ベストプラクティス

前述のように、レターのデザインとWebのデザインは、同じ属性の多くをまとめます。 ただし、留意すべき重要な違いがいくつかあります。

コンテンツが最も重要です

どんなものを開発しても、コンテンツは常に重要です。 ただし、電子メール、特にモバイルデバイスで表示される可能性が高い文字の場合、コンテンツは短く、最も重要なのは本質的にする必要があります。 読者の興味を引くのに最大数秒かかり、これらの秒を無駄な情報に費やすと、それを失うことになります。

コンテンツができるだけ簡潔で明快であることを確認してください。 読者があなたの手紙が何であり、あなたがそれから何を望んでいるかをすぐに理解できない場合、効率が重要です。

行動を促すフレーズをクリア

行動を促すことは、おそらくどのような手紙のデザインにおいても最も重要な部分です。 明らかに、ニュースレターには何らかの目的があります。 たとえば、読者に何かを購読させたり、読んだり購入したりします。 そのため、行動を促すフレーズと同時に、ユーザーにすべきことを明確に説明し、奨励する必要があります。

通常、アクションの呼び出しはボタンの形式です。 簡単に区別でき、低すぎないようにする必要があります（読者の注意を引くのに数秒しかかからないので、数秒以内に彼がそれを見る場所に行動を促すフレーズを置くと成功の可能性が高くなります） 。

行動を促すフレーズも指でタップできるようになっていることを確認してください。 これは、簡単に到達できるように十分に大きくなければならず、誤ってクリックされる可能性のある密集したリンクがあってはならないことを意味します。

事前にテストし、頻繁にテストしてください[約。 早期リリースと同様、頻繁にリリース]

手紙は、さまざまなデバイスとモバイルクライアントで完全にテストする必要があります。 レイアウトのテストは最初から開始できますが、開発プロセス全体を通して引き続きテストを行い、エラーがないことを確認してください。

また、テストは、変更した内容を覚えているため、エラーをより迅速に検出して修正できることを意味します。

主なクライアントとデバイスで特にサポートされているものとサポートされていないものを明確に理解し、これに応じて、これらの欠点に対応したフレームワークまたはワークピースを見つけるか、これらの機能を考慮してレイアウトをゼロから開発する必要があります。

「予備タイトル」のテキストを使用する

予備ヘッダーのテキストは、レターのプレビューとして多くのメールクライアントに表示されます。 このテキストは、メッセージの件名とほぼ同じです。 これを使用して、読者が受信した電子メールを開くように促します。 また、多くの電子メールクライアントが長すぎる場合、電子メールの件名を切り取るという理由でも役立ちます。

Webバージョンへのリンクを提供します

レターにWebバージョンへのリンクが含まれていることを確認してください。 誰かが本当に興味を持っているが、モバイルまたはメールクライアントで表示するのに問題がある場合。 多くのメールサービスでは、リンクのクリックを追跡できるため、リンクの使用者を確認できます。

複雑にしないでください

大量のグラフィックスと様式化された要素を使用して複雑なレイアウトを作成することにより、すべての読者に対して文字が適切に表示されないリスクが高まります。

シンプルなデザインとレイアウトは、100万の回避策やハッキングなしで、さまざまなデバイスで読むための手紙の用途が広がることを意味します。 複雑なデザインは一部の人に審美的な喜びをもたらすことができるという事実にもかかわらず、多くの場合、追加の苦痛の価値はなく、その利点は最小限になります。

テンプレートとフレームワーク

もちろん、「ゼロから」HTMLメールのコードを書くことは可能です（技術的な詳細については、以前の記事「 レスポンシブHTMLメールを設計する方法 」を参照してください）。

ケルベロス

Cerberusは、モバイルGmailとデスクトップOutlookの両方で通常表示されるレスポンシブメールテンプレートのセットです。 コードブロックは個別に使用することも、組み合わせて使用​​することもできます。 2つのバージョンがあります。1つはCSS3 Media Queriesを使用し、もう1つは使用しません。

インク

Inkは、レスポンシブメールのためのZurbの設計です。 インクベースのニュースレターは、あらゆるデバイスとクライアントで機能します。 Outlookでも。 インクは使い始めるのに十分なほど簡単であり、完全に文書化されています。

Inkで作成された一連のテンプレート

インクページに構築されたレスポンシブメールテンプレートは、この製品を理解するのに最適な場所です。 そこには4つのテンプレートがあります。大きなバナー画像（ヒーロー画像）を持つシンプルな1列のテンプレート、サイドバー（サイドバー）を持つレイアウト、最後の2つのハイブリッド（サイドバーヒーロー）です。

レスポンシブメールテンプレート

さらに、ZurbのWebサイトには、大きなバナー画像とテンプレートの使用に関する有用な情報が記載されたニュースレターテンプレートを見つけることができるResponsive Email Templatesセクションがあります。

レスポンシブEメールのサンプル項目

レスポンシブメールパターンは、 レスポンシブメールを作成するためのサンプルとモジュールのセットです。 レイアウト、ナビゲーション、リストなどのテンプレートが含まれています。

本当にシンプルなHTMLレターテンプレート

本当にシンプルなHTMLメールテンプレートは、まさにその名前のとおりです。 これは、非常にシンプルなデザインの非常にシンプルなHTMLレターテンプレートです。 これは、組み込みの行動を促すフレーズと明確な目標を持つ単一の列です。

テンプレートウィザード

CampaignMonitorのTemplate Builderを使用すると、HTMLメールテンプレートを数分で作成できます。 結果は完全にテストされ、モバイル向けに準備されます。 CampaignMonitor Webサイトですぐに使用を開始するか、ダウンロードして追加のアクションを実行できます。

無料のテンプレート

同じ会社の無料メールテンプレートは、自由にダウンロードして使用できる膨大な無料テンプレートです。

HTMLメールボイラープレートv 0.5

HTML Email Boilerplateは、電子メールを作成するための良い出発点です。 メールクライアントでの多くのレンダリングの問題を回避するデザインやレイアウトは含まれていません。

メールボイラープレート

Emailology Email Boilerplateには、HTMLメールの作成に必要なすべての基本が含まれています。 CSSとHTMLを含むソースコードは非常によく文書化されており、使用するために必要なすべての指示を提供します。

アントワート

Antwortは、さまざまな画面に適応する完全にレスポンシブな電子メールレイアウトを提供します。 Outlook、Gmailなど、主要なメールクライアントをすべてサポートしています。

GraphicMailニューステンプレート

GraphicMailでは、約100の無料のテンプレートを提供しています。 使用するには、無料のアカウントを登録する必要があります。

ThemeForestテンプレート

ThemeForestは多くのプレミアムテンプレートを提供しています。 費用は6ドルから19ドルです。 プレミアムテンプレートは使いやすい場合があり、無料のテンプレートでは見つけにくい追加機能が含まれている場合があります。

スタンピア

Stampliaは、プレミアムテンプレートを販売するためのプラットフォームです。 ニュースレター、トランザクションメールなどのレイアウトがあります。

ツール

WordPress e-Newsletterプラグイン

WordPressのe-Newsletterプラグインは、WordPress管理パネルでニュースレターと購読者にプロフェッショナルな管理システムを提供します。 一方で、サーバーに配布システムを配置するといくつかの問題が発生する可能性がありますが、一方では完全な制御が可能になり、一部の企業にとって非常に重要な月額料金が不要になります。

防弾背景画像

防弾背景画像は、CampaignMonitorの別のサービスです。 これは、文字の背景画像用のシンプルなコード取得ツールです。 目的の背景画像のURL、バックアップの色、およびこのルールをメッセージの本文全体に適用するか、テーブルの1つのセルのみに適用するかを指定するだけです。 その結果、テンプレートに挿入する必要がある既製のHTMLコードを取得できます。

防弾ボタン

同じ会社の別の「防弾」サービス。 防弾電子メールボタンを使用すると、レター用の美しいボタンを作成できます。 彼らは行動を促すフレーズの要素として理想的です。

リトマス

Litmusは、ニュースレターを追跡およびテストするためのツールのセットです。 メールプレビュー、分析、スパムテストツールが含まれています。 費用は月額$ 79から始まり、その年の支払い時に割引があります。

リトマススコープ

Litmus Scopeを使用すると、後で他のユーザーと共有できるメールのWebバージョンを簡単に作成できます。 このサービスはMacアプリケーションまたはブックマークレットとして利用でき、Webベースの電子メールインターフェースで動作します。

インスピレーションの例

将来的にあなたのインスピレーションを引き出すことができる膨大な数のメールニュースレターギャラリーがありますが、ここには20の素晴らしいデザインがあります。

捕鯨者

聖 テレサオークション

オンラインストアガイズ

インスピレーションポイント

どこでも

球体

フォーム関数とクラス

ボーデン

糖菓

七

パス

メールマーケティング担当者向けのゾンビサバイバルガイド

フーダ

デザイナーニュース

チャリティ：水

Ewerkニュース

インターワールドプラスチック

ゼーノ

PSD景品

トランシーバー

インスピレーションのためのより多くのギャラリー

Really Good Emailsはテーマデザインのコレクションであり、その多くがなぜ良いのかについてコメントされています。

メールギャラリーでは、デザインを色、タイプ、その他のパラメーターでフィルタリングすることにより、デザインを表示できます。

CampaignMonitorのEmail Inspirationでは、列の数、メッセージのタイプ（広告、郵送、または招待）に基づいて選択を行うことができます。

あなたができることを見てください -MailChimpのサイト。 このサービスを使用して送信されたインスピレーションのための多くの手紙が含まれています。

HTMLメールギャラリー -時系列のデザインのギャラリー。

Email Design Galleryは、さまざまなソースから優れたデザインの例を収集するTumblrブログです。

Beautiful Email Newslettersは分類された検索ギャラリーです。

郵便サービス

メーリングリストサービスはさまざまな機能を実行しますが、それらのほとんどすべてが、サブスクライバーリストの管理とユーザーに代わってレターを送信します。 それらの多くには、追跡と自動化のための追加のツールがあります。 ほとんどは、契約を必要とせず、数ヶ月前に支払う場合に割引を提供します。

常時接触

ConstantContactでは、シンプルなメールキャンペーンの価格は月額20ドルからです。 この価格には、連絡先管理とソーシャル共有が含まれます。 より高価な計画には、追跡などの追加機能が含まれます。

メールチンプ

MailChimpは無料の起業家プランを提供しており、2,000人のサブスクライバーに最大12,000件のメールを送信できます。 有料の料金では、はるかに大きなボリュームで作業できます。

Activecampaign

ActiveCampaignでは、 500の連絡先に対して月額9ドルから料金が開始されます。 会計報告書やその他のサービスを持つ企業向けの特別な計画があります。

GetResponse

GetResponseの料金は、1000人の加入者に対して月額15ドルから始まります。 年間の支払いには割引があります。

アウェーバー

AWeberサービスを使用すると、最初の1か月はわずか1ドルで開始できます 。 その後、月額19ドルで、500人のサブスクライバーに無制限のメッセージを送信できます。

Amazon SES

Amazon SES （シンプルメールサービス）は、メッセージのみのメールサービスです。 すでにAmazon EC2ユーザーである場合は、1日に最大2000文字まで無料で送信できます。 それ以外の場合、メッセージは1000ドルあたり0.10ドルで、追加のデータ転送および添付料金が請求されます。 このような価格は、このサービスを最も手頃な価格の1つにします。

エマ

2500人の購読者に無制限のメールを送る場合、 エマの価格は45ドルからです。 また、非営利組織の場合は年払いで20％の割引があります。

HubSpotメール

HubSpot Emailは、追跡してさらに多くのサブスクライバーを獲得するための多くのツールを提供します。 同社は大規模なHubSpotサービスの一部であり、価格は最初の100件の連絡先が月額200ドルから（上記の1000件の連絡先ごとに月額100ドル以上）以上となっています。

GraphicMail

GraphicMailの関税は、送信する手紙の数または所有しているサブスクライバーの数に基づいています。 前者の場合、価格は月額10ドル未満で始まり、後者の場合は25ドルです。

おわりに

多くの場合、通常のテキスト文字で十分な場合がありますが、同時に、他の多くの場合には適していません。 HTMLレターの仕組みを理解し、使用可能なツールとテンプレートを理解すると、レターの作成プロセスがはるかに簡単になり、ほとんどすべてのデザイナーにとって重要です。

カーリス・ダンブランのページから取られたiPhoneの画像。