Skip to content

Series Posts: HTMLメールデザイン

メールマーケティング

【事例あり】メールマーケティングの成功を左右するメルマガデザイン

本記事はBenchmark本社のブログ記事 “Why Does Email Design Define the Success of Your Campaign?” を翻訳したものです。 著者(略歴) Kevin George 急成長中のカスタムメールデザイン&コーディング会社の1つ、Email Uplers社のマーケティングマネジャーを務める。メールの自動化、キャンペーン管理、データ統合・移行サービスの提供に加え、プロフェッショナルなメールテンプレートの作成、PSDからHTMメールへの変換、無料のレスポンシブHTMLメールテンプレートを専門とする。ガジェット、バイク、ジャズが好きで、メールマーケティングをこよなく愛し、ブログでメールマーケティングのベストプラクティスに関する見識や考えを共有することが何よりも楽しみ。   人間は視覚的な生き物で、文章よりビジュアルで表現された方が情報が入りやすく、より良い反応を示しやすくなります。優れたコンテンツはもちろん重要ですが、デザインが平凡だと、期待していた効果の半分も残すことができません。 メールマーケティングの分野でも同じことが言えます。メールの件名や本文、CTA(行動喚起)の文言にいくら時間をかけても、デザインが良くなければ、期待通りの結果は得られないでしょう。...

August 23, 2022

メールマーケティング

HTMLメルマガ作成で役立つ画像サービス20選

こんにちはBEDです。 HTMLメールやページ作成時に、必要な画像を探すのに苦労したことはありませんか?そんな時、僕は無料や有料で画像を使用できるサイトを使っています。 これからご紹介するサイトをブックマークしておき、HTMLメールを作成する際にぜひ使ってみてください。 画像サイト利用時の注意点 まずは、画像素材サイトを利用する前に以下の確認を事前にしておきましょう! サービスによって、有料、無料があるのでどちらにするか確認 著作権、利用許諾について確認 画像は商用利用可なのか?有料プランなら良いのか?どの様な用途に利用できるのか?など、サイト上の画像を利用する際には、著作権、利用許諾について必ずサービスの利用規約を確認しましょう。 例えば、クライアントのメルマガ作成など、無断使用で画像を使った際にトラブルになりかねませんので、事前の確認は必ずしてくださいね! それでは、各サイトを国内外合わせてご紹介します! 日本の画像素材サイト ぱくたそ 無料素材の代名詞と言ってよいほどその界隈では有名なサイトだと思います。フリーのモデルを起用した面白い画像が特徴の画像素材サイトです。人物、風景、料理など幅広く素材があることもオススメのポイントです!検索もしやすいです。 使用料 商用利用 加工 クレジット表記 ユーザー登録 無料 ◯...

June 2, 2022

メールマーケティング

フォント選びでメルマガの印象が大きく変わる!イメージに合ったフォントの選び方とは?

こんにちは、Benchmark Emailでデザインなどを担当しておりますBEDです! メルマガを作成するとき、フォントや文字サイズで悩まれる方いらっしゃいませんか?今回は、普段デザインの仕事をしている私が、どんな観点でフォントを選んだり、文字サイズを決めているのかをご紹介できればと思います。 メール配信をされている方々の参考になれば嬉しいです。また、当記事では、Benchmark Emailで制作されることを念頭に置いてご説明しますので、アカウントをお持ちでない方は無料トライアルを是非ご登録ください。 フォントの選び方 まず、フォントにはゴシック体と明朝体という二種類が存在します。 ゴシック体は、横線と縦線の太さがほぼ同じで均一なので、インパクトがあり、目に入りやすい特徴があります。例えば、Arial、Helvetica、Hiragino Kakuなどがゴシック体に含まれます。 そして、明朝体は、横線に対して縦線が太く、横線の右端、曲り角の右肩に三角形の山(ウロコ)というものがある書体です。線の強弱があるため、文字の形を判別しやすいという特徴があります。例えば、Garamond、MS Mincho、Times New Romanなどが明朝体に含まれます。 ゴシック体、明朝体の使い分けについては、例えば、ゴシック体はフォーマルでしっかりとしたイメージである一方、明朝体には美しく洗練されたイメージがあります。フォントがもつイメージが制作するデザインに合っているかどうかがフォント選びには重要な要素になります。 信頼感やモダンなイメージにしたいなら「ゴシック体」 線の太さが均一で安定感のあるゴシック体は、「モダン」「信頼」「力強さ」といったイメージを与えます。ターゲットを老若男女選ばず使えるので汎用性が高いです。 こちらは、ゴシック体のビジュアルにあわせて、テキストをゴシック体にあわせた参考例です。なるべく、そのメルマガのテーマやメインビジュアルに合うようにフォントを選ぶと統一感がでるので、イメージもズレることがなくなるのと、可読性があがります。フォントは定番の「Helvetica」を使っています。 洗練されたデザインにしたり高級感を持たせたいなら「明朝体」 繊細さを持つ明朝体は、「高級感」「大人」「女性的」「和」「伝統」「クラシカル」「格調」といったイメージを与えます。筆使いを感じさせるトメハネはらいなどもあるため、和のテイストにもよく合います。 こちらも、明朝体をメインとしたビジュアルにあわせてテキストも明朝体にしたものです。フォントは定番の「Garamond」を使っています。...

May 2, 2022

メールマーケティング

インフォグラフィックでリード獲得!9つの効果的な戦略

本記事はBenchmark本社のブログ記事 “How to Use Infographics to Generate Leads” を翻訳したものです。 著者(略歴) Adela Belin Writers Per Hourのコンテンツマーケター兼ライター。 人々の生活に変化をもたらし、個人的・職業的な成長に貢献することに情熱を注いでいる。   インフォグラフィックは強力なビジュアルコミュニケーションツールです。情報を魅力的に伝えつつ、視聴者の注意を引き、行動を促すことができます。 インフォグラフィックと言えば、ブランド認知度の向上、ユーザーのエンゲージメントの向上、サイトへのアクセス促進などを連想するでしょう。実はそれだけではなく、インフォグラフィックがリード獲得に非常に効果的なことをご存知でしょうか?実際に、ビジュアルコンテンツを使用したブランドのコンバージョン率はそうでないブランドに比べて7倍以上だと言われています。 ここでは、有望なリードを獲得するためにインフォグラフィックを活用する9つのポイントをご説明します。...

January 19, 2022

HTMLメールデザイン

【デザイン事例19種類】メルマガのヘッダー&フッターを作るコツ

こんにちは、メールマーケティングアドバイザーの山本です。 メルマガのヘッダーとフッターは、メルマガ全体の印象を決める重要なデザイン要素であるとともに、うまく使えばメルマガ全体の読みやすさが改善されたり、読者からの問い合わせや来店の機会を逃さない構成にすることができます。 今回は19点の事例やデザイン例をご紹介しますので、ぜひ参考にしてください。 ヘッダー&フッターにひと工夫をして、まわりのメルマガに一歩差をつけましょう! ヘッダー / フッターとは ヘッダーとは、メールの冒頭に入る毎回共通している部分のことです。一方フッターとは、メールの最後に入る毎回共通している部分のことです。 メルマガには「メインコンテンツ」と、毎回共通して入れているような「補足情報」があります。 ・メインコンテンツ:商品紹介、記事紹介、イベントニュース、コラムなど ・補足情報:問い合わせ先、配信元住所、配信停止方法など 読者に注目してほしいのは「メインコンテンツ」の方なので、「補足情報」をヘッダーとフッターにまとめると、メールデザインにメリハリがついて、見た目もきれいで読みやすいメルマガになります。 補足情報として載せたいもの では、そうした補足情報にはどのようなものがあるのでしょうか。 1. 法律で義務付けられているもの こちらは、どんなメルマガでも必ず入れる必要があるものです。 ・送り主は誰なのか ・メルマガの配信停止をする方法 ・問い合わせ先...

June 28, 2021

HTMLメールデザイン

コンバージョン率UPにつながる?メルマガデザイン紹介サイト8選

※こちらの記事は2017/9に公開した記事にアップデート情報を追記したものです。 こんにちは、デザイン担当のBEDです。 メルマガのデザインは商品の魅力を伝えることや、購入などのコンバージョン率アップに大きな役割を果たします。 そこで今回は、ありとあらゆるジャンルのメルマガのデザインを集めている海外のサイトを中心に紹介します。ちょっと見るだけでも参考になるので、デザインに迷った時に見てもらえると良いと思います。 サイトごとに個性がありますので、検索機能や掲載事例数も紹介します。 一番使いやすい「Email-Gallery」 Email-Gallery 絞り込みフィルタ: 業界 色 カラム数 掲載数:1700通以上 Email-Galleryの特徴 カリフォルニアのデザイナー、Min Kimさんが運営するサイト。有名企業も含め豊富なデザインを紹介しています。バランスが取れているので慣れていない人にもわかりやすく、はじめに見るサイトとしておすすめです。 絞り込み機能がわかりやすく、業種別とカラー別で絞り込むことができて実用的です。1カラム・2カラム・3カラムのカラム別でも調べることができるのはこのサイトだけです。 絞り込みは左上の「Browse」ボタンから行うことができます。また、検索窓にはワードを打ち込むことができますので「Restaurant」などご自身の業界を打ち込んでみるといいでしょう。   掲載数とカテゴリ数No.1「Really Good...

May 25, 2021

メールマーケティング

テキストメールとHTMLメールの違いとは?メルマガにはどちらが向いているの?

こんにちは!Benchmark Emailでメールマーケティングアドバイザーをしている山本です。これまで100社様のご相談に乗ってきた経験から、特に多かったご質問について、私がいつもお答えしていた内容をブログでご紹介しています。 ユーザーのみなさまから、「テキストメールとHTMLメール、メルマガはどちらにするべきですか?」というご質問をよくいただきます。 私は「効果計測ができるのでHTMLメールのほうがおすすめですよ」とお答えしていますが、もちろんすべてのメルマガに画像や装飾を使いましょう、という意味ではありません。 みなさんが日頃受け取るメルマガも、以下のように2パターンに分けられるでしょう。 左:見た目がシンプルなテキストのみのメール 右:画像やボタンなどHTMLの特徴をフル活用したデザインのメール それぞれに長所がありますのでHTMLメールを使ったうえで、デザインをメルマガの目的に合わせて選ぶとよいでしょう。 本記事では「テキストメール」と「HTMLメール」の違いを解説したあとで、「テキストデザインメール」「Webデザインメール」それぞれのメリットと、最適なデザインを選ぶためのポイントをお伝えしていきます。まず結論を図にまとめておきますね。 [caption id=\"attachment_32854\" align=\"alignnone\" width=\"749\"] (画像クリックで拡大)[/caption] 上記の図の内容を、記事でじっくり解説していきます。 では初めに、本来の意味のテキストメールとHTMLメールの違いを比べてみましょう。 テキストメールとHTMLメールの違いとは? テキストメールとは、文字情報だけで構成された従来のメールです。文字の装飾や記号などを用いて読みやすいデザインにするなどの工夫がなされてきましたが、画像が使用できなかったり、長いURLもそのまま表示しなければならないなどデザイン面で限界がありました。 一方、HTMLメールとは文字通りHTMLを記述して作成するメールで、画像やハイパーリンクの利用など、Webページと同様のデザインが可能であり、1枚のランディングページのようなリッチなコンテンツを送信できるようになりました。また、開封やクリックといった効果を測定できることも大きなメリットです。 HTMLメールではテキストリンクを設置することでリンク先ページのタイトルを表示するなど、デザイン的に洗練されたメールコンテンツをつくることができます。...

January 11, 2021

メールマーケティング

メールマーケターYurikoの挑戦「フッターのSNSアイコンを変えてみた」編

こんにちは!Benchmark Emailのカスタマーサクセス担当のYurikoです。 8月からニュースレターの新担当に任命されました。新担当となったからには「自分でも良い成果を出さなければ!」と思い、ニュースレターの改善に挑戦することにしました。 このシリーズでは、この数か月間の私のチャレンジとその結果をお届けしようと思います。 SNSフッターの改善 Benchmark Emailのニュースレターは、マーケターの方々に対して、新しいブログ記事のご紹介や、セミナーのご案内など、メールマーケティングでより良い成果を出していただくために役立つ情報をお届けする目的で、現在は月2回配信をしています。 ニュースレター担当になってまず私が最初に改善を行ったのは、フッターのSNSアイコン部分でした。 Benchmark Emailで配信しているニュースレターの開封率は、私が担当になった時点で毎回40%〜45%前後と既に高かったため、「それならクリック率をもっと上げられないか?」と考えました。 クリック率は、Benchmark Emailのレポート機能から確認ができます。クリックマップを見れば、どこに入れたリンクのクリック率が高いのかがすぐに分かります。 このクリックマップを参考にしつつ、クリック率が低いリンクがあれば改善を行おうと思い、過去のメールデータを遡って確認をしてみました。 どこか改善できる点はないか?と細かくチェックしていき、ついにひとつ発見することができました。 こちらの画像をご覧ください。 なんと、フッターのSNSアイコンのクリックが0%だったのです。 さらに、2020年1月からのデータを見てみると、有料アカウントのユーザー様のクリック数がどれも0%という事実が判明しました。 よし、改善できる点があった!ということで、まずはSNS部分のデザインを変更することに決めました。 今回はその検証について振り返りたいと思います。 SNSアイコンのクリック数を上げるため、デザインを変えてみた...

November 30, 2020

メールマーケティング

メルマガデザイン初心者でも90点レベルのHTMLメールを作れる6つの思考

こんにちは。Benchmark Emailメールマーケティングアドバイザーの山本です。 「文字の大きさや色を工夫しているはずなのに、読者に伝わらないメルマガになってしまった」という経験はありませんか? 逆に「情報が分かりやすく、意図した誘導につなげやすいこと」と「企業イメージに沿っていること」が達成できれば、メルマガデザインの目的のうち9割は果たしたと言えるでしょう。今回はメルマガデザインの「90点」の答えにたどり着くまでの手順を解説いたします。1ステップごとに経過のデザインをお見せしますので、デザインが得意でない方もわかりやすいと感じて頂けるはずです。 原稿→途中経過→完成したメール 今回あなたはハンバーガーチェーンのメルマガ担当で、目標は「配信当日に発売する新メニューの訴求」「配達注文の獲得」だとしましょう。原稿担当者からは、こんなメルマガ用原稿を渡されました。どんなメルマガにするか少し考えてみてください。 (拡大する)   完成したメルマガを、先にお見せしますね。 いきなりこのデザインを思いつくのは難しいと思うかもしれませんが、今回ご紹介する情報整理の5ステップを踏んでいけば、このようなメールを作ることができますよ。 (全文を見る)   1.原稿に数字(階層)を振ろう まずは原稿内の要素を3〜5段階程度の階層に分けます。 原稿には「大きな文字で伝えたい、見出しにするべき情報」と「小さな文字で伝えたい、補足情報」があるはずです。例えば会議資料は見出しとして「1. 2. 3. ….」と見出しが並びます。そして「1.」の中に細かい議題である「(1)(2)(3)」があり、「(1)」の中にはさらに細かい話題として「(a)(b)(c)」がありますね。情報は階層に分けられていると読みやすいのです。 左:原稿  右:ラベリングしたもの(拡大する) 今回の原稿は「新商品」「既存のおすすめメニュー」「まとめ(編集後記)」の3つの話題グループから構成されているようです。今回の原稿上は「既存のおすすめメニュー」グループに見出しがついていないので補足で追加しています(ここがポイントです)。...

September 28, 2020

1 2 3 4 5