テクノロジーガイド

Google Call Widget をウェブサイトに追加する方法

2 min read ウェブ運用 更新されました 02 Oct 2025
Google Call Widget をサイトに追加する方法
Google Call Widget をサイトに追加する方法

クイックリンク

  • Google Call Widget を追加する手順
  • 代替アプローチと注意点
  • まとめ

重要: 以下の手順は Google Voice の UI に依存します。UI が更新されると項目名や場所が変わる可能性があります。

目的と前提

目的: ウェブサイトやブログに通話ボタン(Call Widget)を設置し、訪問者が自分の電話番号を入力してあなたと接続できるようにする。受信者側の実電話番号は相手に知られません。

前提: Google Voice アカウントを持っていること。受電に使いたい電話番号を用意できること(固定電話、携帯など)。

前提となる概念(1行定義)

  • Google Voice: Google が提供する電話サービスで、番号の取得、発着信、ボイスメール、テキストを管理できる。
  • Call Widget: ウェブに埋め込める通話ウィジェットで、訪問者が番号を入力すると Google Voice が両者をつなぐ仕組み。

Google Call Widget を追加する手順

  1. Google Voice にログインし、右上の歯車アイコンをクリックします。メニューから「Voice の設定」を選びます。

Google Voice の設定画面のスクリーンショット

  1. 「電話」タブで “Add another phone”(別の電話を追加)をクリックして、Call Widget で着信を受けたい番号を追加します。Google Voice 番号そのものを使う場合は、この手順をスキップできます。前者は外出先の携帯や固定回線で受けられる利点があります。

電話番号追加の入力フォームのスクリーンショット

  1. 名前、電話番号、電話の種類(Mobile/Work/Home など)を入力します。「Mobile」を選んだ場合は SMS 受信の可否も選択できます。完了したら「保存」をクリックして「電話」タブに戻ります。

電話タイプと保存ボタンのスクリーンショット

  1. 新しい番号の横にある「Verify Now」(今すぐ確認)リンクをクリックし、「Connect」を押して検証プロセスを開始します。Google Voice からその番号へ自動で発信され、音声案内でコード入力が求められます。検証が完了すると、その番号を Call Widget に使えるようになります。

番号検証プロセスのスクリーンショット

  1. Call Widget で着信を受けたい番号のチェックボックスをオンにします。もし Google Voice の自分の番号を使うなら、どれもチェックしないでください。番号を選んだら「Call Widgets」タブをクリックします。

着信先番号の選択画面のスクリーンショット

  1. 「Add a new Call Widget」をクリックして新しいウィジェットを作成します。ウィジェットは手順5でチェックした番号に対して動作します。

新規 Call Widget 作成ボタンのスクリーンショット

  1. ウィジェット名、通話の受け方(着信時の動作)、挨拶メッセージの種類(既存の録音を使うか、録音するか)を選びます。着信時に画面上でどのように表示するか(発信者を隠すか等)も設定できます。設定が終わったら「変更を保存」をクリックします。

ウィジェット設定画面のスクリーンショット

  1. 「Embed」フィールド内のテキストをすべて選択してコピーします。これがあなたのサイトに貼る埋め込みコードです。

埋め込みコードをコピーする画面のスクリーンショット

  1. ウェブページを編集用の HTML エディタで開き、ウィジェットを表示したい箇所(販売ページやサイドバーなど)を探します。コピーしたコードを貼り付け、HTML ファイルを保存・アップロードしてページを確認してください。

Note: 多くのブログサービスは HTML やテキストウィジェットを提供しています。WordPress の例では、テキストウィジェットにコードを貼って保存すればウィジェットが表示されます。

WordPress に埋め込む例のスクリーンショット

  1. ウェブページ上の Call Widget をクリックして動作確認を行います。名前と電話番号(携帯番号など)を入力し、「Keep number private」にチェックを入れるとあなたの番号は相手に隠されます。「Connect」を押すと Google Voice が接続処理を行います。

ウェブ上でウィジェットを操作する画面のスクリーンショット

重要な注意事項

  • ウェブに埋め込んだウィジェット経由の通話は、Google Voice の発信ルールに従います。海外発着信や料金は Google Voice の契約条件に基づきます。
  • 受電側が利用中や不在の場合、Google Voice はボイスメールに転送し、メール通知を送信します。

代替アプローチ

  • ウェブ通話(WebRTC)ベースの Click-to-Call: 自社で WebRTC を使えばブラウザ内通話を直接実装でき、番号非公開のまま音声通話が可能。ただし実装と運用コストが高く、ブラウザ互換性や NAT トラバーサルを考慮する必要があります。
  • 専用のクラウド通話 API(Twilio、Nexmo など): 高度なルーティングや通話録音、分析が必要な場合に有利。開発工数とランニングコストが増えます。
  • チャット/ビデオ会議への誘導: 音声通話ではなくチャットや Zoom に誘導することで、ログや録画を残しやすくなります。

いつ使うべきか: 手軽に通話窓口を作りたい、または既存の Google Voice を活用したい場合に最適。

いつうまくいかないか(ケーススタディ)

  • 検証できない電話番号のみを持っている場合: 番号を検証できないとウィジェットはその番号で着信を転送できません。
  • 高トラフィックサイトで大量の同時接続が発生する場合: Google Voice は企業向け大規模同時通話を前提にしていないため、スケーラビリティに課題があります。
  • 国際通話や特定の国の番号制限: Google Voice がサポートしない国や番号形式があります。事前にサポート範囲を確認してください。

役割別チェックリスト

  • サイトオーナー(運用)

    • Google Voice アカウントの管理者か確認する。
    • 着信先番号の検証を完了する。
    • ウィジェットの見た目がサイトと合うか確認する。
  • 開発者

    • 埋め込みコードを設置する場所を決める(アクセシビリティを考慮)。
    • ページの読み込みパフォーマンスを確認する。
    • SSL(https)環境で動作確認を行う。
  • カスタマーサポート

    • 受電時の応答スクリプトを用意する。
    • ボイスメールやメール通知の確認方法を整備する。

導入手順(SOP)

  1. Google Voice にログインする。
  2. 着信先となる電話番号を追加して検証する。
  3. Call Widget を作成し、設定(挨拶・発信方式)を保存する。
  4. 埋め込みコードを取得してサイトに貼る。
  5. 動作確認を行い、必要なら UI を調整する。
  6. 受電ロールと対応フローを関係者に周知する。

トラブルシューティング(簡易ランブック)

  • ウィジェットが表示されない

    • HTML を正しい場所に貼ったか確認。
    • CSP(コンテンツセキュリティポリシー)で外部スクリプトをブロックしていないか確認。
    • ブラウザのコンソールエラーを確認。
  • 通話が接続されない

    • 着信先番号が検証済みか確認。
    • ネットワークや携帯の電波状態を確認。
    • Google Voice の設定(発信制限や国設定)を確認。
  • ボイスメール通知が届かない

    • Google Voice のメール通知設定を確認。
    • 迷惑メールフォルダを確認。

プライバシーとコンプライアンスの注意

  • 番号公開: “Keep number private” オプションを推奨します。相手にあなたの実番号は表示されません。
  • ログ保存: 通話記録、ボイスメール、メール通知は保存されます。内部ポリシーに基づく保護(アクセス制御・保管期間)を決めてください。
  • 個人情報保護(GDPR 等): EU の利用者が関与する場合、通話ログや発信者情報の取り扱いは同意管理とデータ保持ポリシーを用意してください。

テストケースと受入条件

  • テスト1: ウィジェットの表示

    • 条件: 埋め込みコードを設置したページを開く。
    • 期待結果: ウィジェットが視覚的に表示され、入力フォームが操作できる。
  • テスト2: 発信フロー

    • 条件: 訪問者が名前と番号を入力し「Connect」を押す。
    • 期待結果: Google Voice がまず訪問者の番号へ発信し、その後受電側へ接続する。受電側に相手の番号は表示されない(設定による)。
  • 受入条件: 埋め込み後に 3 回以上の成功接続を確認し、受電側が問題なく応答できること。

要点まとめ

  • Google Call Widget は手軽に設置でき、訪問者が番号を入力するだけで通話を開始できる。
  • 着信先は検証済みの番号でなければならない。
  • 大規模同時接続や国際的な要件がある場合は代替ソリューションを検討する。
  • プライバシーと通知設定を必ず確認する。

ソーシャル用短文(配信用): ウェブに通話ボタンを追加して顧客サポートを即時化。Google Voice と連携すれば番号を公開せずに通話が可能です。

まとめ

Google Call Widget は、簡単かつ低コストでウェブサイトに音声通話の窓口を設置する方法です。既存の Google Voice を活用することで、発信者と受信者を安全に接続できます。ただし、スケーラビリティや国別の対応、データ保持ルールには注意が必要です。導入前に役割ごとのチェックリストとテストケースを実行して、運用基準を整えてください。

重要: UI の表記や手順は Google の更新で変わることがあります。実際の画面に従いながら設定してください。

共有する: X/Twitter Facebook LinkedIn Telegram
著者
編集

類似の素材

CoinDCXで仮想通貨を買う・売る方法
仮想通貨

CoinDCXで仮想通貨を買う・売る方法

Instagramで「いいね」した投稿を確認する方法
ソーシャルメディア

Instagramで「いいね」した投稿を確認する方法

OpenVPN を LinOTP で二要素認証する方法
Network Security

OpenVPN を LinOTP で二要素認証する方法

Instagram分析ガイド:KPI設定から実行まで
マーケティング

Instagram分析ガイド:KPI設定から実行まで

WhatsApp「View Once」写真・動画を復元して保存する方法
モバイル

WhatsApp「View Once」写真・動画を復元して保存する方法

Icecast 2.3.3 を CentOS 6.3 にインストールする手順
サーバー

Icecast 2.3.3 を CentOS 6.3 にインストールする手順