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


0.jpg

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

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

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

PC向けと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サイトを作る時のように普通にコーディングして問題ありません。

1.jpg

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

iPhone向けのHTMLメールをデザインする時の注意点

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

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

2.jpg

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

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

3.jpg

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

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

4.jpg

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

まとめ

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

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

その他の調査結果

  • 基本的に通常のHTMLコーディングで問題ない。xhtmlで良い。
  • マウスを使う訳ではないので、ロールオーバーは出来ない。
  • テキストのa:hoverも意味がない。
  • リンクはsafariが開く
  • fontは%設定も可能
  • メールの件名には<title>タグのテキストではなく、送信の際の「件名」が表示される。
  • 横幅が300pxを超える画像は、横幅300pxにリサイズされる。
  • 画像をfloatで横に流した際はリサイズされないので300pxを超えると崩れる。
  • cssでのbackground-colorも問題なし
  • cssでのbackground-imageも問題なし
  • cssのimportも問題なし
  • HTMLメールを受信した後に、サーバーの画像を差し替えても送信済みのメールには反映しない。
  • HTMLメールを受信した後に、サーバーのcssを差し替えても直には反映されない。ただし、cssへのリンクが同じメールを受信するとcssが上書きされる。

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

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

この記事を書いた人:

ナカシマ

北区赤羽在住のWEBデザイナー兼エンジニア。インターネット、WordPress、本・漫画、音楽が大好き。妻と猫と暮らすアップル信者。

BLOG: 着ぐるみ追い剥ぎペンギン