本文へ移動
無料で相談

(04) ✶ 2026 / DENTAL / LP × AUTOMATION

Asanagi Dental Clinic

歯科クリニックを想定した架空ブランドです。「治療の前に、話す時間」を約束して初回の相談予約までを引き受けるLPと、問診票のデジタル化と定期検診のリコール通知をまとめたデモを1組で作りました。

あさなぎ歯科クリニックLPのファーストビュー。夜明け前の海の色を地に、左に明朝体の見出し「治療の前に、話す時間」とリード文、曙色の「はじめてのご相談」ボタンが並び、右の水平線の上に、歯の模型を手に説明する歯科医師の写真が置かれている

FIG.01 / LP トップ

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

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

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

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

2026.09

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

(04) INFORMATION

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

MEMO

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

01

この業界の集客構造

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

狙った導線

  • 最初の画面で「治療の前に、話す時間」と言い切る。痛みが出ていない人にも、相談だけで来てよい理由を渡す。方法と回数と費用は始める前に書面で渡す、とリード文で先に約束する。
  • ファーストビューの直下に、方法・回数・費用を治療計画書にまとめること、駅の東口から徒歩3分、建物前の駐車場4台の3点を置き、通えるかどうかの判断を1画面で終わらせる。
  • 「考え方」の章で治療計画書の見本(方法・回数・費用の3行)を見せ、続く「三つの決まり」で二段階の麻酔・保険と自由診療の比較・器具の交換と滅菌を、初診の4手順の前に並べる。手順の01には、来院前に入力できる問診票デモへの導線を置く。
  • 予約導線はWebフォーム1本にした。ヒーローの「はじめてのご相談」、ヘッダーの「予約を試す」とスマホの固定バーの「初診の相談を試す」がすべて同じフォームへ向かう。電話番号はデモ表示のみ。
03

デザインの根拠

  • 配色は院名の「朝凪」から決めた。夜明け前の海の色 #1F3B47 と #16303A を地にし、空のグラデーションの中間に霧の藤色 #6E6689、差し色に曙色 #D9906F(文字と線は #A4532D)。昼の面は生成りの #F5F1EA と白 #FDFBF7。歯科サイトの定番のミント系は近隣院と見分けがつかなくなるので使わない。
  • 書体は見出しが Hina Mincho、本文が BIZ UDPGothic。数字と屋号の透かし「Asanagi」だけ Marcellus にした。英字の小見出しは置かず、章の目印は「考え方」「決まり」「初診」のような和文2字と、水平線に小さな日を描いた印。章が進むごとに日の高さが変わり、フッターで水平線に沈む。
  • 看板の演出は「水平線からひらく」の1つに絞った。開いた瞬間は夜明け前の空と海で、スクロールに合わせて空が曙色に明け、太陽が昇り、海面に光の帯が伸び、診療室の写真が水平線から上下にひらく。初回だけ0.9秒で水平線が引かれて見出しが行ごとに上がり、同じタブの2回目は動かさない。動かすのは transform・opacity・clip-path だけ。
  • 章ごとに面の型を変えた。「三つの決まり」は濃色の反転面、「治療計画書」はガラス質のカード(記入線が左から引かれ、値が順に入る)、院内案内は段違いに置いた写真4枚、診療時間は曙色の丸と三角で見せる表。目が止まる場所は治療計画書の1枚だけにし、バッジや実績数は置かない。
  • 料金は保険診療と自由診療をタブで分け、3,000〜4,500円のようなレンジ表記で書く。金額の数字は Marcellus、「円」は本文書体。自由診療は各行に期間と来院回数の目安を書き、起こりうるリスクはタブの直下に折りたたまず置く。本文は16px・行間1.9で、16px未満の文字を1つも使わない。
04

検証で捨てた案

  • 症例写真のビフォーアフター。訴求力は一番強いが、医療広告のガイドラインが求める条件を満たせないため最初に外した。
  • 患者さんの声のスライダーは、そもそも作れない。体験談は限定解除の対象外なので、費用レンジと通院回数の明示に置き換えた。
  • 「痛くない治療」の見出し。断定になってしまうので、「痛みを我慢させない、二段階の麻酔」として、表面麻酔と細い針、電動麻酔器の手順を書く見せ方に変えた。
  • 院長経歴は、最初はトップに置いていた。読み手の関心は自分の不安が減るかどうかが先だと気づいて、治療計画書と三つの決まり、初診の手順、院内案内の後ろへ下げた。
  • 丸ゴシック+ミントの「やさしい歯医者」テンプレ。安全だが誰の記憶にも残らないので、Hina Mincho と夜明けの配色で院名ごと覚えてもらう方に振った。
  • 英字の小見出しを全章に置く案と、流れる文字帯・数字のカウントアップ・手順の横スクロール・カスタムカーソル。事例集で他の見本LPと並べたときに同じ部品が反復してテンプレに見えるので外し、英字は透かしの「Asanagi」1か所に絞った。
#医療広告ガイドライン準拠 #治療計画書の見本 #費用レンジと回数の目安 #リスクの併記 #水平線からひらく #Web予約24時間 #不安解消FAQ #定期検診リコール

(06)

Structure 3 Plans

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

PLAN A / 書面先行

ADOPTED
案A 書面先行型のワイヤーフレーム 上からヘッダー、ヒーロー、はじめての方への3点、考え方と治療計画書の見本、三つの決まり、初めての日の四つの手順、院内案内、院長メッセージ、料金とFAQ、予約フォームと診療時間・アクセスの順に並ぶ縦構成。 HERO POINTS 03 PLAN SHEET RULES 03 FLOW 01-04 CLINIC 04 DOCTOR PRICE + FAQ RESERVE + ACCESS

HERO → POINTS → PLAN SHEET → RULES → FLOW → CLINIC → DOCTOR → PRICE → FAQ → RESERVE → ACCESS

通うのを後回しにしている人がまず確かめたいのは「何をされて、いくらかかるか」なので、方法・回数・費用を書面で渡す約束と治療計画書の見本を最短で置くこの順を採用しました。

PLAN B / 料金先行

案B 料金先行型のワイヤーフレーム ヒーローの上に料金表を重ね、治療計画書の見本と初めての日の四つの手順、FAQ、院長メッセージを経て予約フォームへ向かう縦構成。 HERO + PRICE PLAN SHEET FLOW 01-04 FAQ DOCTOR RESERVE

HERO + PRICE → PLAN SHEET → FLOW → FAQ → DOCTOR → RESERVE

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

PLAN C / 院長・院内先行

案C 院長・院内先行型のワイヤーフレーム ヒーローの直後に院長メッセージと院内写真を置き、治療計画書の見本、料金、FAQを経て予約フォームへ向かう縦構成。 HERO DOCTOR CLINIC PLAN SHEET PRICE FAQ RESERVE

HERO → DOCTOR → CLINIC → PLAN SHEET → PRICE → FAQ → RESERVE

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

(07)

Final Design PC View

採用した案Aで組んだ最終形です。夜明け前の海の色から始まり、昼の面に治療計画書の見本・三つの決まり・四つの手順・院内・料金が並び、予約の章で夕凪の色に戻ります。ファーストビューから予約フォームまでスクロール1本で到達します。

あさなぎ歯科クリニックLPのPC版全体。夜明け前の海に太陽が昇るファーストビュー、はじめての方へ・通いやすさ・お車の方の3点、治療計画書の見本を添えた考え方、濃色の面に置いた三つの決まり、写真と番号01〜04を4列に並べた初めての日の四つの手順、段違いに置いた院内写真4枚、院長メッセージ、保険診療と自由診療をタブで分けた料金表、よくあるご質問8問、夕凪色の面の予約フォーム、診療時間表と道順、フッターの順に続く

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

(08)

Smartphone

夜や休日にスマホで調べられる前提で作っています。ヒーローのボタンが見えなくなったら、「初診の相談を試す」と「診療と料金」への近道を画面下に固定して出します。

スマホ版LPのファーストビュー。夜明け前の海の色を地に、明朝体の見出し「治療の前に、話す時間」、リード文、曙色の「はじめてのご相談」ボタン、診療時間の1行が縦に並び、その下の水平線の位置に診療室の写真が細い窓として見え、海面に屋号の透かし「Asanagi」が薄く置かれている

FIG.08-A / ファーストビュー(夜明け前)

スマホ版LPの「初めての日の、四つの手順」。章の目印と見出し、リード文の下に、左の縦線と番号01に沿って、問診票の画面を表示したタブレットを差し出す写真、見出し「ご予約・ご来院」、説明文が積まれ、画面下に「診療と料金」と「初診の相談を試す」の固定バーが出ている

FIG.08-B / 四つの手順と固定バー

SP DESIGN NOTE

  • 画面下に「初診の相談を試す」のボタンと「診療と料金」への近道を固定。ヒーローの「はじめてのご相談」が見えなくなったら出し、予約フォームが見えている間は引っ込める。ガラス質の面にして、下の写真や文字を透かす。
  • 初診の手順は縦のタイムラインにした。左の縦線がスクロールに合わせて上から描かれ、届いた番号が曙色に灯る。各手順の写真は上から下へひらき、01には問診票デモへの導線を添える。
  • 料金表は横スクロールさせず、保険診療と自由診療をタブで切り替える。各行は項目名の下に金額を右寄せで置き、注釈をその下に添える。診療時間の表は7曜日を1画面幅に収め、時刻を2行に折り返す。
  • FAQ8問は開閉式にする。「＋」が45度回って開き、知りたい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か月がたった方への検診案内をまとめて送れます。外部のサービスにはつながっておらず、入力した内容は保存も送信もされません。

デモを触ってみる LP実物を見る

(10) SELECTED WORK ↓

(05) ✶ 2026 / CARS

Tsugumi Auto

中古車販売・整備 / 在庫検索型のLP × 車検・点検リマインドCRM