-
はじめに
個人開発したサービスやポートフォリオサイトに問い合わせ先メールアドレスを載せることはよくあります。
しかし、ある日からスパムメールやDMARCレポートが大量に届くようになりました。最初は気にしていませんでしたが、迷惑メールが増え続け、
「これは対策しないとまずいな…」
となり、今回Web上のメールアドレス防御策と実装方法をまとめました。
同じようにHP・ブログ・ポートフォリオにメールアドレスを載せている人の参考になれば幸いです。
-
なぜメールアドレスはスパムBotに拾われるのか？
HTML上にメールアドレスを
info@example.comのような生テキストで置いておくと、
- クローラー（メール収集Bot）
- スパム業者のスクレイピングツール
によって自動的に収集されます。
これは手動ではなく完全に機械処理で行われるため、
ウェブ上に公開した瞬間から拾われる可能性が発生します。
-
よくある対策と課題
方法 メリット デメリット aaa[at]bbb.com 表記 Bot回避しやすい 利便性が低下/人が手編集 メールアドレスを画像化 収集されにくい コピー付加/スマホで不便 reCAPTCHA 付きフォーム 高い防御性能 導入・運用が重い/UIが面倒 WordPressセキュリティプラグイン 自動保護 自前サイト・静的サイトでは使えない JS生成（今回採用） UX維持/Bot対策/軽量 コードを書く必要があり 今回選んだ方式は 「JavaScriptでメールアドレスを書き換え、ボタンでコピーできる形式」 です。
理由は：
- メールアドレスをコピーして使いたいユーザの手間を減らす
- 表示はされるが、生HTML上に平文が残らない
- シンプルで導入が容易
という点です。
-
実装した方法（JavaScript）
以下のコードをscriptとして埋め込み、
HTML側にはメールアドレスを書かず、ボタンだけを置く方式です。(() => { const user = "info"; const domain = "itechem.jp"; const email = `${user}@${domain}`; document.getElementById("copyBtn").addEventListener("click", async () => { try { await navigator.clipboard.writeText(email); alert(`コピーしました：\n${email}`); } catch { window.prompt("コピーできない場合は手動でコピーしてください。", email); } }); })();HTML側
<button id="copyBtn">メールアドレスをコピー</button>
-
実装画面サンプル
6. 効果と運用感
導入前はメールアドレス形式でWebページに表示していたため、
海外IPからのDMARCレポート・金融系偽装スパムなどが頻繁に届きました。
実装後すぐ劇的には変化しませんが、
数日～数週間でスパム収集Botの精度から外れるため、徐々に減少してくと考えています。
完全撃退ではなく、「拾われにくくする実用的対策」です。
まとめ
- Web上にメールアドレスを公開するとBotに拾われる
- ＠を隠すだけの対策はUX（ユーザエクスペリエンス）を損なう問題がある
- JavaScript生成＋ コピー式ボタンは実装も簡単で実用的
- ユーザ体験を損なわずメール保護が出来る
サイトに連絡先を設置したい個人開発者や
静的サイト運用者には特におすすめの方法です。
おわりに
この記事は、自分のWebサイト運用改善の一環として実装した内容です。
同じように、
- 個人開発者
- 小規模事業者
- ポートフォリオサイト運営者
などの参考になれば嬉しいです。
以上です。