メール署名作成ツール

情報を入力し、HTMLのテーブルとインラインスタイルで組まれた署名をコピーしてください。中身は1999年のような書き方ですが、すべてのメールアプリが同意するマークアップはこれしかありません。プレビューは入力に合わせて更新され、何もアップロードされません。

あなたについて
連絡先
ロゴとSNSリンク

テキストリンク(Facebook · LinkedIn…)として表示されるので、メールソフトが画像をブロックしても見えます。

デザイン
アクセントカラー

何もアップロードされません。下書きはこのブラウザーにだけ保存され、ロゴはプレビューを描くためだけにそのURLから読み込みます。

あなたの署名

サンプル

メールの下にはこのように表示されます。入力するたびに描き直されます。

    HTMLソースを見る
    HTML

    メールソフトに追加する

    「署名をコピー」を押してから、お使いのメールソフトの説明にある場所に貼り付けてください(Ctrl+Vまたは⌘V)。

    Gmail in a browser
    1. Open the gear menu and choose See all settings.
    2. Stay on the General tab and go down to Signature. Press Create new and give it a name.
    3. Paste into the editing box, then select the signature under For new emails use and On reply/forward use.
    4. Press Save changes at the very bottom of the page.

    The Gmail phone app has its own plain-text mobile signature. Keep that one empty and the app uses this signature.

    Outlook on the web and the new Outlook for Windows
    1. Open the gear, then Account and Signatures.
    2. Press + New signature, type a name and paste into the box.
    3. Set it as the default for new messages and for replies, then press Save.
    Classic Outlook for Windows
    1. Go to File, Options, Mail, then Signatures…
    2. Press New, type a name and paste into the large editing box.
    3. Pick it in the New messages and Replies/forwards lists, then press OK.

    Logo too big? Right-click it in the editor, open Size and Position and type the width you chose on this page.

    Apple Mail on a Mac
    1. Open Mail, Settings, then the Signatures tab.
    2. Select the account, press + and type a name.
    3. Clear the Always match my default message font box, then paste into the right-hand pane.

    The settings window may draw a question mark where the logo goes. That is expected. The logo shows in the messages you send.

    iPhone and iPad
    1. Open this page on the device itself, fill in the fields and tap Copy the signature.
    2. Go to Settings, Apps, Mail, Signature (on older iOS versions: Settings, Mail) and paste.

    iOS keeps only some of the formatting, so the Compact template survives best. If the pasted result loses its formatting, shake the device and tap Undo to get the formatted version back.

    署名が崩れる理由

    ウェブページは、最新の標準に従うブラウザーで表示されます。メールは、受信者がたまたま使っているもので表示され、それらのプログラムはほとんど意見が一致しません。Windows版の従来のOutlookは、Microsoft Wordのエンジンでメッセージをレイアウトします。Gmailは安全でないとみなした内容からスタイルシートを取り除きます。署名を貼り付ける小さなエディターは、さらに多くを取り除きます。

    どこでも生き残るものは限られています。レイアウトには<table>、各要素に書いたstyle属性、普通のリンク、そしてwidthとheightを明示した画像です。このツールはそのリストだけを使います。文字はどの端末にもあるフォント(Arial、Verdana、Georgia)で14ピクセル、テーブルにはスクリーンリーダーがデータとして読み上げないようrole="presentation"を付け、ブロック全体の幅は最大600ピクセルです。

    各項目がどうなるか

    電話番号
    tel:リンクになり、スマートフォンでタップすると電話がかかります。10桁の番号は北米の番号とみなし、+1を付けます。それ以外の国は、+44 20 7946 0958のように+と国番号付きで入力してください。ext. 204やx204と入力した内線番号は、ポーズの後に付け加えます(tel:+14155550123,204)。7桁未満の番号は省きます。
    メールアドレスとウェブサイト
    アドレスがname@domain.tldの形ならmailto:リンクになります。ウェブサイトはリンクにhttps://を付け、表示ではhttps://とwww.を省きます。
    SNSのプロフィール
    URLから見つけたサービス名のテキストリンクになります。Facebook、Instagram、LinkedIn、YouTube、X、Bluesky、GitHubほか約10種類です。認識できないアドレスはホスト名を表示します。
    ロゴ
    入力したアドレスを指す<img>で、幅は40〜300ピクセルです。ツールは画像を一度読み込んで縦横比を調べ、対応するheightを書き込みます。Outlookは高さの指定がない画像を引き伸ばすからです。
    注記
    署名の下に、11ピクセルのグレーで機密保持や法的な一文を入れます。

    警告とその対処

    警告なぜ問題か
    アクセントカラーが白に対して4.5:1未満この色はリンクと会社名に使われます。このコントラスト比を下回ると、視力の弱い人には読みにくくなります。もっと濃い色を選んでください。
    埋め込みロゴ(data:)多くのメールアプリがブロックするか、毎回のメッセージで添付ファイルにしてしまいます。
    http://のロゴ安全なページ上で動くメールアプリは、安全でない画像を拒否します。
    SVGのロゴGmailとOutlookはSVGを表示しません。PNGかJPGで書き出してください。
    Googleドライブ、Dropbox、OneDrive上のロゴ共有リンクで開くのは閲覧用のページで、画像ファイルそのものではありません。
    ロゴが読み込まれないそのアドレスをプライベートウィンドウで開いてみてください。ログインなしで、画像だけが表示されるはずです。
    大きすぎる、または小さすぎる幅1,200ピクセルを超えると、毎回のメッセージが重くなります。表示幅より狭いとぼやけて見えます。表示幅の2倍を目安にしてください。

    レイアウトの選び方

    • ロゴを左にが標準です。アクセントカラーの縦線で区切った2列です。
    • クラシックはすべてを1列に積み、ロゴを最後に置きます。アプリがテーブルの列を崩してしまうときに一番持ちこたえます。
    • アクセントラインは色付きの横線で始まり、連絡先を1行にまとめます。
    • コンパクトはロゴなしの2行です。返信用や、書式をあまり保たないスマートフォンのメールアプリ向けです。

    新規メッセージ用のフル版と、返信用のコンパクト版の2つを使い分けている人も多くいます。決める前に「ダークモードでプレビュー」を押すと、署名がメールのダークモードプレビューに送られ、暗い背景でロゴと色が持ちこたえるか確認できます。

    このツールがしないこと

    ロゴを預かることはしないので、画像はすでに公開アドレスでオンラインにある必要があります。SNSのアイコンも描きませんが、これは意図的です。アイコン1つごとに、ブロックされうる外部画像が1つ増えるからです。特定のバージョンのOutlookでどう表示されるかは示せないので、署名を設定したら自分宛てにテストメールを送ってください。下書きはこのブラウザーにだけ保存されます。別の端末でページを開くと、フォームは空です。

    よくある質問

    GmailにHTML署名を追加するには?

    ここで「署名をコピー」を押します。Gmailで歯車メニューから「すべての設定を表示」、「全般」、「署名」と進み、新しい署名を作って貼り付けます。新規メール用と返信用の両方で選び、ページ下部で保存してください。

    ロゴが添付ファイルとして届くのはなぜですか?

    画像がメッセージに埋め込まれていたからです。その場合メールアプリは毎回そのファイルを一緒に送り、多くの受信者には添付ファイルとして見えます。ウェブサーバー上の画像にリンクすれば、問題はなくなります。

    署名のロゴはどのくらいの大きさにすべきですか?

    表示幅は100〜200ピクセルで、高解像度の画面でもくっきり見えるよう、ファイルはその約2倍の幅にします。ファイルサイズはおよそ50 KB未満に抑えてください。単色のロゴにはPNG、写真にはJPGが向いています。

    署名全体を1枚の画像にしてもいいですか?

    いいえ。多くのメールアプリは初期設定で画像をブロックし、スクリーンリーダーは読めず、ダークモードにも対応しません。画像の一部になった電話番号は、誰もタップもコピーもできません。本物のテキストを使い、画像はロゴだけにしましょう。

    ブランドのフォントは使えますか?

    確実には使えません。GmailとOutlookはウェブフォントを無視し、文字は標準のフォントで表示されます。Arial、Verdana、Georgiaはほぼすべての端末にあるので、署名はどこでも同じに見えます。

    返信だと署名の見た目が変わるのはなぜですか?

    返信をプレーンテキストに変換したり、返信先メッセージの書式を当てはめたりするアプリがあるからです。返信用にはコンパクトな署名を設定し、アプリがプレーンテキストではなくHTMLで作成する設定になっているか確認してください。