企業サイトにWhatsAppボタンを付けるには：邪魔にならない設置のコツ

インドネシアでは、フォームに入力するよりチャットを好む買い手が多くいます。Webサイトに WhatsApp ボタンを設置したいと考えるのは自然なことです。問題は、よく考えずに付けたボタンがかえって邪魔になりがちな点です。スマートフォンで他のボタンを隠してしまう、間違った番号が開く、サイトが重くなる、といったことが起こります。

この記事では、サイトの読みやすさを損なわずに、買い手が連絡しやすくなる WhatsApp ボタンの設置方法を解説します。

WhatsApp ボタンはフォームを補うもので、置き換えるものではない

チャットは、在庫、サイズ、送料、あるいは会社が営業しているかの確認といった、ちょっとした質問に向いています。しかし、すべてのB2Bの買い手がチャットを望むわけではありません。大企業の購買部門は、メールや上司に転送できる見積もり依頼フォームのように、記録が残る手段を必要とすることがよくあります。

ですから、両方を用意しましょう。早く聞きたい人には WhatsApp ボタン、正式な手段が必要な人にはフォームとメール。選ぶのは買い手です。

リンクを正しく作る

Webサイト上の WhatsApp ボタンは、基本的には「click to chat」リンクです。WhatsApp ヘルプセンターによると、形式は https://wa.me/ の後に国際形式の完全な電話番号を続けたもので、先頭のゼロ、括弧、ハイフンは入れません。

インドネシアの番号なら、先頭の0を国番号の62に置き換えます。0812-xxxx-xxxx という番号は https://wa.me/62812xxxxxxxx になります。プラス記号は使いません。

WhatsApp は ?text= パラメーターによるメッセージの事前入力にも対応しています。これを使えば、担当者はすぐに問い合わせの文脈が分かります。たとえば、ある製品ページのボタンで「こんにちは、[製品名]について質問があります」と入力しておけます。買い手は送信前にメッセージを編集できます。

そのほかのポイント：

• 社員の個人番号ではなく、会社の番号を使う。その社員が退職すれば、買い手も一緒に離れてしまいます。
• 部署ごとに番号を分けることも検討する。営業とアフターサービスを別のチームが担当しているなら、製品ページとサービスページのボタンをそれぞれの番号につなげれば、チャットが1人に集中しません。
• リンクを自分で試す。番号を変更するたびに、スマートフォンとパソコンの両方で確認しましょう。

位置とサイズ：コンテンツを隠さない

画面右下に浮かぶボタンは一般的で、すぐに認識されます。しかしスマートフォンの画面では、フォームの「送信」ボタン、下部メニュー、Cookie のバナーなど、重要なものを隠してしまうことがよくあります。

• 小さく保つ。タップしやすい丸いアイコンで十分です。アクセシビリティ指針 WCAG 2.2 は、レベルAAでタッチ対象の最小サイズを 24×24 CSS ピクセルと定めています。実際には、指で押しやすいようにそれより大きく作ることが多いです。
• 画面の端や他の要素との間隔を空ける。各ページを、特にフォームがあるページをスマートフォンで確認しましょう。
• チャット画面を自動で開かない。Google は、ページのコンテンツを見えにくくする要素を「煩わしいインタースティシャル」と呼び、代わりに小さなバナーを使うよう勧めています。ページを開いて数秒後に勝手に表示されるチャット画面は、まさにこの種の邪魔になります。
• 分かりやすいラベルを付ける。パソコンでは、アイコンの横に「WhatsApp でチャット」のような短い文字を添えると、慣れていない人にも分かりやすくなります。

重いウィジェットは避ける

WhatsApp ボタンの付け方は2通りあります。1つはアイコン付きの通常のリンクで、軽く、外部から何も読み込みません。もう1つはサードパーティのチャットウィジェットで、ウィンドウや担当者の写真、アニメーションを表示します。

サードパーティのウィジェットは追加のスクリプトを読み込みます。Google の web.dev のガイドは、サードパーティのスクリプトがサイトの表示速度を低下させる可能性があると指摘しています。WhatsApp を開くだけなら、通常のリンクで十分です。どうしてもウィジェットが必要な場合は、設置の前後でサイトの速度を測定しましょう。また、ウィジェットがスマートフォンの画面で他のボタンと重なる2つ目のアイコンを追加していないかも確認します。

WhatsApp 側の準備を整える

どれほど良いボタンでも、チャットに誰も返信しなければ意味がありません。ボタンを設置する前に、次の点を確認しましょう。

• 返信の担当者が決まっている。休暇中の代わりの担当者も含めます。
• 営業時間が書かれている。ボタンの近くか問い合わせページに記載し、いつ返信が期待できるかを買い手に伝えます。
• WhatsApp Business の機能を使う。WhatsApp Business アプリには、初めて連絡してきた顧客への自動あいさつメッセージ、不在メッセージ、よくある質問へのクイック返信があります。クイック返信は最大50件まで保存できます。

チームが確実に対応できるとは限らないのに「5分以内に返信」と約束するのはやめましょう。守れない約束より、正直な営業時間のほうが信頼されます。

ボタンが使われているかを測る

サイトで Google アナリティクス 4 を使い、拡張計測機能（enhanced measurement）を有効にしていれば、自社ドメインの外へ移動するリンクのクリックは click イベントとして記録されます。WhatsApp のリンクは wa.me に移動するため、このボタンのクリックも記録されます。どのページから最も多くのチャットが生まれているかが分かります。

もう1つの簡単な方法は、ページごとに事前入力メッセージを変えることです。営業チームは、そのチャットが製品ページ、問い合わせページ、記事のどこから来たのかをすぐに把握できます。

設置前のチェックリスト

1. 番号が国際形式で62から始まり、プラス記号、ハイフン、スペースがない。
2. 事前入力メッセージが、ボタンを置いたページの内容に合っている。
3. スマートフォンで、ボタンがフォーム、メニュー、他のボタンを隠していない。
4. チャット画面が勝手に開かない。
5. ボタンを設置した後もサイトの表示が速い。
6. 返信する担当者がいて、営業時間が明記されている。
7. 正式な手段が必要な買い手のために、フォームとメールも残してある。

よい WhatsApp ボタンは、買い手が必要とするまではほとんど目立ちません。クリックされれば、明確な文脈とともに適切な担当者へまっすぐ届きます。

さまざまなウィジェットを入れてサイトが重くなったと感じたら、企業サイトが遅くなる原因をお読みください。チャットとSNSの役割を比べるには、B2B企業にとってWebサイトとSNSのどちらが重要かをご覧ください。どの端末でも連絡ボタンが整ったサイトをお考えなら、Webサイト制作サービスをご覧ください。