集中力を維持。スマートなメールアプリ。
高速かつクロスプラットフォームなメールアプリは、重要なことに集中できるように設計されています。
定義
💡 HTMLメール: HyperText Markup Languageでコーディングされたメールで、書式設定、画像、色、リンクを追加できます。 要するに、退屈なテキスト文書と、きちんとデザインされたメッセージの違いです。 HTMLメールでは、プレーンテキストでは使えない書式設定やセマンティックマークアップが可能です。
HTMLメールが重要な理由
プレーンテキストメールは、ただの文字だけです。 色も画像もなく、太字やイタリックさえ使えません。 HTMLメールは、それ以外のすべてです。
HTMLメールには、色、スタイル、画像、時にはマルチメディアもあり、まるでWebページがそのまま受信トレイに届くようなものです。 つまり、ブランドに合わせたり、ロゴを使ったり、実際にクリックできるボタンを追加したりできます。 画像や動画など、ユーザーが操作することを期待する要素を活用しながら、視覚的要素によってメール内容のさまざまな部分へ注意を向けやすくできます。
今ではほとんどの企業がHTMLメールを送っています。 オンラインマーケティング企業の調査によると、HTML対応メールクライアントの普及はほぼ完全で、テキスト専用クライアントを使っていると答えた人は 1％未満 でした。 顧客はデザインされたメールを期待しており、プレーンテキストは素人っぽく見えたり、時代遅れに感じられたりすることがあります。 それは、コミュニケーションに本気で取り組んでいない印象を与えます。
ただし、HTMLが自動的に優れているというわけではありません。 そこにはトレードオフがあります。 HTMLメールはサイズが大きく、読み込みに時間がかかり、異なるメールクライアント間で表示崩れが起きることがあります。 また、プレーンテキストよりもスパムフィルタに引っかかりやすくなります。
HTMLメールの仕組み
HTMLメールを送るというのは、基本的には受信トレイにミニWebページを送るようなものです。
メールデザイナーは、Webページを作るのと同じようにHTMLコードを書き、HTMLで構造を定義し、CSSでスタイルを設定します。 画像を追加し、テキストを整え、レイアウトを作成します。 そして受信者がメールを開くと、メールクライアントがそのHTMLコードを読み取り、ブラウザがWebページを表示するようにレンダリングします。
ここで問題になるのは、Gmail、Yahoo!、Outlook など、人々がメールを読むために使うサービスやアプリが何百種類もあり、各サービスでHTMLやCSSの表示が少しずつ異なることです。 Gmailで完璧に見えても、Outlookでは崩れるかもしれません。 デスクトップでうまくいっても、モバイルでは失敗することがあります。
そのため、多くのメールサーバーはメッセージのプレーンテキスト版を自動生成し、HTML版と一緒に Content-Type: multipart/alternative を使って送信するよう設定されています。 HTMLをレンダリングできない場合、メールクライアントはプレーンテキストにフォールバックします。 どちらの場合でも安心です。
HTMLとプレーンテキストの比較
選択肢は2つあります：
HTMLメールなら、デザインを完全にコントロールできます。 色、フォント、画像、クリックできるボタン、Webサイトに合わせたレイアウト。 HTMLは、さまざまなフォント、色、箇条書きや番号付きリストを使った従来の文書のような見た目のメッセージを作りたいときや、メッセージ内に画像を表示したいときに最適な形式です。 ニュースレター、マーケティングキャンペーン、ブランド化されたコミュニケーションに最適です。
プレーンテキストメールは必要最低限です。 テキストのみで、スタイル設定も埋め込みリンクもありません。 プレーンテキスト形式では、太字やイタリック、色付きフォントなどの文字装飾は使えず、メッセージ内に画像を表示することもできません。 たしかに地味ですが、どこでも確実に使えます。 また、より個人的で営業色が薄く感じられるため、1対1のやり取りではこちらを好む人もいます。
Microsoftアカウントでは、受信トレイでメールの受信形式を選択できます。
セールスレターや更新通知には非常に適しており、営業担当者として1対1のメール対応をするなら、プレーンテキストメールのほうが適している可能性が高いです。 しかし、ほとんどのマーケティング用途ではどうでしょうか？ HTMLの勝ちです。
HTMLメールの作成方法
技術的な慣れ具合に応じて、いくつかの選択肢があります。
自分でコードを書く。 HTMLとCSSがわかるなら、ゼロからコードを書けます。 HTMLでメールを作成するのは専門性が高く、Webページを作るのとまったく同じではないことを覚えておいてください。 メールクライアントはブラウザよりずっと厳格です。 レイアウトにはテーブルを使い（本当にです）、外部スタイルシートの代わりにインラインCSSを使い、複数のクライアントでテストする必要があります。
ドラッグ＆ドロップビルダーを使う。 Mailchimp、Constant Contact、Campaign Monitor など、ほとんどのメールサービスプロバイダはビジュアルエディタを提供しています。 テキストブロック、画像、ボタンをドラッグして配置すれば、ツールがHTMLを自動生成してくれます。 コーディングは不要です。
テンプレートから始める。 Litmus や Email on Acid のようなサービスからあらかじめ作成されたHTMLメールテンプレートを使い、自分のコンテンツやブランドに合わせてカスタマイズします。 ゼロから作るより速く、ドラッグ＆ドロップエディタより自由度があります。
どの方法を選んでも、メールがさまざまな解像度に対応し、異なるメールクライアントでも正しく動作することを確認する必要があります。 リスト全体に送信する前に、必ずすべてをテストしましょう。
HTMLメールのベストプラクティス
まずモバイル向けに設計する。 メールの半分以上はスマートフォンで開封されます。 今ではモバイルでの閲覧がデスクトップPCやノートPCの利用を上回っているため、メールをモバイル向けに設計することはこれまで以上に重要です。 シングルカラムのレイアウト、ボタンの大きなタップ領域、拡大しなくても読めるフォントサイズを使いましょう。
シンプルに保つ。 デザインをやりすぎないでください。 HTMLメールを作成するときは、シンプルさを忘れず、複雑にしすぎないことが大切です。2カラムのオプションにとどめるのがよいでしょう。 要素が少ないほど、読み込みは速くなり、不具合の原因も減ります。
インラインCSSを使う。 HTML文書全体のCSSルールを置くために使われるheadタグは、十分にサポートされていないうえ、ときには完全に削除されることもあるため、インラインスタイル指定が事実上の標準になっています。
さまざまなクライアントでテストする。 Gmail、Outlook、Apple Mail、Yahoo、モバイルクライアントでは、それぞれ表示結果が異なります。 さまざまなメールクライアントに接続された複数のアカウントに実際に送って試すこともできますし、メールテストツールを使って手間を減らすこともできます。 Litmus や Email on Acid のようなサービスは、この分野を専門としています。
プレーンテキストのフォールバックを含める。 同じメールでHTML版とプレーンテキスト版の両方を常に送信しましょう。 HTMLが崩れても、受信者にはメッセージが届きます。
ファイルサイズに注意する。 HTMLメールはプレーンテキストよりサイズが大きくなります。 重い画像や肥大化したコードは読み込みを遅くし、スパムフィルタを作動させる原因になります。 可能であれば、メール全体のサイズは100KB未満に抑えましょう。
画像だけに頼らない。 一部のメールクライアントでは、初期設定で画像がブロックされます。 画像がなくてもメッセージの意味が通るようにしておきましょう。 すべての画像にaltテキストを設定しましょう。