Tag Archives: デザイン
メルマガデザインの作り方「Benchmark Email編」
(この記事は2017年8月の記事をUI変更に伴いリライトしたものです。) こんにちは、デザイン担当のBEDです。 本当に突然且つ手前味噌ですが、Benchmark Emailが配信している毎月のメールマガジンのレイアウトが見やすいとよくお褒めのお言葉をいただくことがあります。それと同時にどのようにデザインを作っているのか聞かれることもあるんです。どちらもとても嬉しいお言葉をいただけてると思っています。 そこで、今回はBenchmark Emailが配信しているメルマガデザインの作り方（設定）をご紹介します。 （クリックするとメルマガ全体の画像を見ることができます。） 今回は2017年6月に実際に配信したこのメルマガを作成していきます。 レイアウトを選ぶ まずはどのようなレイアウトのデザインにしたいのか考えます。 Benchmark Emailでは、メルマガの上から、同じ大きさの要素を掲載する記事の本数に合わせて配置しているので、1カラムのレイアウトを使用しています。（テンプレートは使わずレイアウトから雛形を選んで基礎を作ります。） なので、こちらを選びます。 トップにロゴを配置 レイアウトが決まったら、次にトップにロゴを入れていきます。 このような感じでトップに画像ブロックを追加し、ロゴを入れ込みます。 記事のサムネイル画像を入れる ロゴを入れ込んだら次に各記事のサムネイルを入れていきます。先程、ロゴ画像を入れ込んだ要領で画像を入れ込みます。...
August 7, 2017
HTMLメールマガジンの参考になるイケてるデザイン13選
こんにちは。WEBマスターの手帳の遠藤です。HTMLメールを作るにあたり「どんなデザインが良いのか」と考える時にデザインで参考になるメールマガジンはありますか？ 海外のニュースレターを集めている「Email-Gallery」というWEBサイトも参考になりますが、やはり日本国内のメールマガジンのデザインも参考にしたいですよね。 という訳で、今回は自分が「HTMLメールのデザインの参考にしてるメールマガジン」をご紹介します。 ウォールストリートジャーナル ウォール・ストリート・ジャーナル日本版 -ニュース-ビジネス-海外-経済-金融 – WSJ日本版-jp.wsj.com – Wsj.com 米国紙のウォールストリートジャーナルの日本版のメールマガジンです。 ２カラムで左にリンク付きの画像、右に本文というレイアウトで、載せているコンテンツも１つだけと非常にシンプルです。 NewsPicks NewsPicks 経済ニュースのニュースアプリのメールマガジンです。１カラムで縦長なレイアウト。モバイル読者を意識しているのがわかります。 デザインもシンプルで、ほとんど装飾はされておらず、画像を使ってコンテンツを分けていますね。 VISUALTHINKING ビジュアルシンキング | ビジュアルの力で世界を丸くする。...
July 17, 2015
