スマホサイトの電話ボタン設計｜tel:リンクの実装・設置場所・iOSの警告まで解説

スマートフォンからのアクセスが全体の8〜9割を占める現在（総務省 通信利用動向調査）、「電話番号をタップしてそのまま発信できる」機能はホームページの問い合わせ導線として欠かせません。しかし、tel:リンクの実装方法を間違えていたり、設置場所の設計が適切でないサイトは意外と多くあります。

本記事では、Web制作の現場でよく使うtel:リンクの正しい書き方から、電話ボタンの設置場所の考え方、iOSで表示される警告の対処法まで、実装に必要な知識をまとめて解説します。

1. tel:リンクの正しい実装方法

電話番号をタップで発信できるようにするには、aタグのhref属性に tel: スキームを使います。

基本の書き方

<!-- 基本形（ハイフンなし） -->
<a href="tel:0312345678">03-1234-5678</a>

<!-- ハイフンありでも動作する -->
<a href="tel:03-1234-5678">03-1234-5678</a>

<!-- フリーダイヤルの場合 -->
<a href="tel:0120000000">0120-000-000</a>

href属性の番号はハイフンがあっても正常に発信されるため、どちらの形式でも動作します。表示テキストは読みやすい形式（ハイフンあり）にしておくのが一般的です。

古い記法・間違いやすい書き方

callto: はSkype向けのスキームであり、iOSやAndroidのスマートフォンでは意図通りに動作しないケースがあります。必ず tel: を使いましょう。

2. 電話ボタンの設置場所と効果の比較

tel:リンクをどこに設置するかで、ユーザーの行動率が大きく変わります。サイトの目的・業種に合わせて設置場所を検討してください。

ひとつのページに複数の電話番号リンクを設置すること自体は問題ありませんが、ヘッダーとフッターに同じ番号を短時間に連続タップした場合、後述するiOSの警告が表示されることがあります。過剰な設置は避け、ユーザーの動線を意識した配置にしましょう。

3. iOSで「このWebサイトから自動的に電話をかけることは禁止されています」が表示される原因と対処法

実録：納品直前に「電話がかからない」と連絡が来た話

以前、あるコーポレートサイトの納品直前に、クライアントから「一部の端末で電話ボタンを押しても電話がかからない」というご連絡をいただいたことがあります。納品日当日だったため、正直なところ一瞬ヒヤッとしました。

急いで確認してみると、原因は実装ミスではなく、iPhoneで表示されていた「このWebサイトから自動的に電話をかけることは禁止されています」という警告でした。クライアントが動作確認のため、同じ電話ボタンを短時間に何度もタップしていたことで、iOSのセキュリティ機能が働いた結果だったのです。

Appleの標準仕様であること、サイト側の不具合ではないことをお伝えし、事なきを得ました。しかし、もしこれが公開後にエンドユーザーから寄せられていたら「このサイト壊れている？」と離脱につながっていた可能性もあります。

教訓：この警告は「仕様」ですが、知らなければ誰でも「サイトの不具合」に見えます。納品時にクライアントへ事前説明しておくこと、そして同一ページ内に電話リンクを過剰に配置しない設計が、こうしたトラブルを未然に防ぎます。

なぜ表示されるのか

iOS 10以降のSafariに実装されたセキュリティ機能です。同一ページ内のtel:リンクを短時間に複数回タップした場合に表示されます。意図せず電話がかかってしまうことを防ぐための仕様です。

ユーザーが「通話を許可」を選択すれば通常通り発信できます。サイトがウイルスに感染しているわけではなく、Appleの標準的なセキュリティ動作です。

Web制作者側でできることは？

残念ながら、この警告はAppleの仕様のため、Web制作者側で完全に回避することはできません。ただし、設計で誤操作を減らすことは可能です。

• 同一ページに電話番号リンクを過剰に設置しない
• ヘッダーとコンテンツ内など近い位置に同じリンクを重複させない
• フローティングボタンと固定ヘッダーを同時に使う場合は特に注意

ユーザーからの問い合わせへの対応

「サイトを開いたら警告が出た」とクライアントやユーザーから問い合わせを受けた場合は、「Appleの標準的なセキュリティ機能であり、サイト自体に問題はない」と説明して問題ありません。

4. Android・PCでの挙動の違い

PCからのアクセスでtel:リンクをクリックしても、電話アプリが設定されていなければ何も起こりません。PC向けにはtel:リンクと並べて問い合わせフォームへの導線を必ず用意しておきましょう。

5. よくある実装ミス

ミス①：callto: を使っている
Skype向けのスキームのため、iOSでは動作しない場合があります。必ず tel: を使いましょう。

ミス②：電話番号をテキストだけで記載している
一部のスマートフォンブラウザは数字列を自動的に電話番号と判断してリンク化しますが、すべての環境で動作するわけではありません。tel:リンクとして明示的に実装するのが確実です。

ミス③：スマホのみ表示したいのにPC版にも出てしまっている
PCからtel:リンクをクリックしても発信できないケースが多く、体験を損ないます。CSSのmedia queryやJavaScriptでスマホのみ表示する制御を入れると親切です。

ミス④：電話番号の間にスペース・括弧・ドット等を挟んでいる
ハイフン（-）は問題なく動作しますが、スペース・括弧（ ( ) ）・ドット（.）などをhref属性に含めると動作が不安定になる場合があります。表示テキスト側は自由にフォーマットして構いませんが、href内の番号はハイフン以外の記号を避け、シンプルに保ちましょう。

よくある質問（FAQ）

Q. tel:リンクはPCでクリックするとどうなりますか？

FaceTimeやSkypeなど、電話機能に対応したアプリが設定されていれば起動します。アプリが設定されていないWindowsのChromeなどでは何も起こらないことが多いです。PC向けには問い合わせフォームなど別の導線を用意しておくことをお勧めします。

Q. iOSの警告を完全になくすことはできますか？

Appleの仕様（Apple公式ドキュメント）のため、Web制作者側での完全な回避はできません。同一ページ内での電話リンクの過剰な設置を避け、設計で誤タップを減らすことが現実的な対策です。

Q. フリーダイヤル（0120）もtel:リンクで実装できますか？

できます。<a href="tel:0120000000">0120-000-000</a> の形式で正常に動作します。

Q. スマホ専用で電話ボタンを表示したい場合はどうすればいいですか？

CSSのmedia queryを使い、PC表示では非表示にする方法が一般的です。@media (max-width: 767px) { .tel-btn { display: block; } } のように制御します。

納品・公開前に確認すべきチェックリスト

冒頭のエピソードのようなトラブルを防ぐため、電話ボタンを実装したサイトを納品・公開する前は以下を必ず確認してください。

• href属性は tel: で始まっているか（callto: になっていないか）
• href内の電話番号にスペース・括弧・ドット等が混ざっていないか（ハイフンは問題なし）
• 実機のiPhoneとAndroidの両方でタップ発信できるか（シミュレータだけで判断しない）
• PCから開いた際に電話リンクが無反応でも離脱しない導線になっているか（フォーム等の代替CTAを併設）
• 同一ページに電話リンクを過剰配置していないか（iOS警告の発生を抑止）
• クライアントへ「iOSの警告はApple仕様であり不具合ではない」と事前共有しているか
• フリーダイヤル・IP電話・代表番号など、複数番号がある場合に正しい番号が設定されているか

納品直前に慌てないためには、このチェックリストを制作フローに組み込んでおくことをおすすめします。

まとめ

• tel:リンクは href="tel:電話番号" が正しい形式。callto: は使わない
• 設置場所はサイトの目的・業種に合わせてヘッダー・フローティング・CTAを使い分ける
• iOSの「電話禁止」警告はApple仕様。回避不可だが、設計で誤タップを減らせる
• AndroidはiOSのような警告は出ない。PCでは発信できないことが多いため別導線を用意する
• PCからのアクセスにはフォームやチャットなど別の問い合わせ手段をセットで設置する

ホームページの問い合わせ導線の設計についてはコーポレートサイト制作もあわせてご覧ください。

電話ボタンの設計・実装でお困りの方へ

tel:リンクの実装はシンプルですが、設置場所の設計やスマホ対応の作り込みはサイト全体の構成と深く関わります。「電話ボタンをつけたいが、そもそもスマホ対応できているか不安」という方は、お気軽にご相談ください。具体的な予定がない段階でのご相談も承っています。

• 料金・費用ページ
• SEO対策コンサルティング

出典

• Schema.org（構造化データの公式仕様）
• Google Search Central（検索・構造化データの公式情報）
• Web Vitals（Core Web Vitalsの公式定義）
• Google検索公式ブログ（AI Overview等の発表情報）

関連記事

• AIO・GEO・LLMOの違い
• エンティティとは？AI検索に覚えてもらう5つの方法
• ブログ・制作実績・FAQ 3つのシグナルの違い
• AI検索からの流入を約3倍にした12ヶ月の施策記録
• AIO対策チェックリスト
• ホームページ制作の流れ（全7ステップ）
• ChromeでURLが省略表示される原因と戻し方