ダークモードでもメール署名を美しく見せるための5つの方法

メール署名は、パーソナルブランディングにおける手軽な成功要因です。プロフェッショナルな印象を与え、ブランド認知度を高め、さらには無料のマーケティング手段にもなります。

しかし、ひとつだけ問題があります。近年、多くの人がダークモードでメールを閲覧しているため、せっかく丁寧に作り込んだメール署名が、思うように表示されないケースが出てきているのです。

ダークモードはメール署名を崩すことで悪名高い存在ですが、受信者がどちらのモードで閲覧しても署名が美しく見えるよう、事前に対策を講じることができます。

ダークモードとは?

ダークモードとは、デジタル画面の表示設定の一つで、従来の「明るい背景に暗い文字」という表示を反転させたものです。

代わりに、ユーザーには「暗い背景に明るい文字」が表示されます。

ここ数年でその利用は爆発的に普及しており、あなたが送信するメールの多くも、受信者によってダークモードで読まれる可能性が高いでしょう。残念ながら、送信者側で受信者がライトモードとダークモードのどちらで閲覧するかをコントロールすることはできません。

ダークモードがメール署名に与える影響

デバイスがダークモードになると、メールアプリはメールの表示方法を変更します。これにはメール署名も含まれます。

Apple Mail、Gmail、Outlookなどのメールアプリがダークモードを処理する方式には、大きく分けて2種類あります。

1. フルダークモード

フルダークモードでは、メールアプリが表示するメールの配色を変更します。元の暗い文字が白い文字に置き換えられます。アプリによっては、メール内の画像の色を反転しようとすることもありますが、これはあまり一般的ではありません。

ただし、通常はメール署名に組み込まれたHTMLのカラーコードが反転されます。

この変換処理により、慎重にデザインされたメール署名が、一瞬にして読みにくい崩れた状態になってしまうことがあります。だからこそ、ダークモードを念頭に置いて署名を設計することが重要なのです。

Gmailはフルダークモードを採用しているメールアプリの一例です。上記の例は、ライトモードでは美しく仕上がっていたメール署名が、Gmailアプリのダークモードではうまく変換されず崩れてしまう様子を示しています。

2. 疑似ダークモード

疑似ダークモードは、やや手を抜いたダークモードの実装と言えます。「暗い背景に明るい文字」というダークモード本来のメリットを読者に提供しないためです。

この場合、メールアプリ自体はダークモードですが、メールの内容はそのままの状態で明るい背景の上に表示されます。

この状況で懸念すべきは、メール署名の周りのパディング(余白)だけです。署名にパディングがないと、署名が背景に直接くっついて表示されてしまいます。

ライトモードでもダークモードでも美しく見えるメール署名のデザイン方法

メール署名をダークモードでもライトモードと同じくらい美しく見せるために、実践できる5つのステップがあります。

1. ダークモード対応のメール署名ジェネレーターを使う

専用のメール署名ジェネレーターは数多く存在します。しかし、すべてがダークモードを考慮して設計されているわけではありません。中には白背景のアイコンを使用したり、署名全体を1枚の大きな画像ファイルにしてしまうものもあります。

人気の無料メール署名ジェネレーターの多くは、複数の署名レイアウトから選べるようになっています。その中にはダークモードでうまく機能するものもあれば、そうでないものもあります。デザインをプレビューする際は、デバイスでライトモードとダークモードの両方で必ず確認しましょう。

自分のロゴや画像をアップロードする場合は、後述の透過と縁取りに関するガイドラインに必ず従ってください。

2. 透過画像を使用する

多くの人は、画像を白背景のまま保存しています。常に白背景の上に表示されると想定していたり、背景まで一緒に保存されていることに気づいていなかったりするためです。

白背景付きの個別画像は、ダークモードでは野暮ったく、プロフェッショナルに見えなくなってしまいます。意図的に背景色を加えるのでない限り、メール署名で使用する画像は透過背景にするのがベストです。透過ファイルは通常PNGまたはGIF形式で、PNGが最も一般的です。

画像ファイルに背景色を追加する場合は、両方のモードでうまく機能することを確認してください。例えば、鮮やかな緑、黄色、赤などのビビッドカラーは、明るい背景でも暗い背景でもよく映えます。

3. 暗いグラフィック要素を白で縁取りする

メール署名の画像に暗い文字やグラフィック要素を使用する場合は、白、または少なくともより明るい色で縁取りしてみてください。

それだけで、グラフィックやテキスト要素が完全に見えなくなってしまうか、美しく見えるかの違いが生まれます。ただし、これは透過画像も併せて使用している場合にのみ有効です。例えば、白背景のままでは、メインのグラフィックを白で縁取っても何の効果もありません!

4. 署名の周りにパディング(余白)を追加する

このステップは、疑似ダークモードで表示される署名向けの対策です。署名の端にパディングを追加することで、メールアプリが署名全体を白背景の上に配置した場合でも、窮屈に見えるのを防げます。

パディングの追加は技術的には少し難しい場合があり、確かに細部にすぎません。しかし、あらゆる状況でメール署名を100%完璧に見せたいのであれば、検討する価値のあるステップです。例えば、グラフィックデザイナーであれば、修正する価値のある細部だと言えるでしょう。

5. 署名をテストする!

自分宛てにテストメールを送信し、さまざまなデバイスや画面でそのメールを開いてみましょう。受信者が実際に使うことがわかっている標準的な設定で試してください。例えば、クライアントのほとんどがOutlookを使用しているなら、Outlookでのテストを必ず行いましょう。

Androidユーザーの方は主要Androidアプリでダークモードを有効にする方法についてのガイドを、iOSユーザーの方はiPhoneやiPadでダークモードを使う方法についてのガイドをチェックしてみてください。

プロフェッショナルなメール署名のデザインに力を注ぐのであれば、あらゆる環境で美しく見えることを保証する価値があります。

実際にテストしてみるまで、どう表示されるのかはわからないのです。

ダークモードはすでに定着済み。今こそ適応するとき

ダークモードは、一般のデバイスユーザー、UX/UIデザイナー、そしてデバイスメーカーの間で、ますます人気が高まり続けています。

メール署名のプロフェッショナルなブランディングに力を注ぐのであれば、ライトモードだけでなくダークモードでも美しく見えることを確認しておきましょう。