タグ: レイアウト

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

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

メールマーケティングノウハウ • 2017.04.03

こんにちは。ライターの遠藤です。 オウンドメディアのブームとともに、ブログやWebメディアを運営する企業も増えてきましたね。 WebメディアによってFacebookやTwitterなどを使っているところもあれば、それらに加えてメールでニュースレターを配信しているところもあります。 私も自分のブログでニュースレターを配信しているので、他のWebメディアがどんなニュースレターを配信しているのかは気になるところです。 そこで今回は既存のWebメディアが配信している「ニュースレター」を参考に、Webメディア(ブログも含む)のニュースレターづくりの参考にできるポイントを考えてみたいと思います。まずはニュースレター(HTMLメールで)を配信しているWebメディアをいくつか見てみましょう。 目次 NewsPicks TechCrunch SELECK PRESIDENT Online Forbes JAPAN PR Table Bizna DIGIDAY ナショナルジオグラフィック VOGUE GQ JAPAN CINRA.NET TABI LABO Time Out Tokyo ブレーンデジタル版 WIRED Houzz NewsPicks 「もっと自由な経済誌を」をテーマに経済情報に関するニュースを配信しています。NewsPicksはアプリもありますが、メールでも「Weekly Digest」や「HIGHLIGHTS」など様々な形のニュースレターが届きます。 NewsPicks TechCrunch TechCrunchはスタートアップ企業やITプロダクト、ITプロダクト関連ニュースを配信しています。毎日「最新ニュース」をニュースレターで配信しています。また週末には「今週のTOP10」もメールで届きます。 TechCrunch Japan SELECK SELECKは「ビジネスパーソンに選択の自由を」をテーマに、生産性を高めるヒントやTips、ツール紹介などを配信しています。ニュースレターでは「人気の新着記事」が届きます。 SELECK PRESIDENT Online PRESIDENT Onlineはビジネス誌「プレジデント」を発行しているプレジデント社が運営をしているWebメディアです。ニュースレターでは「今日のトピック」や「ランキング」が届きます。 PRESIDENT Online Forbes JAPAN F経済誌「Forbes」の日本版として世界のビジネスニュースを配信しているWebメデイアです。ニュースレターでは「新着記事」と「おすすめ記事」が届きます。 Forbes JAPAN PR Table PR Tableは経営者や人事、広報担当者が活躍するストーリーテリングサービスです。ニュースレターでは厳選したストーリーが届きます。 PR Table Bizna Biznaは海外のスタートアップの最新情報や分析記事を配信しているWebメディアです。ニュースレターでは「今週の新着記事」が届きます。 Bizna DIGIDAY DIGIDAYはブランド企業とオンラインパブリッシャーのデジタルマーケティングに特化したWebメディアです。ニュースレターでは「最新ニュース」が届きます。 DIGIDAY[日本版] | デジタルマーケティング戦略情報メディア ナショナルジオグラフィック NATIONAL GEOGRAPHICは環境学や人類学、歴史、文化など「科学」や「学問」の専門誌です。ニュースレターでは「最新記事」と書籍やDVDの紹介が届きます。 ナショナルジオグラフィック日本版サイト VOGUE VOGUEはファッション誌のWeb版として世界の最新ファッションやコレクション、ビューティー、ジュエリーなどのニュースを配信しています。ニュースレターでは「お勧めの記事(Recommend Topics)」が届きます。 【VOGUE JAPAN】ファッション・ビューティ・セレブの最新情報 GQ JAPAN GQ JAPANは男性向けのファッションやライフスタイルを配信しています。ニュースレターでは「おすすめの記事」が届きます。 GQ JAPAN CINRA.NET CINRA.NETは音楽やアート、映画、ダンスなどの「カルチャー」に関するWebメディアです。ニュースレターでは「注目のカルチャーニュース」が届きます。 CINRA.NET TABI LABO TABI LABOはカルチャーやライフスタイル、トレンドなどを配信してうrWebメディアです。ニュースレターでは「DAILY RANKING(1日のランキング)」「RECOMMEND(おすすめ)」が届きます。 TABI LABO Time Out Tokyo Time Out Tokyoは都市生活者向けに東京の定番スポットやイベントなどを配信しているWebメディアです。ニュースレターでは、その日のイベントや新着ニュース、注目記事などが届きます。 Time Out Tokyo ブレーンデジタル版 ブレーンデザイン、コピー、ウェブクリエイティブ専門のWebメディアです。ニュースレターでは「最新記事」が届きます。 ブレーンデジタル版 WIRED WIREDは最新テクノロジーのニュースや最先端科学などを配信しているWebメディアです。ニュースレターでは「今週のおすすめ記事」が届きます。 WIRED.jp Houzz Houzzは住まいのインテリアやリフォーム、リノベーションなどの情報を配信しているWebサイト(Webメディア機能が備わっている)です。ニュースレターでは「新着記事」が届きます。 Houzz Webメディアのニュースレターに共通する3つの特徴 大手を中心にWebメディアがどんなニュースレターを配信しているのかをザッと見てきました。細かいところまで見たいという方は、そのWebメディアのニュースレターを購読してみて下さいね。 さて、ここまで紹介したニュースレターを見ていると、3つの注目ポイントがありました。 【ポイント1】Webサイトとの統一感がある まず1つ目は「Webサイトとの統一感」です。Webサイトのデザインに合わせてニュースレターもデザイン(特に色使い)されています。 デザインを統一することで、ニュースレターを見た瞬間にWebメディアが想起されるように意識されているのでしょう。 【ポイント2】記事を厳選して掲載している 人気記事やおすすめ記事をニュースレターで届けているWebメディアが目立ちました。Webメディアには毎日多くのニュースが掲載されていますが、その中からニュースレター向けに記事が取捨選択されていました。 「最新記事」を届けている場合でも、公開された記事の全てではなくその中から数記事がピックアップされていました。 記事を厳選することで、掲載する情報量もシンプルになりますね。また購読者としても何を読んだらいいかを迷わずに済みますね。 【ポイント3】スマートフォンを意識したデザイン どのWebメディアもレイアウトは1カラム(縦に1列並べる)が多く、1列の中で、記事を横並びに2つ並べるというものが目立ちました。 スマートフォンを意識しているのだと思いますが、非常にシンプルなレイアウトですね。 また画像を大きく使っているニュースレターも目立ちました。文字を読むというよりも、視覚的に惹き付けて、Webサイトの訪問を促している印象です。 記事を読む場所はWebサイトであり、ニュースレターは、あくまでもそのキッカケ(記事のお知らせ)という位置づけなのかと思います。 まとめ 今回、紹介した以外にもニュースレターを配信しているWebメデイアは沢山あります。 企業ブログのように「ブログ」を使って情報発信をしている企業の方は、ぜひ大手のWebメデイアのやり方を研究して、自社のニュースレターに応用してみてください。 そして「Webサイトとデザインを統一する」「ニュースレター向けに記事を選ぶ」「スマートフォンで読みやすいレイアウト」この3つを意識してニュースレターを作ってみて下さい。 もちろん、ニュースレターの開封率やクリック率などの分析もしながら改善を進めて下さいね。 (関連記事) ・驚きの効果を生み出すメールマーケティング成功事例10選とその秘訣! ・コンバージョン率UPにつながる?メルマガデザイン紹介サイト8選


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

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

メールマーケティングノウハウ • 2016.09.05

WEBマスターの手帳を運営している遠藤です。WEBマスターの手帳ではHTMLメールを使ってメールマガジンを配信しています。ですが、私がWeb担当者としてお仕事をさせていただいている企業には「テキストメール」でメールマガジンを配信しているところもあります。 私もメールマガジンをいくつか購読していますが、テキストメールで届くこともあります。また、なかにはHTMLメールとテキストメールを使い分けている会社もあります。 これまでメールマガジンといえばテキストメールだったので、十分に研究をしてきたという会社も多いと思います。インターネット上でもたくさん情報が公開されていますし、担当者の方は作り慣れていることと思います。 ですが、メールマガジンを配信する際にスマートフォンで読まれることを意識して、テキストメールを作成していますでしょうか?あるいは、ご自身が購読しているメールマガジンをスマートフォンで読んだときに読みづらいなと感じたことはありませんか? ということで、今回はスマートフォンでも読みやすいテキストメール作成についてご紹介します。 テキストメールとは テキストメールとは、テキスト(文字)のみで作られているメールのことです。社会人なら日頃メールを使っていると思いますので、HTMLメールよりもテキスト形式のメールのほうが馴染みがあるのではないでしょうか。 テキストメールのメリットとデメリット テキスト形式のメールの一番のメリットは、作るのが簡単ということです。普段使っているメールと同様に作成すればいいので、技術的にテキストメールを作成するのが難しいということは、ほぼありえないでしょう。 またどんな環境でもメールが表示されるのもそのメリットです。 逆にデメリットはHTMLメールとは異なり、リンクを埋め込んだり、メールの本文内で写真や画像を表示することができない上、フォントカラーやサイズを変えることもできません。 またどれぐらいの人がリンクをクリックしたのかなどのデータを取得することもできないので、効果測定ができません。 ちなみにBenchmark Emailを使えば、一般的なテキストメールだけでなく、HTML形式のテキストメールも簡単に作成できるので、クリックできるリンクを埋め込んだり、メール内に設置したリンクのクリック数を把握することもできます。 効果測定可能なテキストメールの作成方法 (操作マニュアル2:メールの作成箇所) テキストメールのレイアウト テキストメールでメールマガジンを送るときのレイアウトも重要です。特にテキストメールは文字だらけになるので、長文は好まれません。 もし長くなる場合は「目次」を入れると、そのメールにどんなことが書かれているのかがひと目でわかるので、読んでいる人も読みやすくなります。 またHTMLメールのように、本文の右または左側にサイドスペースを置くことができないので、レイアウトも自ずと1カラムになります。 レイアウトの構成ですが、メールマガジンの内容や目的によって異なりますが、基本となるレイアウトは以下の順番で構成されてることが多いでしょう。 キャッチコピー(本文への興味を湧かせる) 見出し 本文 URL:コールトゥーアクション(読んだ人にしてもらいたい行動=商品ぺージへの移動など) 署名(会社名やWEBサイトURL、SNSアカウントURLなど) 長文で「目次」を入れる場合には「キャッチコピー」の後に入れるのがいいでしょう。またレイアウトの構成を考える際にはブログ記事の構成やランディングページ(LP)の構成が参考になると思いますので、メールマガジン以外にもアンテナを貼っておくと良いと思います。 テキストメールで重要なのは「読みやすさ」 テキストメールのデメリットで書いたように、テキストメールでは本文内に画像を差し込んだり、フォントカラーやサイズを変更することも出来ません。そのため意識せずに作ってしまうと、文字がビッシリの読みづらい、読む気を損なわせるメールになってしまいがちです。 取引先とのメールであれば、多少読みづらくても読んでくれるかもしれませんが、メールマガジンとしてテキストメールを送る場合に「読みづらいメール」は、購読者にとってネガティブな印象を与えてしまい、メールを送ることがかえってマイナスイメージを植え付けてしまいます。 1行に使う文字数は20文字がちょうどいい メールマガジンをPCで作成していると、ついついスマートフォンでどのように表示されるかまで気にしていない方もいらっしゃいます。しかしPCとスマートフォンでは画面のサイズが異なり、スマートフォンの方が横幅(縦に持った場合)が狭くなります。 つまり、PCでキレイに表示されていても、スマートフォンで表示したら、横幅が狭い分、1行に表示される文字数も少なくなり、変なところで改行されてしまいレイアウトが崩れてしまうことがあります。 スマートフォンや文字サイズの設定にもよりますが、レイアウトの崩れなく表示させるには、1行あたり20文字前後を目安としてメールマガジンを作るのがお薦めです。 適切に改行する 1行の文字数を気にするのと同じく「改行」も気にしましょう。文字数と同じく下手に文章の途中で改行を入れてしまうとスマートフォンで見た時に不自然な箇所で改行されてしまい、見た目がガタガタな文章となり逆に読みづらくなります。 ブログでも見かけますが、文章の途中での改行は読みづらいだけでなく、メール全体にメリハリがないレイアウトになってしまいます。 改行ではなく、1つの話のまとまりである「段落」で区切るようにしましょう。段落で区切る場合に気をつけなければいけないのは、2〜3行以内に収めることです。行数が多くなるとそれだけ読みづらさも増してしまいます。 記号を使って装飾する 文字だらけのテキストメールでは、いかに改行をうまくしたとしても限界があります。文字だらけ感を緩和して、メリハリをもたせてより読みやすくするために「記号」をうまく使いましょう。 見出しの部分や話の内容が変わる部分で、■や●などの記号を取り入れましょう。=などを使って罫線を引くのもオススメです。 テキストメールの装飾例 ▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽ 今月のおすすめ商品 1位: 2位: 3位: ▲▽▲▽▲▽▲▽▲▽▲▽▲▽▲▽ ┏━━━━━━━━━━━━━━━┓ 見出し ┗━━━━━━━━━━━━━━━┛ ┏―━―━―━―━―━―━―━―┓ 見出し ┗―━―━―━―━―━―━―━―┛ ■╋■━━━━━━━━━━━━━━━ ╋■┛見出し ■━━━━━━━━━━━━━━━━ 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 見出し 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 「テキストメール 装飾」で検索するとさまざまな装飾が見つかると思います。またご自身が受け取ったメールマガジンを参考にするのも良いでしょう。 装飾をする際の注意点は「機種依存文字」を使わないことです。特に英数字では購読者の受信環境によって文字化けを起こす可能性がありますので要注意です。 機種依存文字を使っていないかのチェックには「JIS X0208 規格外の文字(機種依存文字)のチェック」などもありますので、気になる方は使ってみてください。 メールマガジンの送信前にテスト送信して確認する メールマガジンを送信するときに自分のメールアドレス宛てに「テスト送信」を行っている方は多いと思います。その際にPCだけでなく、スマートフォンでも表示確認をするようにしましょう。 テスト送信では「改行」による崩れがないか、文字化けがないか、誤字脱字がないか、記載しているURLが正しいかなどを確認しましょう。 ちなみにBenchmark Emailにはメール作成時に「テスト送信」をする機能が備わっているので、ぜひ使ってみてください。 PCでもスマートフォンでも美しいメールマガジンを送ろう スマートフォンが普及した現代において、日頃のメール確認をPCだけでなくスマートフォンでもしているという人は確実に増えています。 HTMLメールにしても、テキストメールにしてもスマートフォンでも読まれているということを忘れずに、どんな環境で読まれても読みやすいメールマガジンを購読者に届けられるようにしていきましょう! 関連記事:ECサイト運営者必見!メルマガのスマホ対応でデザインの参考になるメールマガジン12選 テキストメールに関するBenchmark Emailの記事 マルチパート配信を使ってメール到達率を上げる、HTMLメール配信活用法 ガラケーとスマホに向けたHTMLメール配信と便利なマルチパート配信について // <![CDATA[ (function(d){ if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_2f4e138f7719a5c3092c7264effeaf88)=='undefined'){ document.write("\"); }else{ window.NINJA_CO_JP_ONETAG_BUTTON_2f4e138f7719a5c3092c7264effeaf88.ONETAGButton_Load();} })(document); // ]]>


記事を読む