メールのデザインをHTMLでコーディング：メール配信サービス向けのテーブルレイアウトで、カンプに忠実に、スマホ版付き

成果物の例

スタンダードパッケージの例すべて表示

陶器ショップのウェルカムメールと春のセールメール

2通のメール

スマートフォンで見たウェルカムメール

ファイル： メールソフト向けに作ったHTMLメール2通（インラインスタイル、配信停止リンク付き）と、メール用に描き下ろした画像3点を収めたZIPファイル。クライアントのメール配信サービスにそのままインポートできます。ここに掲載している画像はメールのスクリーンショットです。

クライアント： 手作りの陶器と生活雑貨を扱う小さなオンラインショップ、Juniper & Oak。 ご依頼： メール配信サービスで送る2通のメール。初回注文が10%オフになるウェルカムメールと、花瓶とプランターが20%オフになる春のセールメール。配色はサンド、テラコッタ、オリーブ。

お客様とすべての情報は架空のものです。

このサービスについて

メールのデザインはあるものの、メールソフトで正しく表示されるコードが必要な方へ。カンプのスクリーンショットやPNG書き出しをアップロードしていただければ、HTMLメールとしてコーディングします。同じブロックを同じ順番で、色、サイズ、ボタンもそのままに。文字は画像ではなく実際のテキストにします。コードはメールソフトに必要な作りで、幅600 pxのテーブル、要素ごとのスタイル、近いシステムフォントを使い、デザインがデスクトップ版だけでもスマホでは1列になります。カンプの写真やイラストは同じ雰囲気で新たに描くか、アップロードしていただいたものを使います。Figma、PSD、Sketchのファイルは開けないため、画面を画像として書き出してください。メールの送信は行いません。

含まれる内容

• 納品内容各メールのHTMLと画像をまとめたZIPファイル。メール配信サービスでそのまま使え、プレビューは注文ページでご確認いただけます。
• デザインに忠実にブロック、色、サイズ、ボタンをカンプのとおりに
• 本物のテキスト見出しと本文は画像ではなくテキストで
• スマホ対応モバイル版がない場合はデスクトップのデザインから作成
• 画像も所定の位置にカンプの雰囲気で新たに描くか、お客様の画像を使用
• 配信停止リンクフッターに仮置きし、配信サービスのリンクに差し替えていただきます

ご利用の流れ

1. 1
   アップロードメールデザインの画面をアップロードし、どれが何かをお知らせいただきます
2. 2
   コーディングとプレビュー各メールをテーブルとインラインスタイルでコーディングします。パソコンとスマホでデザインと見比べてください
3. 3
   アーカイブアーカイブをダウンロードし、プランの範囲内で修正を依頼できます

ご用意いただくもの

PNG、JPEG、WebP形式の画像を最大5点：メールデザインの画面（1枚につき1通、文字が読める解像度で）と、ご希望であればそのまま使うロゴと写真。どのファイルがどのメールか、カンプと異なる場合は文章、各ボタンのリンク先、フッターに載せる送信者情報をお知らせください。Figma、PSD、Sketchのファイルは不可です。各メールのフレームを画像として書き出してください。

お伺いする内容：

• どのファイルがどのメールですか？
• 文章はカンプと異なりますか？
• ボタンのリンク先は？
• フッター用の送信者情報

プランを比較

質問と回答

答えが見つかりませんか？ 質問する