← 作例一覧へ戻る
CDG-003VERIFIED

HAKOの秋の新入荷のお便り

架空の雑貨店から届く、秋の新入荷と来店特典のお便り。商品3点と税込価格、店頭ラッピング特典を掲載。HTML・テキスト・画像一式を保存しました。

テンプレート
HTML email
用途
雑貨店
検証日
2026-09-16
形式
HTMLメール

メール内をスクロールすると、最後まで確認できます。 表示スペースに合わせて縮小しています。

書き出したHTMLをそのまま表示。PCは外余白を含む624px(本文600px)、スマホは390pxです。ブラウザでの表示確認であり、実際のメールアプリでの受信試験ではありません。

HTML・テキスト・画像一式約138KBHTMLメール約17KBテキスト版約2KB

画像付きで開くにはZIP一式を展開してください。HTML単体には画像を含みません。店舗情報、日付、画像の公開URL、各リンクと配信サービスの解除URLを実利用前に差し替えてください。

実際に入力したプロンプト全文

HTML emailテンプレートで、架空の雑貨店「暮らしの雑貨 HAKO」から既存のお客様に届ける、日本語の秋の新入荷・再来店促進メールを作成してください。作品名は「HAKO|秋の新入荷のお便り」。実在店舗の広告ではなく、デザイン作例です。

【目的とデザイン】
受信箱で開いたあと、商品を眺めて「またお店に寄ってみよう」と思える、一通で完結するメール。件名案「秋の新入荷|毎日に、小さな模様替えを。」、プリヘッダー「器と布ものが届きました。9/19〜9/27は店頭のラッピング特典も。」。
既存のこもれび、HIBI、ギャラリーの意匠やデザインシステムに合わせる必要はありません。この雑貨店とメールに合う独立したデザインにしてください。コバルトブルー、バターイエロー、白を軸に、雑貨屋の小さな編集便りのような、明るく洗練された雰囲気。大きな日本語の見出し、端正なHAKOのロゴ、余白、短いコピー。カードや丸いピルを並べたWebサイト風にはせず、縦に読み進める一通のメールとして仕上げる。商品写真やオリジナルの静物ビジュアルを効果的に使い、すべての情報を画像に焼き込まない。

【掲載する内容】
1. HAKOのロゴ、SEPTEMBER 2026など小さな発行情報。主見出し「毎日に、小さな模様替えを。」。
2. 導入:「いつもHAKOをご利用いただき、ありがとうございます。朝晩の空気が少し変わるころ。食卓やお部屋に迎えたくなる、器と布ものが届きました。」。丁寧だが宣伝過剰にしない。
3. 新入荷3品。税込価格と短い用途説明を読みやすく表示。
・まるいマグ/バター:1,980円。手にすっとなじむ、毎日の一杯に。
・リネンのミニクロス/ブルー:880円。敷いて、包んで。食卓に軽やかな色を。
・一輪のガラスベース/アンバー:2,420円。季節の枝ものも、一輪の花も。
商品・素材・価格は架空の設定で、産地、職人の実績、在庫数、限定数などは追加しない。
4. 来店のきっかけとなる企画「秋の小さな贈りもの」。2026年9月19日(土)〜9月27日(日)。期間中、店頭で税込3,300円以上のお買い上げで、ギフトラッピング1点無料。会計時にこのメールを提示。1会計につき1点、店頭購入のみ。他の値引き・期限延長・限定人数は付けない。
5. 主CTA「お店へのアクセス・営業時間」→ https://example.com/hako/access 。補助リンク「新入荷を詳しく見る」→ https://example.com/hako/new-arrivals 。行動の優先順位を明確にし、主CTAはスマートフォンで押しやすくする。
6. 店舗情報:暮らしの雑貨 HAKO/営業時間11:00〜18:00/火曜定休。住所は「[実店舗の住所に差し替え]」、問い合わせは「[問い合わせ先に差し替え]」と明示し、実在の住所や電話番号を作らない。
7. フッター:「このメールは、HAKOからのお知らせを希望された方へお届けしています。」。配信設定→ https://example.com/hako/preferences 、配信停止→ https://example.com/hako/unsubscribe 。「架空店舗のデザインサンプル」と小さく明記。配信先情報やトラッキングは入れず、実際のメール送信は行わない。

【成果物と実装条件】
デスクトップの本文幅600px程度、スマートフォン幅375〜390pxにも対応するHTMLメール。主要レイアウトはtable、重要な装飾はインラインCSS、一般的な日本語システムフォントのフォールバックを指定。JavaScript、フォーム、外部CSS、Webフォントに依存しない。画像はalt付きで、画像が読み込まれなくても商品名・価格・特典条件・CTAがテキストで残るようにする。SVGやbase64画像に頼らず、画像は可能ならPNG/JPEGとしてプロジェクトへ保存する。
隠しプリヘッダーを含む配信用の純粋なHTMLファイル(email.html)、同内容のテキスト版(email.txt)、画像がある場合は画像ファイルを用意してください。画像の公開URL、店舗情報、リンク、配信システム固有の解除URLは実利用前に差し替える前提で、差し替え箇所を短く案内してください。画面上でデスクトップ・モバイルの見え方を確認できる状態にし、本文を切らずに最後までデザインしてください。メールクライアントで未確認の互換性を検証済みとは書かないでください。

店名・商品・価格・色の指定を、自分のお店に合わせて書き換えてください。生成結果は利用前に確認しましょう。

初稿の表示確認
約4分28秒(自動チェック・修正前)
本体デザインの追加指示
0回
自動チェック後の修正
1回/スマホ幅のはみ出しを解消
原本HTMLのサイズ
17,349 bytes/画像4点は別ファイル

できたこと

  • 商品3点の名称・税込価格、企画期間と曜日、購入金額・提示・1会計1点・店頭のみの条件を確認。
  • Arcの624px・390px幅でメール全文を目視。文字切れ・重なり・項目欠落は見当たりません。
  • table主体・インラインCSS・隠しプリヘッダーを含む純粋なHTML。JavaScript・外部CSS・Webフォント・フォームへの依存なし。
  • 画像4点はPNG。商品名・価格・特典条件・CTAはHTMLテキストとして保持。
  • テキスト版と画像を同梱したZIPを保存。PC/スマホのプレビューを切り替えて確認できます。

気になった点・未確認

  • Gmail・Outlook・Apple Mail等の実受信、ダークモード、配信到達性は未確認です。
  • 画像はClaude Designが描いた静物イラストです。実商品の写真ではありません。
  • 画像参照は相対パス、リンクはexample.com、住所・問い合わせ先は差し替え表記です。そのまま実配信するものではありません。
  • 初稿ではスマホの右側がはみ出しました。Claude Design自身の1回の追加修正で可変幅に変更しています。
  • 画像を無効にしたメールアプリの表示と、非デザイナーによる流用は未確認です。