スパム対策1. メールアドレスを画像化する方法

迷惑メールを防ぐスパム対策としてよく使われているのが、メールアドレスをテキストで掲載するのを諦めて、下図のように画像だけを使って表示する方法です。
 
スパム対策として、メールアドレスを画像化して掲載した例

スパム対策として、メールアドレスを画像化して掲載した例


説明するまでもないでしょうが、このようにメールアドレス全体を画像化して掲載しておけばHTMLソース内にはメールアドレスが一切登場しませんから、自動収集されてしまう心配もなくなります。

【このスパム対策の目次】  

メールアドレスを画像化するメリット・デメリット

メールアドレスを画像化するメリット
メールアドレスを画像で掲載すれば、HTMLソースを読んでもメールアドレスは分からないので自動収集は防止できます。

OCR技術を使えば画像に描かれた文字列を自動で読み取ることもできますが、ウェブ上のあらゆる画像を1つ1つOCRにかけていくのは現実的ではありませんから、防止できると考えて良いでしょう。冒頭の例のように、画像の中に文字とは関係のない模様などが含まれていれば、自動での読み取りはさらに困難になります。

メールアドレスを画像化するデメリット
何らかの原因で画像が表示されなければ、メールアドレスは全く見えなくなってしまいます。また、閲覧者は画像を見ながら1文字ずつ入力しなければならないため、とても手間がかかります。特に「l」と「1」や「0」と「O」などの紛らわしい英数字が含まれているメールアドレスでは、打ち間違いが起きる可能性も高くなってしまうでしょう。

このようにデメリットが多いので、あまり望ましい方法とは言えません。モバイル端末では画像を見ながらメールアドレスを打つ操作が難しいため、かなり不便になってしまいます。積極的に連絡が欲しい企業サイトなどでは、この方法の採用は避ける方が良いでしょう。

 

メールアドレスの画像化サービスを使う方法

メールアドレスを画像化したい場合、自力で画像を作成する方法もありますが、画像化サービスを使えば楽に用意できます。以下でご紹介する2サイトは、どちらもブラウザ上で必要な情報を入力するだけでメールアドレス画像を作成してくれるサービスです。

メールアドレスの画像化サービス1:
でざいんめーる」(交差点の真ん中で
配色はグラデーションも含めて自由に設定できる上、フォントも数種類から選べて便利です。日本語サイトなので、オプション項目の意味が分かりやすくて使いやすいでしょう。

※作成画像例:

メールアドレスの画像化サービス2:
E-Mail Icon Generator」 (フリーメール用)
E-Mail Icon Generator For any e-mail address!」 (自由入力用)
GMailやYahoo!メールなどの無料メールサービスに合わせたデザインを使いたい場合に便利です。英語サイトですが、入力項目が必要最小限なので迷うことはないでしょう。

※作成画像例:

 

「@」記号だけを画像化する方法

画像を活用しつつも打ち間違いの可能性を減らすためには、「@」記号だけを画像化する方法もあります。メールアドレス全体を画像にする方法とは異なり、「@」記号以外はコピー&ペーストができるため、入力の手間は大きく減らせるでしょう。

@記号だけを画像で表示するHTMLソースの例:
example
<img src="atmark.gif" alt="アットマーク" style="vertical-align:middle;">
example.com

上記のHTMLソースをブラウザで表示すると、例えば「exampleアットマークexample.com」のように表示されます。画像の背景色を透明にしておくと、同じ画像を様々な場所に流用できて便利です。なお、alt属性で指定する代替文字に「@」記号をテキストで書くのは避ける方が無難でしょう。少し賢い自動収集プログラムなら収集してしまいそうですから。

※本記事で使用した「@」記号の画像は下記のリンク先に置いてありますので、作成が面倒ならダウンロードしてご自由にご使用下さい。
@記号だけの画像(19×19px)

 

メールアドレスをQRコード画像にする方法

スマートフォンなどの携帯端末向けには、メールアドレスをQRコード画像で掲載する方法もあります。この方法なら、QRコードを読み取れる環境ではメールアドレスの手入力が不要になるので便利でしょう。QRコード画像の作り方は、記事「QRコードをGoogle Chart APIで作成して表示する方法」でも紹介していますので、併せてご参照下さい。
 
メールアドレスをQRコード画像にした例

メールアドレスをQRコード画像にした例



次に、メールアドレス内の記号を他の文字に変更する方法をご紹介いたします。