email-design

Name: email-design
Author: arnavpuri

github.com/arnavpuriデザイン・UI17108 回インストール5 週間前に更新

リポジトリ

email-design について

email-design は、レイアウト、スタイル、アクセシビリティ、到達性の制約を扱うメール HTML 作成スキルです。開発者やデザイナーが一般的なメールテンプレートを作成し、各画面幅やメールクライアントでの表示を確認できます。

主な機能

01テーブルベースのレスポンシブメールレイアウト
02インラインスタイルと Outlook 向け修正
03タイポグラフィ、画像、ボタンの指針
04一般的なメール形式のテンプレート
05表示、サイズ、クライアントの確認

活用シーン

01レスポンシブなニュースレターテンプレートの作成
02Outlook 対応のトランザクションメールの構築
03画像のアクセシビリティとメールサイズの確認
04画面幅やテーマを変えてメールを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/arnavpuri/designskills --skill email-design

インストール後、Claude Code で/email-designを入力して読み込まれたか確認します。

詳細

メールデザイン

はじめる前に：デザインコンテキストを読み込む

.agents/design-context.md を読みます（design-context スキルによって作成されます）。ファイルがない場合は、tailwind.config.* または :root の CSS 変数を確認します。どちらにも見つからない場合は、デフォルト（Primary #2563EB、Secondary #7C3AED、Accent #F59E0B、Tailwind のグレーニュートラル、見出しと本文に Inter、ミニマルスタイル）を使用し、デフォルトを使用したことをユーザーに伝えます — design-context の実行を提案してください。
16 進数値をインラインで指定します — メールクライアントは CSS 変数をサポートしていません。ボタンとリンクには Primary、見出し・本文・控えめなテキストには Neutral 900/800/500、外側の背景には Neutral 50/100 を使用し、各 Web セーフフォントスタック（セクション 5）ではブランドの見出し／本文フォントを先頭に配置します。以下の #4F46E5 のような 16 進数値はプレースホルダーです。
Figma： ユーザーから Figma の URL が提供された場合は、Figma MCP（get_design_context、get_screenshot）を使って取得し、デザインを合わせます。そのデザインではコンテキストファイルよりも優先されます。
メールの種類（ウェルカム、ニュースレター、プロモーション、トランザクション）と ESP を確認します（独自のマージタグやテンプレート構文が必要な場合があります）。

1. 基本的な制約

メールの HTML は Web の HTML とは異なります。以下の制約は必ず守ってください。

ルール	理由
テーブルベースのレイアウト	Windows 版 Outlook（Word レンダリングエンジン）は、flexbox、grid、`max-width`、信頼性の高い `float` をサポートしていません
インライン CSS	一部のクライアントでは `<style>` が削除されたり、一部無視されたりします（Google アカウント以外の Gmail、多くの Web メール／旧バージョンのクライアント）。`<style>` はメディアクエリとダークモードに限って使用してください
JavaScript を使わない	すべてのメールクライアントで削除されます
外部 CSS を使わない	一部のクライアントは外部リソースをブロックします
最大幅 600px	標準的なメールクライアントのビューポート（600〜640px）
HTML は約 100KB 未満	Gmail は 102KB を超えるメッセージをクリップします — コンテンツ、配信停止リンク、開封トラッキングピクセルが「メッセージ全体を表示」の背後に隠れます
Web セーフフォント	カスタムフォントにはフォールバックが必要です
すべての画像に代替テキストを付ける	画像はデフォルトでブロックされることがよくあります
CSS 変数を使わない	ほとんどのメールクライアントでサポートされていません
パディングは `<a>`／`<p>`／`<div>` ではなく `<td>` に設定する	Outlook デスクトップでは、多くの要素のパディング／マージンに加え、`border-radius`、背景画像（VML を使わない場合）、`rgba()` の色が無視されます

2. 基本的なメール構造

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="color-scheme" content="light dark" />
  <meta name="supported-color-schemes" content="light dark" />
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no" />
  <title>Email Subject Line</title>

  

  <style>
    :root { color-scheme: light dark; supported-color-schemes: light dark; }
    /* Reset styles */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%;
      outline: none; text-decoration: none; }
    body { margin: 0; padding: 0; width: 100% !important; height: 100% !important; }

    /* Responsive styles */
    @media only screen and (max-width: 620px) {
      .email-container { width: 100% !important; max-width: 100% !important; }
      .fluid { max-width: 100% !important; height: auto !important; }
      .stack-column { display: block !important; width: 100% !important; }
      .stack-column-center { text-align: center !important; }
      .center-on-narrow { text-align: center !important; display: block !important;
        margin-left: auto !important; margin-right: auto !important; float: none !important; }
      table.center-on-narrow { display: inline-block !important; }
      .hide-on-mobile { display: none !important; }
      .padding-mobile { padding: 20px !important; }
    }

    /* Dark mode: Apple Mail, iOS Mail, Outlook for Mac/iOS/Android, some others */
    @media (prefers-color-scheme: dark) {
      .email-bg { background-color: #121212 !important; }
      .dark-bg { background-color: #1e1e1e !important; }
      .dark-text { color: #e6e6e6 !important; }
      .dark-text-secondary { color: #b3b3b3 !important; }
      h1, h2, h3 { color: #f2f2f2 !important; }
    }
    /* Outlook.com / Outlook apps: [data-ogsb] = backgrounds, [data-ogsc] = text colors */
    [data-ogsb] .email-bg { background-color: #121212 !important; }
    [data-ogsb] .dark-bg { background-color: #1e1e1e !important; }
    [data-ogsc] .dark-text { color: #e6e6e6 !important; }
    [data-ogsc] .dark-text-secondary { color: #b3b3b3 !important; }
  </style>
</head>

<body style="margin: 0; padding: 0; background-color: #f4f4f7; font-family: -apple-system,
  BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;"
  class="email-bg">
  <div role="article" aria-roledescription="email" aria-label="Email Subject Line" lang="en">

  
  <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0;
    max-width: 0; opacity: 0; overflow: hidden; mso-hide: all;">
    Your preview text goes here. Keep it under 100 characters.
    &#847; &#847; &#847; 
  </div>

  
  <table role="presentation" cellpadding="0" cellspacing="0" border="0"
    width="100%" style="background-color: #f4f4f7;" class="email-bg">
    <tr>
      <td align="center" style="padding: 20px 0;">

        
        <table role="presentation" cellpadding="0" cellspacing="0" border="0"
          width="600" class="email-container dark-bg"
          style="max-width: 600px; width: 100%; background-color: #ffffff; border-radius: 8px;
            overflow: hidden;">

          
          
          
          
          

        </table>

      </td>
    </tr>
  </table>
  </div>
</body>
</html>

3. MSO 条件付きコメント（Outlook）

Windows 版の従来の Outlook（2007〜2021、365 デスクトップ）は Microsoft Word でレンダリングされます。Windows 版の「新しい Outlook」と Outlook.com はブラウザーエンジンを使用しますが、従来の Outlook も広く使われているため、引き続きサポートしてください。Word エンジン向けの修正には MSO 条件文を使用します。

よく使われる MSO の修正：[if mso] のスタイルブロックで border-collapse: collapse と明示的な幅を指定します。Outlook で角丸ボタンを表示するには、arcsize、fillcolor、テキスト用の <center> を使った VML の <v:roundrect> を、[if mso]／[if !mso] 条件文で囲み、標準の <a> をフォールバックとして用意します。

4. レスポンシブメール（フルイドハイブリッド方式）

フルイドハイブリッド方式は、メディアクエリに対応していないクライアントでも機能します。

2 カラムレイアウト



<div style="display: inline-block; width: 100%; max-width: 290px; vertical-align: top;"
  class="stack-column">
  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
      <td style="padding: 20px;">
        <h2 style="margin: 0; font-size: 20px; color: #1a1a2e;">Column 1</h2>
        <p style="margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #555;">
          Content for the first column.
        </p>
      </td>
    </tr>
  </table>
</div>



<div style="display: inline-block; width: 100%; max-width: 290px; vertical-align: top;"
  class="stack-column">
  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
      <td style="padding: 20px;">
        <h2 style="margin: 0; font-size: 20px; color: #1a1a2e;">Column 2</h2>
        <p style="margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #555;">
          Content for the second column.
        </p>
      </td>
    </tr>
  </table>
</div>

5. メールのタイポグラフィ

Web セーフフォントスタック

デザインコンテキストのフォントを先頭に置き、その後に Web セーフフォントのフォールバックスタックを指定します。

サンセリフ： 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
セリフ： Georgia, 'Times New Roman', Times, serif · 等幅： 'Courier New', Courier, monospace

Web フォントの読み込み（対応は限定的）

Gmail と Outlook は Web フォントを無視します。従来の Outlook では、先頭のフォントがインストールされていない場合、Times New Roman にフォールバックします — `` を追加してください。対応している環境（Apple Mail、iOS Mail、Samsung Mail、Thunderbird）では、<head> に読み込みます：<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">。

メールのタイポグラフィスケール

要素	サイズ	ウェイト	行の高さ
H1（ヒーロー）	28–32px	700	1.2
H2（セクション）	22–24px	700	1.25
H3（サブセクション）	18–20px	600	1.3
本文	15–16px	400	1.5
小さい文字／キャプション	13px	400	1.4

ルール

本文の最小フォントサイズは14pxです（一部のクライアントで強制されます）。
メールではremやemではなくpxを使用します。
line-heightはpxではなく倍率で指定します。
テキスト要素には必ずcolorをインラインで指定します。

6. どのクライアントでも使えるボタン

Outlookを含む、すべてのメールクライアントで機能するボタンです。

方法：パディングベース（最適）

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="border-radius: 8px; background-color: #4F46E5; mso-padding-alt: 14px 32px;"
      class="button-bg">
      <a href="https://example.com" target="_blank"
        style="display: inline-block; padding: 14px 32px; background-color: #4F46E5; font-size: 16px;
          font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, sans-serif; color: #ffffff; text-decoration: none;
          border-radius: 8px;">
        Get Started Free
      </a>
    </td>
  </tr>
</table>

ボタンのルール

最小サイズは高さ44px、幅150px以上です。
固定幅ではなく、パディングを指定したdisplay: inline-blockを使用します。
<td>と<a>の両方にbackground-colorを指定します。Outlookでは<a>のパディングが無視されるため、<td>にmso-padding-altを指定してボタンのサイズを復元します（Outlookではテキスト部分のみクリックできます）。
border-radiusはほとんどのクライアントで機能しますが、従来のOutlookでは機能しません（その場合、角は四角になります）。
Outlookで角丸ボタンを使うには、VMLを使用します（セクション3を参照）。

7. メールのセクションテンプレート

ヘッダー

<tr>
  <td style="padding: 24px 32px; text-align: center;">
    <img src="https://example.com/logo.png" alt="Company Name"
      width="120" style="display: block; margin: 0 auto;" />
  </td>
</tr>

ヒーローセクション

<tr>
  <td style="padding: 40px 32px; text-align: center; background-color: #4F46E5;"
    class="padding-mobile">
    <h1 style="margin: 0; font-size: 30px; font-weight: 700; color: #ffffff;
      line-height: 1.2;">
      Welcome to Our Platform
    </h1>
    
    <p style="margin: 16px 0 0; font-size: 16px; color: #E0E7FF;
      line-height: 1.5;">
      You're all set to start building amazing things.
    </p>
    
  </td>
</tr>

コンテンツブロック

<tr>
  <td style="padding: 32px;" class="padding-mobile">
    <h2 style="margin: 0; font-size: 22px; font-weight: 700; color: #1a1a2e;
      line-height: 1.25;" class="dark-text">
      What's inside
    </h2>
    <p style="margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #555;"
      class="dark-text-secondary">
      Here's what you can do to get started with your account.
    </p>
  </td>
</tr>

特徴の行（アイコン＋テキスト）

<tr>
  <td style="padding: 0 32px 24px;" class="padding-mobile">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td width="48" valign="top" style="padding-right: 16px;">
          <img src="https://example.com/icon-check.png" alt="" width="40" height="40"
            style="display: block;" />
        </td>
        <td valign="top">
          <h3 style="margin: 0; font-size: 16px; font-weight: 600; color: #1a1a2e;">
            Quick Setup
          </h3>
          <p style="margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #666;">
            Get up and running in less than 5 minutes.
          </p>
        </td>
      </tr>
    </table>
  </td>
</tr>

フッター

<tr>
  <td style="padding: 24px 32px; text-align: center; border-top: 1px solid #e5e7eb;">
    
    <table role="presentation" cellpadding="0" cellspacing="0" border="0"
      style="margin: 0 auto;">
      <tr>
        <td style="padding: 0 8px;">
          <a href="#"><img src="https://example.com/icon-twitter.png" alt="Twitter"
            width="24" height="24" /></a>
        </td>
        <td style="padding: 0 8px;">
          <a href="#"><img src="https://example.com/icon-linkedin.png" alt="LinkedIn"
            width="24" height="24" /></a>
        </td>
      </tr>
    </table>
    
    
    <p style="margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #6b6b6b;">
      Company Name, 123 Street, City, State 12345<br />
      <a href="#" style="color: #6b6b6b; text-decoration: underline;">Unsubscribe</a>
      &nbsp;|&nbsp;
      <a href="#" style="color: #6b6b6b; text-decoration: underline;">Manage preferences</a>
    </p>
  </td>
</tr>

8. ダークモードのメールに関する考慮事項

基本構造（セクション2）には、必要な要素がすでに含まれています。color-scheme／supported-color-schemesのメタタグと:rootルール、prefers-color-scheme: darkブロック、Outlook.comとOutlookアプリ用の[data-ogsb]／[data-ogsc]オーバーライドです。

クライアントの動作

クライアント	動作	制御できる内容
Apple Mail、iOS Mail、Outlook Mac	`prefers-color-scheme`に対応	ダークパレットを全面的にカスタマイズできます
Outlook.com、Outlook iOS/Android	自動反転は部分的です	`[data-ogsb]`／`[data-ogsc]`オーバーライド
Gmailアプリ（iOS/Android）	強制反転は全面的または部分的です	なし — 反転に耐えられるデザインにします

純粋な#000／#fffの組み合わせは避けます。中程度に暗い背景（#121212～#1e1e1e）とオフホワイトのテキストなら、より自然に反転されます。
ブランドカラーを使ったボタンは、<td>のbackground-colorとして指定します。そうすれば、反転によってテキストが読めなくなるのを防げます。

画像の扱い

可能であれば、透過PNGを使用します（どのような背景にもなじみます）。
暗い背景でも見えるよう、暗いロゴには白い輪郭線や光彩を追加します。
画像がブロックされた状態でもテストします。代替テキストでメッセージが伝わるようにします。

9. 画像の最適化

ルール

ガイドライン	値
画像1枚あたりの最大ファイルサイズ	200KB
メール全体のサイズ	HTMLは102KB未満（Gmailのクリッピング対策。80KB未満を目指します）＋画像は約1MB未満
フォーマット	グラフィックにはPNG、写真にはJPEG
Retina	2倍のサイズで提供し、`width`属性は1倍のサイズに設定します
代替テキスト	必ず指定します。フォールバック用の代替テキストにもスタイルを設定します。

Retina画像


<img src="https://example.com/hero-1200.jpg" alt="Product showcase"
  width="600" style="display: block; width: 100%; max-width: 600px; height: auto;" />

スタイル付きの代替テキスト

<img src="https://example.com/hero.jpg"
  alt="Spring Sale: 40% off everything"
  width="600"
  style="display: block; width: 100%; max-width: 600px; height: auto;
    font-family: sans-serif; font-size: 24px; font-weight: bold;
    color: #4F46E5; background-color: #EEF2FF; text-align: center; padding: 40px;" />

10. テンプレートの種類

ウェルカムメール

ブランドカラーの背景を使ったヒーロー
パーソナライズされた挨拶（「こんにちは、{first_name}さん」）
アイコン付きのクイックスタート手順を3つ
主なCTA：「始める」または「プロフィールを完成させる」
任意：オンボーディング動画のサムネイル

ニュースレター

ロゴと日付を配置したシンプルなヘッダー
大きな画像を使った注目記事
その下に2列の記事グリッド
短い抜粋（2～3行）と「続きを読む」リンク
ソーシャルリンクと配信停止リンクを含むフッター

プロモーション

オファー（「40% OFF」）を載せた目立つヒーロー
商品グリッド（2列）
各商品に画像、名前、価格、CTAを配置
緊急性：「日曜日まで」またはカウントダウン
信頼につながる情報：送料無料、返品

トランザクションメール

シンプルなデザインで、情報をわかりやすく提示します
注文確認：商品、数量、価格、合計
配送状況の更新：追跡番号、配達日
パスワードリセット：CTAボタン1つ、セキュリティに関する注意書き
プロモーションコンテンツは含めません（メールの到達率が向上します）

配信到達性の基本（すべての種類）

一斉送信者（2024年以降のGmail／Yahooのルール）：ワンクリック登録解除ヘッダー（List-Unsubscribe + List-Unsubscribe-Post、RFC 8058）、SPF/DKIM/DMARC、目に見える登録解除リンクを設定します。
常にプレーンテキストの代替パートと、フッターに実在する郵送先住所を含めます。

検証：レンダリングして確認する

確認していないメールを引き渡してはいけません。生成後、次の手順を実施します。

ブラウザーで390pxと1440pxのスクリーンショットを撮影します。例：npx playwright screenshot --full-page --viewport-size=390,844 file://$PWD/email.html mobile.png。デスクトップのスクリーンショットでは幅600pxの列が中央に配置され、モバイルのスクリーンショットでは列が縦に並び、横スクロールが発生しないことを確認します。
ダークモードのスクリーンショット（--color-scheme=dark）を撮影し、画像を無効にした状態（src 属性を削除）でも確認します。メッセージとCTAが読み取れる必要があります。
ファイルサイズを確認します。インライン化後のwc -c email.htmlの値は約100KB未満である必要があります。
実際のクライアント（従来版Outlook、Gmailアプリ）での対応状況を確認するには、Litmus／Email on Acidまたはテスト用受信トレイを使って送信します。ブラウザーではWordエンジンをエミュレートできません。この確認を実施できない場合は、ユーザーにこの手順がまだ必要であることを伝えてください。

メールデザインのチェックリスト

Markdown 対応

ログインしてコメント

基本情報

作者: arnavpuri
リポジトリ: arnavpuri/designskills
カテゴリ: デザイン・UI
インストール数: 108
GitHub スター: 17

問題を報告