公開日：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%）のみ。
毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。
制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。
保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。
非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。
