電話・メールリンクの作り方と点検｜tel・mailto・スマホの動作を確認する

スマートフォンで電話やメールのリンクを押しても連絡できない場合は、サイトのリンク先、端末のアプリ、受付の運用を分けて確認します。リンクを設置しただけでは通話やメール受信が成立したとは限りません。表示している窓口と実際の宛先をそろえ、使えない端末や時間外にも連絡方法を判断できる案内を用意しましょう。

この記事は企業サイトの担当者と、窓口を実装・検収する制作会社向けです。telとmailtoの役割、押しやすさ、端末ごとの点検、実対応の確認を説明します。コードは説明用の構造例で、公開前には正式な窓口へ差し替え、担当者と試験を合意してください。

1. 実装より先に、窓口の用途と受付時間を決める

誰が、何の連絡を受け付けるか

電話番号やメールアドレスが分かっても、それを新規相談に使ってよいとは限りません。代表、採用、既存顧客、緊急連絡など、窓口の用途を確認します。ページの対象者と担当の仕事が合わなければ、連絡してもたらい回しになることがあります。

「いつでも対応」「即日返信」などは、実際の体制と一致する場合にだけ掲載します。時間外に電話リンクを隠す仕組みを作る前に、営業時間と代替方法を明示するだけで目的に合うかを考えます。フォームを案内する場合も、実際にその用途を受け付けるかを確認してください。

2. 電話は、表示する番号とtelの宛先を別に照合する

telは電話番号を示すURIです。見える文章とhrefの値は別なので、表示番号だけ訂正して宛先が古いまま、という状態がないか確認します。MDNのリンク要素の説明と、telの仕様RFC 3966を技術上の参照にできます。

構造は<a href="tel:正式な電話番号">電話で相談する（表示番号）</a>です。「正式な電話番号」は置換が必要な説明用の語で、そのまま実装する値ではありません。番号を管理する担当から、表示用とリンク用の値を受け取ってください。リンク用には全角数字や余計な説明を混ぜず、仕様に合う番号を使います。

国際形式は「+」と国番号を含む形です。日本の通常の番号を国際形式にする場合、国番号81の後に国内の先頭0を除いた番号を続ける形になります。ソフトバンクの日本の番号へ発信する案内も、この番号の組み立てを説明しています。番号種別や海外からの接続可否、社内内線等は窓口の提供元へ確認します。単に+81を先頭へ足して完成とせず、元番号と仕様を照合してください。内線や自動音声の操作を普通の番号文字列へ思いつきで埋め込まないようにします。

telの宛先が適切でも、端末の対応アプリや通信条件で使えるかは異なります。固定電話から番号を入力する人にも伝わるよう、画像だけの番号にせず、読める文字として番号と用途を示す方法が役立ちます。

3. mailtoはメール作成の入口で、送信・受信とは分ける

宛先と件名候補を確認する

mailtoはメールの宛先等を指定するURIです。例えば<a href="mailto:info@example.com">メールを作成する</a>は構造の例です。example.comは例示用で、Acquaや自社の窓口ではありません。利用者が設定しているメールアプリ等で作成画面へ進むことがあり、リンクを押すだけでメールの送信が完了するものではありません。

件名や本文の候補を含めるなら、mailtoの仕様RFC 6068に沿ったエンコードと、利用する端末での表示を確認します。日本語、空白、&、改行を含む文をそのままURLへつなげると、意図しない分割や表示になる場合があります。候補の内容は利用者が確認して変更・送信するもので、固定された受付データではありません。

問い合わせ内容や個人情報をURLの本文候補へ先回りして埋め込む方法は避けます。また、宛先を複数入れる、CC/BCCを付ける場合は、業務と情報の扱いが適切かを担当者へ確認します。サイト担当だけで配布先を増やさないでください。

メールアプリを使わずWebメールだけを利用する人もいます。作成画面を起動できない場合に、文字として宛先を確認できる、コピーできる、別のフォームを使えるなどの方法を検討します。フォームが同じ相談を受け付けるなら案内できますが、存在するだけで代替になると判断しません。

4. 何が起きるリンクか分かり、押せる形にする

「お問い合わせ」の一語で電話、メール、フォームを混ぜると、押した後の動作が予想しにくくなります。「電話で相談する」「メールを作成する」「相談フォームを開く」のように、動作と用途が伝わる表現にします。アイコンだけの場合も、利用者や支援技術が目的を理解できる名前を用意します。

リンクは必要な宛先を持つa要素を基本にします。ボタンに見せる場合も、文字だけでなく操作できる範囲、周囲との間隔、見えるフォーカスを確認してください。小さな番号を押すしかない、別のリンクが重なる、固定ボタンが本文やフォームを隠す状態を避けます。

スマートフォンだけ表示し、PCでは番号そのものをなくすことが適切とは限りません。PCから電話の番号を確認する人や、連携した通話アプリを使う人もいます。デザイン上の都合だけで宛先情報を消さず、対象利用に合わせて連絡手段を残します。W3Cのリンク目的の基準も、リンクの意味が伝わるかを確認する材料になります。

5. 端末とアプリの違いを、未確認と区別する

同じブラウザ幅でもアプリの状態は異なる

幅を小さくしたPCの画面でtelを押せたことは、スマートフォン実機の通話確認とは違います。スマホのOS、通常ブラウザ、アプリ内ブラウザ、PC、メールアプリの設定等で動作が変わります。試した環境を記録して、未確認の端末を合格に含めないでください。

端末にアプリがないことと、サイトのhrefが間違っていることは別です。どちらを確認したかを残します。すべてのアプリで必ず動くと約束せず、対象利用者が連絡先を判断できる代替を用意します。サイトの点検のために、利用者の端末へ新しいアプリや権限を勝手に追加する必要はありません。

6. 公開URLから起動・宛先・時間外の案内を試す

試験では、見える番号とアドレス、hrefの宛先、案内の用途をまず照合します。その後、公開したリンクから想定アプリへ進み、宛先と件名候補を確認します。発信・送信の確定前にはキャンセルできるかも見ます。自動発信や本物のメール送信を、クリック確認と同じ作業にしないでください。

実際の通話や受信を試す場合は、窓口の担当者と日時・試験元・試験内容・記録の除外を合意します。営業時間や不在時の案内が現行運用と一致すること、代替のフォームや宛先が正常なことも確認します。リンクと受付を別々に検収すると、アプリは起動するのに誰も対応できない状態を見落としにくくなります。

試験票には、ページURL、押したリンク名、端末・ブラウザ・アプリ、時刻、表示宛先、期待動作、結果、未確認範囲を記録します。番号を訂正した場合は、ヘッダー、本文、フッター、画像、PDFなどの別表示にも古い値が残るかを調べます。ただし今回の対象外を無断で変更せず、追加の範囲と影響を担当者へ提示します。

7. クリック数と、通話・送信・実受信を混ぜない

ボタンを押した件数は問い合わせ件数ではない

電話リンクのクリックは、リンクの操作です。アプリの起動、発信、接続、相談の受付までは、それぞれ別の状態です。メールも作成画面を開いた後にキャンセルでき、送信しても不達になる場合があります。クリック数を「電話問い合わせ」「メール問い合わせ」と呼ぶ前に、指標の意味を確認してください。

必要なら、クリックを操作指標、実際の相談を受付記録として分けます。計測の方法と同意、取得制限、試験・重複の除外は担当者と決めます。既存の解析がtelやmailtoをどう扱うかを確認せず、自動で数えられていると考えないでください。詳細な宛先や入力情報を新たに解析へ送る変更も別の検討事項です。

受付後は、対応できる相談、見積もり、契約、顧客の解決を別に確認します。リンクを直した直後に受注が増えたと推測せず、同じ期間と条件で観察してください。操作しやすくなったことと、担当の負担や利益が改善したことも別の評価です。

8. 修正依頼には、正式な宛先と合格条件を添える

依頼するときは、対象URL、正式な窓口の確認者、用途・時間、再現する端末、押したリンク、実際の動作、希望する代替、影響する表示箇所を渡します。公開前の原本と変更差分、戻し方、公開後の試験担当も決めます。宛先と受付時間の確定は事業側の仕事で、制作担当が推測して決めるものではありません。

解決状態は、案内と正式な窓口が一致し、対象の端末で期待する連絡操作を始められ、使えないときの方法と担当が分かることです。実通話・実受信まで必要なら、合意した方法で別に検収します。

企業がWeb窓口全体を整理する場合は企業向けWeb支援を確認できます。制作会社が支給した窓口情報に沿う実装・検収を依頼する場合は制作会社向け支援で範囲を合わせます。相談窓口には対象URLと困っている操作を伝えてください。正式条件と対応可否、費用は個別に確認します。

一次資料の確認日：2026年10月5日。正式な宛先と受付条件は事業側へ確認し、対象環境で実装・表示・操作を照合してください。