公開日：2019.11.12
更新日：2022.11.20
タップで電話・メール・SMSにリンクするHTML
スマホをタップして、電話発信ができるようにするHTMLの書き方です。メール送信、SMS送信もできます。
電話番号リンク
<a href="tel:090-1234-5678">090-1234-5678</a>
解説
- 赤線部分‥発信したい電話番号を書きます。ハイフンは有り無しどちらでも大丈夫です。
- 青線部分‥画面上に表示されるリンクの文字です。
aタグという、ふつうのリンク文字を作るタグですね。リンク先をURLではなく、tel:発信先の電話番号と書くだけです。
同じ要領で、メールやSMS（携帯ショートメール）がタップ（クリック）で送れるリンクも作れます。
メール送信リンク
<a href=”mailto:info@sample.com”>
info@sample.com
</a>
と書きます。
mailto:送信先のメールアドレスですね。
ここを押すとメールソフトが立ち上がり、リンク先のメールアドレスがあらかじめ宛名に入力された新規メール作成画面が表示されます。
SMS（携帯ショートメール）送信リンク
<a href="sms:090-1234-5678">SMSを送信</a>
こういう書き方です。
mailto:送信先の携帯電話番号で、SMSアプリに飛びます。
メールリンク作成の注意点
mailto:は、じつはあまりオススメではない機能とされています。
理由は、スパム（迷惑）メールの格好の標的になってしまうからなんですね。インターネット上で公開されているメールアドレスをロボットが自動収集して、スパムメールの送信リストに加えられてしまいます。
お問い合わせメールフォームがオススメ
メールでの連絡窓口を設けたいときは、お問い合わせメールフォームがオススメです。
こういったものですね→当サイトのお問い合わせページ
オススメの理由：
- 直にメール送信リンクを貼るよりセキュリティが高い
- ユーザーに優しい。真っさらの新規メール画面に書くよりも、名前・メールアドレス・用件項目‥型を作って指示してあげたほうが入力しやすいです。
メールフォーム作成サービスを活用しよう
メールフォームはプログラムを書いて設置するものですが、今では無料で使えるメールフォーム作成サービスもありますので、そちらを使うのがラクですし良いですね。
ガチガチ見た目にこだわらなければGoogleフォームがありますし、WordPressで作られたサイトならContact Form 7プラグインが有名です。（当サイトもContact Form 7を使っています）
またformrunというサービスなら作成〜サイト設置まで簡単にできるのに加え、自動返信サンクスメールや郵便番号からの住所自動入力機能、管理画面から問い合わせ履歴の管理などなど‥便利な機能がたくさんあります。
おまけ〜ボタン風リンクのデザインサンプル
ただの文字よりクリックしてもらいやすくなる、ボタン風デザインのCSSサンプルを作ってみました。スタンダードなやつです。よろしければ使ってください。
HTML
まず、HTMLにはこう書きます。リンクを意味するhref=””のあとに、CSSと紐付けるクラス名（今回はclass=”contactBtn”としてみました）を追加します。
CSS
class=”contactBtn”に当てたCSSがこちらです。
色をはじめ、お好みで変えやすい箇所にはコメントを振ってますのでサイトに合わせていじってみてください。
サイト保守費の決済を全自動でラクにしませんか？
この記事を読んでくださったWeb制作会社・フリーランスのあなたへ。
サイト保守契約は月払いが多いと思いますが、決済方法はどうされていますか？
便利なのがクレジットカード定期引き落とし。一度お客様に簡単な手続きをいただければ毎月自動で決済してくれるので、制作会社・お客様とも手間が大きく軽減されます。
当事務所ではSquare（スクエア）というサービスを3年以上利用中です。
導入は無料で、コストはクレジット決済手数料の3.75%のみ。毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いのではないでしょうか。
手続き操作もカンタンで、「サブスク販売で定期的なクレジットカード決済を導入する（Squareを利用）」という記事で解説もしていますので、ご参考ください。
保守費決済のほか、ちょっとした小額決済も請求リンクを送ってすぐ完了。非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。