Skip to content

Series Posts: HTMLメールデザイン

HTMLメールデザイン

HTMLメールでアンカーリンクが設置できない時の対処法は?

こんにちは、ブログ担当の伏見です。 突然ですが、作成したメルマガにアンカーリンクを設置したが、うまく作動しないといった問題に直面したことはありませんか? 実はHTMLメールにおけるアンカーリンクは受信環境によってその作動をサポートしているものと、そうでないものがあるのをご存知でしたか? 今回はそんなHTMLメールにおけるアンカーリンクについてお伝えします! リッチコンテンツなメールにはアンカーリンクを使いたい HTMLの技術により、画像を掲載したメール、また容量の大きいメールを作ることが可能になりました。しかしそれゆえ、コンテンツ量が多くなり、購読者はスクロールダウンを繰り返すことになります。 そんな時webサイトの用にアンカーリンクを活用して、読んでもらいたいコンテンツに直ぐ飛んでもらえるようにしたいですよね。実際ベンチマークでもアンカーリンクをメールに仕込むことは可能です。 (ベンチマークのメールエディターでもアンカーリンクの設置が可能です) ですが、残念なことに現状アンカーリンクを正しく設定していても、全てのメールクライアントでアンカーリンクが作動するわけではないのです。 HTMLメールではアンカーリンクの作動率は100%ではない 現在以下の環境下にてアンカーリンクの稼働のサポート状況が公開されています。 Emailクライアント アンカーリンクのサポート有無 Gmail(Web) ○ Gmail(アンドロイドアプリ) ○ Inbox by Gmail(アンドロイドアプリ)...

November 13, 2017

HTMLメールデザイン

セール告知に使える! Benchmark Emailオリジナルデザインテンプレート紹介

こんにちは、デザイン担当のBEDです。 ”◯◯におすすめのメールデザインテンプレート紹介”シリーズとして職種や用途に合ったおすすめのメールデザインテンプレートをいくつかご紹介していくこのコーナー。 Benchmark Emailでは、500以上ものメールデザインテンプレートを提供しています。正直沢山ありすぎてどれを使って良いのか分かりません。 そこで今回は、「セール告知」におすすめのメールデザインテンプレートを5つご紹介します。 ※今回ご紹介するテンプレートはBenchmark Emailメール作成画面より、テンプレートを選び、フィルター>タイプ>プロモーションのカテゴリーに全て含まれています。(Benchmark Emailのアカウントにログインする事で確認する事ができます。) シンプルかつクールに! 黒を貴重としたクールなデザインが特徴のテンプレートです。注目させたい部分にアクセントとして赤を入れることでより目立ち、ユーザーを分かりやすく誘導できます。例えば、ファッション系のECサイトで洋服を着たイメージや小物を持っているといった利用シーンを見せると良いと思います。ブランドのイメージに合わせてカラーを変えるのも良いと思います。 また、Color Hexというサイトでカラーの上手な組み合わせを確認するのも良いでしょう! 参考記事:メルマガ登録フォームはWebサイトのデザインを壊さずに目立つのが大事 テキストベースでも美しく! 画像をメインに訴求することも良いのですが、テキストベースでも十分に要点を伝えることはできます。ポイントとしては長くならないテキスト量の調整が必要です。例えば、セール系のイベントの紹介などに効果的です。画像メインよりもより詳しいセールの内容や場所、どんな商品があるのかなどテキストメインで紹介するとより伝わりやすくなります。 Webサイトのようなメルマガデザイン! メルマガをWebサイトの様にせることで、セール告知以外にもお店の情報やブログといった別コンテンツへ自然と誘導することができます。送りつけるだけのメールではなく、ユーザーにもっと色々知って貰いたい時に効果的です。 動画で訴求! 動画でより効果的に訴求することが可能です。動画は現在、様々な業種でも使用されています。動画で訴求する場合は、長くなりすぎないのがポイントです。長いとユーザーは観ることに飽きてしまうので、30秒〜1分程度が良いでしょう。例えば、サッカー用品を扱っている場合は、その用品を使っているシーンなどをその商品にスポットが当たるような動画を撮影し載せると良いでしょう。 ※メールの容量が重いことで受信側によって迷惑メールと判断され、受信トレイに届かなくなってしまうことがあるため、現在多くのメーラーではメール内で動画を再生することができません。その場合には、動画箇所をクリックすると動画のあるWebページへ移動し、そこで再生されるというものが主流です。(Benchmark...

June 26, 2017

HTMLメールデザイン

Webメディアから学ぶ!オウンドメディアのニュースレター向けHTMLメールデザイン17選

こんにちは。ライターの遠藤です。 オウンドメディアのブームとともに、ブログやWebメディアを運営する企業も増えてきましたね。 WebメディアによってFacebookやTwitterなどを使っているところもあれば、それらに加えてメールでニュースレターを配信しているところもあります。 私も自分のブログでニュースレターを配信しているので、他のWebメディアがどんなニュースレターを配信しているのかは気になるところです。 そこで今回は既存のWebメディアが配信している「ニュースレター」を参考に、Webメディア(ブログも含む)のニュースレターづくりの参考にできるポイントを考えてみたいと思います。まずはニュースレター(HTMLメールで)を配信しているWebメディアをいくつか見てみましょう。 目次 NewsPicks TechCrunch SELECK PRESIDENT Online Forbes JAPAN PR Table Bizna DIGIDAY ナショナルジオグラフィック VOGUE GQ...

April 3, 2017

機能・便利ツール

Benchmark Emailの画像加工ツールで簡単にメルマガを作ろう

この記事は旧UIの情報となっております。最新の画像加工機能は以下のガイドをご覧ください。 ご利用ガイド(FAQ):画像のサイズや色を編集する方法 _____________________________________________ どうも、デザイン担当のBED君です。 画像を加工するとなると、Photoshopなど特別な画像加工ツールが必要になるのでは?と心配になるかもしれませんが、Benchmark Emailでは、メール内に設置する画像の加工ができるツールがあります。 これを使えばInstagramのようにサイズの変更やトリミング、色味の調節といった加工が簡単にできます。 そこで今回は、どんな画像加工が実際にできるのかご紹介します。 写真を加工するだけで印象が大きく変わって素敵なメールになりますよ!ぜひ、いろいろな加工を楽しんで素敵なメルマガを配信してください。 まずは、加工したい画像をアップロード Benchmark Emailにログインします。 メール作成手順に沿ってドラック&ドロップエディターを選ぶと、簡単に画像をアップロードできます。 画像をクリックし、編集を押せば編集画面に変わります。 それでは、画像加工ができるツールをご紹介 強調 画像に強調を追加したい時におすすめです。 高解像 – 画質がシャープになります。...

December 12, 2016

HTMLメールデザイン

【新機能】ポップアップする登録フォームでメルマガ登録率アップ

(この記事は2016年11月の記事をUI変更に伴いリライトしたものです。) サイト内のコンテンツを読んで、自社や自社商品に対して興味を持ってくれたら当然メールマガジンにも登録をしてもらいたいですよね? ですが、そのタイミングで登録フォームが見つからず、登録することができなかったら・・・。機会損失につながってしまいます。 Benchmark Emailでは新たにポップアップ表示が可能な登録フォーム機能(ポップアップフォーム)が追加されました! サイト訪問中、いつでも登録が可能になるので、購読者の「登録したい!」というタイミングを逃しません! ポップアップだから、従来の登録フォームに比べて訴求力が違う! ポップアップフォームを使えば、サイト上のどの部分に、どんなタイミングで表示させるのかといったより細かな設定が可能です。 海外のサイトではすでに浸透しているこのポップアップ式登録フォーム。これを導入したことで登録数が劇的に向上したというケースもあるようです。 コンバージョン数を600%増加させたExit Popupで離脱率を下げる ブログを読んでくれて、内容をある程度読み終えたタイミングでポップアップフォームを表示させる事で、ブログ内容に興味を持った人に、今度はメルマガ購読に対する興味を与えることができます。 そこで、より効果的に登録フォームを活用するためのポイントを3つご紹介します。 1.ランディングページでのポップアップフォームの利用はご用心 上記のようなページへの訪問者は大抵、企業やサービスに対してより多くの情報を集めたいと思っています。 一般的な顧客行動として、一定の情報を集められた上で興味を持ち、さらに情報を得たいと思った人が、ニュースレターに登録します。 ランディングページの情報よりも明らかなお得情報があり、そのメリットを登録フォームで明確に説明できれば別かもしれませんが、これら情報を集めたいと思っているサイト訪問者は、すぐには個人情報を共有したいとは思っていません。 2.ポップアップフォームを表示させるタイミングによってはかえって逆効果 ページに訪れたそのタイミングでポップアップを表示させてしまうと、いかにも「登録して!」という主張が強く、しかも訪問者のページを読みたいという欲求を邪魔してしまいます。 ある程度読み進めてもらい、興味関心を掻き立たせた上で、ポップアップを表示させるという自然な流れ作りを心がけましょう。...

November 21, 2016

HTMLメールデザイン

ECサイト運営者におすすめ!Benchmark Emailオリジナルデザインテンプレート紹介

初めまして、デザイン担当のBED君です。 Benchmark Emailでは、500以上ものメールデザインテンプレートを提供しています。正直沢山ありすぎてどれを使って良いのか分からないなんてこともあると思います。 そこで、”◯◯におすすめのメールデザインテンプレート紹介”と題し職種や用途に合ったおすすめのメールデザインテンプレートをいくつかご紹介していきたいと思います。 また、デザインの参考にしてもらうのも良いかもしれません! 今回は、「ECサイト運営者」におすすめのメールデザインテンプレートを6つご紹介します。 ※今回ご紹介するテンプレートはBenchmark Emailメール作成画面より、テンプレートを選び、フィルター>業界>Eコマースのカテゴリーに全て含まれています。(Benchmark Emailのアカウントにログインする事で確認する事ができます。) 単色とビジュアルでシンプルに訴求! あまり色数を使わないシンプルなデザインが特徴のテンプレートです。 見た目がとても綺麗で一押しの商品紹介に最適です。 商品の使用シーンで訴求! 商品の使用シーンを見せることで、ユーザーが商品を使った時のイメージを想像させることが出来ます。使っているシーンをイメージさせるのは購買意欲を駆り立てるテクニックです。 イラストで可愛く訴求! Webアプリなどの商品を扱っている方におすすめのデザインテンプレートです。ポップなイラストをモチーフにしているので、誰が見ても分かりやすく、可愛い仕上がりになっているので親近感がわきます。 割引き・クーポン情報を分かりやすく訴求 割引きやクーポン情報などすぐにお得感を訴求したいのならこのデザインテンプレートがおすすめです。分かりやすいシンプルなデザインなので、簡単に訴求したい内容を打ち出すことができます。 商品を雰囲気良く表現し商品力を訴求 商品やブランドのイメージを雰囲気良く出すことで、そのブランドの味を訴求でるようなデザインになっています。...

October 31, 2016

HTMLメールデザイン

スマホでの読みやすさが改善!Gmailがレスポンシブメールのサポートを開始!

こんにちは、ブログ担当の伏見です。 9月14日、Gmailのオフィシャルブログ「Better emails, tailored to all your devices」にてGmailとInboxがレスポンシブメールのサポートを開始することを発表しました。 これによりスマホでも、Gmailアカウント内のメールを確認する時はレイアウトが受信環境に最適化されるので、画面を拡大・縮小したりせずに画像などを確認することができるようになります。 レスポンシブ対応のメールは端末に合わせて表示が最適化! 出典元:Google[/caption] 画像の様に複数カラムあるメールは携帯だと小さくなって見にくいですが、レスポンシブになることで、1カラムになり、読みやすくなります! Gmailのレスポンシブ対応はメールマーケティングにとって追い風 アメリカの様々な企業の調査によると、メールの送受信にスマホを要する人が今後ますます増えていくということが予想されており、今回のGmailの発表はメール配信・メールマーケティングを行う企業にとって追い風となりそうです。 2016年4月、メールをスマホで確認している人は送受信されたメール全体の56% – Litmus 世界中で10億あるGmailアカウントのうち、その75%が携帯でメールを確認している – Hubspot...

October 9, 2016

HTMLメールデザイン

スマートフォンでも読みやすいテキストメールの作り方

WEBマスターの手帳を運営している遠藤です。WEBマスターの手帳ではHTMLメールを使ってメールマガジンを配信しています。ですが、私がWeb担当者としてお仕事をさせていただいている企業には「テキストメール」でメールマガジンを配信しているところもあります。 私もメールマガジンをいくつか購読していますが、テキストメールで届くこともあります。また、なかにはHTMLメールとテキストメールを使い分けている会社もあります。 これまでメールマガジンといえばテキストメールだったので、十分に研究をしてきたという会社も多いと思います。インターネット上でもたくさん情報が公開されていますし、担当者の方は作り慣れていることと思います。 ですが、メールマガジンを配信する際にスマートフォンで読まれることを意識して、テキストメールを作成していますでしょうか?あるいは、ご自身が購読しているメールマガジンをスマートフォンで読んだときに読みづらいなと感じたことはありませんか? ということで、今回はスマートフォンでも読みやすいテキストメール作成についてご紹介します。 テキストメールとは テキストメールとは、テキスト(文字)のみで作られているメールのことです。社会人なら日頃メールを使っていると思いますので、HTMLメールよりもテキスト形式のメールのほうが馴染みがあるのではないでしょうか。 テキストメールのメリットとデメリット テキスト形式のメールの一番のメリットは、作るのが簡単ということです。普段使っているメールと同様に作成すればいいので、技術的にテキストメールを作成するのが難しいということは、ほぼありえないでしょう。 またどんな環境でもメールが表示されるのもそのメリットです。 逆にデメリットはHTMLメールとは異なり、リンクを埋め込んだり、メールの本文内で写真や画像を表示することができない上、フォントカラーやサイズを変えることもできません。 またどれぐらいの人がリンクをクリックしたのかなどのデータを取得することもできないので、効果測定ができません。 ちなみにBenchmark Emailを使えば、一般的なテキストメールだけでなく、HTML形式のテキストメールも簡単に作成できるので、クリックできるリンクを埋め込んだり、メール内に設置したリンクのクリック数を把握することもできます。 効果測定可能なテキストメールの作成方法 (操作マニュアル2:メールの作成箇所) テキストメールのレイアウト テキストメールでメールマガジンを送るときのレイアウトも重要です。特にテキストメールは文字だらけになるので、長文は好まれません。 もし長くなる場合は「目次」を入れると、そのメールにどんなことが書かれているのかがひと目でわかるので、読んでいる人も読みやすくなります。 またHTMLメールのように、本文の右または左側にサイドスペースを置くことができないので、レイアウトも自ずと1カラムになります。...

September 5, 2016

HTMLメールデザイン

【新機能】興味を持った購読者を逃がさない!メールに反応した人にだけ自動で次のメールを送るオートメーション機能

こんにちは、ブログ担当伏見です。 私はブログなどコンテンツ全般を担当しており、Benchmark Emailが毎月配信している、メールマーケティングに役立つニュースレターの作成と配信も行っております。 そんな中、以下のようなことをよく考えることがあります。 購読者にもっと的確なアプローチを行えないか 配信して終わりではなくメールに興味を持ってくれた人に、さらにそれに関係のある情報を提供することでもっと踏み込んだコミュニケーションを取りたい ですが、これを実現させるには一度配信したメールの結果から開封またはリンクをクリックした人のリストだけ抽出し、そのリストに向けて次のアプローチをするためのメールやシナリオを作成するなど作業工数が多く、今までは行うことができませんでした・・・。 こんなお悩みを持っている方の手助けとなる、Benchmark Emailで新たに追加された、メールを開封・クリックした人を対象に自動でステップメールを送れる「オートメーション機能」をご紹介します! 購読者とより高い関係性を築きあげるオートメーション機能 オートメーション機能とはメールを開封したり、リンクをクリックした購読者に対し自動でメールを送信する機能なのです。 Benchmark Emailのこの機能では以下の3つの条件に合わせてステップメールを起動させることができます。 開封した人 リンクをクリックした人 特定リンクをクリックした人 これによってメールを読んでくれる人、コンテンツに興味のある人へよりさらに密なアプローチをすることが可能になります。 例えば、メール内の特定のリンク(ある商品のリンク)をクリックした人だけにそれに関連する別の商品に関する広告メールを自動で送るといったことができます。 またBenchmark Emailのニュースレターでもこのオートメーション機能を活用しています。ニュースレターの導入事例ブログをクリックした人を対象に、別の導入事例を掲載したメールを届けることで、よりBenchmark...

August 4, 2016

1 2 3 4 5