mailtoリンクとは?HTMLでの書き方・使い方を初心者向けに解説

プログラミング・IT

「ホームページにメールアドレスを載せたいけど、クリックするだけで送れるようにしたい」と思ったことはありませんか?
そんなときに使えるのが mailtoリンク です。
この記事では、mailtoリンクの基本的な仕組みから、件名・本文・CC・BCCの設定方法、さらに使う際の注意点まで、初心者でもわかるようにまとめました。


スポンサーリンク

mailtoリンクとは

mailtoリンクとは、クリックすると端末のデフォルトのメールアプリが起動し、宛先が自動入力された状態で新規メール作成画面が開く特殊なHTMLリンクのことです。

通常のリンクが https:// から始まるURLを指定するのに対し、mailtoリンクは mailto: スキーム(URLスキームの一種)を使います。
このスキームはIANA(Internet Assigned Numbers Authority、インターネット上の番号やプロトコルを管理する機関)に登録された正式な仕様で、主要なブラウザやメールアプリがサポートしています。

Webサイトの「お問い合わせ」ページや、ブログのプロフィール欄などでよく使われる機能です。


mailtoリンクの基本的な書き方

<a> タグの href 属性に mailto:メールアドレス と記述するだけです。

<a href="mailto:example@example.com">メールを送る</a>

これだけで、リンクをクリックするとメールアプリが起動し、宛先に example@example.com が自動で入力されます。

Markdownでの書き方

ブログやドキュメントツールのMarkdown記法でも同じように記述できます。

[メールを送る](mailto:example@example.com)

関連記事:初心者でもわかるHTMLリンクの作り方


パラメータを使った応用設定

mailto: の後にパラメータを追加することで、件名・本文・CC・BCCをあらかじめ入力した状態でメールアプリを起動できます。

パラメータの基本ルール

  • ? でメールアドレスとパラメータを区切る
  • 複数のパラメータは & でつなぐ
  • 日本語を含む場合は URLエンコード が必要(後述)

設定できる主なパラメータ

パラメータ役割
subject件名を設定subject=お問い合わせ
body本文を設定body=お世話になっております
ccCCに宛先を追加cc=cc@example.com
bccBCCに宛先を追加bcc=bcc@example.com

件名と本文を設定する

<a href="mailto:example@example.com?subject=お問い合わせ&body=ご確認をお願いします">
  メールでお問い合わせ
</a>

CC・BCCを設定する

<a href="mailto:example@example.com?cc=cc@example.com&bcc=bcc@example.com&subject=お問い合わせ">
  メールでお問い合わせ
</a>

複数の宛先を指定する

複数の宛先に送りたい場合は、メールアドレスをカンマで区切ります。

<a href="mailto:to1@example.com,to2@example.com">複数宛先に送る</a>

日本語を使う場合のURLエンコード

件名や本文に日本語を直接記入すると、環境によって文字化けが起こる場合があります。
日本語を使う際は URLエンコード(パーセントエンコーディング)が必要です。

たとえば「お問い合わせ」をURLエンコードすると以下のようになります。

%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B

手動でエンコードするのは大変なため、Mailtolink.me のようなコード生成ツールを使うと便利です。
宛先・件名・本文・CC・BCCを入力するだけで、エンコード済みのコードを自動生成してくれます。


メール本文の改行・スペース

本文をあらかじめ設定する際、通常の改行やスペースはそのまま反映されません。
代わりに以下の特殊文字を使います。

記号意味
%0A または %0D%0A改行
%20半角スペース

例:

<a href="mailto:example@example.com?body=%E3%81%8A%E5%90%8D%E5%89%8D%3A%0A%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7%3A">
  フォーマット付きでメールを送る
</a>

mailtoリンクの注意点・デメリット

mailtoリンクは手軽に使えますが、以下のデメリットも存在します。

1. メールアプリが設定されていないと動作しない

mailtoリンクをクリックしても、端末にデフォルトのメールアプリが設定されていない場合は起動しません。
Gmailをブラウザで使っているユーザーの場合、起動に失敗するか、普段使わないメールアプリが立ち上がることがあります。

2. スパムメールの標的になりやすい

HTMLにメールアドレスを直接記述するため、ボットによるクローリングでアドレスが収集されやすくなります。
スパムメールが増える可能性がある点を理解した上で使いましょう。

3. ユーザビリティに課題がある

「クリックするとメールアプリが起動する」という動作を知らないユーザーにとっては、予期しない挙動と感じられることがあります。
リンクテキストにメールアドレスを表示するか、「メールでお問い合わせ」のように明示すると親切です。

4. 添付ファイルの送付には対応していない

mailtoリンクのパラメータに添付ファイルを指定する方法はありません。
ファイルの受け取りが必要な場合は、お問い合わせフォームの利用を検討してください。


mailtoリンクが向いている場面・向いていない場面

向いている場面

  • メールアドレスを公開していて問い合わせを受け付けたい場合
  • コード不要でシンプルな連絡先リンクを設置したい場合
  • 特定の件名を自動入力して問い合わせ種別を分けたい場合

向いていない場面

  • スパム被害を避けたい場合
  • ファイルのアップロードや多項目の入力が必要な場合
  • Gmailなどブラウザメールを使うユーザーが多い場合

お問い合わせフォームとの使い分け

mailtoリンクの代替として お問い合わせフォーム を設置する方法があります。

フォームの場合、メールアドレスを公開せずに済み、スパム対策もしやすいのが特徴です。
無料で使える選択肢としては Googleフォーム が手軽です。
コードなしでフォームを作れるため、初心者にもおすすめです。

一方で、「クリック1回でメールを送れる手軽さ」はmailtoリンクならではのメリットです。
連絡相手が限定されていたり、メールアプリを常用していることがわかっている場合は、mailtoリンクが適しています。


スマートフォンでの動作

スマートフォンでmailtoリンクをタップすると、端末のデフォルトメールアプリ(iPhoneであれば「メール」アプリ、Androidであれば「Gmail」など)が起動します。
スマートフォンはメールアプリが初期設定されていることが多いため、PCよりも動作が安定しやすいです。

関連記事:HTMLのアンカー(アンカータグ)とは?ページ内リンクを簡単に作る方法


まとめ

今回はmailtoリンクについて、基本的な書き方からパラメータの活用方法、注意点まで解説しました。

mailtoリンクは <a href="mailto:メールアドレス"> のシンプルな記述だけで使えますが、件名・本文・CCなどをあらかじめ設定することでユーザーの手間を減らすことができます。
ただし、スパム被害やメーラー未設定の問題があることも理解した上で、用途に応じてお問い合わせフォームと使い分けてみてください。

HTMLリンクのさらに詳しい使い方は初心者向け!HTMLのリンクタグの使い方と便利な応用テクニックもあわせてご覧ください。


参考情報源:

コメント

タイトルとURLをコピーしました