完璧なEメール署名のデザインに何時間も費やしたことがあるだろう。 カリグラフィー署名 個人的なタッチのために。そして送信を押すと、すべてが...おかしい。ロゴはつぶれ、バナーは切れ、画像の読み込みには時間がかかる。
寸法は重要です。抽象的なデザイン原則のためではなく、あなたの署名は何十ものメールクライアントを経由し、それぞれに癖があるからです。Gmailではシャープに見えても、Outlookでは崩れてしまうかもしれません。デスクトップでは即座に読み込まれるものが、モバイルではクラッシュするかもしれません。
それを直そう。
メール署名の画像サイズの最適化
画像サイズを正しく設定することは、ルールに従うことではありません。
メール署名でサイズが重要な理由
Eメールクライアントは、あなたの署名を表示するだけではありません。サイズを変更したり、圧縮したり、時には完全に拒否したりします。
2MBの写真？Outlookはそれを削除します。50x50pxのロゴ？レティナディスプレイでは読めません。800px幅のバナー？モバイルでは半分になる。
どのメールクライアントにも制限がある。Gmailは画像の上限を合計10MBに設定しているが、4G回線でそれを読み込むのは難しい。アップル・メールは大容量のファイルをよく扱うが、積極的に圧縮する。最悪のOutlookは、赤い×印が表示されることもある。
サイズは、配信可能性、読み込み時間、そしてプロフェッショナルとしての見栄えの3つに影響します。どれか一つでも間違えると、あなたの署名はお荷物になります。
ファイルサイズがメール読み込みに与える影響
あなたは1日に50通のメールを送信する。それぞれに500KBの署名がある。署名だけで25MBの帯域幅です。あなたの会社の全員に当てはめてみてください。
受信者は読み込みが遅いことに気づく。大きなファイル」ではなく、「この人のメールは遅い」と思うのだ。そして無視し始める。
スイートスポット？署名全体で50KB以下。20KB以下がより良い。
重い画像は読み込みを遅くするよりも悪いことをします - スパムフィルターの引き金になります。メールプロバイダーはメッセージのサイズを見ています。5KBのテキストメールに1MBの署名？疑わしい。スパムフォルダーに直行です。
ファイルサイズはすぐに大きくなる。300x100pxのPNGロゴは80KBかもしれない。バナー、ソーシャルアイコン、ヘッドショットを追加すると、突然200KBになります。これは圧縮前の状態です。
サイズがブランド認知に与える影響
あなたの署名は自動操縦で動いています。すべてのメール、すべての返信、すべての転送 - それはあなたを表しています。
ピクセルのようなロゴは、細かいことは気にしないことを伝える。特大のバナーは、"自分が何をしているのかわからない "と叫んでいる。画像が読み込まれない？プロらしくない。
ブランドの一貫性は次元に宿る。ロゴは認識できるものでなければならないが、圧倒的なものであってはならない。バナーは支配的ではなく、補完的であるべきです。すべてのデバイスで適切に拡大縮小する必要があります。
最後に印象に残った署名について考えてみよう。おそらく、すっきりしていて、コンパクトで読みやすい。注目のために争うものは何もない。これは意図的なサイジングだ。
推奨ロゴ寸法
ロゴは厄介だ。小さすぎると誰も見てくれない。大きすぎると、他のすべてを支配してしまう。
理想的なロゴサイズ
最大300x100pxから始めてください。これは幅×高さです。ほとんどのロゴはこのスペースに快適に収まります。
横長のロゴ？300x80pxで大丈夫です。正方形のロゴ？100x100pxで試してみてください。縦長のロゴは大変です。最大でも80x120px、さもなければすべてを押し下げてしまいます。
実際のファイル寸法は、表示されるサイズの2倍であるべきです：600x200pxで保存され、300x100pxで表示されます。これにより、ファイルを巨大化することなく、レティナディスプレイに対応できます。
なぜこの数字なのか？メールクライアントは署名を狭いカラムで表示します - 通常は幅500-600pxです。ロゴは最大でもその半分程度にしましょう。テキスト、連絡先、その他の要素のためのスペースを残してください。
ロゴの向きによって、異なるアプローチが必要です。幅の広いロゴはスケールが大きくなります。背の高いロゴは、高さの制限が必要です。
品質を損なうことなくロゴを拡大縮小
ロゴを引き伸ばすな。絶対に。ソースファイルが400x200pxの場合、300x150pxで表示しないでください。
オリジナルの縦横比を使用してください。2:1のロゴは、300x150pxでも200x100pxでも2:1のままです。メールクライアントは、幅か高さのどちらかを設定すれば、この比率を維持します。
可能な限りベクターファイルから作業する。表示サイズの2倍で書き出しましょう。幅250pxのロゴ？PNGを500px幅で書き出しましょう。こうすることで、ファイルサイズを大きくすることなく、レティーナ対応の画像を得ることができます。
コミットする前に、さまざまなサイズでテストしてください。300pxではうまく見えても、150pxではディテールが失われてしまうかもしれません。細い線、小さなテキスト、複雑な形など、細かいディテールが最初に消えてしまいます。
ロゴファイル形式の選択
透明度のあるPNG - これがデフォルトです。24ビットPNGは、色をうまく処理し、透明度を完璧に処理し、適度に圧縮します。
写真や複雑なグラデーションにはJPEG。しかし、テキストを含むロゴは？PNGの勝ちです。JPEGはシャープなエッジの周りにアーティファクトが発生します。テキストはぼやけます。
SVGは魅力的だ--無限に拡張可能で、小さなファイル。しかし、メールクライアントはSVGをブロックする。OutlookはSVGをまったく表示しない。GmailはSVGを除去する。PNGにこだわりましょう。
ファイルサイズについては、PNGを圧縮してください。TinyPNGやImageOptimのようなツールは、60-70%を目に見える品質低下なしにカットします。80KBのロゴが25KBになります。見た目は同じで、読み込みが速くなります。
適切な色の濃さで保存する。ほとんどのロゴは何百万色も必要ありません。256色のPNG-8はPNG-24と同じように見えますが、サイズは半分です。
最適なバナーとエレメントのサイズ
バナーは署名の宣伝スペースです。使い方を間違えればスパム。正しく使えば、クリックを促進する。
クリック率を高めるバナー寸法
標準バナー：最大600x100px。これは、ほとんどのメールクライアントがコンテンツを折り返したり、カットしたりする前に割り当てる幅です。
600x70pxまたは600x80pxの狭いバナーが効果的です。署名を圧迫しません。受信者は、看板の前をスクロールすることなく、あなたの連絡先を見ることができます。
モバイルがすべてを変える600pxは？スマホの画面では320-375pxになります。まずはその幅に合わせてデザインしましょう。テキストは320pxでも読めるように。コールトゥアクションはタップできるように。
バナーの配置はサイズと同じくらい重要です。シグネチャーの下部が最も効果的です。一番上に配置すると、あなたの名前や肩書きと競合します。
クリック可能なエリアにはスペースが必要です。バナーのボタンは最低でも44x44px（アップルの最小タッチターゲット）が必要です。これより小さいと、モバイルでは見逃されてしまいます。
Eメールの制限内でバナーを作成する
メールクライアントは派手なコードを排除する。ホバー効果もアニメーションも複雑なレイアウトもありません。バナーは画像とリンクだけです。
テキストは大きめに - フォントサイズは最低14px、16pxがより安全です。小さい文字は縮小すると読めなくなります。
コントラストはウェブサイトよりもEメールにおいて重要です。薄い背景の薄いテキストはプレビューペインで消えてしまいます。高コントラストであれば、Eメールクライアント全体で読みやすさが保証されます。
ウェブセーフカラーにこだわる。メールクライアントによって色の表現は異なります。その完璧なブランドの茶色？Outlookでは青に、Apple Mailでは緑に見えるかもしれません。複数のクライアントでテストしてみましょう。
ファイルサイズの制限はバナーに大きな打撃を与えます。600x100pxのバナーは30KBを超えないようにしてください。可能な限りグラデーションの代わりに無地を使いましょう。積極的に圧縮しましょう。1キロバイトを大切に。
電子メール署名解決の技術的側面
解像度は、あなたのサインがシャープに見えるか、ぼやけて見えるかを決定します。これを間違えると、完璧な寸法でもあなたを救うことはできない。
画像解像度への影響
電子メールの署名は、標準的な画面解像度である72 DPI（1インチあたりのドット数）で表示されます。印刷物は300DPIですが、ここでは関係ありません。
重要なのは、ピクセルの寸法と、それらが異なるスクリーンでどのようにレンダリングされるかだ。
Retinaディスプレイは2倍のピクセルを表示します。通常のスクリーンでは300pxのロゴが、レティーナでは600論理ピクセルになります。ソース画像が300pxしかない場合、ぼやけて見えます。
解決策：2倍のサイズで画像を作成し、1倍で表示する。200x80pxで表示されるロゴは400x160pxで保存する。HTMLやCSSで縮小することで、鮮明なレティーナ表示が可能になる。
表示寸法を正しく設定すれば、ほとんどのメールクライアントは自動的にこれを処理します。そうでないものもあります。Mac、iPhone、高解像度のWindowsマシンなど、実際のデバイスでテストしてください。
最適な画像ファイル形式
透明度やテキストのあるものにはPNG。ロゴ、アイコン、ボタン - PNGはアーティファクトなしでそれらを処理します。
JPEGは写真専用です。ヘッドショットや商品写真など、JPEGはPNGよりも圧縮率が高いです。ただし、画質は80-85%にしてください。これより低いと、顔が変に見えます。
GIFは単純なグラフィックには使え、アニメーションにも対応していますが、署名にアニメーションGIFを使うのは？気が散るし、しばしばブロックされる。静止画像にこだわりましょう。
WebPはより優れた圧縮を提供するが、メールクライアントのサポートは不安定だ。OutlookはWebPを完全に無視している。Gmailは対応している。Gmailユーザーだけをターゲットにしているのでなければ、リスクを冒す価値はない。
BMP、TIFF、その他のエキゾチックなフォーマットは決して使用しないでください。サイズが大きすぎるか、サポートされていません。
品質を損なうことなくファイルサイズを縮小
圧縮は譲れない。オリジナルのエクスポートは常に必要以上に大きい。
PNGの場合：TinyPNG、ImageOptim、Squooshのようなツールを使う。これらはピクセルを変えずにファイル構造を最適化します。100KBのロゴが30KBになり、目に見える差はゼロになります。
JPEGの場合：80～85%の画質で書き出す。100%と80%の違いはほとんどの人には見えませんが、ファイルサイズは半分になります。
PNGのカラーパレットを減らす。あなたのロゴが10色を使っているなら、なぜ何百万色も保存するのですか？パレットを制限したPNG-8は劇的に小さくなります。
使われていないスペースを切り取る。800x200pxのロゴの両側に白いスペースがある？600x150pxにトリミングしましょう。ピクセル数が少なければ、ファイルサイズも小さくなります。
メタデータを削除します。画像ファイルには、EXIFデータ、カラープロファイル、その他不要な情報が含まれています。それをすべて取り除きます。ImageOptimのようなツールは自動的にこれを行います。
「Ge-Signは私の新しいEメール署名を作成してくれました。
ケビン F., 不動産業者
メール署名のテストと適応
あなたの電子メールクライアントで署名が機能します。素晴らしい。しかし、受信者が使っている他のクライアントはどうでしょうか？
電子メール署名のテストの重要性
Outlook Web対Outlook Desktop対Outlook Mobile - 3つの異なるレンダリングエンジン、3つの異なる結果。
ChromeのGmail、SafariのGmail、iOSのGmailアプリ、どれも微妙に違う。
アップルメール、サンダーバード、ヤフーメール、プロトンメール......それぞれに癖がある。
テストはオプションではありません。異なるプラットフォームのアカウントにテストメールを送りましょう。デスクトップとモバイルをチェックしてください。探す
- 画像が正しく読み込まれる
- 寸法は安定している
- 変な間隔や隙間がない
- リンク
- 文字が読みやすいまま
よくある不具合：Outlookで画像が引き伸ばされる、Apple Mailモバイルでバナーが切れる、Gmailアプリでスペーシングの問題。
全社的に署名を送信する場合は、LitmusやEmail on Acidのようなテストツールを使いましょう。数十のクライアントのプレビューを同時に表示することができます。
手動テストも有効 - ただ時間がかかる。主要なプロバイダーで無料のアカウントを作成する。自分でテストメールを送る。携帯電話で確認する。
モバイル・デバイスに対応した署名
50%以上のメールがモバイルで開封されています。あなたの署名は、まずそこで機能する必要があります。
モバイル画面の幅は320-428pxです。600pxのバナー？サイズに合わせて縮小されます。テキストは小さくなる。画像はディテールを失います。
モバイルファーストを意識したデザイン
- 署名の合計幅を500px以下に保つ
- フォントサイズを大きくする（最低16px）
- クリッカブルな要素は少なくとも44x44pxにする。
- 可能な限りエレメントを垂直に積み重ねる
- ブラウザのリサイズだけでなく、実際の携帯電話でテストする
画像は比例して拡大縮小してください。HTMLではmax-widthを100%に設定してください。これにより、メールクライアントがレイアウトを崩すことなく、画面に合わせて画像を縮小することができます。
モバイルデータの速度を考えてみよう。200KBの署名？低速回線では読み込みに数秒かかる。受信者は表示される前にスクロールして通り過ぎてしまう。
よりシンプルで、より小さく、より速く。作業は2倍になるが、素晴らしいモバイル体験を保証する。
ディスプレイの問題を避ける
電子メールクライアントは、予測可能な方法で署名を破損します。何が問題なのか、そしてそれを防ぐにはどうすればいいのか：
divではなくテーブル。 メールのHTMLは2005年から抜け出せない。構造にはテーブルレイアウトを使いましょう。DivやモダンなCSSはしばしば失敗します。
インラインスタイルのみ。 外部スタイルシートは取り除かれる。 <スタイル タグは無視されます。要素に直接スタイルを置く： <td style="padding: 10px;">.
絶対画像URL。 添付ファイルではなく、サーバーにホストされている画像へのリンク。添付された画像は返信や転送で表示されない場合があります。
すべてのものにオルトテキストを。 画像が読み込まれない場合（クライアントや遅い接続でブロックされる）、altテキストが表示されます。画像がなくても署名が読めるようになります。
背景画像なし。 Outlookでは無視されます。代わりに無地か普通の画像を使いましょう。
リンクフォーマットをテストする。 一部のクライアントはURLを自動フォーマットし、スタイル付きテキストリンクを壊しています。リンクされたテキストが正しく表示されることを常に確認してください。
エキゾチックなフォントは避ける。 ウェブフォントは使えない。システムフォントにこだわりましょう：Arial、Helvetica、Georgia、Times。これらはどこでも表示されます。
線の高さと間隔に注意。 エディタではきれいに見えても、Outlookでは余分な隙間ができてレンダリングされることがあります。間隔には特定のピクセル値を使用してください。
あなたのEメール署名は静的なものではなく、敵地を旅するコードです。クライアントによって解釈は異なります。適切なサイズとファイルサイズは、どこでもプロフェッショナルに見える最高のチャンスです。
まずはこのスペックから：
- ロゴ最大300x100px、20KB以下
- バナー最大600x80px、30KB以下
- 署名合計：50KB以下
- すべての画像：網膜用に2倍のピクセル密度
あらゆる場所でテストする。何が壊れたかによって調整する。あなたの署名は、何百通ものEメールであなたを表しています。大切にしましょう。
文責：Ge-Sign編集部。
