どうも、わたしです₍₍ (ง ˙ω˙)ว ⁾⁾

最近、スマホゲームアプリの課金が止まりません。
課金は家賃まで、という名言を残した、声優・大久保瑠美さんの言葉を胸に、
今日も今日とて課金します。人生超楽しい。

さて、

非常にありがたいことに、HTMLメール制作についてのご依頼がかなり多くなりました。
個人的にもメルマガはやりたい!と思う分野でもあり、制作経験もあるので、
その知識が今こうやって役立っているのは非常に嬉しいです。

さて、メールマガジンの運用に関してのご相談も多いのですが、
今回は実際にデザインを制作するにあたって、悩みの種の一つである、レイアウトや横幅に関して調べてみました。


モバイルフレンドリーは最低条件だぞ!

モバイルフレンドリー(スマホに超優しい)なHTMLメール、今は当然ですよね!╰(*´︶`*)╯

……が、デザインのレイアウトによっては、
そもそもレスポンシブデザインで、デザインを変える必要性がないものだってあります。

3カラムの画像をモバイルでそのまま表示すると、めちゃくちゃ小さくなります。
その中に文字が入っていると、可読性が悪く、ユーザーに優しいとは言えませんよね。
こういった場合はレスポンシブデザインで1カラムに切り替えるという方法をとるといいかもしれません。

モバイルフレンドリー!


メールマガジンの主流はフレキシブルレイアウト?

ここで、メールマガジンでよく使われているレイアウトをご紹介しますね。

レスポンシブデザイン

レスポンシブデザイン
まずはおなじみのレスポンシブ(web)デザイン。
ディスプレイサイズに応じてデザインを変更します。そう、デザインを変更するんです。大事なことなので2回言いました。
メールマガジンでは、無印良品様などが、レスポンシブデザインを採用されています。
(無印良品様は複数HTMLメールを配信されており、そのうちの一つがレスポンシブデザインでした。他はフレキシブルレイアウト。)

無印良品様のレスポンシブデザイン

リキッドレイアウト

リキッドレイアウト
こちらは、要素の単位を%で指定して、ウィンドウ幅によって可変します。
PCで見ても幅いっぱいにコンテンツが表示されるので、でかいモニターだと「幅広っwwww」って思います。
チケットぴあ様のご案内メールなんかはリキッドレイアウトを採用しています。

チケットぴあ様のリキッドレイアウト

フレキシブルレイアウト

フレキシブルレイアウト
リキッドレイアウトがベースとなっており、ウィンドウ幅の最大値・最小値を固定にします。
世の中に溢れかえるメールマガジンの大半は、フレキシブルなんじゃないかな…
SHIPS ONLINE SHOP様他、たくさんのメールマガジンで採用されています。

SHIPS様のフレキシブルレイアウト

メールマガジンで使われるレイアウトに関して、ざっくりと書きましたが、
レイアウトに関しては、LIGさんで詳しくご紹介されています。分かりやすいっ!
必読!5分でわかるレスポンシブWebデザインまとめ


私が購読しているメールマガジンや、請求書などのHTMLで送られてくるメールのほとんどがフレキシブルレイアウトです。
それを考えると、レスポンシブでデザインを変更するものより、
フレキシブルで最大ウィンドウ幅を固定、可変にしたHTMLメールの方が、主流なのかな、と思います。

実際、私がお仕事させていただいている案件も
レスポンシブデザイン 1割
リキッドレイアウト 1割
フレキシブルレイアウト 8割
ってぐらいですからね。


デバイスごとの比較

実際配信されているメールマガジンを見てみましょう。
メーラーは全て「Spark」を使用してます!超オススメです。

width:600px 札幌アピアメールマガジン

札幌アピア メールマガジン


width:630px スクウェア・エニックスeストア

スクエニeストア メールマガジン

こうしてみてみると、PCで見るときは横幅を決めていて、
iPhoneといった、ディスプレイが小さいデバイスに関しては、width:100%で画面いっぱいに表示させています。
これが、先述したフレキシブルレイアウトになりますね(✿´ ꒳ ` )

横幅まとめ

世の中のHTMLメールは一体どんな感じなんでしょうか。

私が実際に購読しているメールマガジンや、各種サービスの請求書メールまで、
横幅リストをまとめたので、参考にどうぞ。

※PCで閲覧した時のmax-widthサイズです。

448px Twitter
512px LinkedIn
540px Dropbox
550px Freee
552px Google+
590px マルイのネット通販「ウェブチャネル」
Google Play
600px AIR DO
BASE
note
CrowdWorks
DESIGN CUTS
Dribble
Yahoo!wi-fi
InkyDeals
RaCoupon
e+アート
ローチケHMV
アメマガ
Udemy
Greedeals
無印良品
H.I.S
Falcom News
MISOCA
note
オリコ
Yahoo!トラベル
Original Mockups
Fabio
the hungry JPEG
TOWER Records
札幌アピア
620px hoteles.com
630px スクウェア・エニックスメンバーズ
スクウェア・エニックスeストア
638px RECRUIT ID
640px Oisix
じゃらん
ANA
Gamegift
LIG
e+
GILT
DMM GAMES
Lancers
todoist
644px SHIPS
650px Yahoo!チケット
Web Designer News
660px Apple 請求書
Udemy
682px Peach Aviation
700px H.I.S
楽天市場注文内容メール
LOCONDO.jp
JALショッピング
セキスイハイム
My docomo
720px えきねっと
730px graphicstock
740px 朝日新聞デジタル
750px Ameba
Pixelbuddha
782px DesignFaves

600pxの一人勝ちですねこれ


おわりに

今回はメールマガジンの横幅についてフォーカスして書かせていただきました。

予算も時間もあまり掛けられないよ…˚‧º·(˚ ˃̣̣̥⌓˂̣̣̥ )‧º·˚
という方は、リキッドレイアウトやフレキシブルレイアウトを試してみるといいかもしれません。

必ずしもレスポンシブデザインのように、デザインそのものを変える必要はないんだよ!
というのを、私は伝えたい✌(‘ω’✌ )三✌(‘ω’)✌三( ✌’ω’)✌

自分が伝えたい商品やコンテンツをうまく伝えるには、どんなレイアウトがいいか。
見極めるのは大変かと思いますが、少しでも参考にしていただければ幸いです。

それでは、また₍₍ ◝(‘ω’◝) ⁾⁾ ₍₍ (◟’ω’)◟ ⁾⁾