こんにちは、Benchmark Emailでデザインなどを担当しておりますBEDです!
メルマガを作成するとき、フォントや文字サイズで悩まれる方いらっしゃいませんか?今回は、普段デザインの仕事をしている私が、どんな観点でフォントを選んだり、文字サイズを決めているのかをご紹介できればと思います。
メール配信をされている方々の参考になれば嬉しいです。また、当記事では、Benchmark Emailで制作されることを念頭に置いてご説明しますので、アカウントをお持ちでない方は無料トライアルを是非ご登録ください。
目次
フォントの選び方
まず、フォントにはゴシック体と明朝体という二種類が存在します。
ゴシック体は、横線と縦線の太さがほぼ同じで均一なので、インパクトがあり、目に入りやすい特徴があります。例えば、Arial、Helvetica、Hiragino Kakuなどがゴシック体に含まれます。
そして、明朝体は、横線に対して縦線が太く、横線の右端、曲り角の右肩に三角形の山(ウロコ)というものがある書体です。線の強弱があるため、文字の形を判別しやすいという特徴があります。例えば、Garamond、MS Mincho、Times New Romanなどが明朝体に含まれます。
ゴシック体、明朝体の使い分けについては、例えば、ゴシック体はフォーマルでしっかりとしたイメージである一方、明朝体には美しく洗練されたイメージがあります。フォントがもつイメージが制作するデザインに合っているかどうかがフォント選びには重要な要素になります。
信頼感やモダンなイメージにしたいなら「ゴシック体」
線の太さが均一で安定感のあるゴシック体は、「モダン」「信頼」「力強さ」といったイメージを与えます。ターゲットを老若男女選ばず使えるので汎用性が高いです。
こちらは、ゴシック体のビジュアルにあわせて、テキストをゴシック体にあわせた参考例です。なるべく、そのメルマガのテーマやメインビジュアルに合うようにフォントを選ぶと統一感がでるので、イメージもズレることがなくなるのと、可読性があがります。フォントは定番の「Helvetica」を使っています。
洗練されたデザインにしたり高級感を持たせたいなら「明朝体」
繊細さを持つ明朝体は、「高級感」「大人」「女性的」「和」「伝統」「クラシカル」「格調」といったイメージを与えます。筆使いを感じさせるトメハネはらいなどもあるため、和のテイストにもよく合います。
こちらも、明朝体をメインとしたビジュアルにあわせてテキストも明朝体にしたものです。フォントは定番の「Garamond」を使っています。
文字サイズの選び方
Benchmark Emailでメルマガを作成する場合は、タイトルは「30」でテキストは「14」くらいの大きさを推奨しています(先程の参考画像はこれで作成しています)。
これはあくまでも、このシステムを使用するときの大きさなので、一般的にHTMLを用いて作成する場合は、PCではタイトルは22px~40pxで本文テキストのフォントサイズは、16px~18pxがよく使われているそうです。
モバイルではタイトルは18px~28pxで本文テキストは14px~18pxが使われています。
大切なのは、h1、h2、h3でしっかりと文字の大きさに強弱を付けてあげることとh1〜h3といったように順番に配置していくことがSEO的にも良いとされていますので、そのルールを守ってデザインしていくと伝えたいことを伝えやすく構成していけると思います。
まとめ
フォントのもつイメージを理解し、ご自身が、どのジャンルで何を伝えたいかをまずは整理してみると自ずとどのフォントを使えばよいのか、また、どのテキストをどのくらいの大きさにすればよいのかが見えてくるかと思います!
それと、フォントやデザインには絶対はありません。いろんな形を楽しむこともひとつの表現であり、個性を伝えられるツールでもあります。基本的なフォントのあり方を学んで、ご自身のメルマガ作成をお楽しみください!
さいごにBenchmark Emailで利用できるフォントを一覧にしました。また、どんな特徴があるのかも簡易的に記載してあるものもありますので、用途にあわせてチョイスしてみてください。
Benchmark Emailで利用できるフォント一覧(24種類)
■ゴシック体
Arial:ゴシック
Arial Black:ゴシック(数字が太くなる)
Arial Narrow:ゴシック
Comic Sans Ms:ゴシック(英文の時に手書き風の文字になる)
Courier New:ゴシック
Helvetica:ゴシック(定番、安定)
Hiragino Kaku:ゴシック(定番、安定)
Impact:ゴシック(英文表記におすすめ)
Lucida Grande:ゴシック
MS Gothic:ゴシック
Osaka:ゴシック(定番、安定)
Papyrus:ゴシック(英数表記の時は個性的な書体になる)
SimHei:ゴシック
Tahoma:ゴシック
Trebuchet MS:ゴシック
Verdana:ゴシック
■明朝体
Baskerville:明朝
標楷體:明朝(堅い明朝)
Garamond:明朝(キレイ)
Georgia:明朝(キレイ)
MS Mincho:明朝
Palatino:明朝
新細明體:明朝(堅い、お年賀などに合いそう)
Times New Roman:明朝
参考記事
メルマガデザイン初心者でも90点レベルのHTMLメールを作れる6つの思考
【デザイン事例19種類】メルマガのヘッダー&フッターを作るコツ