プロジェクト概要

歯科クリニック様のWebサイトに、AIチャット導線（フローティングバナー／自動POPモーダル）を追加しました。
既存デザインに馴染むUIとして実装し、PC・スマホの双方で自然に表示されるよう調整。
ユーザーが迷わず「相談・予約」へ進める導線設計を行いました。

制作体制

デザイン・クライアント対応

クライアント様支給デザイン

コーディング担当

Mstudio
WordPress への組み込み、起動制御、レイアウト調整を担当。

制作のポイント

• POPモーダル（アクセス時に自動表示）
  診療時間と予約導線（AI / WEB / LINE）をひと目で表示。テーマ干渉を避けるため z-index / CSS を最適化。

• AIチャット用フローティングバナー
  PC：右側固定。SP：画面下部固定。既存UIとの整列を重視。

• レスポンシブ対応
  誤タップ防止と視認性に配慮し、PC / SP で個別に最適化。

Before After

成果

• 相談導線が明確化し、「相談 → 行動」までの迷いを軽減
• スマホでの操作性が向上し、離脱を抑制
• 既存テーマに干渉せず、安全に導入を完了

本件では、デザイン・機能・導線設計を両立し、既存サイトに自然になじむ AI 導線を実現しました。

---