BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
AndroidやiOSの搭載のスマートフォンは、ページに含まれる「電話番号に見える」番号を検出して、電話をかけられるリンクを自動で設定します。
ただ、この自動検出機能は、電話でない番号にまでリンクを設定してしまうことがあるのです。
また、そもそも電話番号をリンクにしたくない場合もあります。
そのようなときのために、この自動検出機能はオフにすることができます!

今回は「スマホで電話番号が自動リンクにならないようにする方法」をご紹介いたします。

自動検出機能をオフにするためには

自動検出機能をオフにするためには、headタグの中に上記タグを追加します。

電話番号を設置したいときは?

content="telephone=no"を入れた状態で電話番号のリンクを設置したい場合は通常通りa要素を使って設置することができます。

スマホでタップした時だけ電話発信を有効にする方法

a href="tel:"で電話番号を設置した場合、スマホだけでなくパソコンでも電話番号発信ができてしまいます。
最近ではノートPCで電話をかけられるのですが、あまりその活用はされていないと思います。
ユーザーの混乱を防ぐためにも、パソコンでは電話発信が機能しないように設定していきます。
パソコンでは電話番号リンクが必要ない場合は、スマホでタップした時だけ電話発信を有効にしましょう。

まとめ

電話番号でない数字が電話番号と認識されるのはユーザーが困惑してしまうので、ユーザビリティの低下に繋がります。自動検出機能をオフにする記述に関してはデフォルトで入れておくことをオススメします!

こちらもおすすめ

【jQuery】コピペOK!スマホのみ、電話番号リンクを追加する方法ユーザーエージェントでPC・スマホを判断し、aタグをつける方法です。jQueryで作業し、コピペで貼り付けるだけで実装可能です!C/スマホでの切り替えでtelリンクを表示・非表示するとユーザーにとって分かりやすくなります。 またスマホの閲覧時にそのまま電話出来たり予約ができ、お問い合わせ率がアップする方法でもあります。