Product Stories
DMARC Lens
DMARCレポートを美しく可視化する、インストール不要のWebアプリ
DMARC Lensは、メール認証レポートを美しく可視化するブラウザ完結型のWebアプリです。Google、Microsoft、Yahoo!などから届くDMARC集約レポート（XML / gz / zip）をドラッグ&ドロップで読み込み、SPF・DKIM・DMARCの認証結果をひと目で把握できるダッシュボードを提供します。すべての処理はブラウザ内で完結し、データはサーバーに一切送信されません。インストール不要、アカウント登録不要。URLを開くだけで使えます。
誕生ストーリー
なぜ作ろうと思ったか
自分の会社でMicrosoft 365を使ってメールを運用する中で、DMARC対応を進める必要がありました。DMARCレコードを設定するとGoogleやMicrosoftから認証結果のレポートがXMLで届くのですが、これを開いた瞬間の「うわ、読めない」という感覚が強烈でした。何が成功で何が失敗なのか、生のXMLからは直感的にわかりません。
セキュリティ上は大事なデータなのに、見る気が起きない。それが正直な気持ちでした。「XMLを放り込んだら、超美しいUIで気持ちよく読める」——そんなツールが欲しかったのが出発点です。
解決しようとしている問題
DMARCレポートの解析はメールセキュリティの運用に不可欠ですが、特に小規模事業者にとってはハードルが高い領域です。
そもそもDMARCの集約レポートは、文字と数字が並ぶだけの無機質なXMLデータです。読むのも苦痛、解析するのも苦痛。セキュリティ上重要なデータなのに、見る気が起きないという本末転倒な状態が起きています。
既存のWebベースのツール（dmarcian、Postmark DMARCなど）はSaaSモデルが中心で、個人や小規模事業者にとってはコストが見合わないことがあります。一方で、無料のオンラインツールにレポートをアップロードするのは、セキュリティデータを第三者に預けることになり、プライバシーの懸念もあります。
DMARC Lensは、ブラウザ内で完結するWebアプリとしてこれらの問題を解決します。すべての処理はフロントエンドで行われ、データはサーバーに一切送信されません。インストール不要、アカウント登録不要。URLを開いてファイルをドロップするだけ。超美しいUIで認証結果を時系列やドメイン別に可視化し、無機質だったデータを「気持ちよく読める」体験に変えます。
作り始める前の自分の状況
個人開発でいくつかのプロダクトを手がけてきましたが、フロントエンド完結型のツールを作った経験はありませんでした。Claude Codeを活用したAIアシスト開発のワークフローは確立しつつあったので、「自分が実際に必要としているツール」を題材に、ブラウザ内で完結するアプリの設計・開発を実践したいと考えていました。
また、Build in Publicを始めるにあたって、Product Storiesに掲載できる「実際に開発過程を記録していくプロダクト」が欲しいと感じていました。DMARC解析アプリは、自分自身が日常的に使うツールであり、かつニッチだけど確実に実用性があるテーマとして、ちょうど良いと考えています。
これからのビジョン
DMARCは設定して終わりではなく、レポートを読み続けて初めて意味がある。でも現実には、小規模な会社やひとり情シスにとって、その「読み続ける」が一番難しい。DMARC Lensは、専門知識がなくても認証状況を直感的に把握でき、問題があればすぐ気づけるツールを目指す。いずれはレポートの自動要約や改善提案など、「次に何をすべきか」まで導いてくれる存在にしたい。プライベートで、軽く、美しく。
開発の足あと
プライバシーポリシーと利用規約のページを実装した。最初はモーダルダイアログで提供しようとしたが、実装を進めるうちに「独立したURLでアクセスできる専用ページの方が使いやすい」と判断して設計を変更した。フッターにリンクを追加して導線を整え、お問い合わせ先URLも設けた。また、サマリーカードの表示ロジック修正や著作権年の更新など細かい箇所も合わせて磨いた。ポリシー文書を作成するにあたり、プライバシーとデータ処理の方針を改めて言語化する機会にもなった。
GA4を導入したものの、Cookieを使用する点が「データはサーバーに送信されない」というプロダクト方針と矛盾すると判断し削除した。計測とプライバシーの両立について改めて考える機会になった。一方でランディングページの導線も磨いた。プライバシーアイコンをドロップゾーン直下へ移し、安心感を伝えるタイミングを最適化。ドロップゾーンをランディングページに組み込み、説明を読んだ流れでそのまま試せる構成にした。言語切り替えや文言など細かい部分も丁寧に仕上げた。
ダッシュボードの分析機能を一気に拡充。公開ポリシー表示・disposition集計チャート・時系列トレンド・Org別集計・Raw XMLビューアを次々と実装し、ブラウザだけでここまでDMARCレポートを分析できるという仮説が形になった。ロゴも刷新してランディングページにスクリーンショットを追加し、見た目の完成度も高めた。また、DMARC準拠率の計算が仕様と食い違っていたことも発覚。ポリシー評価結果で判定するよう修正し、仕様を正しく読み込む大切さを痛感した。
DMARC Lensの開発をスタート。リポジトリを作成し、ランディングページを実装して「ブラウザ完結でDMARCレポートを美しく可視化する」というコンセプトを形にした。続けてSPF・DKIM・DMARCの認証結果を集計・可視化する分析機能を実装。円グラフ・棒グラフ・テーブルによるレポート画面まで作り上げた。DBもファイルサーバも使わず、ブラウザ内の処理だけでここまでできることに自分でも驚いた。さらにMCPサーバーとClaude Codeスキルを導入し、開発と記録が一体化するワークフローも早い段階から整えた。
macOSネイティブアプリからブラウザ完結型Webアプリに方向転換。DMARCレポートのXMLパースはブラウザのDOMParserとFile APIだけで完結できる。データがサーバーに一切送信されない**「ローカル処理×インストール不要」**という組み合わせが、既存ツールとの明確な差別化になると判断した。
2つ目のプロダクト「DMARC Lens」の構想をまとめた。無機質なDMARCレポートXMLを、気持ちよく読める美しいアプリにしたい。自分自身がメール運用で困っていた原体験から生まれたアイデア。プロダクト名・誕生ストーリー・解決したい課題を整理し、ここから形にしていく。