Gmail でカスタム HTML を送信する方法

HTML 電子メールは、現代の電子メール マーケティングの重要な要素となっています。 視覚的に魅力的でインタラクティブな電子メール メッセージを作成できるため、電子メールがより魅力的で効果的になります。 プレーンテキストでは不可能な方法で製品、プロモーション、ブランディングを強調できるため、企業にとって非常に重要です。 また、追跡と分析が向上し、受信者がメールにどのように関与しているかを理解するのに役立ちます。

以前は、Gmail ではユーザーが電子メール エディター内で HTML コードを直接入力して編集することができました。 この機能は、電子メールを広範囲にカスタマイズしてデザインしたい人に好まれていました。 ただし、セキュリティを強化し、ユーザー エクスペリエンスを簡素化するため、Gmail はメール エディターに HTML コードを直接入力する機能を削除することを決定しました。

この変更により、ユーザーは Gmail 経由でカスタム HTML メールを送信するための代替方法を検討するようになりました。これについては、この記事で詳しく説明します。

ここのセクションにジャンプするか、完全なガイドをお読みください。

• Gmail 経由でカスタム HTML メールを送信する
• レンダリングされた HTML を Gmail に直接コピーする
• カスタム HTML テンプレートの使用の制限事項
• プレーンテキストメールと HTML メールの比較
• Mailmeteor を使用してパーソナライズされた HTML メールを送信しましょう!

Gmail 経由でカスタム HTML メールを送信する

Gmail は WYSIWYG (What You See Is What You Get) エディタを使用しているため、生の HTML コードを直接送信することは実行可能な選択肢ではありません。 なぜなら、受信者はレンダリングされたドキュメントではなく、生の HTML コードを実際に見ることになるからです。

たとえば、この模擬メール テンプレートを見てください。

Gmail でこのような内容を直接作成できた時代もありましたが、Gmail エディターで HTML コードをコピーして貼り付けようとすると、次のようなことが起こります。

Gmail は WYSIWYG エディタを使用しているため、受信者はここ​​に表示されているものとまったく同じもの、つまりプレーン テキストで記述された HTML コードにすぎない電子メールを受け取ることになります。

ただし、実際的な回避策はあります。 ユーザーは、レンダリングされた HTML メールをコピーして Gmail エディタに貼り付け、カスタム HTML メールを送信できます。 この方法を使用すると、Gmail の制約内で作業しながら、視覚的に魅力的なカスタマイズされたメールを作成できます。

レンダリングされた HTML を Gmail に直接コピーする

この方法は、実際には見かけよりもはるかに簡単です。ブラウザでメール テンプレートを開き、その内容をすべてコピーして Gmail エディタに貼り付けるだけです。 行う必要があるのは次のとおりです。

1. HTMLコードを準備する
   • メモ帳 (Windows) または TextEdit (Mac) などのテキスト エディターを開きます。
   • HTML コードをテキスト エディタに記述するか、貼り付けます。 このコードには、標準的な Web ページと同様に、テキスト、画像、リンク、書式設定を含めることができますが、後で説明するいくつかの制限があります。
   • 「template.html」など、「.html」拡張子を付けてファイルを保存します。
2. Webブラウザでプレビューする
   • 作成した HTML ファイルをダブルクリックして、デフォルトの Web ブラウザで開きます。 これにより、電子メールが受信者に表示されるとおりに表示されます。
   • 必要に応じて、テキスト エディタに戻って内容を変更できます。変更を完了した後は必ずファイルを保存し、ブラウザ ページを更新して変更内容を更新してください。
3. すべて選択してコピー
   • ブラウザで Ctrl+A (Windows) または Cmd+A (Mac) を押して、HTML 電子メール内のすべてのコンテンツを選択します。
   • 次に、Ctrl+C (Windows) または Cmd+C (Mac) を押して、選択したコンテンツをコピーします。 右クリックしてメニューから「コピー」を選択することもできます。
4. Gmail に貼り付ける
   • Gmail を開き、新しいメールの作成を開始します。
   • HTML メール コンテンツを挿入するメール本文をクリックします。 件名行に HTML を挿入できないため、唯一のオプションは電子メールの本文です。
   • 次に、Ctrl+V (Windows) または Cmd+V (Mac) を押して、ブラウザからコピーしたコンテンツを貼り付けます。 または、右クリックしてメニューから「貼り付け」を選択することもできます。
   • HTML メールを Gmail エディタに直接貼り付けると、下の画像のように表示されるはずです。
5. メールを送信する
   • 件名、受信者、その他のテキストや要素を入力して電子メールを完成させます。
   • 「送信」ボタンをクリックすると、カスタム HTML メールが受信者に配信されます。

すべてがうまくいけば、受信者は、作成した .html ファイルにあるとおりに完全にレンダリングされた電子メールを受信します。 HTML コードに間違いがないことを確認するために、目的の受信者に送信する前に、電子メールを自分自身に送信することをお勧めします。

HTML エディターのブラウザー拡張機能の使用

電子メールの生の HTML をより詳細に制御したいと考えており、手動編集に慣れている技術に精通したユーザーにとって、HTML エディター拡張機能を使用することは実行可能なソリューションです。

これらの拡張機能は、Google Chrome などの一般的なブラウザで広く利用でき、経験豊富なユーザーが Gmail 経由でメールを送信する前に HTML コードを手動で作成および編集する手段を提供します。 CloudHQ の Gmail 用無料 HTML エディターは、Chrome ユーザーにとって最も人気のあるオプションの 1 つです。

拡張機能をインストールし、Gmail にアクセスして分割画面 HTML エディタにアクセスするだけで、Gmail アカウントから快適に変更を加え、その効果をライブで確認できます。

カスタム HTML テンプレートの使用の制限事項

残念ながら、独自の HTML コードを記述できたとしても、この取り組みを開始する前に認識しておく必要がある制限があります。 知っておくべきことは次のとおりです。

フォントに別れを告げましょう！

残念ながら、Gmail にはカスタム Web フォントを HTML メールにインポートする方法がありません。 使用できるフォントは標準フォントに限定されるため、デザインの選択肢やブランド化の機会が制限される可能性があります。

どこかで独自のブランドを使用する必要がある場合は、テキストが書き込まれた画像を使用する以外に選択肢はありません。 ただし、これらの画像を電子メール自体の一部として送信することもできません。そのため、次のポイントに進みます。

画像は公開してホストする必要があります

電子メールでコンピュータ上の画像にリンクして他の人に送信することはできません。画像はローカル ブラウザには表示されるかもしれませんが、Gmail エディタに追加した瞬間に読み込みが拒否されます。

このサンプル テンプレートでは、プレースホルダーの画像を使用し、子猫を配置しました。どちらも公開されているためです。 また、画像はインターネット上のどこかで公開され、ホストされている必要があります。 これは、自分の Web サイト、公開 Google ドライブ フォルダ、またはオンライン画像共有 Web サイトにすることができます。

外部スタイルシートのサポートなし

外部スタイル シートは電子メールでは機能しません。 CSS に精通している場合は、埋め込み CSS とインライン スタイルを使用して、電子メールの希望の書式設定とスタイルを実現することを検討してください。

すべてのスタイルを HTML コード内に直接組み込む必要があるため、この制限によりデザイン プロセスが複雑になる可能性があります。 同時に、スタイルはできるだけシンプルにしてください。受信者がどのブラウザや電子メール アプリケーションを使用しているかはわかりません。そのため、互換性を最大限に高めるために、標準の CSS スタイルに固執することが最善です。

テーブルベースのレイアウトにこだわる

最近の HTML の多くはレイアウトやスタイル設定に<div>要素を使用しますが、電子メールでは依然として古き良きテーブルベースのレイアウトが使用されています。 したがって、グリッド要素またはボックスを作成する必要がある場合は、 <table> 、 <tr> 、 `<td> などのさまざまなテーブル タグを使用して作成する必要があります。

これは、誰もが同じ電子メール サービス プロバイダーを使用しているわけではないため、たとえ Gmail が新機能のサポートを開始したとしても、まだ後れを取っているプロバイダーが無数に存在することになるからです。 不適切に表示された電子メールは第一印象を悪くします。そのため、誰にとっても適切なものにこだわり、問題の電子メールの実際の内容に焦点を当てることが最善です。

プレーンテキストメールと HTML メールの比較

プレーンテキスト電子メールと HTML 電子メールのどちらを送信するかの選択は、メッセージの有効性と影響力を決定する上で極めて重要な役割を果たします。 どちらの形式にも独自の利点があり、独自のニーズや好みに対応します。

これら 2 つの電子メール形式の主な違いを強調しましょう。

プレーン テキスト メールはそのシンプルさと普遍的な互換性で知られていますが、HTML メールは創造性とエンゲージメントのためのより広いキャンバスを提供します。

Mailmeteor を使用してパーソナライズされた HTML メールを送信しましょう!

Mailmeteor は、Gmail 経由でパーソナライズされた HTML メールを複数の受信者に送信するプロセスを簡素化する強力なメール マーケティング ツールです。 この便利なアドオンは Gmail や Google スプレッドシートとシームレスに統合されており、パーソナライズされたメールを簡単に作成して送信できます。

• メールのパーソナライズ: Google スプレッドシートのデータからカスタム差し込みタグを使用するか、名前、会社の詳細、その他のカスタム変数などのフィールドを持つ Web プラットフォームを使用して、高度にパーソナライズされたメールを作成します。
• HTML テンプレート エディター:プレミアム HTML エディターを利用して、パーソナライズされたデータを電子メール テンプレートに直接挿入します。
• 電子メール追跡:メールがメールボックスから出た後に追跡し、受信者が電子メールを開いているかどうかを確認し、信頼性の高いフィードバックで A/B テストを実行します。
• テンプレート ライブラリ:事前にデザインされた電子メール テンプレートのライブラリにアクセスするか、キャンペーンで使用する独自の HTML 電子メール テンプレートを作成します。