【ITニュース解説】Bulletproof Email Buttons for Outlook: VML + Accessible HTML
2025年09月05日に「Dev.to」が公開したITニュース「Bulletproof Email Buttons for Outlook: VML + Accessible HTML」について初心者にもわかりやすいように丁寧に解説しています。
ITニュース概要
Outlookでメールボタンが崩れる問題に対し、VMLとHTMLを組み合わせた解決策を紹介。OutlookにはVMLを、それ以外の環境にはHTML/CSSを使用。アクセシビリティも考慮し、role属性や適切なテキスト、十分なコントラストを確保。コピーペースト可能なコードスニペットと、ダークモードやモバイルでの注意点も解説。
ITニュース解説
この記事では、Outlookでメールボタンが正常に表示されない問題を解決するための、VMLとアクセシブルなHTMLを組み合わせた手法を解説する。Outlook for Windowsは、Wordのレンダリングエンジンを使用しているため、最新のCSSを正しく解釈できない場合がある。その結果、メールボタンのデザインが崩れたり、クリック領域が意図した範囲と異なったりする。
この問題を解決するために、ハイブリッドなボタンを作成する。具体的には、Outlook向けにはVML（Vector Markup Language）を使用し、それ以外の環境向けにはセマンティックでアクセシブルなHTMLとCSSを使用する。VMLは、図形を描画するための言語であり、Outlookで安定した表示を実現できる。
ハイブリッドボタンの構造は、以下の要素で構成される。まず、レイアウトの安全性を確保するために、role="presentation"属性を持つテーブルで全体を囲む。次に、Outlook向けには、<!--[if mso]> ... <![endif]-->という条件付きコメントで囲まれたVMLの<v:roundrect>要素を記述する。この要素は、角丸の長方形を描画し、ボタンの見た目を再現する。href属性でリンク先を指定し、style属性で高さ、テキストの配置、幅、角の丸み、背景色、線の色などを設定する。<w:anchorlock/>は、Outlookで図形が固定されるようにするための記述だ。<center>要素は、ボタン内のテキストを中央に配置する。
Outlook以外の環境向けには、HTMLの<a>要素を使用する。この要素には、背景色、ボーダー、角の丸み、テキストの色、表示形式（inline-block）、フォント、フォントサイズ、フォントの太さ、行の高さ、テキストの配置、テキスト装飾（下線なし）、幅、-webkit-text-size-adjust:none（モバイルでのフォントサイズ調整を無効化）、mso-hide:all（Outlookで非表示にする）などのスタイルをインラインで記述する。target="_blank"属性は、新しいタブでリンクを開くように指定する。role="button"属性は、スクリーンリーダーにボタンであることを伝える。aria-label`属性は、テキストだけでは意図が伝わりにくい場合に、ボタンの説明を追加する。
アクセシビリティの観点も重要だ。スクリーンリーダーを使用するユーザーや、ハイコントラストモードを使用するユーザーのために、適切なロール、ラベル、およびフォーカス可能なリンクを提供する必要がある。色のコントラスト比は、テキストと背景色の間で4.5:1以上を確保する。タッチターゲットのサイズは、少なくとも44×44ピクセルを確保する。これは、指でタップしやすいようにするためだ。ボタン全体がクリック可能になるように、display:inline-block（またはblock）を指定し、ネストされたリンクがないことを確認する。
記事では、固定幅のボタンと自動幅のボタンの、コピー＆ペーストで利用可能なコードスニペットが提供されている。固定幅のボタンは、幅が固定されているため、簡単に実装できる。自動幅のボタンは、paddingプロパティを使用して幅を調整するため、テキストの長さに応じてボタンの幅が自動的に調整される。Outlook（VML）では、幅を明示的に設定する必要がある。
ダークモードでの表示も考慮する必要がある。最近のバージョンのOutlookでは、色が反転する可能性があるため、十分なコントラストを持つブランドカラーを使用することが推奨される。iOSでボタン内のリンクに自動的にスタイルが適用されるのを防ぐには、<a>要素に明示的な色とtext-decoration:noneを指定する。
よくある問題とその解決策も紹介されている。例えば、「テキストだけがクリック可能」という問題は、<a>要素がdisplay:inline-block（またはblock）であることを確認し、競合する<a>要素でラップされていないことを確認することで解決できる。「Gmailで余分な下線が表示される」という問題は、<a>要素にtext-decoration:noneをインラインで追加することで解決できる。「モバイルでフォントが縮小される」という問題は、-webkit-text-size-adjust:noneをインラインで追加することで解決できる。「Outlookで角丸が表示されない」のは正常であり、OutlookはVML図形を使用して角丸をレンダリングするため、HTML側の角丸は無視される。