email-design

概要

email-design スキルでできること

email-design スキルは、高いコンバージョンを狙えるマーケティングメールやテンプレートを設計するための実践的なガイドです。実績のあるレイアウトパターンや件名のアプローチ、到達性を意識したルールに加え、ブランドトーンに合わせたヘッダーバナーを作るための HTML-to-image ワークフローを組み合わせています。

このスキルが特にカバーしているのは次の領域です:

• マーケティングニュースレターやプロモーションキャンペーン
• ウェルカムシーケンスやオンボーディングメール
• トランザクション系テンプレート（レシート、アラート、確認メールなど）
• Gmail や Outlook を含む主要クライアントで安定して表示されるモバイル対応レイアウト
• inference.sh CLI を使って HTML から生成するビジュアルなメールヘッダー

メールキャンペーンの運用、メール UI の設計、マーケティングチームのサポートなどに関わっている場合、email-design はすぐに使える制約と具体例を提供し、勘や試行錯誤に頼らずに設計できるようにします。

email-design の想定ユーザー

以下のような場合に email-design スキルを活用できます:

• ニュースレター、プロモーション、ドリップキャンペーンを設計する メールマーケターやグロースチーム
• HTML メールテンプレートを担当する デザイナーやフロントエンドエンジニア
• ウェルカムフローやトランザクションコミュニケーションを設計する プロダクト／ライフサイクルマーケター
• メールのレイアウト・件名・バナーを再現性の高い方法で設計したい 代理店やフリーランサー

次のようなニーズがある場合に、特に有用です:

• クライアントで検証済みの明確なレイアウト仕様（幅、カラム、レスポンシブルール）が欲しい
• コンバージョンを後押しする件名と構成のガイドが欲しい
• HTML スニペットからメールヘッダー画像を生成したい

email-design が向いているケース・向いていないケース

向いているケース:

• 定期的にキャンペーンを配信しており、CTR やコンバージョンを重視している
• ジュニアマーケターや新メンバーのためのガイドラインが必要
• 複数ブランド間でメールのレイアウトやビジュアルスタイルを標準化したい
• すでに infsh CLI を使用している、または HTML-to-image バナー用にインストールする意向がある

向いていないケース:

• プレーンテキストメールしか送らず、テンプレートやビジュアルを使わない
• フル機能の ESP（Email Service Provider）や配信インフラが欲しい（このスキルはデザインに特化しており、配信やリスト管理は扱いません）
• ドラッグ＆ドロップ型のビジュアルエディタを探している（email-design はパターンとワークフローのガイドであり、Web UI ではありません）

使い方

1. インストールとセットアップ

Agent Skills 対応環境に email-design スキルをインストールするには、次を実行します:

npx skills add https://github.com/inferen-sh/skills --skill email-design

このコマンドで inferen-sh/skills リポジトリから email-design ガイドを取得し、あなたのエージェントやツール群から利用できるようにします。

HTML-to-image ワークフローを使うには、inference.sh CLI（infsh）が利用可能である必要があります:

# Install instructions (see official guide):
# https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md

infsh をインストールして設定したら、ログインして HTML スニペットから直接バナー画像を生成できるようになります。

2. 主要ファイルと最初に確認する場所

インストール後は、まず次のリソースを開いてください:

• SKILL.md – email-design スキルの概要、使い方、制約事項のコア説明
• guides/design/email-design（ディレクトリ） – レイアウト、件名、メールパターンに関する詳細なデザインガイド（チェックアウト内容に応じて追加リファレンスを含む場合があります）

推奨される確認順序:

1. SKILL.md – レイアウト、件名、到達性ルールなど、このスキルのカバー範囲を把握します。
2. guides/design/email-design 配下のデザインガイド – ウェルカムシーケンス、プロモーション、トランザクションメールなど、自分のキャンペーンにパターンを適用します。

3. HTML-to-image バナーワークフローの利用

email-design スキルには、infsh/html-to-image アプリを使って HTML からメールヘッダービジュアルを生成する例が含まれます。

ステップバイステップの例

1. inference.sh にログインする:

infsh login

2. インライン HTML を指定して HTML-to-image アプリを実行する:

infsh app run infsh/html-to-image --input '{
  "html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><h1 style=\"font-size:36px;margin:0\">Spring Sale — 30% Off</h1><p style=\"font-size:18px;opacity:0.9\">This weekend only</p></div></div>"
}'

3. 生成された画像を、プロモーションメールテンプレートのヒーローバナーやヘッダーとして使います。

キャンペーン内容（新機能リリース、ウェビナー、季節キャンペーンなど）に合わせて HTML ブロックを書き換えれば、推奨メール幅を維持したままバリエーションを作成できます。

4. テンプレートへのレイアウトルールの適用

email-design スキルでは、実際のメールクライアントの挙動に合わせた実践的なレイアウト制約を整理しています。これらをそのまま HTML/CSS 構造に組み込めます。

ガイドで強調されている主な制約

• 最大幅: 600px – Gmail や Outlook など主要クライアントにおける標準的な表示幅
• モバイル幅: 320–414px – スマートフォン向けのレスポンシブなフォールバック範囲
• 単一カラムレイアウト推奨 – モバイルクライアントや古いデスクトップアプリでも安定して表示しやすい

実務的には、次のような設計になります:

• メインコンテンツを幅 600px のコンテナテーブル内にセンタリングする
• 複雑なマルチカラムグリッドは避け、複数カラムが必要な場合はモバイルで縦積みになる構成にする
• 重要なコンテンツ（オファー、CTA、主要メッセージ）は、上部かつメインカラム内に配置する

5. メールマーケティングワークフローとの統合

email-design は、ワークフローのさまざまなフェーズで利用できます:

• プランニング段階:

  • ドキュメント化されたレイアウトと件名ルールを、デザイナーやコピーライターへのブリーフに利用する。
  • ニュースレター、プロモーション、トランザクションメールの標準テンプレートを定義する。

• デザイン／実装段階:

  • HTML メールをコーディングする際に、幅やレイアウトの制約を適用する。
  • HTML-to-image パイプラインを利用して、トーンの合ったヘッダー画像を素早く生成する。

• 最適化段階:

  • SKILL.md で紹介されているフォーミュラを元に、件名のバリエーションをテストする。
  • 逆三角形レイアウトなどのビジュアルヒエラルキーを見直し、主要 CTA へのクリックを増やす。

6. 自社スタックへの適用方法

リポジトリのガイダンスは、配信方法や ESP 選定に依存しないよう設計されています。email-design を自社環境に合わせるには、次のように活用します:

• ESP 非依存のテンプレート:

  • email-design のパターンで作成した HTML と画像をエクスポートし、Mailchimp、SendGrid、Braze、Customer.io、あるいは自社のメールプラットフォームにアップロードする。

• チームオンボーディング:

  • SKILL.md にある主要な制約やパターンを、社内のデザインシステムやプレイブックに組み込む。

• 自動化:

  • スクリプトやエージェントでキャンペーン作成を自動化している場合、infsh app run infsh/html-to-image を動的な HTML とともに呼び出し、キャンペーン毎にカスタムバナーを生成する。

FAQ

email-design はメール送信ツールですか？それともデザイン専用スキルですか？

email-design は デザインとパターンのためのスキル であり、メール配信プラットフォームではありません。主要クライアントで機能するレイアウト、件名、バナー、テンプレートを設計するのに役立ちます。実際の配信には、Mailchimp や SendGrid、自前の SMTP などの ESP／送信インフラが別途必要です。

email-design を活用するには inference.sh CLI が必須ですか？

必須ではありません。email-design の中核であるレイアウトパターン、件名のアプローチ、到達性ルールは、infsh を使わなくても十分に役立ちます。HTML-to-image ワークフローでメールヘッダーやバナーを生成したい場合にのみ、inference.sh CLI が必要になります。

email-design で推奨されている主なレイアウトルールは何ですか？

このスキルでは次の点を重視しています:

• Gmail と Outlook で安定して表示するための 600px 最大メール幅
• スマートフォンでのレスポンシブ表示を意識した 320–414px のモバイル幅
• 表示の予測可能性とモバイル最適化のしやすさを重視した 単一カラムレイアウト推奨
  これらの制約により、レイアウト崩れを抑え、デバイスをまたいで一貫性の高いキャンペーン運用がしやすくなります。

email-design はマーケティングメールだけでなくトランザクションメールにも使えますか？

はい。email-design は、マーケティングメールと並行して、トランザクションテンプレート（レシート、パスワードリセット、アラートなど）も対象としています。同じ幅・階層構造・件名の原則を使いながら、コンプライアンスと情報集中型のトランザクションコンテンツを設計できます。

email-design は件名作成にどう役立ちますか？

email-design には、件名のガイドラインとフォーミュラ が含まれており、メールタイプごとの内容と意図（ウェルカム、プロモーション、ニュースレター、トランザクション）に合った、明確で魅力的な件名を組み立てる出発点を提供します。メールの送信や実験の実行は行いませんが、A/B テストを始める際の構造化されたベースラインとして使えます。

デザイナーと開発者が一緒に email-design を使うことはできますか？

はい。このスキルは マーケティング・デザイン・フロントエンド 関連の役割で共有して使うことを想定しています。

• マーケターは、パターンをもとにキャンペーンをプランニングし、件名を作成します。
• デザイナーは、レイアウトルールを使ってビジュアルヒエラルキーを構築します。
• 開発者は、ガイドに記載された技術的制約の範囲で HTML テンプレートを実装します。

email-design の技術的な詳細はどこで確認できますか？

スキルをインストールしたら、Files ビューを開いて次を確認してください:

• SKILL.md – スキル定義、スコープ、簡潔なルールのまとめ
• guides/design/email-design ディレクトリ – 詳細なデザインガイド
  これにより、このページで紹介している内容の裏付けとなる完全なリファレンスを確認できます。