カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 医療・クリニック |
| 系統 | 可愛い系（丸み・太い線と影・手書き風・明るい緑・弾む動き・シールと吹き出し） |
| テイスト | ナチュラル・やさしい／ポップ・元気 |
| 色 | 緑 |
| 形 | LP型（1枚もの）：ヘッダーはロゴ＋「分娩予約」だけ。悩み→解決→特長→声→料金→よくある質問→申し込みの1本の流れ。申し込みボタンは5か所＋スマホは画面の下に固定 |
| スライド | Swiper（vendor/swiper-bundle.min.js・MIT）。お母さんの声のカード。点・矢印・キーボード・自動送り（止めるボタンあり／動きを減らす設定では送らない）。JSなしは指で横に送れる並び（scroll-snap） |
| メインビジュアル | イラスト・図形：SVGで描いた丘・ふたばの芽・おなかの大きなお母さんのシルエット・太陽。写真は使わない |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | A06 0→100% の数字とマスコット（1.2秒で終わる・JSなしでは出さない）／E06 ペン先が「こんな不安」を書いていき、要所に蛍光ペンの下線／B05 特長のカードがスクロールで上に積み重なる（CSSの sticky だけ） |
| 架空の医院 | 「ふたばレディースクリニック」— 〇〇市の、分娩も扱う小さな産婦人科 |
だれに向けたページか
はじめての妊娠で、どこで健診・出産するか探している20〜30代。不安が大きく、情報を読み比べている。 「ここなら話を聞いてもらえそう」とやわらかく感じてもらい、そのまま分娩予約の申し込みへ進んでもらう1枚もの。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f2faf4 |
背景（うすいミント） |
--c-ink |
#1f4d33 |
見出し・太い線・影（背景の上で 9.1） |
--c-green |
#237a4a |
申し込みボタンの面（白い文字で 5.3） |
--c-leaf |
#bfeccf |
カード・シールの面（濃い緑の文字で 7.4） |
--c-coral |
#ff9b80 |
シール・ハイライト（濃い緑の文字で 4.7） |
--c-yellow |
#ffe28a |
蛍光ペン・太陽（濃い緑の文字で 7.6） |
--c-accent-text |
#2b7a4b |
背景の上の緑の文字（4.95） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し：Hachi Maru Pop（手書きの丸文字）
- ペンで書く文：Yomogi
- 本文：Kosugi Maru 16px・行の高さ 1.9
- 英字・数字：Baloo 2（800）
ページの構成と演出
- 読み込み（A06）：白い幕にマスコット「ふたばちゃん」（芽の生えた たまご）と 0→100%。1.2秒で幕が上がる。2回目以降（同じタブ）は出さない
- メインビジュアル：SVGの丘・芽・お母さんのシルエット。大きなコピー「はじめてのドキドキも、いっしょに。」＋申し込みボタン①。芽と雲がふわふわ弾む
- 悩み（E06）：ノートの罫線の上に、ペン先が不安を1行ずつ書く。要所に黄色の蛍光ペン
- 解決：「ぜんぶ、ここで相談できます」＋写真（おなか）＋申し込みボタン②
- 特長（B05）：4枚の色違いカードが、スクロールで上に積み重なる（奥のカードは少し小さく暗く）
- 声（Swiper）：お母さんの声のカード（〇〇のまま。会員が本物に替える）
- 料金：分娩費用の目安と、出産育児一時金。＋申し込みボタン③
- よくある質問：details の開閉
- 申し込み：写真（赤ちゃんの足）＋大きなボタン④・電話
- フッター：「この医院は架空です（デザイン見本）」
動きの決まり
- JSや GSAP が無いとき：読み込み幕は出ない、ペンの文は最初から書けている、カードは積み重なり（CSSだけ）がそのまま動く、声は指で横に送れる
prefers-reduced-motionのときは、読み込み幕・弾み・ペン・自動送りを止める- 弾む動きは小さく（10px まで）。画面全体は揺らさない
写真（codex 3枚＋写真庫2枚）
おなか（新）／赤ちゃんの足（新）／個室（新）／待合（002 から）／相談コーナー（018 から）。顔は写さない。
下層ページを作るときの決まり
- 見出しは Hachi Maru Pop、カードは「太い線（3px）＋ずらした影（6px）」
- 申し込みボタンは緑の面に白い文字。1画面に1つは見えるように
- 演出は1ページに1つまで。ペンの下線は強調したい一語だけ
- 料金・人数・お客様の声は見本の値（〇〇）。会員が本物に替える
