デザイン

読みやすいメール署名を作るデザインの基本

フォント、文字サイズ、配色、罫線、レイアウトを整え、目立ちすぎず相手が必要な情報を見つけやすい署名に仕上げましょう。

1

視覚的階層をはっきりさせる

氏名は最も大きく太く、役職はその次のサイズ、連絡先は最も小さくします。この3段階の階層構造により、読み手の視線が「重要なものから順に」自然に流れるようになります。

2

メール署名に適したフォントと文字サイズを選ぶ

英数字には Arial、Helvetica、Verdana などのメールで表示が安定しやすい書体を使い、日本語は端末標準のゴシック体で読める指定にします。氏名は 14〜16px、役職は 12〜13px、連絡先は 11〜12px が目安です。書体は増やしすぎず、太さとサイズで情報の優先順位を示しましょう。

3

色は意図を持って使う

ブランドカラーを1色だけ選び、氏名・区切り線・アイコン背景などのアクセントに使います。本文は白地に濃いグレー(#333)で読みやすさを確保。鮮やかすぎる色やグラデーションは、メールクライアントで表示が崩れやすいので避けましょう。

4

モバイルでは1カラムを前提に設計する

メールの60%以上はモバイルで読まれています。上から下へ流れる1カラムレイアウトは、どの画面サイズでも崩れません。横並び(写真+テキスト)の場合は、狭い画面で縦積みになるよう設計してください。

5

画像をメール用に最適化する

署名全体のサイズは 50KB 以内に。写真は 72dpi に圧縮、ロゴは透明背景の PNG を使用します。読み込み時のレイアウトずれを防ぐため、width と height を必ず明示してください。

6

区切り線で余白を生む

写真とテキストの間に細い横線または縦線を入れると、ごちゃつき感がなくなります。薄いグレー(#E0E0E0)かブランドカラーで 1〜2px の太さがおすすめ。小さな工夫ですが、デザインの完成度がぐっと上がります。

よくある質問

メール署名にはどんな色が向いていますか? +

ネイビー(#1a365d)、ダークティール(#0d9488)、チャコール(#374151)が安全で信頼感のある定番カラーです。白地でのコントラストが強く、どのメールクライアントでも一貫して美しく表示されます。

メール署名にカスタムフォントは使えますか? +

Web フォント(カスタムフォント)はメールクライアントで安定して表示されません。特に Outlook はカスタムフォントを完全に無視します。Arial、Helvetica、Georgia、Verdana など Web セーフなフォントに統一するのがおすすめです。

メール署名の幅はどれくらいが適切ですか? +

600px 以下に収めましょう。これがメール本文の標準幅です。モバイルでは画面幅に合わせて縮小されるよう設計します。当ツールのテンプレートは最適な表示のため最大幅 500px で設計されています。

テーブルベースと div ベース、どちらのレイアウトを使うべき? +

メール署名では必ず HTML テーブルを使ってください。Outlook をはじめ多くのメールクライアントは、Flexbox や Grid などの最新 CSS レイアウトに対応していません。テーブルベースなら全クライアントで安定して表示されます。

ダークモードでも見やすい署名にするには? +

ロゴは透明 PNG を使用し、純白(#FFFFFF)の背景は避けて、わずかにオフホワイトか透明にします。明るい背景・暗い背景のどちらでも十分なコントラストが取れる文字色を選んでください。

署名のロゴにはどんな画像形式が良いですか? +

PNG が最も安全な選択です。透明背景に対応し、すべての環境で表示できます。SVG はメールでのサポートが弱く、GIF アニメーションは見栄えが悪くなりがちなので避けましょう。ファイルサイズは 30KB 以内に抑えてください。

メール署名をデザインする

テンプレートを選び、配色やレイアウトを調整して、HTMLメール署名を作成できます。

署名をデザインする
完全無料 登録不要