多くのWebサイトでお問い合わせにはフォームを設置しているかと思います。入力ミスのチェックなど機能のついたものも多いのですが、初心者の方には設置のハードルが高く感じるかもしれません。そんな時は手軽に導入できるmailtoリンクを使ってみましょう。リンクをクリックするとユーザーがいつも使っているメールアプリが起動するので、送信元のメールアドレスを入力する手間も省けますよ。リンクテキストをクリックするとメールアプリが起動し、メール作成画面が表示されます。使って続けて記述していきます。使ってつなげましょう。メールの件名を指定できます。メール本文を指定できます。書いたメールアドレス以外のメールアドレスを送信先として指定できます。,(カンマ)でつなぎます。書いたメールアドレス以外のメールアドレスを宛先を伏せて指定できます。,(カンマ)でつなぎます。href="mailto:hello@example.com?bcc=info@example.com">お問い合わせ</a>mailtoリンクのコードを生成してくれる「Mailtolink.me」Mailtolink.meではメール作成画面のようなデザインでmailtoリンクのコードを生成してくれます。宛先や件名はもちろん、CC、BCCの設定もOK。自分で手打ちしなくていいので記述ミスを防げます。Code」をクリックするとクリップボードにコピーできます。href="mailto:hello@example.com?cc=mana@example.com&?subject=Hello">お問い合わせ</a>通常日本語だと文字化けするので「日本語のエンコード」という作業が必要になりますが、このサイトでは自動的にエンコードされますよ。mailto:hello@example.com?subject=%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B&body=Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E3%81%AE%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%EF%BC%9A上記画像にある日本語を含めた設定にすると、このような文字列がコピーできます。「表示がおかしくなっちゃった!?」と思うかもしれませんが、これで実際にメールを立ち上げるときちんと日本語で表示されます。起動するメールの種類を選択できるようにする「MailtoUI」mailtoリンクはユーザーがデフォルトで設定しているメールアプリを起動しますが、それが逆に不便に感じることもあるでしょう。そんな時使えるのがMailtoUI。mailtoリンクをクリックすると、以下の選択肢から選べるモーダルウィンドウを表示できるようになるJavaScriptです。ブラウザーのGmailブラウザーのOutlookブラウザーのYahoo.comデフォルトのメールアプリメールアドレスをコピーする通常のmailtoリンクではどのメールから送信できるか選択できないのが難点でしたが、このような選択肢があると便利ですね。直前にmailtoui-min.jsを読み込ませます。用意されているCDNを使ってもいいですし、ファイルのダウンロードも可能。タグに「mailtoui」というクラスをつけてmailtoリンクを貼れば完成です。browser」などと書かれている表記を変更できます。迷惑メール対策もできる「mailgo」MailtoUIと同様、mailtoリンクをクリックするとモーダルウィンドウを表示できるmailgo。機能としてはほぼ同じですが、こちらでは迷惑メール対策用の「spam-less」オプションもあります。mailtoリンクのデメリットとして挙げられる迷惑メール。気になる方はこちらを使ってみるといいでしょう。直前にmailgo.min.jsを読み込ませます。用意されているCDNを使ってもいいですし、ファイルのダウンロードも可能。src="https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.js"></script></body>CDNは以下の2種類があります。https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.jshttps://cdn.jsdelivr.net/npm/mailgo@0.6.7/dist/mailgo.min.jsファイルを読み込ませるだけで設定完了!「spam-less」をしない場合は特にクラスなどを付与しなくても、すべてのmailtoリンクでモーダルウィンドウが表示されます。迷惑メール対策用の使い方です。data-domain="example.com">お問い合わせ</a>と記述します。CodePen.オプションで「spam-less」バージョンでもCC、BCC、件名、本文も属性として記述できます。詳しくは公式ドキュメントを参照してください。昔からあるmailtoリンクですが、便利なツールやスクリプトをうまく使って取り入れるといいですね!「でもやっぱりフォームがいい!」という方は過去記事「初心者でも簡単!日本語で手軽に設置できるフォーム作成サービス3選」を参考に設置してみてください!シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。