【海外で話題】スマホ向けメールの新潮流「キネティックEメール」とは?

January 04, 2016 / コラム


■キネティックEメールとは
最近、海外のEメールマーケターの間で、キネティックEメール(kinetic Email)というワードが、話題となりつつあります。
kinetic とは英語で「活動的な、動的な」を意味する形容詞。直訳すると「動的なEメール」となります。この訳の通り、キネティックEメールとは、CSS3やHTML5などを駆使して動きの要素をつけたメール の総称として使われています。


■キネティックEメールのはじまり
Eメールデザインの情報ブログ FreshInbox は、キネティックEメールが大手企業のメールマーケティングで採用されたはじめての事例として、2014年、英国の有名小売企業B&Qが行ったEメールキャンペーンを紹介しています。

2014年のB&Qのキャンペーンは、Eメールへのイノベーションで興奮の高まりをもたらした。それは、HTML5とCSS3によるダイナミックでフル・インタラクティブなコンテンツを使った、大手小売企業が行うはじめてのEメールキャンペーンだった。
The B&Q campaigns in 2014 brought a groundswell of excitement to innovation in email. It was the first time email campaigns from a major retailer featured immersive, dynamic, and fully interactive content using HTML5 and CSS3.
スマートフォンの標準メールアプリではカルーセルメニューで複数の情報をまとめて掲載。キネティックEメールに非対応のクライアントでは、カルーセルに収められるすべての画面内容が、通常の静的なHTMLメールと同じようにレイアウトして表示されます。
FreshInbox

このキャンペーンのEメールには、カルーセルメニューが採用されました。
メニューアイコンをタップするとメイン画面がスライドして別の画面が表われます。各メイン画面はそれぞれ異なる写真・説明文・リンク先となっており、1通のメール内に複数の情報をまとめて掲載することができます。

Oracle Marketing Cloud | B&Q このEメール・キャンペーンを担当したオラクルは、このメールを“Kinetic Email“と名づけ、プレスリリースでこの取り組みを紹介しました。




■それはスマートフォン対応から生まれた

従来、一般的に使われている多くのメールクライアントでは、強力でモダンなHTML・CSSを扱うことができませんでした。メールで利用できるHTML・CSSには限りがあり、デザイナーは最低限のコードだけを使っていました。
こうした状況が、iPhoneの登場によって一変します。
iPhone のメールクライアント「mail」は、最新のHTML5・CSS3をサポートしました。iPhoneと同等の機能を持つAndroid端末もふくめ、スマートフォンが人気を博したことで、メールはモバイル画面にあわせてデザインされるようになりました。
レスポンシブレイアウトなど、メールデザイナーたちがスマートフォン最適化に取り組む中で、CSSを駆使してメールにインタラクティブ性とダイナミックさを与えるキネティックEメールの手法が発見されたのです。


■キネティックEメールでできること

それでは、キネティックEメールを使うことで、具体的にどのような表現ができるのか。代表例としては、たとえば下記のものが挙げられます。

▼プルダウン・メニュー
メニューバーをタップすると、プルダウン・メニューが表われる
プルダウン・メニュー
Email Monks
▼ロールオーバー
画像をタップすると、別の画像が表われる
ロールオーバー
FreshInbox
▼スライダー
サムネールをタップすると、別の画像が表示される  
スライダー
Email Monks

Webdesigner Depotでは、こうしたキネティック技術の応用例として、Eメール内で動くショッピングカートのデモ(動画)が公開されています。

Eメール内ショッピングカート
Eメール内ショッピングカート
ショッピングカートの仕組みをコントロールするのに117のラジオボタンと2つのチェックボックスを使っている。こうした要素の組み合わせにより、画像ギャラリー、マルチページレイアウト、商品の追加 / 取り出し、フォーム確認、商品合計・小計・税・割引額・税込み合計の自動価格計算などの機能が実現される。また、これら全てはHTMLとCSSによって構築されている。
This one uses 117 radio buttons and 2 checkboxes to control it. Some of the features include image galleries, multi page layout, add/remove items, form validation, dynamic price calculations on line total, subtotal tax, discounts, and the total price. All of it is built in just HTML and CSS.
Webdesigner Depot

メール内の “BUY NOW” をクリックするだけで発注が行える、というデモです。メール内のボタンをクリックすることで、指定したカードに請求が行き、指定した商品が指定の住所に発送、これらすべてをウェブサイトへ訪問することなく行えます。
これはつまり、技術的にはメールだけでEコマースが利用可能 ということを指します。


■キネティックEメールの課題
メールマーケティングに新しい可能性を与え得るキネティックEメールですが、普及に向けての課題も決して少なくありません。
たとえば、技術的なところで言うと、
・多くのPC用メールクライアントではキネティックが動作しない
・現在のスマートフォンでは対応していないタグがある
といった課題があります。
また、日本では米国と比べてEメールのスマートフォン最適化自体、進んでいない現状もあり、国内でキネティックEメールが普及するまでにはもう少し時間がかかりそうです。

ただ、インターネット利用デバイスがPCからスマホへとシフトしていく中、キネティックEメールを活用できる土壌は今後、次第に整っていくことが見込まれます。メール利用環境の変化にあわせて、キネティックEメールが活躍するシーンもまた、今後増えていくのではないでしょうか。

■キネティックEメール サンプル配信
ディレクタスではキネティックEメールの制作サービスを開始しました。
サンプルメールをご用意しましたので、
お手元のスマートフォンでぜひ実物をご覧ください。
→サンプルメールを送る



著者プロフィール

金倉 英明/三瓶 大貴

金倉 英明
株式会社ディレクタス プロデュースグループ ディレクター
イベント制作会社、広告代理店での各種制作業務、グラフィック/WEBディレクターとしてのフリー活動を経て、2012年、ディレクタスに入社。Eメールマーケティング企画制作やPDCAサイクル運営サポートに従事。

三瓶 大貴
株式会社ディレクタス プロデュースグループ インターン
成城大学社会イノベーション学部
政策イノベーション学科4年
2015年、ディレクタスにインターンとして入社。リサーチ、翻訳、資料作成などアシスタント業務に主に従事。

ディレクタスでは本コラムやセミナーの開催情報などを掲載したメールマガジンを毎月1回お届けで発行しています。以下のリンクボタンより簡単にご登録いただけますので、インターネットマーケティングの現在について、ご興味をもたれた方は是非ご登録ください。

メールマガジン登録