制作実績

制作実績詳細です。

2025年11月、歯科クリニックのWebサイトにAIチャット導入

2025-11-09

歯科クリニック様 のWebサイトに、
「24時間 AIチャット対応」バナーと、サイト訪問時に自動表示される POPモーダル を実装しました。

サイト全体のデザインバランスを崩さないよう、
既存UIに馴染むフローティングバナー と 自然に誘導するモーダル を設置。
ユーザーが “迷わず相談・予約できる導線” を制作しました。

PC表示：フローティングバナー設置 & AIチャット起動 実装イメージ

Before では「ネット予約」「無料相談」だけの導線でしたが、今回の実装で新しく “24時間AIへ質問” ボタンを追加しました。

ユーザーが「ちょっと相談したいな」と思ったタイミングですぐ AI に質問できるようになりました。

クリックすると、すぐに AIチャット画面が開きます。わざわざページを探したり、フォームまでたどり着く必要がなくなります。

スマホ表示：常に迷わず質問できるよう、AIチャット導線を追加（Before → After） 実装イメージ

画面下に「24時間AIへ質問」のバナーを固定しました。どのページを見ていても、親指の届く位置からすぐに相談できます。

“今ちょっとだけ聞きたい” その気持ちにすぐ応えられる導線です。

タップすると AIチャットがスッと開き、「診療内容」や「予約の流れ」など、よくある相談に AI が自動で回答します。

スマホは画面が小さいので、押しやすさ・邪魔にならないバランスに気を配りながら実装しました。

アクセスと同時に表示される POP モーダル（自動表示） 実装イメージユーザーがサイトを開いた瞬間、診療時間と予約導線（AI / ネット予約 / LINE予約）がひと目で分かる POP モーダルを表示するようにしました。

「どこから予約したらいいの？」そんな迷いを無くすための仕組みです。

支給いただいたデザインをベースに HTML を組み込み

WordPress テーマに干渉しないよう z-index / CSS を細かく調整

PC とスマホどちらでも、自然な位置に表示されるよう最終調整

ユーザーに寄り添った、“迷わせない導線” を意識しています。来院前の不安が、少しでも軽くなるように。

POP内のボタンは、 AIチャットの起動とも連動しているので、「相談 → 行動」がスムーズにつながる導線になっています。

クライアント様支給デザインを元に実装

Mstudio（松田将志）

POPモーダル（アクセス時に自動表示）
- 診療時間＋各予約導線（AI / WEB / LINE）をまとめて表示
- テーマ干渉を避けるため z-index / CSS を最適化
AIチャット用フローティングバナー
- PC：右側固定配置（既存UIとの整列）
- SP：画面下部にコンパクトに配置
レスポンシブ対応
- PC / SP のレイアウトを個別調整
- 誤タップ防止、視認性を考慮して UI を最適化
安全な実装フロー
- テスト環境を構築し、本番を止めずに実装 → 動作確認後に反映

本案件は デザイン・機能性・導線設計 のバランスを意識し、
既存サイトに なじませる AI 導線 を実現できた制作となりました。

今のサイトに「あと少し」を。
あなたの想いを、いっしょに形にします。