Outlookでも崩れないHTMLメールボタン作成

崩れないメールボタンとは、HTMLとCSSでコーディングしたCTAボタンです。画像がブロックされていても、すべてのメールクライアントで正しく表示されます。

画像のボタンと違い、Outlookなど初期設定で画像を表示しないメールクライアントでも、表示されたままクリックできます。

Microsoft Outlookはメールの描画にWordのエンジンを使い、Webブラウザーのエンジンは使いません。そのため、リンクに指定したborder-radius、padding、background-colorなどのCSSプロパティが正しく反映されず、デザインしたボタンがただのテキストリンクとして表示されます。

崩れないボタンは、Outlookだけが読む条件付きコメントの中にVML（Vector Markup Language）のコードを入れて、この問題を解決します。ほかのメールクライアントには標準のHTML/CSSが届きます。この作成ツールは両方のバージョンを書き出します。

生成したボタンは、Microsoft Outlook 2013、2016、2019、Microsoft 365（Windows版の従来のOutlook）のほか、Gmail、Apple Mail、Yahoo Mailなどの主要なメールクライアントに対応するように作られています。

メインのCTAボタンに画像を使うことはおすすめしません。多くのメールクライアントは、セキュリティとプライバシーの理由から初期設定で画像をブロックします。その場合、ボタンは完全に消え、読み手には代替テキストだけが見えるか、何も見えません。

HTMLで作った崩れないボタンは、画像がオフでも表示されたままクリックできるため、CTAが常に表示されます。

いいえ。色、パディング、テキスト、サイズをフォームの項目で設定し、HTMLをコピーしてメールテンプレートに貼り付けてください。

はい。このHTMLは、Account Engagement（旧Pardot）、HubSpot、Marketo、Mailchimpを含め、どのメールマーケティングプラットフォームでも使えます。メールテンプレートのHTMLエディターにコードを貼り付けてください。

上の作成ツールの「背景」でブランドカラーを選ぶか、正確に合わせる場合はHEXコード（例：#FF5733）を入力してください。

そのうえで、コントラストが読みやすい範囲に収まるよう、テキストの色を調整してください。通常は、暗い背景に白い文字、または明るい背景に暗い文字が最もうまくいきます。

AppleのHuman Interface Guidelinesは、タップ領域を最小44×44ポイントにするよう推奨しています。メールのボタンには、幅200ピクセル以上、高さ50ピクセル以上をおすすめします。

このサイズなら、スマートフォンでも周りの要素を誤ってタップせずに押しやすくなります。ボタン内側の余白（パディング）は、上下左右とも12〜15ピクセル以上にしてください。

VML（Vector Markup Language）は、Outlookでボタンを描画するためのMicrosoft独自のコードです。VMLボタンはスタイルの自由度が高い一方、コードが複雑になります。そのコードはこのツールが書き出します。Outlook向けには、Outlookだけが読む条件付きコメントで囲んだVML版を、ほかのすべてのメールクライアント向けには、インラインCSS付きの標準HTMLテーブルを出力します。

Word用の名前空間（w:）の要素です。Microsoftは「Anchor Location Is Locked」と定義しており、文書を編集するアプリケーションが図形を動かさないようにします。

Campaign MonitorとLitmusのVMLボタンにも含まれていますが、理由は説明されていません。削除せずに残してください。この要素はVML部分の中にあり、VML部分を読むのは従来のOutlookだけです。

いいえ。新しいOutlook for WindowsはOutlook on the webをベースにしているため、HTMLリンクが角丸のまま表示されます。

VML部分は、Microsoftが少なくとも2029年までサポートする従来のOutlook for Windowsのために残してください。2つの部分が同時に表示されることはありません。