ある日、メールの受信トレイを眺めていてふと気づいたんです。
「…なんでAmazonのメールにはロゴがあるのに、うちのメールはのっぺらぼうなんだ？」
そう、メールのアイコン（ロゴ）表示。あれ、実は全然お手軽じゃない技術なんです。Amazonがロゴ付きでメールを送ってくるのは、いわばメール界の display: flex; justify-content: center; align-items: center; ── 見た目の裏に相当な企業努力が詰まっています。
逆にアイコンがない企業は、途中で断念したか、費用対効果を計算してreturn false;したかのどちらかでしょう。
「いやいや、友達からのGmailにはアイコンあるけど？」って思いますよね。はい、GmailならGoogleアカウントにアイコンを設定するだけ。計算量で言えばO(1)です。
しかし独自ドメインの場合は…体感O(n²)くらい手間がかかります。
その救世主（？）となるのが、BIMIという技術です。
一言で言うと、「俺のメールは本物だし、ついでにロゴも見てくれ」と受信トレイに主張できる国際規格です。
技術的には送信元認証のDMARCをベースにしており、認証をパスしたメールだけがロゴを表示できる仕組み。いわばメール世界の✅バッジですね。
- 🍽️ BIMI準拠のSVGを用意 ← メインディッシュ（この記事の主役）
- 🥗 SVGをウェブサーバーで公開 ← 付け合わせ
- 🍰 DNSの設定を変更 ← デザート
- 💸 VMC証明書を取得 ← 時価
VMC証明書は商標登録が前提で、年間約20万円。個人開発者の財布にクリティカルヒットです。
ここで正直にconsole.logしておきます。VMC証明書は断念しました。 年間20万円は私のWebサーバー代の何年分ですか（計算したくない）。
でも「お金ができたらいつでもゴール手前からリスタートできる状態」にはしておきたい。エンジニアなら環境構築だけ先に済ませる精神、わかりますよね？
というわけで、この記事では以下を解説します。
- ✅ BIMI準拠のSVGファイルを作成
- ✅ SVGをウェブに公開（Cloudflare Pages）
- ✅ DNSレコードを設定
- ❌ VMC証明書の取得（財布が
InsufficientFundsExceptionをスローしたため）
「たかがSVGでしょ？」と思ったそこのあなた。私もそう思っていました。
完全に沼でした。
私は『Ｖ活らいふ！』というVTuber紹介サイトを開発しています。今回はこのサイトのメールにロゴを表示させたい、というのがモチベーションです。
使いたいアイコンがこちら。3000x3000pxのリッチな一枚。
ところが問題発生。手元にあるのはラスターデータ（png, jpg）だけ。ベクターデータは持っていません。
ここで軽くおさらいしておくと…。
| ラスター（png, jpg） | ベクター（SVG） | |
|---|---|---|
| 拡大すると | ぼやける😢 | くっきり✨ |
| データの正体 | ピクセルの集合 | 数式で描いた図形 |
BIMIが要求するのはSVG（ベクター形式）。つまりラスター → ベクター変換という異文化コミュニケーションが必要になります。
「SVGならなんでもいいんでしょ？」──そう思っていた時期が私にもありました。
BIMIのSVGには以下をはじめ、膨大な制約条件があります。
- 📏 高さと幅の最小値は96px
- 📐 画像サイズは絶対ピクセルで指定
- 📦 ファイルサイズ32kB以下
- 🚫 画像埋め込みタイプ不可
32kB以下って……令和にもなってファミコンのROMサイズと戦うことになるとは。
3000x3000pxのアイコンをメールの豆粒サイズに使うのは、4Kモニターでメモ帳を開くようなもの。完全にオーバースペックです。
ファイルサイズ削減のため、まずは256x256pxのpngに縮小しました。この段階ではまだラスターデータです。
ラスター→ベクター変換サイトは山ほどありますが、変換精度はサイトごとにバラバラです。そもそもラスターとベクターは根本的に別物なので、「元画像にどれだけ似せて再描画できるか」の勝負になります。
私はVectorizerを使いました。
変換直後のSVGはまだ太めなので、ここでSVGOMGの出番です。
使った設定は以下の通り。もっと良い設定があればぜひコメントで教えてください🙏
💡 次のステップで256kB以下のSVGが必要になるので、この段階ではそのラインを目安に、許容範囲内で画質を優先するのがおすすめです。
- Show original：オフ
- Prettify markup：オフ
- Multipass：オフ
- Number precision：3（大きくするほどファイルサイズ↑ 画質↑）
- Transform precision：5
- Remove xmlns：オフ
- Remove viewBox：オフ
- Remove <title>：オフ
- Remove <desc>：オフ
軽量化SVGを手に入れても、まだゴールじゃありません。BIMI規格準拠という最後のボスが待っています。
CaptainDNSの「BIMI SVG Converter to Tiny-PS」を使います。
入力制限は256kB以下、出力が32kB以下になる必要あり。「Logo title (optional)」にブランド名をアルファベットで入力して、変換ボタンをポチッ。
出力が32kB以下ならミッションコンプリート 🎉 オーバーしたらStep 3に戻って圧縮率を調整しましょう。
できあがったSVGファイル、実はまだあなたのPCに引きこもっているだけ。ウェブ上で静的ファイルとして公開しなければBIMIは読み取ってくれません。
Googleドライブは余計なUIが混入するのでNG。ここは素直にCloudflare Pages（Workers & Pages）を使います。アカウントがない方はサクッと作りましょう。無料です。
ダッシュボードの左メニューから「Compute」→「Workers & Pages」→「アプリケーションを作成する」を選択。
ファイルのアップロード画面が出たら、SVGをドラッグ＆ドロップ。
⚠️ アップロード前にファイル名を確認！ 公開URLにファイル名がそのまま入ります。後から「なんでこんな名前にしたんだ…」と後悔する未来が見えたら、今のうちに変えましょう。
自分はvkatsulife-logo-bimi-tiny-ps.svgにしました。
ファイルのアップロードは1ファイルしか選択できません。複数SVGをデプロイしたい場合は、1つのフォルダにまとめてフォルダごとアップロードしてください。
デプロイ前にワーカー名を決めます。これもURLの一部になるので命名は慎重に。詳細設定はデフォルトでOKです。
自分はbimi.pasotan.workers.devにしました。
デプロイ完了！ 公開URLは「ワーカー名 + ファイル名」を繋げたものになります。
https://bimi.pasotan.workers.dev/vkatsulife-logo-bimi-tiny-ps.svg
🔖 こういう長期的に使うURLは後から変えると各所に影響が出ます。命名は一発で決めましょう。const urlであってlet urlではないのです。
「SVG作って公開したし、終わりでしょ？」
甘い。 まだDNSの設定が残っています。ドメインのDNSレコードに「このドメインのメールアイコンはこのURLだよ」と教えてあげる作業です。
以下はtest.comをドメインとした場合の設定例です。ご自身のドメインに読み替えてDNS設定してください。
| 項目 | 値 |
|---|---|
| 種類 | TXT |
| ホスト名 | _dmarc.test.com |
| 値 | v=DMARC1;p=quarantine;pct=100;adkim=r;aspf=r;fo=1;rua=mailto:dmarc@test.com |
| 項目 | 値 |
|---|---|
| 種類 | TXT |
| ホスト名 | default._bimi.test.com |
| 値 | v=BIMI1;l=SVGファイルの公開URL |
お疲れ様でした。ここまで読んでくださった方、あなたは強い。
まだVMC証明書にすら辿り着いていないのに、この工程量。正直、途中でCtrl+Wを押しかけました。
この設定だけでアイコンが表示されるメールサービスもあるらしいのですが、Gmail・Yahoo!・iCloudで試した結果……どれもアイコン表示されず。 設定が正しいのか間違っているのかすら検証できないという、なんとも歯がゆいデバッグ不能案件です。
// 現在の状況
if (hasVMC) {
showIcon(); // 理想
} else {
console.log("お金を貯めてください"); // 現実
} なかなか走り出したばかりでお金のないビジネス経営者には厳しい世界ですね、BIMI。いつかVMC証明書を手に入れて、showIcon()を実行できる日を夢見ています。
おっと大変です！404 Comment Not Found の文字が！
このバグを修正できるのはそこのあなたです！
何をしたらいいか、お分かりですよね？（ヒント：💬）
ちなみに、コメントが書いてすぐ反映されないのはバグではありません。仕様です。
管理人が“ふむふむ”と読んでから、そっと公開されます。
コメントはまだありません
Send a comment
Comments are only visible to the blog owner