HTMLメールを作成する方法

公開: 2022-01-28

HTMLメールの作成は、思ったほど難しくはありません。開発者である必要はなく、コーディング方法を実際に知る必要もありません。

WYSIWYG（What You See Is What You Get）電子メールエディタを使用したことがある場合は、すでにHTML電子メールを作成しています。ドラッグアンドドロップする各モジュールは、HTMLとインラインCSSで構成され、さまざまな電子メール要素の外観と動作を定義します。

では、ほとんどの電子メールエディタでドラッグアンドドロップツールを使用して設計できる場合、電子メールを作成するためにHTMLを知っている必要があるのはなぜですか。

良い質問。

ほとんどの電子メールエディタはモジュール内でかなりの量の制御を提供しますが、電子メールのすべての本質的な側面を微調整することはできません。次のような変更を行うには、HTMLが必要になる可能性があります。

フォントサイズ
代替テキスト
ボーダー
マージン
パディング
画像サイズ
色

Twilio SendGridのメールエディタを使用しましたか？ドラッグアンドドロップモジュールとHTML編集を組み合わせてメールを作成できます。このようなコンボパワーハウスを使用すると、メールのルックアンドフィールを完全に制御でき、すべてのメッセージで一貫した一流のブランドエクスペリエンスを保証できます。

幸い、HTMLメールのコーディングはそれほど難しいことではありません。以下に、より良いメールを作成するために必要なヒントとメール構造のノウハウを示します。

HTMLメールをコーディングするための5つのヒント

HTMLメールのコーディングは比較的簡単ですが、メールクライアントと受信トレイは扱いにくい場合があります。これらのベストプラクティスに従って、受信者のクライアント、ブラウザ、またはデバイスに関係なく、メッセージの見栄えを良くしてください。

1.メールをレスポンシブにする

受信者は、さまざまなオペレーティングシステム、デバイス、画面サイズ、ブラウザ、および電子メールアプリケーションで電子メールメッセージを開きます。これらの要素はそれぞれメールのレンダリングが異なるため、メールが応答し、ほとんどの受信トレイで意図したとおりに機能することを確認するのはあなたの仕事です。

レスポンシブメールテンプレートはたくさんありますが、HTMLメールを最初からコーディングする場合は、タスクが少し複雑になります。メールの応答性を高めるのに役立つことがいくつかあります。

メディアクエリを含める：メディアクエリを使用すると、メールテンプレートをさまざまなデバイスに適合させることができます。
単一の列を使用する：デスクトップで2列の電子メールを読むのは簡単かもしれませんが、モバイルデバイスでは少し密度が高くなる可能性があります。
フォントサイズを大きくします。13ポイントまたは14ポイントのフォントより小さくしないでください。
リンクの間隔を空ける：リンクが近すぎたために、読者が誤って間違ったリンクをクリックしてしまわないようにします。
altタグを追加する： Altタグは、画像の読み込みに失敗した場合に備えて画像を説明します。

2.画像は控えめに追加します

画像はメールキャンペーンに追加するのに最適ですが、画像を使いすぎないように注意してください。画像が多すぎると、読み込み時間が長くなり、メールのレンダリングが困難になる可能性があります。

読み込みが速く、画面全体を占めない小さな画像を使用してください。また、「width」や「max-width」などのレスポンシブサイズ設定要素を追加して、すべてのデバイスとメールクライアントに画像が正しく読み込まれるようにします。

3.シンプルに保つ

メールの目的を覚えておいてください。多くの電子メールデザイナーは、芸術と創造性に迷い、電子メールの全体的な目標を忘れてしまいます。それは、ああ、ああを稼ぐことではありません。

まず、他の人にあなたのメールを開いてもらいたい。次に、クリックしてアクションを実行してもらいます。それはあなたのウェブサイトを訪問するか、ブログ投稿を読むか、購入するか、またはイベントにサインアップすることかもしれません。

物事をシンプルにしてください。受信者に価値を提供し、コンテンツで受信者を誘惑してから、行動を起こすよう呼びかけます。それでおしまい。ほとんどの場合、他のすべては綿毛です。

電子メールにさまざまなHTML要素を追加するときは、「これは電子メールの目的を達成するのに役立ちますか？」という質問を自問してください。そうでない場合は、メールのデザインから削除してください。

4.事前に作成されたメールテンプレートを使用する

優れたキャンペーンを送信するために必要なすべてを備えた、事前に作成されたHTMLメールテンプレートを見つけることができます。テンプレートは、見栄えがよく、レスポンシブな電子メールデザインを作成するために、すでに大変な作業を行っています。

メールテンプレートが気に入っても100％満足していない場合は、HTMLをダウンロードして、必要な編集を行うことができます。これは、HTMLを初めて使用する人にとって優れた電子メール編集方法になります。

5.メールをテストします

最初にテストせずにメールを送信しないでください。これを行うための昔ながらの方法は、テスト電子メールをさまざまな電子メールアドレス（電子メールクライアント全体）に送信し、さまざまなデバイスで開いてみるというものでした。それが多くの無駄な時間と頭痛の種のように聞こえるなら、あなたは正しいです。

幸いなことに、最近はもっと良い方法があります。

Twilio SendGridの電子メールテストツールはデザインエディターと統合されており、単一のアプリケーションから問題をトラブルシューティングするのに役立ちます。これは、クライアント、ブラウザ、およびデバイス間で電子メールがどのようにレンダリングされるかを確認するのに役立ちます。たとえば、Gmailを使用しているモバイルデバイスとOutlookを使用しているデスクトップでメールがどのように表示されるかを確認できます。

電子メールテストツールは、壊れたリンクやボタン、スパムのように見えるコンテンツ、およびフォーマットの問題を見つけるのにも役立ちます。

HTMLメールの構造

HTMLメールの構造は単純です。

DOCTYPE
ヘッダ
体

DOCTYPE

<！DOCTYPE>を使用して、ブラウザに何を期待するかを指示します。この場合は、HTMLメールになります。

ヘッダ

ヘッダーセクションを使用して、スタイル、サイズ設定、メタテキストなどの要素を含めます。

体

テキスト、画像、表、リンクなど、メールの視覚的要素には本文を使用します。

HTMLコードを含むメールテンプレート

HTMLコードを使用したメールテンプレートの例を次に示します。この旅行ニュースレターのメールテンプレートがデスクトップ、タブレット、モバイルデバイスでどのように表示されるかを確認できます。

あなたが見るもののように？「テンプレートのダウンロード」をクリックすると、HTMLコードのコピーが受信トレイに送信されます。次に、コードをコピーしてメールデザインエディタに貼り付け、テンプレートをインポートして、ブランドやキャンペーンに合わせて調整できます。

TwilioSendGridから他のメールテンプレートをチェックしてください

より多くのメールテンプレートが必要ですか？幸運なことに、私たちはそれらでいっぱいのギャラリーを持っています。ニュースレター、パスワードのリセット、または予定のリマインダーテンプレートが必要な場合でも、無料のテンプレートギャラリーにすべてが揃っています。

さらに、これらのデザインはレスポンシブであり、クライアント、ブラウザー、およびデバイス間で電子メールの見栄えを良くします。ああ、テンプレートは無料だと言いましたか？

事前に作成されたテンプレートを使用して、より優れたHTMLメールの作成を今すぐ始めましょう。