Skip to content

Series Posts: HTMLメールデザイン

HTMLメールデザイン

オシャレなメルマガデザイン15選 :ビジネスイベント編

こんにちはBEDです。 オシャレメルマガ紹介シリーズ、今回は、ビジネスイベント編です。 メルマガではよく、イベント情報を発信したりすることが多いと思います。 カチっとしたものから、かわいいものまで様々なデザインがあります。 今度イベント情報を出す予定という方に見ていただきたいメルマガを集めました! フラっと見ていってください! 今回もReally Good Emailsから見つけてきたメルマガのデザインになります。 厳選したオシャレなメルマガデザイン 1.Dovetail データ分析などができるサービスを提供する会社です。製品説明や使い方などを教えるセミナーの案内メルマガです。コーポレートのカラーや雰囲気が出ていてとても素敵です! 目次に戻る 2.Triple Whale Shopifyで出店したお店の分析、属性、クリエイティブなどのデータをプラットフォームで管理できるサービスを提供する会社です。こちらも製品説明案内のメルマガです。 切手のようなアイコンが、お手紙を送るという意味合いがあったりと遊び心があって素敵です! 目次に戻る 3.Salesforce 顧客管理をスムーズに行えるサービスを提供する会社です。ワークショップや講演などの案内をするメルマガです。実際のイベントの雰囲気が伝わるような写真とレイアウトが素敵です!...

June 26, 2023

HTMLメールデザイン

無料でもここまでできる!Canvaでおしゃれなメルマガ用画像を作ろう

こんにちは!メールマーケティングアドバイザーの山本です。 メルマガではイメージ画像がとても重要な役割を果たしますが、当記事では日頃から「オシャレな画像を自分で作れたらいいのに」とお考えのメルマガ担当者の方へ、私たちも利用していて無料版もあるグラフィックデザインツール「Canva」をご紹介します! 左:画像のないメルマガ 右:ロゴやアイキャッチの入ったメルマガ 有料版ではとても豊富な機能が使えるのですが、今回は無料版のCanvaで、実際にBenchmark Emailが配信するメルマガに載せる画像を作りながら使い方をご説明していきます! 本記事でご紹介する画像の例 Canvaとは Canvaとはどのようなツールかご存知でしょうか? オンラインで使えるグラフィックデザインツール 豊富なテンプレートと素材(写真、イラスト、動画など)がある ドラッグ&ドロップの簡単操作で誰でも簡単に操作できる ガイドラインや色彩サジェスト機能があるので、バランスを崩さず編集できる データは画像、Gifアニメーション、動画、PDFといった形式で書き出しができる テンプレートや素材が豊富にある(有料版では61万点のテンプレートと1億点の素材)ので、デザイン経験がなくてもきれいで見やすい画像を作ることができます。   Canvaでメルマガ用の画像を作ろう まずはメルマガに入れてみたい画像は、こちらの3種類ではないでしょうか。 (A)メルマガ最上部のヘッダー画像 →ブランドロゴを入れることで、認知度アップが期待できる (B)商品や記事のアイキャッチ画像...

May 15, 2023

HTMLメールデザイン

オシャレなメルマガデザイン25選 :海外のホテル編

こんにちはBEDです。 4月のオシャレメルマガ紹介です!今回は、海外のホテル編です。 最近はようやく海外に行けるようになってきましたが、しばらくご無沙汰という方も多いと思います。もし行く機会があったら、素敵なメルマガを発行しているホテルに泊まってほしいなと思い、勝手にホテルのメルマガをご紹介します(笑)。 素敵なホテルに泊まっていることをイメージしながら気軽に楽しんでいただければと思います! 今回もReally Good Emailsから見つけてきたメルマガのデザインになります。 厳選したオシャレなメルマガデザイン 1.Sensei ハワイのラナイ島にあるリゾート。自然の中でリゾート気分を味わいたい、そんな気持ちにさせてくれます。一度は行ってみたい! 目次に戻る 2.HotelTonight 各国に点在しているホテル。ホテルから望むメインビジュアルも素敵だが、現地の天気や気温を教えてくれるのはとても嬉しい! 目次に戻る 3.Ace Hotel とにかくコンセプトがおもしろいホテル。アートだったり、アパレルなどもホテル内で販売しているところもあるそうで、とてもわくわくするホテル。そのような雰囲気が伝わるメルマガがまた素敵!京都にもあるそうなので、ぜひ行ってみたいものです! 目次に戻る 4.Sonder 高級ホテルと民泊を組み合わせた次世代ホテル企業として運営している。民泊なんだけどどこか高級。そんなお宿を世界中で探して泊まってみるのも素敵!メルマガはナツのリゾートをターゲットにしたものだが、夏と素敵な民泊。そういった休日を過ごしたい欲に駆られます。...

April 26, 2023

HTMLメールデザイン

オシャレなメルマガデザイン25選 :アプリ・ソフトウェア編

こんにちはBEDです。 2月のオシャレメルマガ紹介です!今回は、アプリ・ソフトウェア編です。 様々なサービスがありますが、リアルなプロダクトを持っているところからインターネット上で完結してしまうものなど。そんな中からこれはイケてるなと思うものを厳選しました。 また、コーヒーを飲みながら気軽に楽しんでいただければと思います! Really Good Emailsから見つけてきたメルマガのデザインになります。 厳選したオシャレなメルマガデザイン 1.Fitbit ウェアラブルウォッチの製品を扱うメーカー。シンプルで、プロダクトの見せ方など素敵です! 目次に戻る 2.Vimeo 動画を掲載しているメディア。様々な動画を載せていてLPとしての機能もしています! 目次に戻る 3.Procreate イラスト制作ができるアプリ。こういったイラストを作成できるというようなイメージを想起させるビジュアルが素敵です! 目次に戻る 4.Google みんなご存知Google。そのGoogleが出したイヤホンの紹介です。Appleっぽい感じがしておしゃれですね! 目次に戻る...

March 27, 2023

HTMLメールデザイン

オシャレなメルマガデザイン25選 :ファッションブランド編

こんにちはBEDです。 デザインには様々なセオリーやルールがあります。もちろんそれらを学ぶ事はとても大切です。ですが、僕がこの記事で伝えたいのはお勉強的な事ではなく、自身の直感でデザインを見て楽しんだり、いいもの、かっこいいものというのを探してほしいのです。 小さい頃から、いいものを見たり食べたりしたほうが良いと言われるのと同じで、良いものってなんだろうと常に意識して見ることが大切(感性が育つ)だと思ってます。この記事をみて、自分もこういうの作りたい!ってテンション上げてもらえることを願ってます。 そんな観点で選んだおしゃれで素敵なメルマガを毎月様々な業種やジャンルでご紹介していきます!気軽にコーヒーを飲みながらゆるく見てもらえればと思います! Really Good Emailsから見つけてきたメルマガのデザインになります。 厳選したオシャレなメルマガデザイン 1.On 黒で統一されていてかっこいい!シューズブランドなのでシューズの存在感もちゃんと出せている。 目次に戻る 2.Crocs みなさんもご存知のCrocs!色んなカラーがあるから楽しげなデザインで素敵! 目次に戻る 3.Danner 革靴の老舗ブランド!こちらも知らない人はいないかと思います。Dannerのワイルドさやエレガントさが表現されていてかっこいい! 目次に戻る 4.Teepublic Tシャツなど様々なアイテムを販売しているアパレルブランド。かわいらしいポップな感じや色使いがとても素敵! 目次に戻る...

February 20, 2023

メールマーケティング

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

こんにちは。Benchmark Emailメールマーケティングアドバイザーの山本です。 「文字の大きさや色などデザインの工夫しているはずなのに、読者に伝わらないメルマガになってしまった」という経験はありませんか? 逆に「情報が分かりやすく、意図した誘導につなげやすいこと」と「企業イメージに沿っていること」が達成できれば、メルマガデザインの目的のうち9割は果たしたと言えるでしょう。今回はメルマガデザインの「90点」の答えにたどり着くまでの手順を解説いたします。1ステップごとに経過のデザインをお見せしますので、デザインが得意でない方もわかりやすいと感じて頂けるはずです。 原稿→途中経過→完成したメール 今回あなたはハンバーガーチェーンのメルマガ担当で、目標は「配信当日に発売する新メニューの訴求」「配達注文の獲得」だとしましょう。原稿担当者からは、こんなメルマガ用原稿を渡されました。どんなメルマガにするか少し考えてみてください。 (拡大する)   完成したメルマガを、先にお見せしますね。 いきなりこのデザインを思いつくのは難しいと思うかもしれませんが、今回ご紹介する情報整理の5ステップを踏んでいけば、このようなメールを作ることができますよ。 (全文を見る)   1.原稿に数字(階層)を振ろう まずは原稿内の要素を2〜5段階程度の階層に分けます。 原稿にはコーナー名、商品名、記事名、価格、説明文など、情報の種類やレベルに差があるはずです。情報の種類やレベルごとに文字デザインを揃えると読みやすいメルマガになりますので、まずはその準備を行います。 たとえば、こちらが原稿の状態です。 (拡大する) これにラベリングしたものがこちらです。 (拡大する) このように階層ごとに番号をつけていくのですが、はじめに「見出し」に①の番号を振りましょう。見出しの重要性については、普段目にする資料を思い出してみてください。見出しが「1....

January 28, 2023

機能・便利ツール

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

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

January 25, 2023

メールマーケティング

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

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

January 11, 2023

HTMLメールデザイン

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

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

November 30, 2022

1 2 3 4 5 6 8