タグ: テンプレート

メルマガデザインの作り方「Benchmark Email編」

メルマガデザインの作り方「Benchmark Email編」

事例 • 2017.08.07

(この記事は2017年8月の記事をUI変更に伴いリライトしたものです。) こんにちは、デザイン担当のBEDです。 本当に突然且つ手前味噌ですが、Benchmark Emailが配信している毎月のメールマガジンのレイアウトが見やすいとよくお褒めのお言葉をいただくことがあります。それと同時にどのようにデザインを作っているのか聞かれることもあるんです。どちらもとても嬉しいお言葉をいただけてると思っています。 そこで、今回はBenchmark Emailが配信しているメルマガデザインの作り方(設定)をご紹介します。 (クリックするとメルマガ全体の画像を見ることができます。) 今回は2017年6月に実際に配信したこのメルマガを作成していきます。 レイアウトを選ぶ まずはどのようなレイアウトのデザインにしたいのか考えます。 Benchmark Emailでは、メルマガの上から、同じ大きさの要素を掲載する記事の本数に合わせて配置しているので、1カラムのレイアウトを使用しています。(テンプレートは使わずレイアウトから雛形を選んで基礎を作ります。)   なので、こちらを選びます。 トップにロゴを配置 レイアウトが決まったら、次にトップにロゴを入れていきます。   このような感じでトップに画像ブロックを追加し、ロゴを入れ込みます。 記事のサムネイル画像を入れる ロゴを入れ込んだら次に各記事のサムネイルを入れていきます。先程、ロゴ画像を入れ込んだ要領で画像を入れ込みます。 入れたい画像を選び入れ込みます。   するとこのような感じで画像を入れ込むことができます。 記事のタイトル&テキストを挿入する 画像を入れ込むことができたら次にその記事のタイトルとテキストの入れ込みです。 「Heading1」というところに記事のタイトルを入れ込みます。 続いて、タイトルの下にある部分にはその記事がどんな内容のものなか簡単に分かるようなテキストを入力します。   そうするとこのような感じになります。 ボタンの編集 次にボタンの編集を行っていきます。このボタンはその記事を読んでもらうためのボタンになります。デフォルトで用意されているボタンでも十分なのですが、そのメルマガのデザインにあったものをカスタマイズして作ることをおすすめします。 Benchmark Emailでは、全体的にシンプルなデザインを大事にしているので、枠とテキストといったシンプルなデザインを採用しています。 ボタンブロックを以下のように変更し、ボタンデザインをカスタマイズしています。 ボタンテキストを「Read more」に編集 ブログ記事のURLを挿入 ボタンの色を「白」にする ボーダーを「黒」にする ボーダー枠の太さを「2」 配置を中央揃えに 横パディングを最大値の40 縦パディングを10 角の角度を0 テキストの色を「黒」 「裏テク」それぞれの記事が別れている様に見える見せ方 次にそれぞれの記事が別れている様に見せるためのギャップを作ります。実際にはそのようなブロックは存在していないのですが、「区切り線」ブロックを活用してそのように見せています。 言わば、裏テクみたいなものになります。 これまで作った記事の下にブロックから「区切り線」を選び、区切り線を追加します。 その区切り線を以下のようなカスタマイズで線を太くし、背景の色と馴染ませることで、各記事毎に別れているように見せることができます。 背景色はなし 上幅を20 下幅を0 左右行間を0 ラインの色を編集※ 太さを30に ※5番がポイント!背景色とラインの色を同じにさせることでギャップを作ることができます。 ちなみに背景色の編集は全体スタイルからできます。 これまでの手順を繰り返していくことで、メルマガで5つほどの記事をまとめて紹介している様にみせることができます。 最後にフッターのデザイン 最後にフッターの設定です。これもデザインに合わせて作っています。 まずはSNSボタンの編集です。デフォルトで用意してあるSNSのアイコンは以下の設定を行なっています。 【設定】 背景をシックな黒に サイドの空白枠を「20」 上下の空白枠を「0」 そして、SNSボタンの配置などを編集できる「コンテンツ」というところで、サイズや位置などのレイアウトを変更します。 以下のようなにカスタマイズをし、シンプルでシックな感じのデザインにしています。 【レイアウト】 表示設定はアイコンのみ レイアウトは「横並び」 アイコンサイズは「小」 配列は中央揃え 間隔調整は「10」 モバイルレイアウトは「デフォルト」 次にそれぞれのSNSのアイコンにURLを入れ込みます。以下の設定です。 リンクURLを挿入 アイコンの色を「設定の1」で選択した色に合わせる ボーダーを白 枠の太さを2 角度を0 そして次に、フッターブロックの設定を以下にします。 【設定】 背景色をSNS箇所の色と合わせる 空白を20 次に、コンテンツの部分で配信元や住所などをカスタマイズします。 以下の設定にしています。 【コンテンツ】 挿入する購読リンクを選択※ 配置を「中央ぞろえ」 ロゴを選択 ロゴの配置を「中央揃え」 ※Benchmarkではデザイン重視のため全てのリンクを外しています。(但し配信停止リンクはデフォルトで設定されています。) さいごに これで、Benchmark Emailのメルマガデザインの作り方は以上となります。皆さんの作るメルマガの参考になれば嬉しいです! あなたが送るメールが素敵なものになりますように! それでは、また!BEDでした! (関連記事) ・コンバージョン率UPにつながる?メルマガデザイン紹介サイト8選 ・メールデザインの参考に!読者の心を動かすメール海外事例50選 //<![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); //]]>  


記事を読む
セール告知に使える! Benchmark Emailオリジナルデザインテンプレート紹介

セール告知に使える! Benchmark Emailオリジナルデザインテンプレート紹介

Benchmark • 2017.06.26

こんにちは、デザイン担当のBEDです。 ”◯◯におすすめのメールデザインテンプレート紹介”シリーズとして職種や用途に合ったおすすめのメールデザインテンプレートをいくつかご紹介していくこのコーナー。 Benchmark Emailでは、500以上ものメールデザインテンプレートを提供しています。正直沢山ありすぎてどれを使って良いのか分かりません。 そこで今回は、「セール告知」におすすめのメールデザインテンプレートを5つご紹介します。 ※今回ご紹介するテンプレートはBenchmark Emailメール作成画面より、テンプレートを選び、フィルター>タイプ>プロモーションのカテゴリーに全て含まれています。(Benchmark Emailのアカウントにログインする事で確認する事ができます。) シンプルかつクールに! 黒を貴重としたクールなデザインが特徴のテンプレートです。注目させたい部分にアクセントとして赤を入れることでより目立ち、ユーザーを分かりやすく誘導できます。例えば、ファッション系のECサイトで洋服を着たイメージや小物を持っているといった利用シーンを見せると良いと思います。ブランドのイメージに合わせてカラーを変えるのも良いと思います。 また、Color Hexというサイトでカラーの上手な組み合わせを確認するのも良いでしょう! 参考記事:メルマガ登録フォームはWebサイトのデザインを壊さずに目立つのが大事 テキストベースでも美しく! 画像をメインに訴求することも良いのですが、テキストベースでも十分に要点を伝えることはできます。ポイントとしては長くならないテキスト量の調整が必要です。例えば、セール系のイベントの紹介などに効果的です。画像メインよりもより詳しいセールの内容や場所、どんな商品があるのかなどテキストメインで紹介するとより伝わりやすくなります。 Webサイトのようなメルマガデザイン! メルマガをWebサイトの様にせることで、セール告知以外にもお店の情報やブログといった別コンテンツへ自然と誘導することができます。送りつけるだけのメールではなく、ユーザーにもっと色々知って貰いたい時に効果的です。 動画で訴求! 動画でより効果的に訴求することが可能です。動画は現在、様々な業種でも使用されています。動画で訴求する場合は、長くなりすぎないのがポイントです。長いとユーザーは観ることに飽きてしまうので、30秒〜1分程度が良いでしょう。例えば、サッカー用品を扱っている場合は、その用品を使っているシーンなどをその商品にスポットが当たるような動画を撮影し載せると良いでしょう。 ※メールの容量が重いことで受信側によって迷惑メールと判断され、受信トレイに届かなくなってしまうことがあるため、現在多くのメーラーではメール内で動画を再生することができません。その場合には、動画箇所をクリックすると動画のあるWebページへ移動し、そこで再生されるというものが主流です。(Benchmark Emailでも同じ仕様となっております) 本屋さんにおすすめ! 本を扱っている方におすすめなテンプレートになります。その時押し出したい本の画像をメイン画像にいくつか載せることで、実際の本のアピールにもありますし、沢山取り扱っている雰囲気がでるのでユーザーへ信頼の訴求にもなります。 さいごに ほんの一部のメールデザインテンプレートをご紹介しました。この他にも沢山提供していますので、ぜひ、覗いてみてください。メルマガはデザインも大切ですが、1番大切なのは誰にどういったことを紹介したいのか。それによって最適なデザインが変わってきますので、あなたが扱う商品にあったテンプレートを探してみてください! あなたが送るメールが素敵なものになりますように! それでは、また!BEDでした! デザイン関連記事: 年末年始に使える便利なメールテンプレート紹介 ECサイト運営者におすすめ!Benchmark Emailオリジナルデザインテンプレート紹介 //<![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); //]]>


記事を読む
ニュースレターアワード:ベストデザイン賞

ニュースレターアワード:ベストデザイン賞

便利ツール • 2010.12.02

「ゴスフォード・パーク」という映画に、マギー・スミス演じる伯爵夫人が小太りの女性が着たイブリングドレスについて「難しい色ですわね、グリーンって」と嫌みっぽく言うシーンがあります。 本当に彼女の言うとおりです。 メールマーケティングの世界でも、たくさんのキャンペーンで試みられ失敗に終わった色ですが、ごくたまに「当たり」のグリーンを出せる担当者が現れるのです。そのグリーンが成功されるたび、私たちは祝福をあげたくなります。 ベストデザイン賞を獲得したEchostoreは環境にやさしい天然性の商品を売る会社です。ただ派手な緑色を何重にも盛り込んでカスタマーの視覚に襲い掛かるのではなく、本能的に落ち着いた色合いは「素晴らしい」以外にコメントのつけようがありません。 レモングラスの香りのクレンザーを販売しているからという事ではありませんが、このテンプレートのテーマ自体、清潔感が感じられます。しゃれていながらも読みやすい文字フォントから背景に映っているモダンなインテリアまで、Echostoreのメールキャンペーンはスタイル、シンプルさ、そして登録者を驚かせる「何か」をうまい具合にバランスを取らせたものです。 このベストデザイン賞授賞のメールキャンペーンのウェブバージョンは、Benchmark Emailコミュニティでどうぞご覧ください。


記事を読む