(公開日2023年07月28日)
「HTMLメールのデザイン性の幅を広げたい」
「Gmailを使ったHTMLメールをカスタマイズする方法を知りたい」
今回は、このようにGmailをhtmlでカスタマイズしたいと考えているマーケティング担当の方に向け、記事を書いています。
Gmailは使いやすい半面、デザイン性がもの足らず、HTMLメールをカスタマイズしたい方が多いのではないでしょうか？この記事では、Gmailを使ったHTMLメールの作り方、ならびにカスタマイズする方法について解説します。
この記事をご覧いただくことで、Gmailを使ったデザイン性の高いHTMLメールを配信できます。お客様の視覚に訴えて内容を伝えやすくなり、メールを読んでもらえる確率が高まります。マーケティングの戦略を立てる際に役立ててみてください。
GmailでHTMLメールを作成する場合、以下の手順に従って作成します。
1．編集画面を開く
2．本文を作成
3．テキストカラー・サイズなどを変える
4．HTMLメールを送信
まずGmailを開いてください。
画面左上の「作成」をクリックします。
Gmailには、プレーンテキストモードとリッチテキストモードの２種類があります。標準設定はリッチテキストモードですが、念のためリッチテキストモードになっているかどうか確認しましょう。
画面右下の「⋮」アイコンをクリックし、プレーンテキストモードにチェックを入れるとプレーンテキストモードに変わります。チェックを外せばリッチテキストモードです。リッチテキストモードでHTMLメールを作成する準備ができました。
実例のように本文を記載してください。
その後、特定の箇所に書式を設定します。
「バーゲンセール」を以下の方法で赤字に変えます。
1．「バーゲンセール」の箇所をドラッグ
2．画面下にあるテキストカラーの選択項目をクリック
3．カラーパレットで「赤」を選択
次に「お買い得タブレット」を以下の方法で大文字にします。
1．「お買い得タブレット」の箇所をドラッグ
2．画面下にあるテキストサイズの選択項目をクリック
3．「最大」を選択
最後に、以下の方法で「画像を挿入」します。
1．画像を挿入する箇所にカーソルを合わせる
2．「写真を挿入」するアイコンをクリック
3．画像をパソコンからアップロード
4．「画像を選択」し「挿入」をクリック
これでHTMLメールができあがりです。
最後に以下の手順でメールを送信すれば完了です。
1．宛先にメールアドレスを入力
2．送信ボタンをクリック
3．配信されたメールを確認
このように簡単なHTMLメールであれば、gmailでもHTMLメールを作成、送信することができます。
せっかくHTMLメールを作成するのであれば、よりデザイン性を高めたいとお考えの方もいるかもしれません。そこでカスタマイズする方法をご紹介いたします。カスタマイズするには、独自にHTMLコードを記述してレイアウトを変える必要があります。以下ポイントに従い、作成方法を解説いたします。
Point1.HTMLメールのコーディングの基本
Point2.リッチテキストメールではソースコードを変換できない
Point3.ブラウザで表示させてコピーする
Point4.HTMLメールエディタを活用する
まずHTMLコードを作成する上での6つの基本を解説します。
HTMLメールではtable要素を用いてレイアウトを構築します。table要素は昔からある要素ですが、最近のウェブサイトを制作する際には、あまり用いることはありません。しかしデスクトップ、モバイルなどあらゆるメール受信環境に対応するためには、table要素が最適です。最新のHTMLを用いると受信環境によってはレイアウトが崩れてしまいます。
最新のarticle要素やsection要素なども適用されません。HTMLメールのコーディングは、ウェブサイトのコーディングとは全く別物です。古い時代のコーディングに慣れている人は、かえって分かりやすいかもしれませんが、最近のコーディングに慣れている人は、かなり苦労するかもしれません。
CSSも独立したコードを作成するのではなく、<head>にCSSを記述する埋め込み型CSSを利用します。この形式は、古いコーディングのスタイルであり、最近のウェブサイトのコーディングでは推奨されていません。しかしあらゆるメールクライアントに対応するためには、古くからのCSSが適しています。とくにスマートフォンを対象としたレスポンシブデザインに最適です。
もしくはHTMLタグの中にCSSスタイルを直接記述するインライン形式を用います。この形式がさまざまなメールクライアントに互換性をもつ、一番安全な方法です。ただし作成に時間がかかり、管理が難しいのがデメリットです。
h1, h2, h3などの見出しタグは使わない方がよいでしょう。なぜならば、メールクライアントの間で標準的なサポートがないことが理由です。例えば「h2」と記述しても反映されないことがあり、テキストブロックにインライン形式でCSSを適用させるしかありません。
メールの文章の行間を指定するのに、マージンタグが用いられます。しかしOutlookではマージンタグのサポートをしておらず、行間は自動で決まるシステムです。したがってOutlookで閲覧したメールの行間は、他のメールクライアントよりも広くなります。この点は割り切ってメール作成するしかないでしょう。
関連記事：Outlookを使ったHTMLメールの作り方をカスタマイズしよう
サポートしているメールクライアントが少ないため、フォントの一括指定プロパティー（style=”font:10px/16px Arial、sans-serif ”など）は使わないほうがよいでしょう。
Gmailでは102kb以上のメールはクリッピングされます。大きなコンテンツは勝手に隠されてしまうのです。動画など容量の大きなコンテンツを用いる際には注意してください。
HTMLメールの作成方法について、より詳しい手順・作成方法を知りたい方はこちらの記事も合わせてご覧ください。
関連記事：htmlメールの作り方・作成手順のコツをプロが徹底解説
HTMLのソースコードができあがったら、今度はこれをGmailで送信してみたいと思います。下の画像は、Gmailのリッチテキストモードにソースコードを転写した画像です。
これを送信してみます。
すると、上記のように単に文字列として送られてしまいます。
つまり、Gmailでは直接HTMLを記述してカスタマイズはできないということです。
それではどうしたらよいのでしょうか？
少し力業になりますが、一度HTMLのコードをブラウザに表示させコピーするという方法があるのでご紹介いたします。手順は以下の通りです。
エディタを使ってHTMLコードを作成します。画像は事例の一部を抜粋したものですが、3×3のテーブルを表示した簡単なものです。
以下のような画面が表示され、これを丸ごとコピーします。
コピーしたデータをペーストします。
ブラウザで表示されたとおりの画面が再現されましたね。これできちんとHTMLメールを送信できます。ボタン・画像の貼付けなども可能です。ソースを閲覧すると、ちゃんと最初に作成したHTMLどおりになっています。
メール配信システムに付随したHTMLメールエディタを使うことでHTMLメールをカスタマイズすることができます。メール配信システムとは、メールを一斉に自動配信するシステムであり、メール配信業務を効率化できるのがメリットです。
コーディングなどの専門知識はなくても、デザイン性の高いメールを作成できます。また到達率（送信したメールが受信箱にちゃんと届いているか）、開封率（メールを開いて読んでくれているか）も調べられるのがメリットです。
無料のメール配信システムと有料のメール配信システムがありますが、有料のほうが機能性が高い傾向にあります。
最後によく見られるQ&Aをご紹介します。
A：以下の2ケースが考えられます。
スマートフォンではHTMLメールそのものが見られないことがあります。例えばSoftBankのiPhoneに含まれた@softbank.ne.jpのメールクライアントで受信すると全く見られません。またMMSで受信した場合は、HTMLメールは適切に表示されません。
この対策として、Gmailは自動的にマルチパート配信をします。マルチパート配信とは、HTMLメールとテキストメールの両方を配信するシステムです。HTMLメールが見られない環境では、テキストメールが表示されます。
ただしデザイン性の高いメールは表示されないのがデメリットです。対処法としてウェブブラウザへリンク誘導し、HTMLメールと同じコンテンツを提供させればよいでしょう。
PCでもメールクライアントがHTMLメールに対応していないと、文字化けすることがあります。これの対処法として、マルチパート配信をするとよいでしょう。HTMLメールを受信できない場合は、テキストメールが届くため、文字化けを防げます。
このケースでもデザイン性の高いメールは表示されないため、ウェブブラウザーへリンク誘導して、HTMLメールと同じコンテンツを提供させればよいでしょう。
A：GmailでHTMLメールを作成する際には、直接HTMLコードを記述できないため、送信タグや送信フォームを付けられません。代わりに送信フォームぺージへのリンクを貼って誘導するとよいでしょう。
A：以下のような原因が考えられます。
何らかの理由で送信が失敗した場合は「送信」ボックスに未送信のメールが格納されます。
圏外でなくともインターネットに接続できていない場合があります。
メールアカウントにアクセスして、正しいパスワードを入力してログインし直してください。
手動でサーバー設定する場合、メールアカウントの送信メールサーバーの設定を確認してください。
初歩的なタイプミスがないかチェックが必要です。
動画など大容量のデータを添付していませんか？
誤操作で機内モードになっていることがあります。
あまりセキュリティレベルを高くし過ぎると、通信がブロックされてしまいます。
Gmailを使ったHTMLメールの作り方の基本を解説しました。またカスタマイズの方法として、HTMLを作成してブラウザで表示させてコピーするやり方をご紹介しました。簡単なHTMLメールの作り方は分かったと思いますが、カスタマイズは難しいと感じなかったでしょうか？
HTMLメールのコーディングは非常に特殊であり、初心者の方が作成するには相当な手間がかかります。また、思ったように作成できず、文字化けしたHTMLメールを配信してしまうリスクもあります。
そのような場合は、必要に応じて専門の業者に依頼してHTMLメールを制作してもらうことをお勧めします。より正確な構成で、デザイン性が高く、魅力的なメールができあがります。HTMLメール制作会社に興味がある方は、以下のリンクページをご覧ください。
