HTMLメール
コーディング代行

デザインはお手元に。実装だけお任せください。

デザインデータ実装どの環境でも崩れないHTMLメール

HTMLメール専門のコーディング代行です。Figma・XD・PSDなどのデザインデータをお預かりし、Outlook・Gmail・スマートフォン・ダークモードで崩れないHTMLメールに実装します。納品前に約30通りの環境で検証します。制作会社様・広告代理店様からのご依頼も歓迎します。

CHALLENGES

こんな経験は
ありませんか

  • 複数社に問い合わせたが、専門的な回答が返ってこなかった
  • Outlookでの表示崩れを相談したが、明確な原因を説明してもらえなかった
  • 最初の打ち合わせで、一般論しか出てこなかった
  • 自分のPCとスマホでは正しく見えるのに、「崩れている」と指摘された
事業会社直接のご依頼制作会社・代理店外注としてのご依頼B.A.Dが実装検証まで込みで納品崩れないHTMLメールそのまま配信できる状態どちらの立場からでもご依頼いただけますどちらの立場からでもご依頼いただけます事業会社直接のご依頼制作会社・代理店外注としてのご依頼B.A.Dが実装検証まで込みで納品崩れないHTMLメールそのまま配信できる状態
制作会社様・広告代理店様からのご依頼も多くいただいています

これらはHTMLメールの世界ではよくあることです。原因は担当者の力量ではなく、HTMLメールがWebサイトと根本的に別物であることにあります。

WHY DIFFICULT

HTMLメールのコーディングが
難しい理由

OutlookはワープロソフトのエンジンでHTMLを表示します

デスクトップ版OutlookはWebブラウザではなくMicrosoft Wordの描画エンジンで解釈するため、Webでは当たり前のdisplay:flexやpositionが一切効きません。カラム組みには専用の条件分岐とテーブルの二重記述が必要です。

ダークモードで色が反転します

背景色の指定が不十分だと、黒背景に黒文字となり本文が消えます。ロゴが背景に溶けて見えなくなることもあります。

作った本人は気づけません

自分のPC・スマホでは正常に表示されるため、特定の環境だけで起きる崩れは、検証環境がない限り発見できません。

Webコーディングの知識だけでは、この仕様差は越えられません。B.A.DはHTMLメール専門として500件以上を実装してきました。

一般的なメーラーデスクトップ版Outlook2カラムが縦積みに幅指定がはみ出す同じHTMLでも、描画エンジンが違うと結果が変わります
通常表示本文が背景に沈むダークモード(対策なし)
お預かりするものFigmaAdobe XDPSD/AI画像+指示書B.A.Dが実装テーブルレイアウトインラインCSSダークモード対応納品するものHTMLファイル(各ツール向け)画像一式・ホスティング対応表示検証レポート納品後の修正対応お預かりするものFigmaAdobe XDPSD/AI画像+指示書B.A.Dが実装テーブルレイアウト/インラインCSSダークモード対応納品するものHTMLファイル(各ツール向け)画像一式・ホスティング対応表示検証レポート納品後の修正対応
デザインデータをお預かりしてから納品までの内容
SERVICES

対応範囲

デザインデータからのコーディング/レスポンシブ対応/ダークモード対応/約30通りの環境での表示・リンク動作検証/納品後の修正対応。

受け入れ可能なデータ形式:Figma/Adobe XD/Photoshop/Illustrator。既存HTMLの修正のみも承ります。

FLOW

ご依頼の進め方

デザインデータのお預かり → 実装 → 約30通りの環境で検証 → 修正 → 納品。着手から早ければ2〜3営業日です。画像のホスティング環境がない場合もご相談ください。

安価なコーディング代行HTMLに起こすOutlookでの崩れ対応ダークモード対応納品後の修正B.A.DHTMLに起こすOutlookでの崩れ対応ダークモード対応納品後の修正崩れたときに直せるかどうかが、費用差の中身です安価なコーディング代行HTMLに起こすOutlookでの崩れ対応ダークモード対応納品後の修正B.A.DHTMLに起こすOutlookでの崩れ対応ダークモード対応納品後の修正
「HTMLになっている」と「どの環境でも崩れない」は別のものです
PRICING

費用の目安

コーディング 50,000円〜/表示検証(約30通り) 20,000円〜(要件により変動します)

数千円のコーディング代行との違いは、含まれているものです。この費用には次を含みます。

  • Outlook 4種・ダークモードを含む約30通りの環境での表示検証
  • 全リンクの動作・遷移先の確認
  • 配信ツール・MAツールにそのまま載る形での納品
  • 検証で見つかった崩れの修正と再検証

テンプレート化後の2回目以降は1/3程度の費用で制作できます。

無料相談・お見積もり

ENVIRONMENTS

対応環境(約30通り)

Outlook 4種とダークモードを標準で含みます。

PC(通常/ダークモードの両方を確認)

  • Apple Mail 16 × macOS 13
  • Outlook Microsoft 365 × Windows 11
  • Outlook Office 365 × Windows 10
  • Outlook 2021 × Windows 11
  • Microsoft365.com Chrome × Windows 10
  • Microsoft365.com Edge × Windows 10
  • Outlook.com Chrome × Windows 10
  • Outlook.com Edge × Windows 10

スマートフォン(通常/ダークモードの両方を確認)

  • iPhone 16 Pro × iOS 18
  • iPhone 16 × iOS 18
  • iPhone 15 Pro × iOS 17
  • iPhone 14 Pro × iOS 16
  • iPhone 14 × iOS 16

詳細は対応ブラウザ・環境をご覧ください。

FAQ

よくあるご質問

対応可能なデザインデータの形式は
Figma・Adobe XD・Photoshop・Illustratorに対応しています。その他の形式もご相談ください。
既存HTMLの修正だけでも頼めますか
はい、承ります。他社様が制作したHTMLメールの崩れの修正のみのご依頼も可能です。
Outlookは標準で対応しますか
はい。デスクトップ版を含むOutlook 4種を標準の検証環境に含めています。
ダークモードには対応していますか
およそ半数がダークモードでの検証です。配色の反転により調整が必要となった場合の対応は、別途ご相談となります。
配信ツールへの入稿も依頼できますか
承ります。MAツール・配信ツールにそのまま載る形での納品にも対応します。
制作会社ですが外注できますか
承っています。制作会社様・広告代理店様からのご依頼も多くいただいています。

HTMLメールのことなら、まずはご相談ください

企画から制作・配信・分析までワンストップで対応いたします。
部分的なご依頼も歓迎です。お見積もりは無料です。

無料相談・お見積もり