Series Posts: HTMLメールデザイン
無料でもここまでできる！Canvaでおしゃれなメルマガ用画像を作ろう
こんにちは！メールマーケティングアドバイザーの山本です。 メルマガではイメージ画像がとても重要な役割を果たしますが、当記事では日頃から「オシャレな画像を自分で作れたらいいのに」とお考えのメルマガ担当者の方へ、私たちも利用していて無料版もあるグラフィックデザインツール「Canva」をご紹介します。 左：画像のないメルマガ 右：ロゴやアイキャッチの入ったメルマガ 有料版ではとても豊富な機能が使えるのですが、今回は無料版のCanvaで、実際にBenchmark Emailが配信するメルマガに載せる画像を作りながら使い方をご説明していきます！ 本記事でご紹介する画像の例 Canvaとは Canvaとはどのようなツールかご存知でしょうか？ オンラインで使えるグラフィックデザインツール 豊富なテンプレートと素材（写真、イラスト、動画など）がある ドラッグ＆ドロップの簡単操作で誰でも簡単に操作できる ガイドラインや色彩サジェスト機能があるので、バランスを崩さず編集できる データは画像、Gifアニメーション、動画、PDFといった形式で書き出しができる テンプレートや素材が豊富にある（有料版では61万点のテンプレートと1億点の素材）ので、デザイン経験がなくてもきれいで見やすい画像を作ることができます。 Canvaでメルマガ用の画像を作ろう まずはメルマガに入れてみたい画像は、こちらの3種類ではないでしょうか。 （A）メルマガ最上部のヘッダー画像 →ブランドロゴを入れることで、認知度アップが期待できる （B）商品や記事のアイキャッチ画像...
May 15, 2023
オシャレなメルマガデザイン25選 ：海外のホテル編
こんにちはBEDです。 4月のオシャレメルマガ紹介です！今回は、海外のホテル編です。 最近はようやく海外に行けるようになってきましたが、しばらくご無沙汰という方も多いと思います。もし行く機会があったら、素敵なメルマガを発行しているホテルに泊まってほしいなと思い、勝手にホテルのメルマガをご紹介します（笑）。 素敵なホテルに泊まっていることをイメージしながら気軽に楽しんでいただければと思います！ 今回もReally Good Emailsから見つけてきたメルマガのデザインになります。 厳選したオシャレなメルマガデザイン 1.Sensei ハワイのラナイ島にあるリゾート。自然の中でリゾート気分を味わいたい、そんな気持ちにさせてくれます。一度は行ってみたい！ 目次に戻る 2.HotelTonight 各国に点在しているホテル。ホテルから望むメインビジュアルも素敵だが、現地の天気や気温を教えてくれるのはとても嬉しい！ 目次に戻る 3.Ace Hotel とにかくコンセプトがおもしろいホテル。アートだったり、アパレルなどもホテル内で販売しているところもあるそうで、とてもわくわくするホテル。そのような雰囲気が伝わるメルマガがまた素敵！京都にもあるそうなので、ぜひ行ってみたいものです！ 目次に戻る 4.Sonder 高級ホテルと民泊を組み合わせた次世代ホテル企業として運営している。民泊なんだけどどこか高級。そんなお宿を世界中で探して泊まってみるのも素敵！メルマガはナツのリゾートをターゲットにしたものだが、夏と素敵な民泊。そういった休日を過ごしたい欲に駆られます。...
April 26, 2023
オシャレなメルマガデザイン25選 ：アプリ・ソフトウェア編
こんにちはBEDです。 2月のオシャレメルマガ紹介です！今回は、アプリ・ソフトウェア編です。 様々なサービスがありますが、リアルなプロダクトを持っているところからインターネット上で完結してしまうものなど。そんな中からこれはイケてるなと思うものを厳選しました。 また、コーヒーを飲みながら気軽に楽しんでいただければと思います！ Really Good Emailsから見つけてきたメルマガのデザインになります。 厳選したオシャレなメルマガデザイン 1.Fitbit ウェアラブルウォッチの製品を扱うメーカー。シンプルで、プロダクトの見せ方など素敵です！ 目次に戻る 2.Vimeo 動画を掲載しているメディア。様々な動画を載せていてLPとしての機能もしています！ 目次に戻る 3.Procreate イラスト制作ができるアプリ。こういったイラストを作成できるというようなイメージを想起させるビジュアルが素敵です！ 目次に戻る 4.Google みんなご存知Google。そのGoogleが出したイヤホンの紹介です。Appleっぽい感じがしておしゃれですね！ 目次に戻る...
March 27, 2023
オシャレなメルマガデザイン25選 ：ファッションブランド編
こんにちはBEDです。 デザインには様々なセオリーやルールがあります。もちろんそれらを学ぶ事はとても大切です。ですが、僕がこの記事で伝えたいのはお勉強的な事ではなく、自身の直感でデザインを見て楽しんだり、いいもの、かっこいいものというのを探してほしいのです。 小さい頃から、いいものを見たり食べたりしたほうが良いと言われるのと同じで、良いものってなんだろうと常に意識して見ることが大切（感性が育つ）だと思ってます。この記事をみて、自分もこういうの作りたい！ってテンション上げてもらえることを願ってます。 そんな観点で選んだおしゃれで素敵なメルマガを毎月様々な業種やジャンルでご紹介していきます！気軽にコーヒーを飲みながらゆるく見てもらえればと思います！ Really Good Emailsから見つけてきたメルマガのデザインになります。 厳選したオシャレなメルマガデザイン 1.On 黒で統一されていてかっこいい！シューズブランドなのでシューズの存在感もちゃんと出せている。 目次に戻る 2.Crocs みなさんもご存知のCrocs！色んなカラーがあるから楽しげなデザインで素敵！ 目次に戻る 3.Danner 革靴の老舗ブランド！こちらも知らない人はいないかと思います。Dannerのワイルドさやエレガントさが表現されていてかっこいい！ 目次に戻る 4.Teepublic Tシャツなど様々なアイテムを販売しているアパレルブランド。かわいらしいポップな感じや色使いがとても素敵！ 目次に戻る...
February 20, 2023
簡単！Benchmarkの画像編集ツールを使ってデザインのクオリティをアップさせよう！
こんにちは！Benchmark Emailでデザインを担当している、BEDです。 HTMLメールで重要なメインビジュアルやその他の画像ですが、Benchmark Emailに標準実装されている画像編集ツールを使ってデザインのクオリティを上げることができます。この記事を参考に、ぜひHTMLメールに入れる画像を編集してみてください。 画像編集で行う事とは？ どんな画像をどんなところに使いたいのかで画像編集でやることは変わってきますが、主に以下のような事があるかと思います。 トリミング・リサイズ 余計なものを切り取ったり、掲載する媒体のサイズへと調整したりなどする時に行います。 色の変更、調整 暗い写真や、色が黄色みかかっていたり青みが強かったりなどした時に調整が必要になります。 テキストの挿入（フォント、文字組など） 画像の上にテキストを置くことで、バナーなどのような制作物を作ることができます。また、フォント（字体）を決めたり、文字のバランスなども調整することによって何を一番伝えたいのかなどを調整することができます。 ✉️ メールに入れる画像もサクサク編集！ ✉️ Benchmark Emailの画像編集ツールだとこんなことができる デザインに自信がない担当者さまでも簡単に使える、シンプルで便利な機能をご紹介します。今回はこの画像を参考にしてツールのご説明をしていきます！ まずはメールエディタ上で、編集したい画像を選択して、「コンテンツ」→「編集」をクリックすると画像編集ツールの画面に変わります。 トリミングの例...
January 25, 2023
デザイナーがインスピレーションを得る為に見ているサイト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
