本文へ移動

(06) ✶ 2026 / DENTAL / LP × AUTOMATION

Asanagi Dental Clinic

歯科クリニックを想定した架空ブランドです。はじめの1回の予約までを引き受けるLPと、問診票のデジタル化と定期検診のリコール通知をまとめたデモを1組で作りました。

あさなぎ歯科クリニックLPのファーストビュー。朝の光が入る診療室の写真の横に、明朝体の見出し「歯医者が苦手な人の、はじめの1回をつくる。」とWeb予約・電話のボタンが並ぶ

FIG.01 / LP トップ

問診票デジタル化デモの画面。左に患者用のスマホ問診フォーム、右に受付の患者リストと、回答から自動転記されたカルテ用サマリーが並ぶ

FIG.02 / 問診票と受付画面

自主制作(架空ブランド) LP × 業務自動化デモ 医療広告ガイドラインを前提に構成

あさなぎ歯科クリニック
初診予約LP と 問診票・リコール通知

2026.08

体験談が使えず、治療前後の写真にも厳しい条件が付く業種です。医療広告のガイドラインで書けることが限られるぶん、費用のレンジ・通院回数・起こりうるリスクを先に書き切ることを信頼の土台にしました。あわせて、紙の問診票を受付が打ち直していた作業と、出せていなかった定期検診の案内を1つの画面にまとめるデモを作っています。

(04) INFORMATION

Industry
歯科クリニック(歯科・小児歯科・歯科口腔外科・矯正歯科)
Brand
あさなぎ歯科クリニック(ASANAGI DENTAL CLINIC) / ポートフォリオ用の架空ブランドです
Type
自主制作(架空ブランド)
Role
構成・コピー・デザイン・実装・デモ開発(すべて1人で担当)
Tools
HTML / CSS / JavaScript, GSAP, Higgsfield・Gemini(画像生成), Claude
Duration
約1週間 / 構成2日・デザイン2日・実装2日・デモ開発1日
Live

MEMO

(05) DESIGN NOTE / なぜこの構成にしたか

01

この業界の集客構造

  • 検索は「歯医者 + 駅名・市区町村名」と「歯が痛い + 地名」が中心。通える距離の外から見られても来院には結びつかない。
  • 医療広告のガイドラインで、患者さんの体験談は掲載できない。治療前後の写真も費用・回数・リスクの詳記が条件になり、気軽には使えない。差をつける手が最初から限られている。
  • 比較されるのは近隣の数院だけ。診療時間・土曜診療・駐車場という生活条件で、内容を読む前に絞り込まれる。
  • 一度かかりつけになると通院が続く。初診1回の獲得が、その後の定期検診まで含めた価値になる。
02

狙った導線

  • 最初の画面で「歯医者が苦手な人の、はじめの1回をつくる。」と言い切る。痛みが出ていない人にも来院の理由を渡す。
  • ファーストビューの直下に土曜診療・Web予約24時間・駐車場4台の3点バーを置き、通えるかどうかの判断を1画面で終わらせる。
  • 悩み6項目のあとに当院の4つの取り組みを置き、名指しした不安と、それに対する手順を1対1で並べる。
  • 予約はWebを主、電話を副にする。診療中で電話に出られない時間帯と、夜に調べている人の両方を拾う。
03

デザインの根拠

  • 配色は院名の「朝凪」から決めた。歯科サイトの定番のミント系は近隣院と見分けがつかなくなるので使わず、朝の海の青(#38606D)と生成りの白、差し色に朝焼けの杏色。見出しは明朝体にして、静かに話す声の調子をつくる。
  • 料金は保険診療と自由診療を別の枠に分け、レンジ表記(3,000〜4,500円)で書く。1点だけの安値は出さない。
  • 自由診療は各行に期間の目安と来院回数を書き、起こりうるリスクはその直下に品目別でまとめて置く。マウスピース型矯正は未承認医療機器の4項目(未承認の旨・入手経路・国内承認品の有無・海外の安全性情報)まで書き切った。
  • 本文はスマホ15px・PC16px、行間1.95。補足やキャプションは11〜13pxまで落とすが、字の詰まった医院ページを読むのがつらい層を想定して行間と余白は削らない。
04

検証で捨てた案

  • 症例写真のビフォーアフター。訴求力は一番強いが、医療広告のガイドラインが求める条件を満たせないため最初に外した。
  • 患者さんの声のスライダーは、そもそも作れない。体験談は限定解除の対象外なので、費用レンジと通院回数の明示に置き換えた。
  • 「痛くない治療」の見出し。断定になってしまうので、表面麻酔と電動麻酔器の手順を書く見せ方に変えた。
  • 院長経歴は、最初はトップに置いていた。読み手の関心は自分の不安が減るかどうかが先だと気づいて、料金と流れの後ろへ下げた。
  • 丸ゴシック+ミントの「やさしい歯医者」テンプレ。安全だが誰の記憶にも残らないので、明朝体と朝の配色で院名ごと覚えてもらう方に振った。
#医療広告ガイドライン準拠 #費用レンジ明示 #通院回数の目安 #リスクの併記 #Web予約24時間 #土曜診療 #不安解消FAQ #定期検診リコール

(06)

Structure 3 Plans

構成の順番だけを変えた3案を作り、歯医者が苦手な人の不安を最初の30秒で減らせるのはどれかで選びました。

PLAN A / 不安先行

ADOPTED
案A 不安先行型のワイヤーフレーム 上からヘッダー、ヒーロー、後回しにする理由6項目、当院の4つの取り組み、料金、診療の流れ、院内のご案内、院長のごあいさつ、FAQ、Web予約の順に並ぶ縦構成。 HERO WORRY 06 APPROACH 04 PRICE FLOW 01-04 CLINIC DOCTOR FAQ RESERVE

HERO → WORRY → APPROACH → PRICE → FLOW → CLINIC → DOCTOR → FAQ → RESERVE

通うのを後回しにしている人がまず確かめたいのは「自分の不安がここで減るか」なので、悩みの言語化を最短で置くこの順を採用しました。

PLAN B / 料金先行

案B 料金先行型のワイヤーフレーム ヒーローの上に料金表を重ね、当院の取り組みと診療の流れ、FAQ、院長あいさつを経てWeb予約へ向かう縦構成。 HERO + PRICE APPROACH 04 FLOW 01-04 FAQ DOCTOR RESERVE

HERO + PRICE → APPROACH → FLOW → FAQ → DOCTOR → RESERVE

金額から入ると近隣院との価格比較で読み終わってしまい、保険と自由診療の違いもリスクの説明も届かないので見送りました。

PLAN C / 院長・院内先行

案C 院長・院内先行型のワイヤーフレーム ヒーローの直後に院長あいさつと院内写真を置き、当院の取り組み、料金、FAQを経てWeb予約へ向かう縦構成。 HERO DOCTOR CLINIC APPROACH 04 PRICE FAQ RESERVE

HERO → DOCTOR → CLINIC → APPROACH → PRICE → FAQ → RESERVE

院の雰囲気は伝わるものの、費用と通院回数の答えまで3画面かかる。夜にスマホで調べている人が先に離れる、という判断で外しました。

(07)

Final Design PC View

採用した案Aで組んだ最終形です。公開後の運用を想定して、3点バーのすぐ下にお知らせ欄を足しています。不安の言語化から料金、Web予約までスクロール1本で到達します。

あさなぎ歯科クリニックLPのPC版全体。ファーストビュー、土曜診療・Web予約・駐車場の3点バー、お知らせ、後回しにする理由6項目、4つの取り組み、保険と自由診療の料金表、診療の流れ4段階、院内のご案内、院長あいさつ、FAQ、Web予約フォーム、診療時間表とアクセス、最終CTAの順に続く

FIG.07 / PC版 全体スクリーンショット(枠の中をスクロールすると最後まで見られます)

(08)

Smartphone

夜や休日にスマホで調べられる前提で作っています。Web予約と電話は画面下に固定しました。

スマホ版LPのトップ。診療室の写真の下に見出しとリード文、3つの要点が並び、画面下に電話とWeb予約のボタンが固定されている

FIG.08-A / トップと固定CTA

スマホ版LPの診療の流れ。各段階に番号・見出し・説明・所要時間の目安が縦に積まれている

FIG.08-B / 診療の流れ

SP DESIGN NOTE

  • 画面下にWeb予約と電話の2本を固定。電話には診療時間内受付、Web予約には24時間受付のサブラベルを添え、いま押すならどちらかを見てから選べるようにした。
  • 料金表は横スクロールさせず、保険診療と自由診療の2ブロックに分けて縦に積む。項目名と金額は上下2段で折り返す。
  • 診療時間の表だけは横スクロール枠に入れる。曜日の列を潰して読めなくするより、指で送れる形を選んだ。
  • FAQ8項目は開閉式にする。知りたい1問だけを開けば、予約フォームまでの距離が短くなる。

(09)

Operation Note

業務設計メモ / 問診票デジタル化とリコール通知のデモを作るまでに整理したこと。

01

現状の課題

  • 問診票が紙のため、受付が内容を電子カルテへ打ち直している。初診1人につき毎回この時間がかかる。
  • 妊娠中・アレルギー・服薬・止血の注意が、紙の字を読み取るまで分からない。診療室へ伝わるのが遅れる。
  • 待合で記入してもらうので初診の受付が滞り、次の患者さんの案内が後ろにずれる。
  • 定期検診の案内を出す相手を手作業で探しており、忙しい週は誰にも送れないまま翌週に入る。
02

ゴール

  • 問診票の回答が、受付の患者リストにそのまま1行として並ぶ状態にする。
  • 注意が要る回答は、リストの行を見た時点で色付きのタグとして目に入るようにする。
  • カルテに貼る文面を、手で書き直さずそのままコピーできるようにする。
  • 定期検診の案内が、送る相手と文面まで用意された状態で毎週出てくるようにする。
03

打ち手

  • 来院前にスマホで答える6ステップの問診フォームを作る(デモは単一HTML)。
  • 送信すると受付の患者リストに行が増え、妊娠中・アレルギー・服薬・止血の注意が自動でタグになる。
  • 回答からカルテ用のサマリー文を組み立て、ボタン1つでコピーできるようにする。
  • 最終来院3か月以上・次回予約なし・配信停止でない・直近14日に送信なしの4条件で対象を抽出し、姓を差し込んだSMSをまとめて送る。
04

効果試算

  • 受付の転記入力 紙からの打ち直し → ▲70% (試算)
  • リコール1件の抽出と送信 3分 → 10秒 (試算)
  • 定期検診の再来率 +9pt (試算)
  • 注意事項の共有 紙を読んだ時点 → 送信の時点 (想定)

上記はすべて架空ブランドを前提とした試算・想定値です。実測値ではありません。実際の数値は来院数と体制によって変わります。

問診票デジタル化デモの全体画面。左に患者用のスマホ問診、右に本日の患者リストと選択した患者の回答内容、下部にカルテ用サマリーが並ぶ

FIG.09 / 問診の送信から受付への反映まで(リコールの一括送信はデモ内で操作できます)

DEMO / 問診票デジタル化・リコール通知

ブラウザだけで動くデモです。左のスマホで6ステップの問診に答えて送信すると、右の受付画面に行が増え、妊娠中や服薬などの注意タグが自動で付きます。下段では、最終来院から3か月がたった方への検診案内をまとめて送れます。外部のサービスにはつながっておらず、入力した内容は保存も送信もされません。

(10) SELECTED WORK ↓

(01) ✶ 2026 / CLEANING

Aoba Clean

エアコンクリーニングの個人店 / Before/After主役のLP × 予約・リマインド台帳