Muhammad Arslan
ご相談・ご依頼
プロジェクト一覧に戻る

Meridian Dental

個人歯科医院向けのマーケティングサイト、患者ポータル、AI予約アシスタント、管理コンソール。医院が既製品として導入できるパッケージプロダクトとして設計。

担当役割: Solo full-stack design and development開発期間: 2026種別: Productised web app

Next.js 16

React 19

Tailwind CSS 4

shadcn/ui

Supabase

Resend

Gemini AI

FullCalendar

Meridian Dental Studioのデモホームページおよび予約エントリーポイント

概要

Meridian Dentalは、個人歯科医院向けの包括的なウェブプレゼンスと軽量オペレーションコンソールです。公開側は診療内容、チーム、問い合わせ、予約ウィザードを備えた完成度の高いマーケティングサイトです。その裏側には、患者ポータル、質問への回答や予約受付を行うAIアシスタント、医院があらゆる業務を管理できる管理コンソールが配置されています。私はこれを、受託制作の個別サイトではなく、初期サイト制作+月額プランで提供可能な製品として構築しました。既存の患者管理システムを置き換えるのではなく、そのフロントエンドとして機能するよう意図的にスコープを定めています。

課題

個人歯科医院は通常、厳しい二者択一を迫られます。電話番号が記載されているだけの単なる案内パンフレットのようなウェブサイトにするか、カルテ管理はできるもののオンライン予約や問い合わせ対応には全く役に立たない重厚な医院管理システムに大金を支払うかです。プロフェッショナルな外観を持ち、患者が自身で手続きを行え、定型的な問い合わせに答え、歯科医師が全体をシンプルに管理できる場所を、6桁(数十万ドル規模)のソフトウェア契約なしで提供する「ちょうど良い中間層」のソリューションは存在していませんでした。

役割とアプローチ

私はプロダクト構想からエンジニアリングまで、全工程を単独で設計・構築しました。作業の大部分は「作らないもの」の選定でした。既存の診療管理システムとの競合を意図的に避け、予約、患者コミュニケーション、小規模なオペレーションコンソールといった「入り口」に特化しました。その方針を徹底したことで、開発スコープを確実にリリース可能な規模に保ち、明確な価格を設定できるだけの明瞭な提供価値を実現しました。

技術スタック

フレームワークNext.js 16 (App Router, Turbopack) with React 19
スタイリング / UITailwind CSS 4 with shadcn/ui
バックエンドSupabase (Postgres, Auth, Storage)
メールResend with React Email templates
AIVercel AI SDK v6 with Google's Gemini 2.5 Flash
予約スケジューリングFullCalendar v6
フォームとバリデーションreact-hook-form with Zod
アニメーションGSAP

主な機能

一般向けマーケティングサイトホーム、診療内容、チーム紹介、お問い合わせ、保険案内、初診向けページ、ステップ式予約ウィザード。
患者アカウントSupabaseマジックリンクによるパスワードレスサインイン。
患者ポータル予約管理とプロフィール管理のための専用ダッシュボード。
AIアシスタント医院独自のビジネスドキュメントに基づいて回答し、予約受付、問い合わせメッセージ送信、適切な診療ページの案内など、ツール呼び出しによる実アクションを実行できるGemini搭載チャットボット。
管理コンソールリード管理、チャットボットナレッジ文書の編集、診療内容および歯科医師の登録・編集・削除、予約閲覧、ドラッグ操作による日時変更カレンダー。
競合防止予約システムデータベース層で歯科医師ごとの二重予約を原理的に防止し、患者が選択する前に予約ウィザード上で予約不可枠をグレーアウト。

ギャラリー

担当歯科医師サンプルとホワイトニング診療を含むMeridian予約フロー
デモ予約枠と診療見積もりが表示されたMeridian予約カレンダー

課題と解決策

最も重要だったエンジニアリング上の課題は二重予約の防止でした。2人の患者が同一枠で同時に「確定」を押すケースは典型的な競合状態(レースコンディション)であり、アプリケーションコード側での空き確認だけではその隙間を完全に塞ぐことはできません。そこで私はPostgresのGiST排他制約を活用してこれを解決し、同一歯科医師に対する重複予約をデータベース層でアトミックに拒否するようにしました。これにより競合は「起きにくい」のではなく「原理的に不可能」になります。また、別個の空き状況エンドポイントから予約ウィザードへ情報を供給し、不可能な時間枠をあらかじめグレーアウトすることで、患者がそもそもエラーに遭遇すること自体を極力防いでいます。

AIアシスタントも興味深い要素でした。医療機関向けのチャットボットでは、ハルシネーション(虚偽情報の生成)は決して許されません。私は医院自身のビジネスドキュメントをグラウンディングソースとし、歯科医師が管理する実際の編集可能なコンテンツから回答を生成するようにしました。また、自由回答形式に任せるのではなく、限定されたツールセットを付与しました。予約、メッセージ送信、該当ページへの誘導のみを実行でき、それ以外の動作は行いません。歯科医師は管理コンソールからナレッジドキュメントを直接編集できるため、開発者を介さずにアシスタントを最新状態に維持できます。

成果

Meridian Dentalは、デモ稼働可能な実働プロダクトです。歯科医院は実際のサイトを確認でき、患者はAIアシスタントまたはウィザードから予約を行え、予約データはスケジュールの競合を防ぐデータベースレベルの保護とともにリアルタイムで管理カレンダーに反映されます。個別開発ではなく再現可能なパッケージ商品として構成されているため、ポートフォリオの実績としても、即戦力の商用テンプレートとしても機能します。

同様のプロダクト課題をお持ちですか?

現在のプロダクト状況、達成したい成果、直面している制約についてお聞かせください。それらをもとに適切な第1マイルストーンを策定します。

Webアプリケーション開発サービス
プロジェクト概要を送る
すべてのプロジェクト次のプロジェクトHalatap
Meridian Dental: 歯科医院向け患者ポータル&AI予約システム | Muhammad Arslan