メール署名ジェネレーター — 無料プロフェッショナルツール

アカウント登録不要・データ送信なし。情報を入力してテンプレートを選ぶだけで、プロフェッショナルなメール署名をすぐに作成できます。生成されたHTMLをGmail・Outlook・Apple Mailにそのまま貼り付けて使用してください。

署名情報を入力

  <div class="sa-field">
    <label>氏名</label>
    <input type="text" id="sa-name" placeholder="山田 太郎" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>役職</label>
    <input type="text" id="sa-title" placeholder="シニアプロダクトデザイナー" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>会社名</label>
    <input type="text" id="sa-company" placeholder="株式会社〇〇" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>電話番号</label>
    <input type="text" id="sa-phone" placeholder="03-0000-0000" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>メールアドレス</label>
    <input type="email" id="sa-email" placeholder="taro@example.co.jp" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>ウェブサイト</label>
    <input type="text" id="sa-website" placeholder="https://example.co.jp" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>LinkedIn URL</label>
    <input type="text" id="sa-linkedin" placeholder="https://linkedin.com/in/taro-yamada" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>Twitter / X アカウント</label>
    <input type="text" id="sa-twitter" placeholder="@taro_yamada" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>GitHub ユーザー名</label>
    <input type="text" id="sa-github" placeholder="taro-yamada" oninput="saRender()">
  </div>
</div>

<div class="sa-panel" style="margin-top:20px;">
  <h2>スタイル設定</h2>

  <div class="sa-field">
    <label>レイアウト</label>
    <select id="sa-layout" onchange="saRender()">
      <option value="horizontal">横並び（写真左・テキスト右）</option>
      <option value="vertical">縦並び（積み重ね）</option>
    </select>
  </div>

  <div class="sa-field">
    <label>カラーテーマ</label>
    <div class="sa-swatches" id="sa-swatches">
      <span class="sa-swatch active" data-color="#6366f1" style="background:#6366f1" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#0ea5e9" style="background:#0ea5e9" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#10b981" style="background:#10b981" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#f59e0b" style="background:#f59e0b" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#ef4444" style="background:#ef4444" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#8b5cf6" style="background:#8b5cf6" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#1e293b" style="background:#1e293b" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#64748b" style="background:#64748b" onclick="saPick(this)"></span>
    </div>
  </div>

  <div class="sa-field">
    <label>フォント</label>
    <select id="sa-font" onchange="saRender()">
      <option value="Arial, Helvetica, sans-serif">Arial（標準・安全）</option>
      <option value="Georgia, serif">Georgia（クラシック）</option>
      <option value="'Courier New', monospace">Courier New（開発者向け）</option>
      <option value="Verdana, Geneva, sans-serif">Verdana</option>
      <option value="Trebuchet MS, sans-serif">Trebuchet MS</option>
    </select>
  </div>

  <div class="sa-field">
    <label>区切り線のスタイル</label>
    <select id="sa-sep" onchange="saRender()">
      <option value="solid">実線</option>
      <option value="dashed">破線</option>
      <option value="dotted">点線</option>
      <option value="none">なし</option>
    </select>
  </div>

  <div class="sa-field">
    <label>写真プレースホルダー</label>
    <select id="sa-photo" onchange="saRender()">
      <option value="circle">円形アバター</option>
      <option value="square">正方形アバター</option>
      <option value="none">なし</option>
    </select>
  </div>
</div>

テンプレート

  <div class="sa-preview-label">ライブプレビュー</div>
  <div class="sa-preview-wrap">
    <div id="sa-preview"></div>
  </div>

  <div class="sa-actions">
    <button class="sa-btn sa-btn-primary" onclick="saCopyHTML()">HTMLをコピー</button>
    <button class="sa-btn sa-btn-secondary" onclick="saToggleCode()">HTMLを表示</button>
    <button class="sa-btn sa-btn-secondary" onclick="saReset()">リセット</button>
  </div>
  <span class="sa-toast" id="sa-toast">クリップボードにコピーしました！</span>
  <textarea class="sa-html-out" id="sa-html-out" readonly></textarea>
</div>

メールクライアントへの設置方法

Gmail への設置手順

上の「HTMLをコピー」ボタンをクリックします。
Gmailを開き、右上の歯車アイコン → 「すべての設定を表示」をクリック。
「全般」タブを開き、「署名」セクションまでスクロールして「新規作成」をクリック。
署名名を入力（例：「ビジネス用」）し、署名入力欄の中をクリック。
ツールバー内の「⋮ その他のオプション」→「HTMLとして編集」を選択。
コピーしたHTMLを貼り付けて「OK」をクリック。
ページ下部の「変更を保存」をクリックして完了。

Outlook（Windows・Mac）への設置手順

上の「HTMLをコピー」ボタンをクリックします。
Outlookで「新しいメール」を開く。
「挿入」→「署名」→「署名…」を選択。
「新規」をクリックして名前を付け、編集エリアをクリック。
メモ帳にHTMLを貼り付けて sig.htm として保存。
Outlook署名エディターの「ソース / HTML」ボタンからHTMLを貼り付けるか、保存した .htm ファイルをドラッグ。
「OK」をクリックし、必要に応じてデフォルト署名として設定して完了。

Apple Mail（macOS）への設置手順

上の「HTMLをコピー」ボタンをクリックします。
「メール」→「設定」→「署名」を開く。
アカウントを選択して「+」で新しい署名を追加。
署名本文に仮のテキスト（例：「x」）を入力してメールを終了。
ターミナルを開いて open ~/Library/Mail を実行。
「V10（またはご使用のバージョン）→ アカウントフォルダ → Data → Signatures」に移動。
.mailsignature ファイルをテキストエディターで開き、仮テキスト部分をコピーしたHTMLに置き換えて保存。
メールを再起動して完了。

freee で請求書・経費管理もスマートに

メール署名が整ったら、次は業務効率化。freee の無料プランで請求書作成・経費精算・確定申告をまとめて管理できます。

freee を無料で試す

メール署名をより効果的にするコツ

情報は簡潔に。 4〜6行を目安にしましょう。情報が多すぎると読まれにくくなり、かえって印象が薄れます。

メール安全フォントを使う。 このツールはArial・Georgia・Verdanaなどのウェブセーフフォントをデフォルトとしており、外部フォントの読み込みなしにあらゆるメールクライアントで正しく表示されます。

画像は控えめに。 多くのメールクライアントはデフォルトで画像をブロックします。ロゴを使う場合は安定したURLにホストした <img> タグを利用してください。生成されたHTMLに手動で追加するのが最も確実です。

送信前にテスト。 署名を設定したら、まず自分宛にテストメールを送り、モバイルとデスクトップ両方で表示を確認しましょう。

定期的に更新。 役職や連絡先が変わった際は忘れずに署名も更新してください。常に正確な情報を相手に届けることが信頼の基本です。

メール署名ジェネレーター — 無料プロフェッショナルツール

署名情報を入力

テンプレート

メール署名をより効果的にするコツ

関連ツール

関連記事

署名情報を入力

テンプレート

関連する無料ツール

メール署名をより効果的にするコツ#

関連ツール#

関連記事#

メール署名をより効果的にするコツ

関連ツール

関連記事