法律事務所ウェブサイト向けスティッキーモバイル通話バーの構築

刑事弁護のウェブサイトを訪れる人のほとんどはスマートフォンからアクセスしており、その多くは文章を読むよりも電話をかけることを望んでいます。画面下部に固定され、タップして通話できるボタンを備えたスティッキー通話バーが法律事務所のサイトで最も一般的なパターンの1つであるのはそのためです。また、最も壊れやすいパターンの1つでもあります。バーがフッターのリンクを覆ってしまったり、チャットウィジェットと衝突したり、iPhoneのホームインジケーターの下に入り込んだり、各ページの最後の行を隠してしまったりすることがあります。本記事では、ノッチ付きスマートフォンでも正しく表示され、アクセシブルで、測定が容易であり、コンテンツの邪魔にならない、適切に動作するバーの構築手順を解説します。

スティッキー通話バーの目的

スティッキー通話バーは、すぐに連絡できる常時表示のアクセスしやすいコールトゥアクションを提供することで、モバイルのユーザー体験を向上させます。これは、潜在的なクライアントが緊急の状況に置かれている可能性がある法律事務所にとって特に重要です。

設計上の考慮事項

マークアップ

バーはシンプルに保ちましょう。1つの主要なアクション（電話）を含め、任意でセカンダリアクション（お問い合わせフォームへのリンクなど）を含めます。小さな画面には2つのボタンなら無理なく収まりますが、通常3つは収まりません。実際の tel: リンクを国際形式の電話番号で使用し、わかりやすさのために人間が読みやすい形式の電話番号を表示します。

アクセシビリティ

支援技術が識別できるように、ラベルを付けたランドマーク要素でバーを囲みます。これは、スクリーンリーダーを利用するユーザーにとって重要です。

セーフエリアの処理

ホームインジケーターを備えたスマートフォンでは、ビューポートの最下部にあるコンテンツがその下に重なってしまうことがあります。この問題に対処するには、CSS環境変数を使用します。必ずビューポートのmetaタグに viewport-fit=cover を含めて、バーが隠れないようにしてください。

.call-bar {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #0c1a33;
  z-index: 50;
}

.call-bar a {
  flex: 1;
  min-height: 48px;
  display: grid;
  place-items: center;
}

body.has-call-bar {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .call-bar {
    display: none;
  }
  body.has-call-bar {
    padding-bottom: 0;
  }
}

コンテンツのパディング

バーの高さに合わせてbodyのパディングを調整します。これにより、免責事項や住所が記載されたフッターなど、重要なコンテンツをバーが覆ってしまうのを防ぎます。ユーザーがフォントサイズを大きくしたときにバーが拡大する場合があるため、大きいテキスト設定でテストしてください。

タップターゲット

タップターゲットがWCAG 2.2のガイドラインを満たしていることを確認してください。このガイドラインでは、ほとんどのターゲットに対して最小サイズを24×24 CSSピクセルと定めています。メインの通話ボタンについては、高さ44〜48ピクセル程度を目指しましょう。ユーザーがストレスを感じていたり、片手でタップしたりする可能性があるため、これは特に重要です。

衝突の回避

法律事務所のサイトには、チャットウィジェットやCookieバナーなど、通話バーと重なる可能性のある他の固定要素が配置されていることがよくあります。混乱を避けるために、一貫した重ね順を確立してください。チャットランチャーをバーの上に移動させるか、セカンダリアクションとして通話バーに統合することを選択できます。

条件付き表示

通話バーをすべてのページに表示すべきかどうかを検討してください。たとえば、長い罪状説明ページでは、バーによって電話番号が手の届くところに保持されます。しかし、お問い合わせページでは、不要な煩雑さを招く可能性があります。訪問者が最初の画面をスクロールした後にのみバーを表示するサイトもありますが、通話への即時アクセスを妨げないようにテストする必要があります。

文言の重要性

ボタン上の文言は、ユーザーがタップするかどうかに影響を与える可能性があります。実際の電話番号の横にある"Call now"のようなラベルは、曖昧な表現よりも明確です。

効果の測定

アナリティクスツールで通話リンクのタップをイベントとして追跡します。アナリティクススクリプトの動作が遅かったりブロックされたりした場合でもダイヤラーが開くように、デフォルトのアクションを妨げることなくリンクにリスナーを設定します。タップが発生したページを記録してください。これはマーケティングチームにとって貴重なデータになります。

テスト

エミュレータはレイアウトの問題を検出できますが、重要な細部を見逃してしまいます。最近のiPhone1台とAndroidスマートフォン1台を含む実機で、縦向きと横向きの両方でテストしてください。また、キーボードが開いたときのバーの挙動も確認してください。

よくある質問

スティッキー通話バーはSEOに悪影響を与えますか？ — メインコンテンツを覆わない小さなバーであれば、通常は問題ありません。ページの読み込み時に画面の大部分を隠してしまうようなものは、ユーザー体験の悪化につながるため避けてください。

デスクトップでもバーを表示すべきですか？ — 通常は表示しません。デスクトップの訪問者がブラウザから電話をかけることはめったにないため、電話番号を記載したヘッダーの方が効果的です。

バーにテキストメッセージのオプションを含めることはできますか？ — はい、 sms: リンクを使用すれば可能ですが、事務所がその番号を監視し、迅速に対応できる場合に限られます。

結論

スティッキーモバイル通話バーの作成は、法律事務所のウェブサイトにとって価値ある追加要素です。潜在的なクライアントが迅速に問い合わせを行えるようにすることで、ユーザー体験を向上させます。

メリット

• 連絡先情報への即時アクセスを提供します。
• モバイルデバイスでのユーザーエンゲージメントを向上させます。
• すべてのユーザーに対するアクセシビリティを向上させます。

デメリット

• 慎重に設計しないと、インターフェースが煩雑になる可能性があります。
• ページ上の他の固定要素と干渉する可能性があります。

注意事項

本記事は教育目的のものです。プレースホルダーの値は実際のデータに置き換える必要があり、読者はそれらを信頼する前に元のソースと照合して記述内容を確認する必要があります。

よくある質問

• スティッキー通話バーとは何ですか？ — スティッキー通話バーとは、モバイル画面の下部に固定された要素であり、ユーザーがタップして簡単に通話できるようにするものです。
• スティッキー通話バーをアクセシブルにするにはどうすればよいですか？ — 明確なラベルと適切なマークアップを使用し、重要なコンテンツを覆わないようにします。
• どのような設計上の考慮事項に留意すべきですか？ — シンプルさ、タップターゲットのサイズ、および他の要素との衝突回避に焦点を当てます。
• スティッキーバーからの通話を追跡できますか？ — はい、アナリティクスツールを使用して通話リンクのタップを測定することで追跡できます。
• すべてのページで通話バーを表示する必要はありますか？ — 必ずしも必要ではありません。各ページのコンテキストを考慮してください。
• 通話バーが他の要素と重なるとどうなりますか？ — 混乱を防ぎ使いやすさを確保するために、重ね順を確立してください。

タグ

#webdev #css #mobile #lawfirm #userexperience #accessibility #stickybar #calltoaction