Skip to content

Series Posts: HTMLメールデザイン

機能・便利ツール

簡単!Benchmarkの画像編集ツールを使ってデザインのクオリティをアップさせよう!

こんにちは!Benchmark Emailでデザインを担当している、BEDです。 HTMLメールで重要なメインビジュアルやその他の画像ですが、Benchmark Emailに標準実装されている画像編集ツールを使ってデザインのクオリティを上げることができます。この記事を参考に、ぜひHTMLメールに入れる画像を編集してみてください。 画像編集で行う事とは? どんな画像をどんなところに使いたいのかで画像編集でやることは変わってきますが、主に以下のような事があるかと思います。 トリミング・リサイズ 余計なものを切り取ったり、掲載する媒体のサイズへと調整したりなどする時に行います。 色の変更、調整 暗い写真や、色が黄色みかかっていたり青みが強かったりなどした時に調整が必要になります。 テキストの挿入(フォント、文字組など) 画像の上にテキストを置くことで、バナーなどのような制作物を作ることができます。また、フォント(字体)を決めたり、文字のバランスなども調整することによって何を一番伝えたいのかなどを調整することができます。 Benchmark Emailの画像編集ツールだとこんなことができる デザインに自信がない担当者さまでも簡単に使える、シンプルで便利な機能をご紹介します。今回はこの画像を参考にしてツールのご説明をしていきます! まずはメールエディタ上で、編集したい画像を選択して、「コンテンツ」→「編集」をクリックすると画像編集ツールの画面に変わります。 トリミングの例 トリミング機能では、元の写真から省きたい部分を削り取ることができます。 元から用意されている、スクエアのボタンを押せばスクエア型にトリミングをしてくれます。 デフォルトの状態です。...

January 25, 2023

HTMLメールデザイン

デザイナーがインスピレーションを得る為に見ているサイト27選!

こんにちはBEDです。 HTMLメール作成やその他、様々なデザインを制作する時にどんなデザインにするか悩んだことはありませんか? そんな時、僕はインスピレーションを得られるサイトを見て参考にしています。 見ているだけでも楽しいので、楽しみながらインスピレーションも得られてとても充実した時間を過ごせます! また、HTMLメールを作成する時の参考になれば嬉しいです! ※全てHTMLメール作成の参考になるとは限りませんのであしからず。 これさえおさえておけばどんなデザインでも作れるようになる! Behance(ビハンス) デザインツールで有名な「Adobe」が提供するデザイナーのためのSNSです。世界中のデザイナーが数多くの作品をアップロードしているので、見ていて飽きません。 世界にはどんなデザインがあるのか参考にしたい方におすすめです! LPアーカイブ LP(ランディングページ)のデザインを集めているサイトです。1日に10サイト前後更新されているようです。各LPのキャッチコピー縛りで一覧表示ができるので、コピーの参考にもなります。 LPはメルマガとほぼ同じような構造や設計、狙いで作られることが多いです。なので、メルマガ作成の時には参考になるので必ず見たほうが良いです! Pinterest(ピンタレスト) 有名なサイトなので知っている人も多いはず!web上にある様々な作品を検索で簡単に見ることができます。アートやファッション、グラフィックなどなどあらゆるジャンルを見ることができます。 自分の好きなカテゴライズで検索できるので、依頼先や自社のサービスをPRする時にどんなデザインがあるかなど参考にするにはもってこいです! Design Inspiration 様々なジャンルのデザインを掲載しているサイトです。表示方法オプションの「人気順」や「ランダム表示」がとても便利です。 ファッションや写真といった業態の方には参考になるようなおしゃれな画像をたくさんみることができると思います!...

November 30, 2022

メールマーケティング

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

本記事は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のメールマーケティングアドバイザー山本です。 ユーザーのみなさまから、「テキストメールとHTMLメール、メルマガはどちらにするべきですか?」というご質問をよくいただきます。 この記事では、いつも私がお答えしていた内容をまとめたいと思います。 私は「効果計測ができるのでHTMLメールのほうがおすすめですよ」とお答えしていますが、もちろんすべてのメルマガに画像や装飾を使いましょう、という意味ではありません。 みなさんが日頃受け取るメルマガも、以下のように2パターンに分けられるでしょう。 左:見た目がシンプルなテキストのみのメール 右:画像やボタンなどHTMLの特徴をフル活用したデザインのメール それぞれに長所がありますのでHTMLメールを使ったうえで、デザインをメルマガの目的に合わせて選ぶとよいでしょう。 本記事では「テキストメール」と「HTMLメール」の違いを解説したあとで、「テキストデザインメール」「Webデザインメール」それぞれのメリットと、最適なデザインを選ぶためのポイントをお伝えしていきます。まず結論を図にまとめておきます。 [caption id=\"attachment_32854\" align=\"alignnone\" width=\"749\"] (画像クリックで拡大)[/caption] 上記の図の内容を、記事でじっくり解説していきます。 では初めに、本来の意味のテキストメールとHTMLメールの違いを比べてみましょう。 HTMLメールでメールマガジンを送るなら是非Benchmark Emailをご利用ください。 テキストメールとHTMLメールの違いとは?...

January 11, 2021

1 2 3 4 6