FLOW ANATOMY #18 — 1サイトを縦に解剖する
CLARAは、
なぜこわくないと感じさせるのか。
技法は『点』、サイトは『線』。架空の歯科・皮膚科『CLARA／クララ』は、医療サイトにありがちな不安や堅さを、明るい高明度の画面とゆっくり呼吸するパルスでほどきます。左に常時見える固定サイドバーが「いま院内のどこにいるか」を示し、右カラムを縦に進むと診療案内・ドクター・設備・アクセスが順に現れ、最後は実際に選べる予約ミニカレンダーで「もう来院を決めた」状態まで運ぶ。派手な演出を一切足さず、清潔・誠実・やさしさだけで信頼を積む設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
はじめに→診療案内→ドクター→設備→アクセス→ご予約。左の固定サイドバーが全篇の“背骨”として現在地を示し、右カラムは「不安をほどく→科を知る→人を知る→仕組みを知る→道を知る→予約する」と、来院決定へ一直線に段を上げます。色は白とオフホワイトの高明度に、soft skyとtealだけ。行動を促すコーラルは、CTAにだけ一点。
- 00HERO起 — 呼吸するパルスで緊張をほどく動
- 01SERVICES案内 — 歯科／皮膚科をタブで切り替え動
- 02持続レイヤー常 — 固定サイドバーが現在地を示し続ける常
- 03DOCTORS人 — 写真でなく方針で信頼をつくる動
- 04FACILITY安心 — 清潔・バリアフリーの“あたりまえ”動
- 05ACCESS導線 — 診療時間とミニ地図で通いやすさ動
- 06BOOKING着地 — 科・日・時間を“この場で”選ぶ動
呼吸するパルスで、緊張をほどく
狙い白からオフホワイトへ沈むグラデの上に、feGaussianBlurでにじませたsoft blobがゆっくり漂う。見出しは丸ゴシックの極太で「こわくない、をデザインする。」。ヒーローの主役は横一本のパルス波形で、心電図のように尖らせず、strokeの太さと不透明度をsin波で穏やかに明滅させて“落ち着いた呼吸”を可視化する。数値は等幅フォントでカウントアップし、満足度や待ち時間を静かに提示。医療で最初に必要なのは説得ではなく安心、という判断がこの一画面に出ている。
つなぎここで決まるのは「このクリニックは明るくて、こわくない」というトーン。以降のすべての章が、この高明度＋穏やかなモーションの上に積まれ、CTAのコーラルだけが“次の一歩”として目に残る。
歯科／皮膚科を、タブで静かに切り替える
狙いふたつの診療科を一度に並べず、ピル型のセグメントタブで切り替える。押すと下地のインクがスライドし、6枚のカードが時差リビールで入れ替わる。各カードは清潔なラインアイコン＋短い説明＋#タグだけで、色面はフラット。「低侵襲」「説明重視」など“やさしさ”を言葉で明示し、末尾には効能を約束しない旨のコンプラ注記を必ず添える。情報を詰め込まず、選んだ科だけを見せる引き算が、医療の信頼に効く。
つなぎヒーローで作った安心を、具体的な診療内容に落とす章。何を扱う場所かを穏やかに理解してもらってから、次の“誰が診るのか”へ進む。
固定サイドバーが、現在地を示し続ける
狙い画面左には常時、ブランド軸と01〜06のセクション目次が居座る。IntersectionObserverで現在のセクションを判定し、目次の背後でマーカーがスッと縦移動して「いま院内のどこにいるか」を示す。ロゴのパルスは静かに描かれ続け、下端には受付状況の鼓動ドットと「ネットで予約」のコーラルCTAが常駐。画面上端の細い進捗線はtealからコーラルへ変わる。この一貫した“案内板”が、来訪者を迷子にさせない安心の土台になる。
つなぎ章が切り替わっても、左の目次と予約ボタンだけは消えない。縦スクロールのどこにいても「予約はいつでも一手で届く」状態を保つ、医療サイトの背骨となる持続レイヤー。
写真ではなく、方針で信頼をつくる
狙い実在の人物を騙らないため、顔写真は使わない。かわりにやわらかいグラデ円の中へ清潔なラインのアバターを置き、「架空・○○」の名と診療方針の一言を先に見せる。「削って詰める、で終わりにしない」——診察でどんな話をするかが読めることが、写真以上の安心になる。カードは2列、引用は左罫で静かに。人柄と事実（担当領域）を並べ、信頼を“顔のあるもの”にする。
つなぎ科の次に「誰が」を見せることで、通院のハードルが下がる。写真ゼロでも人格が立つことを示し、ブランド全体の“正直さ”を人物にも及ぼす章。
通いやすさも、診療のうち
狙い左に診療時間の表。午前●／午後●／休診—を色つき凡例で一目化し、日曜だけコーラルで休診を示す。右は写真を使わない自作SVGのミニ地図——駅・道・提携駐車場・そっと跳ねるコーラルのピンだけで“最寄りからの近さ”を伝える。住所やアクセスは架空である旨を保ちつつ、徒歩3分・駐車場ありといった通院の実務情報を実直に並べる。
つなぎ「行ける／行きやすい」を確かめてもらう章。心理的なハードル（人・仕組み）に続き、物理的なハードルも下げ切って、最後の予約へ橋を架ける。
科・日・時間を、“この場で”選ぶ
狙いこのサイトの着地点。1診療科→2日にち→3時間の3ステップを、ステップインジケータ付きで実際に操作できる予約ミニUIにした。今日から7日分の曜日カードは日曜を休診で落とし、時間スロットは日付から安定的に“満／◯”を散らす（水曜午後は休診）。選ぶたびに下部の確認文が「○月○日(曜) 10:00 で仮おさえ中」と組み上がり、3つそろえば初めてコーラルの予約ボタンが有効化。押すと「✓ 受付しました（デモ・送信されません）」と静かに応える。読むだけで終わらせず、来院を“決め切る”体験にするのが医療LPの勝ち筋。
つなぎヒーローの「こわくない」から始まった流れが、最後に「もう予約した」という行動へ収束する。急かすバナーや在庫煽りを置かず、選べる手ざわりだけで背中を押す設計が、このブランドの誠実さの証明になっている。
TAKEAWAY“こわくない”をつくる流れの5原則
CLARAから取り出せる、医療・クリニック・士業・相談窓口など「不安を抱えた来訪者」を扱うサイト全般に持ち帰れる設計則。#15 手描き の“写真がなくても信頼は作れる”とも通じますが、こちらは温かさより清潔・静けさ・迷わせなさに振り切っています。
明るさは、それ自体が安心になる
13本中11本が暗背景のショーケースで、CLARAは白とオフホワイトの高明度に振り切った。医療や相談業では、暗い高級感より“ひらけた明るさ”が緊張をほどく。差し色をtealに絞り、行動色のコーラルを一点だけ残すと、明るさと誘導が両立する。
モーションは足すより“鎮める”
心電図を尖らせず、strokeの太さと不透明度をsin波で明滅させて“呼吸”にした。不安を扱う場面では、速い・跳ねる演出は逆効果。ゆっくり・過剰演出なし・reduced-motionで静止、を徹底するほど信頼が増す。
固定サイドバーで迷子をなくす
常時見える目次とスクロールスパイのマーカーが「いまどこか」を示し、予約CTAをどの位置からも一手で届かせる。長い縦スクロールの医療情報でも、来訪者を置き去りにしない“案内板”が信頼の土台になる。
写真ゼロでも人格は立つ
実在人物を騙らないため顔写真を捨て、ラインアバター＋診療方針の一言で医師を見せた。“何をどう話すか”が読めることは、盛った写真より安心をつくる。素材の完璧さより、正直さで信頼を設計する。
読ませて終わらせず、選ばせて終える
最後を「実際に選べる予約ミニカレンダー」にして、来院決定まで運ぶ。急かすバナーではなく、科・日・時間を自分で選ぶ手ざわりが背中を押す。CVを持つサイトは、着地点を“行動できるUI”にすると流れが完結する。