スマホで電話番号がタップできない原因と直し方

「ホームページに載っている電話番号を押しても電話がかからない」とお客様から言われて、自分のスマホで試したら普通にかかった――この食い違いが、電話が主な問い合わせ経路になっている会社で一番よく起きる取りこぼしです。見た目は何も壊れていないので、社内では誰も気づきません。ここではデザインの話ではなく「電話が鳴っていない＝売上が落ちている」現象として、原因の切り分けと直し方を順番に書きます。

結論

スマホで電話番号がタップできない原因は、実務上ほぼ3つに絞れます。①電話番号がロゴやバナーなどの画像に焼き込まれている（文字ではないのでタップできない）、②文字ではあるがtel: のリンクが付いていない、③リンクはあるが他の要素に重なられている・タップ領域が小さすぎて指が当たらない。この3つを上から順に見れば、専門知識がなくても「自分で直せるか、制作会社に頼むか」までは判断できます。

直し方の正解も1つです。画面に見せる文字は 03-1234-5678 のように人が読める形にし、リンク先は tel:0312345678 のように書く。タップ領域は、W3C の WCAG 2.2 で最低 24×24 CSS ピクセル、Google の web.dev では推奨として およそ 48 デバイス独立ピクセル（約 9mm）が挙げられています。基準によって数値が違うので、どちらの基準で作るのかを決めてから触るのが安全です。

なぜ「自分のスマホでは押せたのに客は押せない」が起きるのか

やっかいなのは、確認した人と電話をかけられなかった人で端末もブラウザも違うことです。とくに iOS の Safari は、ページ内に電話番号らしい数字があると自動でリンクにする挙動を持ちます。Apple の公式ドキュメントにも「Safari on iOS では電話番号の検出が既定でオンになっている」と明記されています（Apple Developer / Phone Links）。

つまり tel: を書き忘れていても、iPhone で見た人は「押せる」のです。一方でブラウザや OS によってはこの自動リンクが働かないことがあり、その環境の人だけが「押せない」と言ってきます。だから社内確認では再現しません。ここを「気のせい」で片づけると、そのまま何か月も電話が鳴らない状態が続きます。

なお、この自動リンクは意図的に切ることもできます。Apple のドキュメントでは、format-detection という meta タグに telephone=no を指定すると検出を止められると説明されています。過去の制作でこの1行が入っていると「文字は電話番号なのに、どの環境でも一切リンクにならない」状態になり、これも確認対象です。

もう一点、スマホで何かがおかしいときは電話番号だけの問題ではないこともあります。文字が重なる・横にはみ出す・ボタンが画面外へ出るといった症状が同時に出ているなら、スマホで表示が崩れるときの原因の見つけ方から先に読んだほうが早く着地します。

原因① 電話番号が画像に入っている

一番多く、一番気づかれないのがこれです。「お電話でのお問い合わせ 03-1234-5678」と入った横長のヘッダー画像、ロゴと電話番号がひとつになった画像、バナーの中に番号が書かれているケース。どれも人の目には電話番号ですが、ブラウザから見れば絵です。

見分け方は単純で、スマホでその番号を長押しすることです。文字なら選択できたりリンクのメニューが出ますが、画像なら「画像を保存」が出るか何も起きません。PC なら番号の上をドラッグして文字が反転するかで判別できます。反転しなければ画像です。

画像の中の電話番号はタップできない

画像は tel: を持てません。したがって「画像のままタップできるようにする」正攻法はなく、対処は2つです。1つは画像全体をリンクで包んで tel: を指定する方法。もう1つは、画像から番号部分を外し、文字として書き直してリンクを付ける方法です。

後者を勧めます。文字にしておけば検索エンジンにも読まれ、文字サイズの拡大にも追従し、番号が変わったときに画像を作り直す必要もありません。画像を包む方法は応急処置として有効ですが、画像のどこを押しても発信されるため、住所も入った画像だと押し間違いが起きます。

原因② 文字だがリンクになっていない

文字として書かれているのに tel: の指定がない状態です。制作時にただのテキストとして流し込んだ、後から社内の担当者が CMS の本文に番号を書き足した、というときに起きます。前述のとおり iOS では勝手にリンクになることがあり、公開後のチェックをすり抜けます。

正しい書き方はこうです。

<a href="tel:0312345678">03-1234-5678</a>

リンク先（href）は数字だけ、見せる文字はハイフン入りで読みやすく。tel: という URL スキームの仕様は MDN にまとまっており、動作が端末の能力によって変わることもそこに書かれています。

iPhone だけ勝手に電話番号がリンクになる

これは不具合ではなく、Safari 側の電話番号検出機能によるものです。ただし「iOS なら必ずリンクになる」と考えるのは危険です。自動検出は数字の並び方や前後の文字で判定が変わるため、同じサイトの中でも拾われる番号と拾われない番号が出ます。OS の世代によっても挙動が変わります。

実務の結論としては、自動検出に頼らず、全部の電話番号に自分で tel: を書くのが唯一の安全策です。自動検出が働いた環境では二重にはならず、働かなかった環境でも押せる。確認のコストも下がります。

原因③ リンクはあるのに押せない

ソースを見ると tel: が入っているのに、実機では反応しない。このときは「当たっていない」と考えます。よくあるのは次の3パターンです。

• 追従する固定ヘッダーや画面下部のバナー、Cookie 同意の帯が電話番号の上に重なっている（見えているのに、指は上の要素を押している）
• 電話番号のリンク領域が文字の高さぶんしかなく、指の接地面より小さい
• 装飾のために番号の上に透明な要素が敷かれている（背景画像の枠、アニメーション用の層など）

1つ目は特に見つけにくいです。スクロールしたときだけ、画面の高さが低い端末だけ、といった条件付きで起きるため手元では再現しません。判定は「番号の少し上や少し下を押すとかかるか」で当たりを付けられます。ずれた位置で反応するなら重なりか領域の問題です。

タップ領域の推奨値は出典によって違う

数字がひとり歩きしやすいので、出典ごとに分けて書きます。

• W3C / WCAG 2.2 達成基準 2.5.8「ターゲットのサイズ（最小）」＝ 少なくとも 24×24 CSS ピクセル（間隔による例外あり）
• W3C / WCAG 2.1 達成基準 2.5.5「ターゲットのサイズ（拡張）」＝ 44×44 CSS ピクセル
• Google web.dev の推奨＝ およそ 48 デバイス独立ピクセル（48×48 は約 9mm）。アイコン自体が 24px でも余白で 48px まで広げる考え方
• Lighthouse の SEO 監査「タップターゲットのサイズが適切です」＝ 48px×48px より小さいと失敗扱い

「48px 以上にしないと違反」という言い方は正確ではありません。法令や調達要件で WCAG を参照している場合は 24×24 が最低線、体験と Lighthouse のスコアを両立させたいなら 48×48 を狙う――という整理が実務的です。電話番号は最重要の導線なので、迷ったら 48px 側に寄せて損はありません。

症状から原因を切り分ける判断表

ここまでを1枚にまとめます。上から順に当てはめれば、外注が必要かも分かります。

この表で「自分」に当たるのは②だけです。①と③は HTML と CSS を触ることになるので、無理に本文へ HTML を貼り込むより、制作会社に「どの症状が出ているか」を伝えて直してもらうほうが早く、壊しません。なお、こうしたスマホ側の作りが全体的に古いままなら、部分修理ではなく作り直しの検討に入る段階です。判断の目安はスマホ対応を後から入れるときの費用の考え方にまとめています。

電話が鳴らない状態は、直せば翌日から戻ります。Mihata では、こうした「見た目は普通なのに問い合わせが取りこぼされている」箇所の洗い出しから HP 制作までを行っております。記事の途中で恐縮ですが、よろしければ合わせてご覧いただけたら嬉しいです。

電話番号の書き方の正解表

番号の種類ごとに表示とリンク先の書き方を整理しました。原則は「表示は人が読める形、リンク先は機械が読める形」です。

海外からの発信を想定するなら + 付きが正解です。RFC 3966 では、世界で一意に決まる番号は先頭の + で識別され、+ が付かないローカル番号には文脈（phone-context）が必要だと定めています（RFC 3966）。国内のお客様しか想定していないサイトで +81 表記だけにすると読みにくくなるので、表示は国内形式、リンク先だけ +81 にするのも現実的な折衷です。

内線番号をリンクに含めたくなりますが、勧めません。Apple のドキュメントでも * や # を含む URL は電話アプリが発信を試みないと明記されており、待機や内線指定の記法は環境差が大きい領域です。内線は文字で書いて、人に押してもらうのが確実です。

ハイフンありとなし、どちらが正しいか

「表示はあり、リンク先はなし」が答えです。RFC 3966 では、ハイフンやピリオド、括弧は視覚的な区切り（visual separator）で、読みやすさを助けるだけで番号の同一性の判断には使われないと定義されています。つまりリンク先にハイフンを入れても仕様上は誤りではありません。

それでも数字だけを勧めるのは、実機の解釈のばらつきを減らすためです。同じ仕様書の中で、tel URI は視覚的区切りにスペースを使ってはならないとも定められています。全角の数字や全角ハイフン、番号の途中に入った改行も事故のもとです。表示側は自由に、リンク側は半角数字（と必要なら先頭の +）だけ、と割り切ってください。

PC で開くとエラーになる・何も起きない

「PC で電話番号を押したら怒られた」という報告は、たいてい不具合ではありません。PC のブラウザは電話をかける機能を持っていないため、tel: を開こうとすると、通話できるアプリを探すか、何も起きないか、外部アプリを起動するかの確認が出ます。MDN も tel: リンクの挙動は端末の能力によって変わり、OS 側の通話アプリが処理する場合があると説明しています。

「直す」のではなく「電話以外の受け口を用意する」

PC 側の挙動を変えることはできません。ですから対処は設計側にあります。電話番号の近くに必ずフォームやメールの導線を置き、PC で見ている人が別の方法で連絡できるようにしておく。これだけで「押したら怒られたのでやめた」という離脱を防げます。

ここで注意したいのは、フォームを置いたのに送信内容が届いていないという二次事故です。電話が直ったのに問い合わせが増えない場合は、フォームから送ったメールが届かないときの確認手順も併せて点検してください。電話が主導線の業種で電話以外の受け皿を作る流れそのものは、電話予約ばかりのクリニックをWeb予約へ移す進め方で扱っています。

押した回数を数えたい

ここが直したあとで一番効きます。電話リンクのタップはアクセス解析のイベントとして数えられます。数えておけば「直したら電話が増えた」を勘ではなく数字で言えます。

計測の考え方と、限界

GA4 の拡張計測機能が自動で拾うクリックは外部サイトへのリンク（離脱クリック）が対象で、tel: がそのまま意図どおりに数えられるとは限りません。確実にやるなら、カスタムイベントとして自分で送る設計にします。Google タグマネージャーを使っているなら、クリックトリガーでリンク先が tel: で始まる場合だけ発火させる形が扱いやすいです。

ただし限界も正直に書きます。数えられるのは「押した回数」までで、実際に通話がつながったか、話が商談になったかは分かりません。押したあとに発信をキャンセルした人も1件に数えられます。それでも、修正の前後で押された回数を比べる用途には十分機能します。Mihata では改修の効果をこの数字で確認してから次に進めるようにしており、「直したつもりで直っていない」を早く見つけられます。

もうひとつ、電話リンクを押す前にページが表示され切っていなければ、そもそも押されません。読み込みに数秒かかるページでは電話番号にたどり着く前に離脱が起きるので、スマホの表示速度を改善する優先順位も同じ枠で見ておくと効率がいいです。

直したあとに確認する3点と、できないこと

修正後は3点だけ確認してください。1点目、iPhone と Android の両方の実機で押して発信画面まで出るか（発信はキャンセルで問題ございません）。2点目、スクロールした状態と横向きでも押せるか。固定ヘッダーの重なりはこの条件で出ます。3点目、電話番号が載るページを全部洗い出したか。トップだけ直して会社概要や店舗案内が漏れている例は非常に多いです。

できないことも書きます。ブラウザや OS 側の挙動はこちらから変えられません。自動リンクの有無、発信前の確認ダイアログ、通話アプリの選択画面はすべて端末側が決めます。「どの環境でも同じ体験にする」ことは不可能で、できるのは「どの環境でも押せる状態にしておく」ことだけです。

もう1点。電話番号を直しただけで問い合わせが増えるわけではなく、取りこぼしが止まるだけです。伸ばす打ち手は別で、サイト経由の連絡をどれだけ見込めるかはサイトが無くても問い合わせは来るのかという問いで扱っています。

まとめ

スマホで電話番号がタップできないときは、画像・リンク未指定・重なりとタップ領域の3つを上から順に見る。書き方は表示がハイフンあり、リンク先が半角数字だけ。PC の挙動は直せないのでフォームを併記し、直したあとはタップ回数をイベントで数えて効果を確認する。ここまでやれば、同じ取りこぼしは二度起きません。

自社のどこで詰まっているか判断がつかない、あるいは見るべき箇所は分かったが触るのが不安、という段階でしたら状況を伺ったうえで具体的にお答えします。無理に制作をお勧めすることはありませんので、気軽にお声がけください。