店舗のサイトで電話番号がバナー画像の中にしかないと、スマートフォンで見た人は番号を読み取り、別の画面で入力しなければなりません。画像が縮むと文字も小さくなります。電話予約を受け付けるなら、番号をページ上の文字として表示し、同じ番号へ進む通話リンクを用意することから整えます。
画像の番号を、読めて選べる文字にする
まず現在の画像にある番号が、今も予約を受ける番号かを店舗へ確認します。画像の差し替えだけで済ませず、番号をHTMLの文字として置きます。文字なら拡大しても読みやすく、選んでコピーできます。電話のアイコンだけを置く場合も、近くに見える番号と「予約の電話」などの用件を添えます。
W3Cの画像に関する案内は、ロゴ以外の文字を画像に入れることを避け、画像内の文字を使う場合は代替テキストにも同じ言葉を含めるよう勧めています。ただし、画像の代替テキストを足すだけでは、画面上で番号を読み、コピーし、発信先を確かめる操作まで一度に整いません。店舗の番号は見える文字としても載せます。
通話リンクと表示番号を一致させる
番号の文字を通話リンクにすると、対応する端末から発信操作へ進めます。MDNのHTMLリンク解説では、電話番号へ向かうtel:リンクと、端末によって異なる動作が示されています。リンクの表示番号と、実際の発信先に設定した番号を同じものにします。古い番号を画像に残したまま新しい番号をリンクにすると、利用者がどちらへ電話するか迷います。
ボタンの文字を「今すぐ予約確定」などとせず、電話で予約を相談する入口だと分かる言葉にします。通話の開始と予約の確定は別です。番号のそばには電話受付時間と、混雑時や受付時間外に使える方法を、店舗が実際に運用している範囲で示します。
予約ページと共通表示を、実機で確かめる
トップページの画像だけを直しても、メニュー詳細、店舗情報、ページ下部の共通案内に古い番号が残ることがあります。予約へ進む主な経路をたどり、表示番号、通話先、受付時間がそろっているか見ます。スマートフォンでは番号をタップしたときに正しい発信先が開くかを確認し、パソコンでは番号を読んで控えられるかを確かめます。実際の発信を行う場合は、店舗の受付担当と時間を合わせます。
Bämの店舗・予約サービス向けサイト制作案内へ相談する際は、今使っている画像、公開してよい予約用番号、電話受付時間、電話以外の予約方法、番号を載せているページを揃えると、画像内の文字から利用できる予約導線へ直す範囲が決めやすくなります。
参考資料
資料確認日：2026年9月27日。対象店舗の公開番号、電話受付時間、予約方法は未提示です。図に実在する番号や受付条件は記載していません。
