皮膚科クリニック（綺麗系・LP）のWebデザイン見本

にきび・かゆみ・しみなど、肌のなやみを長く抱えている20〜40代。「病院に行くほどか分からない」「何をされるか不安」で迷っている人。やさしい言葉で背中を押し、最後は迷わず予約へ進ませる1枚もの。


業種	医療・クリニック（皮膚科）
系統	綺麗系（余白・細い線・明朝・淡い青・ゆっくりした動き）
テイスト	高級感／ナチュラル・やさしい
色	青
形	LP型（1枚もの）（ヘッダーはロゴと予約ボタンだけ。悩み→解決→特長→声→料金→よくある質問→予約の1本の流れ。予約ボタンは5か所。スマホは画面の下に予約ボタンを固定）
スライド	Swiper（患者さまの声。点・矢印・キーボード・止められる自動送り）
メインビジュアル	コラージュ（写真のカードと、淡い青の図形のカードが画面のまわりを囲む）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A10 散らばったカードが画面の外周を囲み、中央にタイトル／E06 ペン先が文を書いていき、要所に蛍光ペンの下線／G04 ページ内の移動を、行き先の色の幕で切り替える
架空のクリニック	「みなも皮ふ科クリニック」— 駅前の、一般皮膚科と肌のケア外来のクリニック

だれに向けたページか

にきび・かゆみ・しみなど、肌のなやみを長く抱えている20〜40代。「病院に行くほどか分からない」「何をされるか不安」で迷っている人。 やさしい言葉で背中を押し、最後は迷わず予約へ進ませる1枚もの。

メインビジュアル（A10・コラージュ）：写真のカード5枚と、淡い青の図形のカード（丸・「土曜も診療」「当日予約OK」の札）が画面の外周を囲み、中央に「肌のなやみを、いちばん近くで。」と予約ボタン①。読み込み時にカードが外から集まり、スクロールすると外へ散る
すぐ下の目次（G04）：「なやみ／治療／料金／よくある質問／予約」。押すと行き先の区切りの色の幕が下から上へ通り、幕のうしろで移動する
こんなおなやみ：チェックつきのカード6つ
解決（E06）：ペン先が「まずは、肌の状態を正しく知ることから。」と1行ずつ書いていき、要所（正しく知る・続けられる治療）に淡い青の蛍光ペンの下線が引かれる。予約ボタン②
特長：3つ。写真と細い線
患者さまの声（Swiper）：声のカードを横にめくる。点・矢印・キーボード。自動送りは「一時停止」で止められる
料金の目安：保険診療と自費の表。予約ボタン③
よくある質問：details の開閉
予約：紺の面に大きな予約ボタン④と電話
スマホの固定ボタン：画面の下に「WEB予約」を固定（⑤）

JSや GSAP が無いとき：カードは外周に止まったまま。ペンの文は最初から全部書かれ、下線も引かれている。目次は普通のページ内リンクとして飛ぶ。声は指で横に送れる並び。全部読める
prefers-reduced-motion のときは、幕を出さずにそのまま移動。Swiper も自動送りしない
料金・患者さまの声・院長名は見本の値（〇〇）。会員が本物に替える。医療の広告の決まり（体験談の扱い・効果の言い方）は会員の地域の決まりに合わせて書き直す

Swiper（MIT・vendor/ に本体と LICENSE）。初期化される前は CSS で overflow-x: auto; scroll-snap-type: x mandatory の並びになる。

新しく作る：ダーモスコープで診る手・クリームをなじませる手。写真庫から：スキンケア（021）・施術室（021）・受付（002）・待合（018）・看護師の後ろ姿（021）。