絶対に機能する美しい防弾メールボタンを作成する方法

このボタンのより複雑なバージョンの場合、実際には2つのバージョンのボタンを作成します。1つはVMLで、もう1つは他のすべてのユーザー用です。

VMLベースのボタンの長所と短所

長所：

• ほとんどの電子メールクライアントには優れたサポートがあります（下の表を参照）。
• ボタン全体をクリックできます。
• 丸みを帯びた角はOutlookで維持されます。

短所：

• これは、Microsoft Officeスイート独自の使い慣れていない言語であるVMLの使用に依存しているため、新しい防弾ボタンの作成と既存のボタンの更新に時間がかかり、イライラします。
• 防弾ボタンの幅と高さを宣言する必要があるため、CTAのコピーを変更するには、ボタンの寸法を変更する必要があります。
• より複雑なバージョンのVMLボタンには、変更が必要な2つのURLが必要です。 また、一部のESPはVMLセクションのURLを追跡しません。
• VMLには固定の高さと幅が必要なため、このボタンは、CTA内のコピーの長さが異なる可能性があるテンプレートではうまく機能しません。

VMLの詳細を知りたくない場合（そして正直なところ、誰が学びますか？）、Campaign Monitorには、従来の防弾ボタンを作成するための無料のオンラインツールがあります。 Buttons.cmを使用すると、見栄えがよく、ほとんどの電子メールクライアントでうまく機能する新しいCTAボタンを簡単に作成できます。

これは、私が医薬品の電子メールに取り組んだときのボタンのコーディングの頼りになるスタイルでした。 最大の利点は、規制の厳しい業界で必要とされていたOutlookの丸みを帯びた角を維持できることです。

3.パディングベースのボタン

このメソッドは、ボタンに単純なHTMLテーブルを使用します。 これは、テーブルセルレベルでのパディングに依存してボタンを構造化し、HTML属性とCSSを使用してボタンのスタイルを設定します。

パディングベースのボタンの長所と短所

長所：

• ほとんどの電子メールクライアントでうまく機能します（以下の表を参照）。
• これは、電子メールの設計者が使い慣れたコード（HTMLとCSS）を使用しているため、新しい防弾ボタンを作成したり、既存のボタンを簡単に更新したりできます。

短所：

• ボタン全体をクリックできないため、ボタンをクリックまたはタップしたと思っているサブスクライバーとの摩擦につながる可能性があります。
• Outlookは角の丸みをサポートしていません。

4.ボーダーベースのボタン

境界線ベースのボタンは、前の方法と同様のアプローチを取ります。 シンプルなHTMLとCSSを使用して、召喚状を構造化およびスタイル設定できます。 ただし、構造をテーブルセルレベルでパディングする代わりに、リンク自体に太い境界線を追加してCTAを作成します。

リンクタグはブロックレベルの要素に設定されており、境界線は「パディング」を提供するために使用されていることに注意してください。 これにより、古いデスクトップクライアントでも、ボタン全体をホバーおよびクリックできるようになります。

ボーダーベースのボタンの長所と短所

長所：

• すべてのスタイリングは実際のリンクタグに基づいているため、コードが簡素化されます。
• ボタンは1つだけ使用されます。 ダブルボタンや紛らわしいVMLコードは必要ありません。
• 特定の高さや幅の定義は必要ないため、ボタンは非常にスケーラブルです。

短所：

• Outlookは、境界線のサイズを少し小さくします。
• Outlookは、<a>タグをブロックレベルの要素として認識しません。
• Outlookは角の丸みをサポートしていません。
• 正確なリンク要素に余分な境界線など、より高度なスタイルを追加する機能はありません。

5.パディングとボーダーベースのボタン

パディングとボーダーベースのボタンは、前の2つのアプローチの要素を組み合わせたものです。

基本的に、このアプローチでは、パディングと少なくとも1pxの実線の境界線の両方を使用して、リンクのスタイルを設定するのと同じ構造を使用します。 次に、<td>に背景色を適用して、リンクの背景全体を塗りつぶします。 Outlookは<a>タグの水平方向のパディングを認識しないため、この場合、<a>ではなく<td>に背景色を適用する必要があります（ブロックレベル以外のHTMLではこのようなスタイル設定をサポートしていないため）要素）。

パディングとボーダーボタンの長所と短所

長所：

• コーディングする必要があるボタンは1つだけなので、この手法を使用するボタンは簡単に更新できます。
• ボタンの特定の寸法は必要ありません。
• この方法で背景画像をサポートできます。

短所：

• スタイリングは<td>と<a>で区切られているため、ボタンのスタイルが変更された場合は両方を更新する必要があります。
• Outlookは角の丸みをサポートしていません。

セマンティックHTMLはどうですか？

セマンティックHTMLの使用は大好きですが、残念ながら、<button>タグは電子メールではサポートされていません。 ほとんどの電子メールクライアントでは<div>に縮小されており、クリックできないか、正しくレンダリングされていません。

アンカータグ内にdivまたはテーブルをネストすることができます。 しかし、それは意味的に正しくありません。 また、これらの方法はどちらも、Outlookでは機能しないボタンになります。 テーブルの場合、リンクはクリックできません。divの場合は…まあ、自分で確認してください。

Divボタン	OutlookのDivボタン

高度なハックと機能強化

上記のすべての方法は、防弾ボタンを作成するための優れた出発点ですが、各手法をさらに変更して、より優れた防弾ボタンを作成することができます。

Outlookの水平パディングハック

Outlookは水平方向のパディングをサポートしていないため、CTAテキストが防弾ボタンの左端と右端に非常に近くなる可能性があります。

Outlookの水平方向の「パディング」を増やすために使用できる簡単なハックは、リンクの両側にインラインの改行しないスペースを条件付きで追加することです。 条件付きパディングボタンは、ボタンの側面にスペースを追加するために、文字間隔プロパティとともにこれをすでに使用しています。

メディアクエリによるプログレッシブエンハンスメント

防弾ボタンのデザインを改善するために、メディアクエリで境界線、グラデーション、Webフォント、ホバー効果などの高度なスタイルを使用できます。

VMLによるOutlookの機能強化

ボタンを本当に輝かせたい場合は、VMLに飛び込んで、ボタンにちょっとした奇抜さを加えることができます。

VMLはイライラすることもありますが、背景画像やグラデーション、影を使って非常に楽しいボタンを作成することができます。 確かにある程度の試行錯誤がありますが、結果は驚くべきものになる可能性があります。

例については、1月のニュースレターのボタンをご覧ください。

では、電子メールクライアントのサポートはどのようなものですか？

この投稿が2017年に最初に作成されて以来、メールクライアントはサポートを更新しているため、これらのボタンは防弾に非常に近いものです。 予想通り、サポートの量はOutlookで最小限ですが、それでもボタンはそれほど壊れていません。

ここで完全なリトマス試験をチェックできます。

*丸みを帯びた角はレンダリングされません。 †ボタンのサイズがゆがんでいます。

ダークモードのサポートとハック

ダークモードは、防弾ボタンに興味深いひねりを加えます。 ほとんどのHTMLやCSSと同様に、メディアクエリを使用してボタンのダークモードスタイルを制御できます。

ただし、GmailとOutlook.comではボタンの色を反転させることができます。

ボタンの背景色を保持したい場合は、いくつかのハックがあります。 ただし、ボタンのコピーの色が反転することに注意してください。 Outlookでフォントの色が切り替わらないようにする方法はありませんが、Remi ParmentierのCSSブレンドの回避策を使用して、ボタンの白いテキストを白く保つことができます。

これらの防弾ボタンオプションのサポートの最大の欠如は、VMLボタンです。

ダークモードでは、Office 365は背景色を反転しますが、VMLの塗りつぶし色は反転しません。 したがって、次のようなボタンが表示されます。

これには修正があります。次のように、ボタンの<a>タグの背景色にRGBA値を使用してください。

したがって、代わりに次のようなボタンが表示されます（はるかに優れていますよね？）：

背景色としてのRGBA値はOutlookでサポートされていないため、VML色にフォールバックします。 この修正をしてくれたWilbertHeinenに感謝します！ Outlookのダークモードではフォントの色を制御できないため、このボタンを使用する場合は、フォントの色を逆にしたときに、色の選択がアクセシビリティを考慮していることを確認してください。 （使用した例は、使用しない色の良い例です。）

あなたのキャンペーンは防弾ですか？

どちらのアプローチを採用する場合でも、行動を促すフレーズに防弾ボタンを使用することは、画像に依存するよりもはるかに優れています。 画像をブロックする電子メールクライアントでも、防弾ボタンを使用すると、メッセージが視聴者にわかりやすくなり、購読者が関与する可能性が高くなります。 壊れたメールはもうありません！

Litmusを使用して、ブランド上でエラーのないメールを作成します 壊れた電子メール（特にCTAボタン）は、クリック数とコンバージョン数が少ないことを意味します。 痛い。 Litmusは、画像のブロックやリンク切れなどの自動チェックにより、すべてが完璧であることを確認するのに役立ちます。 無料トライアルを開始→

あなたの好きな防弾ボタンのテクニックは何ですか？

以下のコメントで、防弾メールボタンを作成する方法をお知らせください。

2017年11月1日に、JasonRodriguezによって最初に公開されました。 最終更新日は2021年6月22日です。