EC Mail Builder — ノーコードのメルマガ作成ツール
ECサイトの会員メルマガ（HTMLメール）を、コードを書かずに作れるWebアプリ。テンプレートに入力するだけで、主要なメーラーで崩れにくいHTMLを書き出し、いま使っている配信ツールにそのまま渡せます。企画からUI設計・実装まで、「作って書き出す」だけに絞って整えたMVPです。
崩れないメールを、コードなしで。
EC Mail Builder は、ECサイトの会員向けメルマガ（HTMLメール）を、コードを書かずに作成できるWebアプリです。テンプレートを選び、ロゴ・商品画像・商品名・価格・説明文・CTA などを入力すると、Gmail・Outlook・iPhoneメールなど主要なメーラーで崩れにくいHTMLメールが、その場で書き出せます。
配信やCRM、開封分析といった機能はあえて持ちません。書き出したHTMLを、いま使っているメール配信ツールに貼り付けて使う。その「作る」部分だけに絞ったMVPとして設計しました。
HTMLメールは、Webページのようには作れない。
メールは、クライアントごとにCSSの解釈が大きく違います。少し凝ったデザインにすると、Gmailでは整っていてもOutlookやiPhoneで簡単に崩れる。きれいなメルマガを届けるには、tableレイアウトやインラインスタイルといった「メール特有の作法」が要ります。これは、コードを書かない担当者にとって高いハードルです。
一方で、配信ツールは持っていても、肝心の中身（HTML）をどう作るかは各自任せ、というEC現場は少なくありません。だからこのツールは、配信の置き換えを狙わず、「崩れないメールを、コードなしで作れる」ことに芯を置きました。
「崩さない・迷わせない」を、設計の芯に。
崩れない出力を、既定にする。
生成するHTMLは table ベース＋インラインスタイル。外部CSS・JavaScript・Webフォント・背景画像は使わない、という制約を最初から敷きました。凝った見た目より、どのメーラーでも同じに届くことを既定値にしています。
届いた姿を、その場で見せる。
左で入力し、右にリアルタイムでプレビュー。from・件名・プリヘッダーを載せた「受信トレイ枠」、PC/スマホ幅の切替、画像オフやダーク表示のシミュレートで、実際に届いたときの見え方を、作りながら確かめられます。
迷いと事故を、仕組みで防ぐ。
件名・プリヘッダーの文字数カウンタ、alt・URL・配信停止など10項目超の送信前チェック、自動保存とUndo/Redo、破壊的操作の確認ダイアログ。「作る」以外のところでつまずかないよう、入力支援と安全装置を編集体験に織り込みました。
かたちにしたもの。
4つのテンプレート
カゴ落ち・売れ筋ランキング・新商品告知に加え、ブロックを自由に並べる「カスタム」。目的から選んで、すぐ書き始められます。
リアルタイム・プレビュー
PC/スマホ幅、受信トレイ枠、ダーク表示、画像オフの再現。届いたときの見え方を、作りながら確認できます。
ブロックエディタ
カスタムモードは、見出し・テキスト・画像・商品・2カラム・ボタン・SNS・区切り線など11種のブロックをドラッグ＆ドロップ。並べ替え・複製・削除に対応。
送信前チェック
件名・配信停止・alt・URLなど10項目超をリントし、ツールバーにバッジ表示。事故になりやすい抜けを、出す前に気づけます。
ブランド共通設定
サイト名・ロゴ・ブランドカラー・フッター・配信停止URLはテンプレ間で共通。一度整えれば、どのメールにも反映されます。
複数フォーマット書き出し
HTML（コピー / .html）に加え、本文HTML断片・プレーンテキスト・メタJSONを出力。自動保存とデザインサンプル15種も内蔵しています。
つくり方。
「作って書き出す」までに、範囲を絞る
配信・CRM・分析は持たず、崩れないメールをコードなしで作り、既存の配信ツールに渡すところまで。MVPの範囲を意図的に狭く定めました。
入力とプレビューの二画面を、基本形に
編集フォーム＋リアルタイムプレビューを軸に、テンプレートとHTML生成、ブロック描画を分離。あとから機能を足しやすい構造にしています。
Next.js × TypeScript で、AIと並走して開発
App Router＋TypeScript＋Tailwind で実装。バックエンドは持たず、編集内容はブラウザの localStorage に自動保存する構成です。
バックエンド不要で、そのままデプロイ
データはブラウザ側に閉じるため、Vercel に直接デプロイするだけで動く構成にしました。
「作る」に絞る、という判断。
EC Mail Builder は、「作る」に絞ったMVPです。配信も分析も持たない代わりに、崩れないメールをコードなしで作り、いま使っている配信ツールに渡す。その一点を、迷わず・崩さず・安全にできることだけを目指しました。範囲を狭く決めたことが、体験の輪郭をはっきりさせたと感じています。
テンプレートとHTML生成・ブロック描画を分けて作ってあるのは、この先を見据えてのことです。件名や本文のAI生成、配信ツール別の差し込みタグ、テスト送信。「作る」の次の体験を、無理なく足していける構造にしています。