ECstationサポブロ 
WEBページではPCスマホ兼用のいわゆる「レスポンシブ（幅100%）」が増えている昨今ですが、同じくHTMLとなる「HTMLメルマガ」では状況が少し複雑となっております。今回、その点をご説明していきたいと思います。
なお、こちらは想定や考察を含む内容となっております。その点何卒ご了承の程お願い致します。
単純に幅100％（レスポンシブ）で作成して配信するとこんな問題が。
メールの閲覧環境は多岐に渡り実は結構難しいものになります。
配信する際に相手が「パソコンで閲覧」しているのか、「スマートフォンで閲覧」しているかは分からず両方に最適化されることを期待できる配信方法を検討するしかないものとなります。
そうなるとレスポンシブならOKなのか？と思いますが、実は、WEBサイトの場合はcssのメディアクエリー又はjavascripがゴリゴリに使えますので閲覧者のデバイスがPCなのか、スマホなのかを判定して、表示形式を動的に変えることが可能です。いわゆる「レスポンシブ対応」というものですね。
ところが！HTMLメールでは基本的なCSSは使えますがjavascripが使えません。
更に、楽天R-mailではCSSも使えないので「レスポンシブ対応」ができないものとなります。
とは言え、幅をとにかく「100%で表示する」というだけの対応ならできるは出来ます。
（なお、RMSのR-mailにあるレスポンシブ作成機能でも同じとなります。）
ただ・・・これ（幅100％と言うだけのレスポンシブ）だと以下の問題が出てきてしまいます。
- PCでの閲覧時は幅100％に広がって多くの場合、巨大過ぎて閲覧しにくくなります。
- 配信リストで閲覧環境がPCかスマホかを指定することは出来ません。
- 前述した通りHTMLメルマガではレスポンシブ（閲覧デバイスを判定）するHTMLを記述出来ません。（多くのメーラーがそういったCSSを正しく解釈しません）
例えばシェアの大きいGMAILを使っている人はスマホアプリでもPCでも閲覧していますので幅を「100％」にするだけの対応では少し問題があるように思えます。
では、幅を固定して送信した場合はどうでしょうか？
幅固定で作成してもGmail、Yahoo!メールのスマホ閲覧時は問題がほぼない
幅を固定（推奨650px）で作成した場合はどうなるかと言いますと、アプリかブラウザ版かなどで違いがあるようですが、Gmail、Yahoo!メールではスマホ閲覧時にも視認性は保たれて表示又は幅いっぱいに表示してくれます。これはGmail、Yahoo!メールだけでしょうか？
残念ながら本記事執筆時点ではこれ以上の検証はできておりません。しかし、実はGmail、Yahoo!メール以外の閲覧環境の心配をする必要はあまりないように思われます。
なぜかと言いますと、
- Gmail、Yahoo!メール以外の人の多くはキャリアのアドレス（docomo.ne.jpなど）の人と想定されます。
- しかし！R-mailの [HTMLメール] 配信ではキャリアのアドレスには配信が出来ません。
キャリアのアドレスへ配信する場合は [モバイルテキスト] か [モバイルHTML] を使用する必要があります。
ご参考：https://navi-manual.faq.rakuten.net/promotion/000009861?l-id=ManualLeftNavi
キャリアの提供するメールアプリはGmail、Yahoo!メールに比べて機能が劣ることが想像され、視認性が保たれるように自動調整してくれることをあまり期待できないようにも思えますが、そもそも楽天R-mailの配信リスト作成仕様で [HTMLメール] ではキャリアのアドレス宛の配信はできないので心配する必要がありません。
一旦の結論としては幅固定で作成がおすすめです
幅を固定で作成すればPCでは当然問題なく適切な幅で表示できますし、スマホ表示でもシェアの高いGmail、Yahoo!メールでは視認性を保った表示か、きちんと幅いっぱいに表示されます。
（リスクの高いキャリアのアドレスには配信がそもそもできないので考慮外でOKです）
幅は650pxをお勧めしております
ECステーションでは現在は幅は650pxを推奨しております。この場合Gmail、Yahoo!メールのように幅を調整してくれないメールアプリでの閲覧だった場合でも、はみ出して極端に見切れたり、逆に表示が小さすぎることがなくサイトへの誘導のフックとしての役目は十分果たせるかと考えております。
幅100％で作成した場合のメリットはないのか？
スマホ閲覧だけを想定すれば基本最適化されて表示されますのでこれが最大のメリットになります。PC閲覧のことは特に気にしないという運用方針になりますね。
但し、その恩恵を期待したいgmail、Yahoo!メール以外のキャリアのアプリ（＝キャリアのアドレス）にはそもそも配信できないことを考えますと、このメリットを享受できる「機会」がそもそも少ないようにも思えます。
そして、それほどメリットはないけど、PC閲覧時のデメリットだけが残ってしまいますので天秤に掛けるとデメリットの方が大きいかも知れません。
とは言え、ユーザー層によってはPC表示時を割り切っていただき、幅100％で運用することも当然アリかと思います！
リストを作成しまずは配信できる人数を把握して対応しましょう。
思ったより多い場合はHTMLメルマガとは別に作成する手間が増えますが配信を検討いただいても良いかと思います。仮説ですが他店からのメルマガ配信受信が少ない（競合が少ない）、そのため精読率も高い可能性は想定されます。
ただし、キャリアアドレスに配信したい場合には [モバイルテキスト] 、[モバイルHTML] を使うことになりますが文字数の制限が5000文字で使える画像容量も制限されており画像を2-3枚入れるともうoverになってしまうような感じですので [モバイルHTML] で原稿を作成するのはなかなか大変です。（また、ECステーションではモバイルHTMLの作成モードはございません。）
モバイル（キャリアアドレス）にも配信したい場合はテキストメールで別途作成するのがおすすめにはなるかと思います。
PCメーラーの表示崩れについて
PC用のメールクライアントソフト（メーラー）は、もともとHTMLを表示するものではないためHTMLの解釈がかなり曖昧です。そのため、HTML的には正しい文法且つそれほど複雑でもない記述の仕方で幅を指定していても上手く解釈してくれずサイズを無視して表示したり、リンクの付いている画像にダッサダサな太い枠線を付けてしまったりするケースがあります。
過去のお客様ご報告からの推測ではtabelタグ全体で固定幅指定して
中を50％、50％などような時にサイズを何かと無視されてしまう
場合あるような気がしております。
メーラーはダウンロードしてインストールするソフトであることからバージョンが複数存在しており、自動でアップグレードしないものや、既に開発元（マイクロソフトなど）がサポートを終了しているバージョンもございます。
残念ながらこれらを考慮した対応をすることが難しいものとなっております。古いソフトなどは再現するための環境も用意できないため検証も困難という状況です。何卒ご理解の程お願い申し上げます。
結論（まとめ）
今回考察ではキレ良く結論をお出しできませんでしたので編集後記としてまとめを掲載させていただきます！
色々考察した結果、どっちでも良いのかなという気がしてきました。（苦笑）
ECステーション企画部としては一旦は幅固定の650pxがPCも考慮されてスマホでも実はほとんど問題がないというバランスを重視してオススメとさせていただきます！
客層によってはPCのことは気にしない（スマホのみ優先）で割り切って幅100％作成で良いかと！
なお、キャリアアドレスの配信部分は楽天特有そうですが、ヤフーや自社でも同じような考え方で良いかと思います！
