HTMLメールのレイアウト、というとどのようなレイアウトを思い浮かべるでしょうか。
恐らく、ぱっと思い浮かぶレイアウトはタテ長のメールレイアウトではないでしょうか。
今回のコラムでは、メールレイアウトの新しいパターンとして、日本ではあまり見かけない「ヨコ」へのスライドを活かした「ヨコ長」のメールデザインをご紹介します。
メールレイアウトはタテだけではない
日本の企業から受信するHTMLメールのデザインは、基本的にタテ長にレイアウトされたものが多く見受けられます。日本では「メールマガジン」文化が根付いていますので、全体にコンテンツのボリュームが多く、タテにレイアウトした方がコンテンツを盛り込みやすいのが現状です。ビジュアル重視のメールマガジンでは、写真のインパクトを最大限に引き出すため、横幅が広いメールも増えていますが、メーラーのファーストビューの横幅に収まるように、せいぜい横幅は900～1,000pix程度です。
これまで、弊社でも、ファーストビューで横幅が収まることを意識して、700pix前後の横幅をお勧めしてきました。しかし、インパクトや新しい試みという意味では、「ヨコ」へのスライドを意識した、「ヨコに長いメール」というのも趣向を変えたアプローチをしたい時などには活用できるのではないでしょうか。
実際に、海外ではヨコのレイアウトをうまく活用したメールが配信されていますので、ご紹介していきます。
受信者の遊び心をくすぐる
カナダの観光地を紹介している「The Canadian Tourism Commission」より配信されたメールは、ファーストビューでは、メールの一部がこのように見えています。
▼The Canadian Tourism Commission のEメール（ファーストビュー）
実は、このメール、「ヒントはスキービレッジが見つかるまで右にスクロール」と矢印に記載があり、矢印に沿って真っ白な画面をスクロールしていくと、ヨコやタテにまだまだ長さがあります。受信者は迷路を辿るようにスクロールをして、自らクリック箇所（カナダの観光地）を探す仕組みになっています。
▼The Canadian Tourism Commission のEメール全容 （画像をクリックすると拡大画像を表示できます）
（遷移を分かりやすくするため、赤い矢印を記載しています）
受信者の遊び心をくすぐる工夫が施されたメールです。
続きが気になるメール
総合ECサイトの「JC Penney」より配信されたメールは、子ども用品がファーストビューでは表示されています。子どもたちは右側を向いて並んでおり、何か右側に続きがあることをうかがわせています。
▼JC Penney のEメール（ファーストビュー）
このメール、右にスクロールしていくと、家族全員のコーディネートが見られる仕組みになっています。ヨコのレイアウトをうまく活用した見せ方です。
▼JC Penney のEメール全容 （画像をクリックすると拡大画像を表示できます）
こちらは、総合ECサイト「3Suisses」より配信されたメールです。ファッション誌の表紙のようなファーストビューで、縦のレイアウトでも成立しているデザインです。
▼3Suisses のEメール（メールをタテにスクロールした場合の見え方）
このメールは、矢印に沿って右にスクロールしていくと、商品ラインアップを見られるメールになっています。
▼3Suisses のEメール全容 （画像をクリックすると拡大画像を表示できます）
ディレクタスでの配信事例
ディレクタスでは、2013年1月7日に年始メールを配信しました。通常配信しているメールの横幅は700pixですが、この年始メールは少し趣向を変えてヨコに長いレイアウトで、横幅1,900pixで制作しました。
▼ディレクタス 2013年 年始メール （画像をクリックすると拡大画像を表示できます）
受信いただいたクライアント様より「ヨコ長のデザイン、インパクトがありました。こういったレイアウトもあるのですね。参考にしてみたいです。」といった反響をいただきました。
メールのレイアウトがマンネリ化していませんか？
長年、同じテンプレートで配信を続けていくと、マンネリ化を招き、反応率低下やリレーションシップを損ねる可能性もあります。毎回、レイアウト変更を行う必要はないと思いますが、お客様に楽しんでいただく“しかけ”や特別感を演出する手法として、例えば、このような「ヨコ長のレイアウト」を活用してみてはいかがでしょうか。
大切なことは、トライしてみて改善を行っていくこと。地道ですが、Ｅメールマーケティングには欠かせない道のりです。
