iPhone向けのHTMLメールを作成する時のまとめ

2009年12月01日

!!この記事には謝った内容が含まれています。下記の記事で修正した内容を書いておりますので、こちらもご覧下さい。
【追記補足】iPhone向けのHTMLメールを作成する時のまとめ

最近、仕事で「iPhone向けのHTMLメール」の作成を調査しました。まだiPhone向けのHTMLメールはニッチな土壌なので情報も少ないようです。

調査の途中にデザインの制限など興味深い事も分かったので、自分への覚え書きの意味も込めてブログに書いておきます。

PC向けのHTMLメールはoutlookだけではなく、gmail、yahooのようなwebメーラーも主流となった今、対応させるメーラーが多いのでコーディングもかなり複雑になります。

また、1つのHTMLで全てのメーラに対応させるには、HTMLメールの癖も理解してデザインもしないといけないので単純なデザイン作業では済みません。

また、HTMLメールを作成したあとも、あらゆるメーラーでの確認作業が必要になりますので作業労力も馬鹿になりません。

しかし、iPhone向けのHTMLメールはiPhoneの3G、3GSの2つの端末のみです。
確認作業が少なくて済むのでPC向けより大分楽です。しかも、2つの端末に差異は無いようでした。
※iPhone OS 3での確認。3.xのような複数バージョンは未確認。

さて、iPhone向けのHTMLメールですが、結論から言うとPC向けのWebサイトを作る時のように普通にコーディングして問題ありません。

上記が調査中に試した結果です。基本的にはこの通り。かなり優秀です。
恐らくsafariのレンダリングを使っているようです。listタグの挙動がsafari的でした。
基本的にはsafari向けのコーディングを意識していれば良いようです。

とはいえ、少しばかりiPhone特有のレンダリングがありました。

iPhoneの画面サイズは横幅320pxですが、HTMLメールを受信した際のメインのレンダリング部分は300pxでした。

このように、画面の右側はスクロール部分として20px確保する仕様のようです。

「あああ」「いい」「おお」の部分は3つの画像になっており、それぞれにfloat:leftを与えております。3つの画像の合計が300pxだと、このように横一列に表示されるのですが……

「あああ」「いい」「おお」画像の横幅が合計301px以上になると崩れてしまいました。

また、一番上の写真画像320pxあるのですが、1枚の画像で300pxを超えた場合だと自動的に300pxにリサイズされるようです。
要は300px以内でデザインすれば問題ないようです。

メインのレンダリング部分が300pxと書きましたが、body{background-color:#xxx;}のようにcssで背景色や背景画像を指定すると全体に背景が表示されます。

・背景は画面全体(横幅320px)に反映。

・メインコンテンツは横幅300px以内でレンダリング。

以上が、iPhone向けのHTMLメールの調査をする際に僕が気にしていた点を羅列したものです。
もし、iPhoneユーザー向けのHTMLメルマガなどを作成する時があれば役に立てば幸いです。

!!この記事には謝った内容が含まれています。下記の記事で修正した内容を書いておりますので、こちらもご覧下さい。
【追記補足】iPhone向けのHTMLメールを作成する時のまとめ

ナカシマ