カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | IT・Web（ノーコードでの業務アプリづくり支援） |
| 系統 | 可愛い系（丸み・太い線と6px の影・ドット文字・紫と黄とピンク・シール） |
| 骨組み | K01 1画面完結：PC（幅1080px以上・高さ680px以上）は1画面（ヘッダー＋面＋細いフッター）に5つの面を入れ、ヘッダーの番号つきタブか ← → キーで切り替える。縦に長く積まない。スマホ・JSなしは5つの面が縦に並ぶ |
| 形 | ふつうの縦長 |
| スライド | Swiper（面4「つくったもの」）。点・矢印・キーボード・止めるボタン。自動送り6秒（止められる）。JSなしは scroll-snap で指で送る |
| メインビジュアル | 静止画を動かす（動画風）：机の写真が全面で、24秒かけてゆっくり寄って流れ続ける（CSS だけ）。「● REC」の札つき |
| 演出の型 | C06（面3「さがそう」：暗い倉庫に4枚。「はじめる」を押し、ドラッグか矢印キーであかりを動かすと、照らした所の札「自動化できる仕事」が見える）。A02（スクロールで写真が縮む）は外した：1画面完結にスクロールが無く、動かし方がぶつかるため。代わりにホームの写真がずっと動く |
| 動きの主役 | ホームの写真の流れ（CSS の animation だけ）。面の切り替えは透明度のみの0.3秒。C06 は操作したときだけ動く。GSAP は使わない。「下からふわっと」は無い |
| 架空の会社 | 「ぽちっとラボ」POCHITTO LAB |
面の順番
1 ホーム → 2 こまりごと（吹き出し3つ）＋やり方（3つ）→ 3 さがそう（C06・暗い面）→ 4 つくったもの（Swiper）→ 5 料金・よくある質問・申し込み（3列）。タブには data-tab。
色と書体（共通の変数名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（M PLUS Rounded 1c）--font-head（DotGothic16＋日本語の書体）--font-en（Bagel Fat One＋日本語の書体）。面の色は .t-alt（藤の濃い地）・.t-room（暗い倉庫：変数を全部上書き）。script.js に色は無く、あかりの暗さも CSS。
動かないとき
JSなし・スマホ：全部の面が縦に並び、倉庫は明るいまま札が全部見え、「はじめる」ボタンは出ない。prefers-reduced-motion：写真は流れず、REC も点滅せず、自動送りもしない。
スライドの作り方
Swiper（vendor/）。非表示の面の中では幅が測れないので、面を見せてから Swiper を作る。スマホ・JSなしは overflow-x: auto; scroll-snap-type: x mandatory。
写真の出どころ
新しく作った顔の1枚：hero（机と付箋）。写真庫から（開いて確かめた）：052 case1〜4（厨房・服屋・介護・倉庫の働く後ろ姿＝自動化できる仕事の4場面）、055 team（付箋の会議）、005 meeting（打ち合わせの手元）。
数字・料金
料金・事例の数字・声は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 見出しは DotGothic16、本文は M PLUS Rounded 1c。角丸 20px・線 3px の濃紺・影は6px ずらした濃紺（ぼかさない）
- 差し色（黄・ピンク）は1面に1色
- 面は5つ以内。動きは1ページに1つまで
