カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 医療・クリニック（整形外科・スポーツ整形） |
| 系統 | カッコイイ系（極太のゴシック・濃紺と黒・直線・切れのいい動き） |
| 骨組み | K01 1画面完結：PC は1画面（ヘッダー＋面＋細いフッター）に5つの「面」を入れ、ヘッダーの番号つきタブか ← → キーで切り替える。縦に長く積まない |
| 形 | ふつうの縦長（スマホ・JSなしは5つの面が縦に並ぶ） |
| スライド | なし |
| メインビジュアル | コラージュ：走る脚と膝の模型（切り抜き）・写真カード3枚（白黒寄り）・言葉のカードが外周を囲み、中央に見出し |
| 演出の型 | A10（面0の外周カード）／D01（面を切り替えるたびに、色の幕が横から入り、ヘッダー・フッターも含めページ全体の色と文字色が変わる）／A11（面3「スポーツ外来」の中だけ、青い粒が集まって MOVE AGAIN になり、かすれて漂う） |
| 動きの主役 | D01 の色の幕（0.6秒）。A11 はスポーツ外来の面の中だけ。「下からふわっと」は使っていない。GSAP・ScrollTrigger なし（素の JS と CSS） |
| 架空の医院 | 「蒼城（そうじょう）整形外科」 |
面の順番
0 コラージュ（濃紺）→ 1 診療内容（氷色・膝の模型の切り抜きと5部位）→ 2 リハビリ（濃紺・写真が左半分）→ 3 スポーツ外来（黒・A11）→ 4 医師・診療時間・アクセス（白・3つの欄を1画面に）
色と書体（共通の変数名13個だけ）
--c-bg --c-bg-alt --c-text --c-sub --c-line --c-accent --c-accent-text --c-on-accent --c-2（電気の青）--c-3（空色）--font-ja --font-head（Noto Sans JP 900）--font-en（Red Hat Display 900＋日本語の書体）。
区切りの色は .t-navy .t-black .t-ice .t-white が同じ名前の変数を上書きする。隣り合う面は同じ色にしない。script.js に色は無く、粒の色は CSS から読む。
動かないとき
JS が無い・スマホ：全部の面が縦に並び、粒の代わりに文字「MOVE AGAIN」が出る。prefers-reduced-motion：幕なしで即切り替え、粒は集まった形で止まる。1画面モードは幅1080px以上かつ高さ680px以上のときだけ。
写真の出どころ
新しく作った：runner（走る脚・顔の1枚）。この見本の前の版で作った物をそのまま使う：knee（膝の模型）・rehab（リハビリ室）・knee2・neck（020 の写真庫）。診察室（002）は小児科の壁絵があり高級感に合わないので使わない（写真庫の画像を開いて確かめた）。
下層ページを作るときの決まり
- 区切りの色は4つから選び、隣どうしを同じ色にしない
- 電気の青は線と図形だけ。文字は
--c-accent-text - 人数・診療時間・住所は見本の値（〇〇）。会員が本物に替える（医療広告ガイドラインに合わせる）
