アクセシビリティ
デベロッパーリソース
 

クロスクライアントHTMLメールの作成


Joseph Lowery

Joseph Lowery

jlowery@idest.com

作成日:
2009年1月19日
ユーザレベル:
中級
製品:
Dreamweaver

HTMLメールは、Webデザイナーにとって特別な困難を引き起こします。Web標準になじんだ世代のデザイナーにとっては、特にそうです。 CSSベースのレイアウトで、外部スタイルシートを正しく使ってメールを送れば、当然うまくいくだろうと思うのが普通です。しかし、受け取った側がそのメールを開いてみると、作成者の意図とは似ても似つかない乱れたデザインが表示されることは珍しくありません。

ブラウザ戦争はかなり昔に決着が付き、淘汰によって生き残った少数のブラウザはおおむね互換性がありますが、電子メールクライアントの分野ではまだ混乱が続いています。それどころか、デザインに関する状況は近年むしろ悪化しています。MicrosoftがOutlook 2003をOutlook 2007に置き換えたときに、Microsoft Word HTMLレンダラが新たに採用されました。これは、従来のエンジンに比べてCSSへの対応度がはるかに低くなっています。

しかも、電子メールクライアントの数は以前に比べてはるかに増えています。Lotus Notesなどの昔からの電子メールクライアントも企業ではまだ多く使用されており、その他に、AOL、Apple Mail、Eudora、Outlook、Thunderbirdといったデスクトップクライアントと、Gmail、Hotmail、Yahoo! MailといったWebベースのサービスがシェアを争っています。これに比べれば、ブラウザ間の互換性の問題は、公園を散歩するようなものです。鳥がさえずり、子供たちが笑っている、とても気持ちのいい公園です。

この記事では、Dreamweaver CS4でクロスクライアントHTMLメールを作成するために必要な手順について詳しく説明します。技法と適切なモデルの説明のために、私が勤めているWebAssist社で実際にあった２つの例を取り上げます。

必要条件

このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。

Dreamweaver CS4

サンプルファイル：

この記事に必要な予備知識

HTMLおよびDreamweaverの使用に関する基礎知識

HTMLメールの構造：過去への回帰

私と同様に以前のテーブル指向のWebデザインからCSSベースのレイアウトへの移行を経験した方なら、こんなことを言うと驚かれるか気分を害されるかもしれませんが、HTMLメールを作成する際は、CSSの意義についてはすべて忘れてください。電子メールの世界では、昔からのテーブルが主役に返り咲くのです。様々な電子メールクライアントの間で一貫したレイアウトを維持するには、テーブル、それもネストしたテーブルが鍵となります。

CSSベースのレイアウトでよく使用される外部ラッパーの<div>タグと同様に、まず外側のテーブルから始めるのが適当です。電子メールクライアントの中には、<body>タグに追加された属性をすべて削除するものもあるので、基本的に自分で標準コンテナを作成することになります。Dreamweaver CS4で外側のテーブルを作成する方法を以下に示します。

  1. まず、JavaScriptファイル、外部スタイルシート、埋め込みCSSルールへのリンクをいっさい持たない、空のHTMLページを作成します。

    ほとんどの電子メールクライアントは、<head>内部のCSSやJavaScript関連の情報をすべて無視するか削除します。

  2. 挿入パネルの「一般」カテゴリで、「テーブル」を選択します。

  3. テーブルダイアログボックスで、以下の設定を宣言します。

    • 行：１
    • 列：１
    • テーブルの幅：98パーセント
    • ボーダー：０
    • セル内余白：０
    • セル内間隔：０
    • ヘッダ：なし

    この設定は、HTMLコンテンツをすべて収める1セルのテーブルを作成します。幅を98％に設定するのは、周囲にわずかな余白を残すためです。Yahoo! Mailでは特に、左右に１％の余白がないと正しく表示されないようです。

  4. 背景色を設定したい場合は、プロパティインスペクタの「CSS」タブに切り替えて、「背景」カラーピッカーから色を選択します（図１を参照）。

    コードは<td>タグの属性として入力されます。これはHTMLメールでは問題なく使用できます。

    プロパティインスペクタでの基本的なセルのプロパティの設定

    図１. プロパティインスペクタでの基本的なセルのプロパティの設定

  5. 同様に、コンテンツを中央に配置するために、水平方向リストから「中央揃え」を選択します。

次に、最初の外側のテーブルの中にいくつかのテーブルをネストします。１つの大きなテーブルにcolspan属性をいくつも持たせるのは避けたほうが無難です。この属性はほとんどの電子メールクライアントで動作しますが、Lotus Notesでは問題を起こします。デザインをヘッダー、コンテンツ、フッターといった基本的なセクションに分けて、セクションごとに１つずつテーブルを作成するほうが安全です。これらのテーブルを上下につなげ、その中に別のテーブルを作成します。例えば、２つのサンプルファイルでは、メインコンテンツエリアに２つの列があります。１つはメインエリア用、１つはサイドバー用です。そして、<td>セルには必要に応じて他のテーブルが含まれます。

メール表示画面のデフォルトサイズは電子メールクライアントごとに大きく異なり、ユーザがカスタムサイズを指定している場合もあるので、コンテンツは比較的狭い幅に制限するのが適当です。WebAssist社では621ピクセルの幅を採用していますが、600ピクセルのデザインも見たことがあります。

CSSから２歩後退

Web標準を推進してきた人々は、私も含めて、インラインCSSスタイルの使用をやめ、CSSルールを<head>の中に埋め込むか、外部のスタイルシートに記述して添付することを盛んに推奨してきました。しかし、HTMLメールを作成する場合は、そのことは忘れてください。HTMLメールではインラインスタイルが常識であり、あらゆる種類の電子メールクライアントで一貫した結果を得るただ１つの確実な方法なのです。外部スタイルシートや埋め込みスタイルは、完全にはサポートされていません。

ただし、HTMLメールではインラインスタイルに頼るのが不可欠とはいえ、<font>タグなどを使って基本的な書式設定を行うところまで後退する必要はありません。それどころか、Dreamweaver CS4を使えば一般的なほとんどのインラインスタイルを簡単に追加できます。デザインのあるセクションに特定のフォントプロパティを設定する方法を以下に示します。

  1. スタイルを設定する<td>タグにカーソルを置きます。
  2. プロパティインスペクタで、「CSS」タブに切り替えます。
  3. 「ターゲットのルール」リストで、「<新規インラインスタイル>」を選択します。
  4. 「フォント」リストで、「Arial, Helvetica, sans-serif」などのフォントを選択します。

  5. 「ターゲットのルール」が<インラインスタイル>に変わり、選択したフォントがstyle属性として現在の<td>タグに入力されたことを示します（図２を参照）。

    Dreamweaver CS4でのインラインスタイルの容易な追加

    図２.Dreamweaver CS4でのインラインスタイルの容易な追加

  6. 「サイズ」編集可能リストでサイズを選択するか、入力します。
  7. テキストカラースウォッチを選択してポップアップカラーピッカーを表示し、目的のフォントカラーを選択するか、カラーフィールドに16進値を入力します。

  8. ボールドボタンまたはイタリックボタンをクリックしてフォントスタイルを追加します。

    ボールドボタンをクリックするとスタイルタグにfont-weightプロパティが追加され、イタリックアイコンをクリックするとfont-styleプロパティが追加されます。

  9. 必要に応じて、プロパティインスペクタのボタンを選択して、左揃え、中央揃え、右揃えを設定します。
  10. 余白、パディング、行間隔など、その他のスタイルを追加するには、「ルールの編集」をクリックして標準のCSSルール定義ダイアログボックスを開くか、「CSSパネル」をクリックしてCSSスタイルパネルを表示し、手作業で属性を追加します。

電子メールクライアントの中には継承をサポートしないものもあるので、テーブルのセルにスタイルを設定する際には、個々の<td>タグに同じスタイルを繰り返し適用する必要があります。私が見つけた便利な方法は、１セルのテーブルを作成し、その<td>タグに必要なスタイルを設定する方法です。その後、Tabキーを押して行とテーブルのセルを追加すると、先に設定したスタイルが引き継がれます。

画像とリンクは「絶対に」絶対指定

HTMLメールはある意味、サイトのないWebページと言えます。上位のフォルダや、同じレベルの画像フォルダといったものは存在しないので、すべての画像のソースは絶対リンクで指定する必要があります。ほとんどのデザイナは自分のローカルシステム上の画像を使用してコンテンツを作成するため、熟練したデザイナでもうっかりローカルの画像にリンクする間違いを犯すことがあります。Dreamweaverを使えば、絶対URLで指定されたリモート画像をデザイン時に表示できるので、私は通常、最初にグラフィックを全部集めて公開しておき、次のように完全修飾URLを使用してリンクします。

 http://www.idest.com/images/email/logo.gif

画像に関して注意すべきもう１つの点は、多くの電子メールクライアントが、迷惑メール対策のためにデフォルトでは画像を表示しないことです。受信者は、メールごとに個別に画像をオンにするか、送信者が安全であることを宣言する必要があります。したがって、画像を非表示にしてデザインをテストする必要があります。このためには、ブラウザのオプションで画像表示をオフにするか、Firefox Web Developer Toolbarのようなアドインを使用します。

画像が表示されていなくても情報が得られるように、画像には必ずalt属性とtitle属性を追加します。通常は、このテキストはデフォルトの段落スタイルで表示されます。ただし、画像が表示されているかどうかに関わらず印象を強めたい場合は、フォントサイズを大きく設定した<td>タグの中に画像を置くという方法があります。図３は画像をオンにした状態のsample_email.htmを示し、図４は画像をオフにした状態を示します。このサンプルでは、<td>タグに次のスタイル属性が設定されています。 

style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:22px; color:#90C424;"

画像をオンにしたときのヘッダーグラフィック

図３. 画像をオンにしたときのヘッダーグラフィック

画像をオフにしても大きいテキストが表示される

図４. 画像をオフにしても大きいテキストが表示される

別の方法として、グラフィックをテーブルに入れ、別の<td>タグにテキストを入れて、装飾用のグラフィックとは別に、強調のための背景色を設定することもできます。 この方法はファイルsample_email2.htmで使用しています。ファイルはこの記事の練習ファイルに含まれています。

図５に、画像をオンにしたメールの表示を示します。背景のグラデーションの画像と主役のボックスの画像は、濃い背景色を設定した見出しメッセージと別になっていますが、全体で１つのデザインに見えます。

画像をオンにするとすべてが一体化

図５. 画像をオンにするとすべてが一体化

画像をオフにすると、重要なメッセージが背景色付きで表示されます（図６を参照）。画像を含む他の<td>タグにも同じ背景色が適用されているので、このエリアはメールの幅全体にわたって広がっています。

画像をオフにするとテキストが主役

図６. 画像をオフにするとテキストが主役

画像に関するヒントがもう１つあります。デザインに背景画像が必要な場合は、background属性を使用して<td>タグに入れます（Dreamweaverでは手作業でコーディングする必要があります）。CSSプロパティのbackground-imageは使用しません。Outlook 2007とLotus NotesはCSSプロパティをサポートしていないからです。

ハイパーリンクのコーディングも、画像と同様に注意が必要です。この場合も、「絶対に」絶対URLを使用します。HTMLメールにはドキュメントやサイトを基準とした相対リンクは存在しないからです。また、リンクには必ずtarget="_blank"属性を付けます。これは、リンクが電子メールクライアントでなくブラウザで開くようにするためです。

この属性をDreamweaverで追加するには、プロパティインスペクタの「HTML」タブに切り替えて、「リンク」フィールドに絶対URLを入力した後、「ターゲット」リストから「_blank」を選択します。

次のステップ

ここで説明したHTMLメールの作成方法は、古くさい技法に見えるかもしれませんが、強い印象を与えるビジュアルを相手に直接届けられることには、大きな意義があります。また幸い、電子メールの現状を憂慮しているのはわれわれだけではなく、少なくとも１つの団体が状況を改善しようと動いています。Email Standards Projectは、電子メールクライアントに関する情報センターの役割を果たすとともに、MicrosoftやLotusにHTMLメールの改良を求める運動も行っています。機会があれば覗いてみて、HTMLメールの将来的な改善のために力をお貸しください。

Creative Commons License
この記事は、Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseのもと提供しています。

著者について

Joseph Loweryの、WebとWeb作成ツールに関する著書は世界11ヶ国語で出版され、売り上げ部数が400,000部を超える世界的なベストセラーになりました。最新刊は、『Dreamweaver CS3 Bible』です。最近発行された著書に、『CSS Hacks and Filters』や、Eric Ott氏との共著である『reamweaver 8 Recipes』などがあります。講演者としても知られ、Adobe（旧Macromedia）の米国および欧州でのカンファレンスや、全米各地のユーザグループで講演を行っています。現在は、WebAssistのマーケティング担当副社長です。