「メールに添付するサインを作ってほしいんだけど」と聞いただけで「うわあ、またか…」げんなりしてしまうwebデザイナーは多いのではないでしょうか。
WebブラウザはHTMLとCSSの断続的な変化に常に適応しつづけてきましたが、電子メールのクライアントはHTMLにおいてまったくといっていいほど変化を遂げず、今に至っているのです。これではwebデザイナーがそれを引き受けるのを嫌がるのも無理はありません。
センスの光る署名
いくつかのルールを守るだけで、あなたの署名は劇的に良くなります。
1 写真編集ツールを使ってサインをデザインする
Adobe PhotoshopまたはSketchといった、優れたツールを使うことをおすすめします。webデザイナーの方ならお分かりになるでしょうが、ツールは命とも言えるほど重大な要素です。それらを使わず作ろうとしたらどうなるか。いうまでもありません。
２ 関係のない情報を含めない
署名の最後に、ペットの誕生日や、あなたのお気に入りの詩の引用を入れたとして、それを読みたい人がいると思いますか？
3 署名の視覚的なサイズを確認する
ある程度作り込んでから、署名のサイズを確認してください。メールの最後に挿入するには大きすぎませんか？スマートフォンから表示した場合に画面いっぱいに表示されてしまっていませんか？
4 ロゴやプロフィール写真を含める
人は一般に、名前よりも顔やロゴを覚えると言われています。効率よく覚えてもらうために、ぜひ加えましょう。
5 カラフルにする
調和のとれた色を使用した署名はより美しく見えます。 Adobeを使えば、どの色がマッチするかチェックしてくれます。
6 間をあけても崩れないデザイン
メールクライアントは、文中にスペースを追加することが多いので、仮に多少のスペースが生まれた場合でも署名が正常に表示されるように考慮した方がいいでしょう（後で説明します）。
どの情報を入れるか
何を書いて何を書かないか、それを最終的に決めるのはあなたであり、あなたの顧客です。なので絶対的な答えはありませんが、名前、位置、会社、電話番号、ロゴ、プロフィール写真、ウェブサイト、住所、ソーシャルアイコンなどが一般的です。
署名のコーディング
昔ながらのCRTのスクリーンで作業する必要があります。Netscape Navigatorを開いて、コーディングの準備を整えましょう。署名をコーディングする際に 注意すべき重要なことを、いくつかご紹介します。
1 背景に色を使用しない
通常のWebデザインアプリケーションでは、背景に色を入れても問題なく動作しますが、メールの署名ではそうはいきません。ほとんどの電子メールは、背景での色の使用をサポートしていない買ったり、使えてもバグが多いのです。メールをサポートするCSSのリストをご用意しました。
2 ウェブ上で使えるフォントのみを採用する
Web上で使えるフォントは、基本的には、ほとんどのオペレーティングシステムで既定（あるいはプリインストール）されているフォントです。 それらは、Arial、Arial Black、Calibri、Comic Sans、Gadget、Helvetica、Palatino、Tahoma、Verdana、Trebuchet、Courier New、Lucida、Times New Roman、およびGeorgiaです。上記以外のフォントを使用する場合は、受信者のデバイスにプライマリフォントがインストールされていない場合に備えて、フォールバックフォントを含めるようにしましょう。
3 サイズを確認する
メールに画像を挿入するには大きなスペースを要します。サインは30KB以下でなければなりません。そのため、署名の画像をそのままは使用せず、TinyPNGなどのツールを使用して圧縮してください。それ以上のサイズであれば、自身の送信ボックスだけでなく、受信者の受信ボックスでも貴重なスペースを占有します。そのように無駄なデータが溜まると、サーバーの移行をする場合にかなりの時間を要する可能性があり、それはITにおける死活問題です。
4 レイアウトにはHTMLテーブルのみを使用する
何を言っているのだという声も聞こえてきそうですね。確かに、HTMLテーブルはレイアウト作成用のツールではありません。しかし電子メールの署名はできるのです。
Microsoft Officeを意識して設計する必要があるため、IE6とみなすことができるこのツールは最適だからです。フレックスボックスがないので、他に何も必要ありません！テーブルのみを使うのです。
5 画像のメタデータを削除する
DPIのようなメタデータを画像に残すと、受信者のWindowsコンピュータが125％の倍率でレンダリングするように設定されているなどの状況によっては、Outlookでサイズが変更されてしまうかもしれません。
6 行き詰ったらツールを使う
メールの署名を作るプログラムは多くあります。しかし、それらのほとんどは、柔軟性や互換性に乏しく、Webデザインツールキットと併用することは難しいでしょう。Gimmioは、設定を変更できるようにするもので、Webデザイナーのために特別に作られたものなので、クライアント用の署名を作成する場合に非常に便利です。
署名のテスト
最後に偉大なウェブサイトを作成したことを思い出してください。それはInternet Explorer 8に迫るほどのものですか？そんなたいそうなものを作れた経験、私にはありません。残念ながら、電子メールの署名を作る環境は非常に悪く、回避する方法は今のところありません。古いバージョンのOutlookを使用する人を止めることはできません。なので状況に応じてできるだけ上手く対応しましょう。署名をいつもきちんと表示するには、 IE6、IE7、そしてFirefox、Opera、Chromeの最初のバージョンで完璧に動作するWebサイトを作成することが方法はありません。
1 最もポピュラーな電子メールクライアントを最初にテストする
この情報源によると、2017年12月現在で最も人気のあるメールクライアントは、iPhone、Gmail、iPad、Apple Mail、Outlookです。トップ5のうち2つはモバイルであることがわかります。これについて次の項で見ていきましょう。
2.モバイルの互換性
携帯電話の画面はラップトップに比べ小さく、表示がおかしくなることがあります。例えば、モバイル画面では署名が潰れて見えなくなることがあります。これは、HTMLの外側の表が約300ピクセルより広いためです。そのため、縦型署名を使用すると、より快適なモバイルエクスペリエンスが実現する可能性が高いです。
また、現代の携帯電話ではスケーリングが使用されていることに注意してください。これにより、画質（ロゴやプロフィール写真など）は悪く、ぼやけて見えることがあります。詳細はこちらをご覧ください。
3. HTMLレンダリングエンジン
これを知ることは不可欠ではありませんが、問題のトラブルシューティングを行う際には間違いなく役立ちます。最も人気のある電子メールクライアントと、使用するレンダリングエンジンを次に示します。
Outlook 2007 – 2016 – Microsoft Wordレンダリングエンジン
Apple Mail（OSX＆iOS） – Webkitレンダリングエンジン
Thunderbird – Mozilla Geckoレンダリングエンジン
Mailbird – Chromium Rendering Engine
Gmail、Office 365、Yahoo Mail、その他のウェブメールサービス – ウェブブラウザのレンダリングエンジンを使用する
電子メール署名への対処は骨が折れるという理由を知ることができます。世界で最も人気のあるトップ5のメールクライアントは、3種類のHTMLレンダリングエンジンを使用しています。
電子メールクライアントのよくある問題
ここでは、電子メールクライアントとの互換性に関して最も多く話題になっているものをいくつか紹介します。私は電子メールクライアントごとに1に制限します。さもなければ、この記事はすぐにただのエッセイとなります。
Outlook
Outlookは、電子メールの署名内の画像のサイズを変更することが大きな特徴です。これによって、画像のメタデータ、特にDPIを最も簡単に削除することができます。
Gmail
Gmailには、画像の下に自動的に空欄が追加されるという既知の問題があります。あなたが私の「スペースを考慮すべき」というアドバイスを忘れたとしたら、あなたの署名は崩れてしまうかもしれません。私が知る限り、それを修正する方法はありません。何か対処をご存知の方がいらっしゃったらコメントで教えていただきたいです。
Apple Mail
ほとんどの場合、Apple Mailは電子メールの署名をとても綺麗に処理します。ここで最もよくある問題は、電子メールの署名をインストールするときに、署名プレビューウィンドウではぐちゃぐちゃに壊れて見えることです。ただし、新しいメッセージを作成する際には電子メールの署名はきちんとうまく表示されます。
サンダーバード
Thunderbirdを使用している人は多くはありませんが、これは言及する価値があります。 thunderbirdで電子メールの署名を使用すると、すべての表の周りに赤い点線の境界線が表示されるようです。
覚えておくべき2つのポイント
電子メールの署名を作成して電子メールにコピーする場合は、必ずGoogle ChromeまたはMozilla Firefoxを使用してコピーします。他のブラウザでは、すべてのHTMLテーブルが正しくコピーされないため、電子メールに貼り付けたときに壊れてしまいます。
普遍的に綺麗に表示される署名を作成することは不可能なため、ウェブサイトの設計と同じように完璧を求めないことが重要です。上記のポイントに従えば、かなりの確率で綺麗に表示されるでしょうが、完璧ではありません。したがって、それを事前にあなたの上司や顧客に伝えられることが重要です。不可能な要求や期待は断りましょう。
おすすめ新着記事
おすすめタグ