メール署名作成ツール — Gmail と Outlook 対応の HTML 署名
Gmail、Outlook、Apple Mail で崩れないプロ仕様の HTML メール署名を作り、ワンクリックでコピーできます。
HTML ソースを表示（3,016 文字）
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;font-family:Arial, Arial, Helvetica, sans-serif;font-size:13px;line-height:19px;color:#4b5563;"><tr><td valign="top" style="padding:0 16px 0 0;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;"><tr><td width="64" height="64" align="center" valign="middle" style="width:64px;height:64px;background:#244b3f;color:#ffffff;font-family:Arial, Arial, Helvetica, sans-serif;font-size:24px;font-weight:bold;text-align:center;border-radius:32px;">AM</td></tr></table></td><td width="1" style="width:1px;background:#244b3f;font-size:1px;line-height:1px;"> </td><td valign="top" style="padding:0 0 0 16px;font-family:Arial, Arial, Helvetica, sans-serif;font-size:13px;line-height:19px;color:#4b5563;"><div style="font-family:Arial, Arial, Helvetica, sans-serif;font-size:16px;line-height:20px;font-weight:bold;color:#111827;">Alex Morgan</div><div style="font-family:Arial, Arial, Helvetica, sans-serif;font-size:13px;line-height:18px;color:#244b3f;padding-top:2px;">マーケティング部長 <span style="color:#d1d5db;">|</span> Northwind Studio</div><div style="padding-top:8px;"><span style="color:#244b3f;font-weight:bold;">P</span> <a href="tel:+14165550142" style="color:#4b5563;text-decoration:none;">+1 (416) 555-0142</a><br><span style="color:#244b3f;font-weight:bold;">E</span> <a href="mailto:alex@northwind.example" style="color:#4b5563;text-decoration:none;">alex@northwind.example</a><br><span style="color:#244b3f;font-weight:bold;">W</span> <a href="https://www.northwind.example" style="color:#4b5563;text-decoration:none;">www.northwind.example</a><br><span style="color:#4b5563;">120 King St W, Toronto, ON</span></div><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="left" style="border-collapse:collapse;margin-top:8px;"><tr><td style="padding:0 4px 0 0;"><a href="https://linkedin.com/in/alexmorgan" title="LinkedIn" style="display:inline-block;background:#244b3f;color:#ffffff;font-family:Arial, Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;line-height:22px;width:24px;height:22px;text-align:center;text-decoration:none;border-radius:3px;">in</a></td><td style="padding:0 4px 0 0;"><a href="https://x.com/alexmorgan" title="X" style="display:inline-block;background:#244b3f;color:#ffffff;font-family:Arial, Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;line-height:22px;width:24px;height:22px;text-align:center;text-decoration:none;border-radius:3px;">X</a></td></tr></table><table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin-top:10px;"><tr><td style="background:#244b3f;padding:6px 12px;border-radius:3px;"><a href="https://northwind.example/book" style="color:#ffffff;font-family:Arial, Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;text-decoration:none;">20 分の通話を予約する</a></td></tr></table></td></tr></table>
設定方法
- 上の「署名をコピー」をクリックします。
- Gmail で 設定（歯車アイコン）→「すべての設定を表示」→「全般」を開きます。
- 「署名」までスクロールし、「新規作成」をクリックして名前を付け、ボックスに貼り付けます（Ctrl/Cmd+V）。
- 「署名のデフォルト設定」で新規メールと返信に使う署名として選び、下部の「変更を保存」をクリックします。
- Gmail の署名は 10,000 文字までで、画像は公開された https:// URL から読み込むものしか表示されません。
チーム全員の署名（CSV）
ヘッダー行付きの CSV をアップロードします：name、title、email、phone、mobile、linkedin、x、github、photo（URL）。各行が、上で選んだテンプレートと色でそれぞれの署名になります。会社名、Web サイト、住所、ロゴ、ボタン、免責事項は、CSV に専用の列がない限りフォームの内容を使います。最大 500 人まで。
入力した情報はブラウザ内にとどまります。署名はこのページ上で作成され、アップロードも保存もされません。画像は入力した URL から読み込まれます。 すべての無料ツールを見る.
不具合や改善できそうな点を見つけましたか？いただいたメッセージはすべて読み、すぐに対応します。
このメール署名作成ツールは、名前、役職、連絡先、写真やロゴ、SNS リンク、ブランドカラーから署名を作り、6 種類のテンプレートでリアルタイムに表示して、実際に使われているメールクライアントでも崩れない HTML を出力します。「署名をコピー」をクリックして Gmail や Outlook の署名欄に貼り付ければ、レイアウトはそのまま保たれます。
メールクライアントは Web ブラウザではありません。Windows の従来版 Outlook は Microsoft Word で HTML を描画し、Gmail は style ブロックや CSS クラスを取り除き、ほとんどのクライアントは公開された https:// アドレスにない画像をブロックします。そのため、ここでの出力は入れ子のテーブルとインラインスタイルだけを使い、Web セーフフォントと明示的な画像サイズを指定しています。できないのは画像のホスティングです。写真やロゴはすでにオンライン上にある必要があり、ローカルのファイルを指定するとその理由をページで説明します。チーム全員分を作るなら、社員の名前、役職、電話番号の CSV をアップロードすれば、同じテンプレートとブランドカラーで 1 人 1 つずつ HTML 署名をダウンロードできます。
使い方
- 自分の情報を入力します。空欄の項目は署名から完全に省かれます。
- ホスティングされた写真やロゴの https:// URL を貼り付けるか、両方とも空欄にしてイニシャルのタイルを使います。
- テンプレートとブランドカラーを選び、必要に応じて SNS リンク、ボタン、免責事項を追加します。
- 「署名をコピー」をクリックし、メールクライアントの署名設定に貼り付けます。クライアントごとの設定手順はプレビューの下にあります。
- 自分宛てにテストメールを送り、パソコンだけでなくスマートフォンでも確認します。
よくある質問
Gmail に HTML 署名を追加するには？
このページで「署名をコピー」をクリックし、Gmail で「設定」→「すべての設定を表示」→「全般」を開いて「署名」までスクロールし、「新規作成」をクリックしてボックスに貼り付けます。「署名のデフォルト」で選択し、ページ下部の「変更を保存」をクリックします。HTML のソースコードは貼り付けないでください。Gmail のエディターが受け付けるのは描画された署名だけで、コピーボタンがクリップボードに入れるのはそちらです。
署名の画像が表示されないのはなぜですか？
たいていは、画像が公開された https:// URL にないためです。Gmail は署名から base64（data:）画像を取り除き、Outlook は受信者が許可するまで多くの外部画像をブロックし、http:// やログインが必要な場所にある画像はどこでも表示されません。画像は自社サイトや CDN でホスティングして https:// のリンクを使い、サイズは小さく（約 100 KB 未満）しましょう。
Outlook で署名の見た目が変わるのはなぜですか？
Windows の従来版 Outlook はメールの描画に Word を使っており、角丸を含む多くの CSS プロパティを無視するため、丸い写真が四角く表示されたり、余白がわずかにずれたりします。このツールは Word が無視するレイアウト用 CSS を避け、テーブルを使っているので、構造は崩れません。新しい Outlook と Outlook on the web は、よりブラウザに近い描画をします。
メール署名の写真やロゴのサイズはどのくらいにすべきですか？
表示は幅 80〜120 px 程度にし、高密度ディスプレイでもくっきり見えるよう、その 2 倍のサイズの画像をアップロードします（たとえば 88 px の写真なら 176×176 px）。ファイルサイズは 100 KB 未満に抑えます。単色のロゴには PNG、写真には JPG を使います。
メール署名はどのくらいの長さにできますか？
Gmail の署名の上限は HTML で 10,000 文字で、このツールの出力はそれを大きく下回ります。実際には 4〜5 行に収めましょう。名前、役職と会社名、連絡手段を 1〜2 つ、CTA は多くても 1 つです。長い署名は返信で切り詰められ、スマートフォンでは本文を画面の下へ押しやってしまいます。
メール署名で実際に機能するもの
• レイアウトにはテーブルを使い、flexbox や grid の div は使わない。Windows 版 Outlook は最新の CSS レイアウトを無視します。
• すべての要素にインラインスタイルを指定する。Gmail は署名から <style> ブロックとクラス名を取り除きます。
• Web セーフフォント（Arial、Helvetica、Verdana、Georgia）を使う。カスタムの Web フォントは Outlook では Times New Roman に置き換わります。
• ホスティングした画像に width と height 属性を付ける。サイズを明示しないと、Outlook がロゴを元の大きさのまま表示することがあります。
• 電話番号、メールアドレス、リンクは画像ではなくテキストにする。クリックでき、画像がオフでも読め、スクリーンリーダーでも利用できます。
SNS アイコンはよくある落とし穴です。アイコンごとにホスティングが必要な画像が増え、多くの受信トレイでは初期設定でブロックされます。ここのテンプレートは代わりに小さな色付きのテキストバッジを使っているので、どこでも表示されます。
テンプレートの選び方
クラシックとモダンは、ほとんどのビジネス用途に合います。写真やロゴが情報の横に並びます。コンパクトは、返信が多く、すべてのメッセージの下に大きなブロックを付けたくない人向けです。中央揃えは、署名がブランドの一部になるクリエイティブ職に向いています。バナーはブランドカラーをより強調します。テキストのみは画像や色付きのブロックが一切ないので、プレーンテキストのクライアント、メーリングリスト、サポート窓口に最も安全な選択です。
どれを選ぶにしても、チーム内では同じテンプレートを使いましょう。統一された署名は意図的に見えますが、スタイルがばらばらだと、誰もブランドを管理していないように見えます。
法的な免責事項とトラッキングリンク
地域によっては、ビジネスメールに会社情報を記載することが義務付けられています。英国では、有限会社は登記上の名称、登記番号、登記上の事務所の住所を表示する必要があり、ドイツでは Impressum（インプレッサム）の規則が同様の情報を対象としています。機密保持の免責事項はそれ自体ではほとんど法的効力がないので、使う場合は短くしましょう。
CTA ボタンやランディングページへのリンクを追加する場合は、UTM パラメーターを付けましょう（当サイトの UTM ビルダーでリンクを作れます）。そうすればクリックがダイレクトトラフィックではなく「email signature」としてアクセス解析に表示されます。
関連する無料ツール
- スパムワードチェッカー — メールの件名と本文を貼り付けると、迷惑メールと判定されやすいフレーズ、大文字の多用、リンクや画像の問題、配信停止の欠落を見つけます。
- メール件名テスター — 件名を長さ、スパムを誘発する語句、大文字、句読点で採点し、iPhone や Gmail でどこで切れるかをプレビューできます。
- QR コード作成 — URL、テキスト、メール、電話、SMS、Wi-Fi、連絡先の QR コードを好きな色で作成し、PNG または SVG でダウンロード。コードに有効期限はありません。
- UTM リンク作成 — きれいで一貫した UTM トラッキングリンクを作成し、どのキャンペーンが顧客を連れてきたのかを正確に把握できます。