Mailtoリンクの究極ガイド：構文、パラメータ、実装

Mailtoリンクとは？（そして、なぜそれを使用すべきか）

mailtoリンクは、ユーザーのデフォルトのメールクライアントを起動して新しいメールの作成を開始させるHTMLリンクの一種です。これは、RFC 6068で標準化されたメールアドレス用のURI（Uniform Resource Identifier）スキームです。

ユーザーを別のウェブページに誘導する代わりに、mailtoリンクは受信者のメールアドレスがすでに入力された「新規メール」ウィンドウを開きます。

利点：

• シンプルさ： 訪問者がメールを送信できるようにする最も簡単な方法です。
• バックエンド不要： 連絡先フォームとは異なり、サーバーサイドの処理は必要ありません。
• 親しみやすさ： ユーザーは使い慣れた自身のメールクライアントを操作します。

欠点：

• クライアントへの依存： ユーザーがデバイスにメールクライアントを設定している必要があります。
• スパム： 平文のメールアドレスはスパムボットによって収集される可能性があります。

Mailtoリンクの構造：単純なものから複雑なものまで

基本：mailto:[email protected]

mailtoリンクの最も単純な形式は、受信者のメールアドレスのみを含みます。

<a href="mailto:[email protected]">お問い合わせ</a>

単一パラメータの追加：クエスチョンマーク ?

件名や本文などのパラメータを追加するには、メールアドレスの後にクエスチョンマーク（?）を付けます。最初のパラメータは通常subjectです。

<a href="mailto:[email protected]?subject=製品に関する問い合わせ">問い合わせを送信</a>

複数パラメータの追加：アンパサンド &

複数のパラメータを追加するには、アンパサンド（&）で区切ります。

<a href="mailto:[email protected]?subject=製品に関する問い合わせ&body=こんにちは、私は...に興味があります">詳細な問い合わせを送信</a>

重要： ?を使用するのは最初のパラメータだけです。それ以降のパラメータはすべて&を使用する必要があります。

すべてのMailtoパラメータの詳細解説

この記事の中心部分です。各パラメータにはコード例が含まれています。

subject：件名行を事前入力する

メールの件名を事前に入力します。特殊文字をエンコードすることを忘れないでください。例えば、スペースは%20になります。

<a href="mailto:[email protected]?subject=見積もり依頼">見積もりを依頼</a>

body：本文テキストを事前入力し、改行（%0A）を処理する

メールの本文を事前に入力します。これはエンコーディングのために最もエラーが発生しやすいパラメータです。改行は%0Aとしてエンコードする必要があります。

改行を含む例：

<a href="mailto:[email protected]?subject=バグ報告&body=マイアカウント%0A---%0Aバグの詳細：">バグを報告</a>

これにより、次のようなメール本文が作成されます：

マイアカウント
---
バグの詳細：

cc & bcc：CCおよびBCC受信者を追加する

cc（カーボンコピー）およびbcc（ブラインドカーボンコピー）に受信者を追加できます。

<a href="mailto:[email protected][email protected]&[email protected]">レポートを送信</a>

複数の受信者：複数のメールアドレスを追加する方法

to、cc、またはbccフィールドに複数の受信者を指定するには、カンマ（,）で区切ります。

<a href="mailto:[email protected],[email protected]?subject=共同作業">営業とマーケティングに連絡</a>

すべてをまとめる：実世界の例

すべてのパラメータを組み合わせた複雑な例です。

<a href="mailto:[email protected][email protected]&[email protected]&subject=メールの件名&body=これはメールの本文です。%0A改行あり。">完全な例</a>

• mailto:[email protected]：メインの受信者。
• [email protected]：最初のパラメータ、cc用、?を使用。
• &[email protected]：2番目のパラメータ、bcc用、&を使用。
• &subject=メールの件名：3番目のパラメータ、件名、&を使用。スペースの%20に注意してください。
• &body=...：4番目のパラメータ、本文、&を使用。改行の%0Aに注意してください。

これを手でコーディングしてエンコーディングエラーを心配するのにうんざりしていませんか？当社の無料Mailtoリンクジェネレーターは、完璧でエラーのないリンクを数秒で作成します。

お好みの環境でMailtoリンクを作成する方法

HTMLでmailtoリンクを作成する方法

標準的な方法で、<a>タグを使用します。

<a href="mailto:[email protected]">メールを送信</a>

Markdownでmailtoリンクを追加する方法

Markdownのリンク構文は完璧に機能します。

[メールを送信](mailto:[email protected])

JavaScriptを使用してmailtoリンクを作成する方法

DOMでmailtoリンクを動的に作成および操作できます。

const email = '[email protected]';
const subject = '動的な件名';
const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}`;

// ユーザーをリダイレクトする
window.location.href = mailtoLink;

// または、既存のリンクのhrefを設定する
const linkElement = document.getElementById('my-contact-link');
linkElement.href = mailtoLink;

結論：あなたは今やMailtoマスターです

堅牢なmailtoリンクを作成するための構文、パラメータ、ベストプラクティスを学びました。これらは直接的なコミュニケーションのための強力でシンプルなツールです。リンクが常に完璧であることを確認するために、当社のジェネレーターツールをブックマークしてください！