Yahoo!（Webメール）用のHTMLメール署名のエクスポートとインストール

EmailifyにはHTML署名のエクスポートオプションがあり、コピー＆ペーストしてYahoo!（Webメール）で使用できます。

メール署名には、HTMLで10,000文字までというサイズの上限があります。 署名をエクスポートしたあと、上限を超えている場合はプラグインで警告が表示されます。上限を超えないようにするには、EmailifyプラグインのFooterタブにあるSignatureスターターコンポーネントを活用してください。

残念ながら、「HTML Email Signature」のエクスポートでは、レスポンシブなモバイル用の上書き設定は反映されません。メールクライアントがCSSのstyleタグや@mediaクエリを取り除いてしまうためです（そのため、コードのエクスポートにも含まれません）。元のデザインの段階で、デスクトップとモバイルのどちらの幅でもきれいに見えるようバランスを取ることをおすすめします。

動画チュートリアル：FigmaからHTMLメール署名をデザインしてエクスポートする

この動画では、Emailifyプラグインを使い、 本番用のレスポンシブなHTMLメールをFigmaから デザインしてエクスポートする方法を紹介します。

EmailifyからHTML署名をエクスポートする ​

EmailifyプラグインでExport HTMLボタンをクリックしてエクスポートパネルを開き、ドロップダウンリストからHTML Email Signatureを選択します。次にExport to HTML Signatureボタンをクリックすると、Figmaで選択したメールのHTMLエクスポートが始まります。

Emailifyでメールの処理が終わると、確認メッセージが表示されます。Download your .zip fileボタンをクリックして.zipファイルをパソコンにダウンロードし、.zipを解凍すると、エクスポートしたファイルを確認できます。

HTMLメール署名をクリップボードにコピーする ​

EmailifyからHTMLメール署名をエクスポートして.zipファイルを解凍したら、preview-and-install.htmlファイルをGoogle Chromeで開きます（Safariなどほかのブラウザでは問題が起きることがあります）。プレビューページでCopy HTML Signatureボタンをクリックすると、HTML署名の内容がクリップボードに自動でコピーされます。

メールクライアントによっては、「生の」HTMLコードが必要な場合があります。その場合は、preview-and-install.htmlファイルのCopy HTML Signature (Raw Code) ボタンをクリックすると、生のHTMLとしてクリップボードにコピーできます。

HTMLをクリップボードにコピーしたら、以下の手順（SignatureHoundの優れたガイドを元にしています）に沿って、メールクライアントに署名をインストールできます。

Yahoo!（Webメール）にHTMLメール署名をインストールする方法 ​

残念ながら、Yahoo!メールは署名内の画像をその場で調整しており、この動作は当社では制御できません。 下記の表示に関する問題の詳細を必ずお読みください。

Yahoo!（Webメール）のアイコン

  1. Yahooアカウントにログインしたら、右上の設定（歯車）アイコンをクリックします。

  2. ドロップダウンが開いたらMore Settingsをクリックします。

  3. 設定のオプションからWriting Emailをクリックします。

  4. 中央の列の下部にある + ボタンをクリックします。

  5. 署名エディターに新しいメール署名をコピー＆ペーストします。

現在、Chromeのコピー＆ペーストの処理方法に不具合があり、署名のリンクに下線が表示されてしまいます。この問題を解決するには、Mozilla Firefoxなどの別のブラウザで署名のインストール手順を完了してください。別のブラウザでメール署名を設定したあとは、Chromeを使い続けてかまいません。

右側のプレビューに署名が表示されない場合は、署名エディターのテキストカーソルをペインの一番上に移動し、Enterキーを押してください。

Yahoo!（Webメール）の設定画面のスクリーンショット
  1. 署名は自動で保存されます。設定ページを閉じて新しいメールを作成すれば、新しい署名をお使いいただけます！
Yahoo!（Webメール）にインストールされた署名のスクリーンショット

Yahoo!メールの画像の拡大縮小による表示の問題に関する重要な情報 ​

残念ながら、Yahoo!メールは署名内の画像をその場で調整しており、この動作は当社では制御できません。画像が元のサイズから縮小されている場合、一部のメールクライアントで表示の問題が起きることがあります。

次の画像が縮小されることを確認しています。

  • プロフィール画像（400px → 100px）
  • ロゴ（600px → 150px）

Yahoo!メールのプレビューでは署名が問題なく見えても、Outlook 2019などのMicrosoft製のメールクライアントを使っている受信者には、画像が元のサイズで表示される可能性が高いです（下の例を参照）。

Yahoo!（Webメール）から送信したメールをMS Outlookで表示したスクリーンショット

Windowsのメールクライアントを使っている受信者に署名を送信して、テストしてください。問題が起きている場合は、署名に表示されるサイズとまったく同じサイズで画像をアップロードする（縮小しない）ことで解決できます。画像のサイズを適切に変更するには、無料のオンラインサービス（またはFigma）を利用できます。

サイズを変更すると、Windowsのメールクライアントでは画像が正しく表示されますが、タブレット、スマートフォン、その他の高解像度の画面では少しぼやけて見えます。この点を妥協できない場合は、別のメールクライアントを使うことをおすすめします。