カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 飲食・カフェ（カレー専門店） |
| 系統 | 可愛い系（ぽってりした見出し書体・太い縁と影・丸い枠・葉っぱと黄色・シール） |
| 骨組み | K02 雑誌の格子：区切りの境目ではなく「見開き（格子）の組み」で読ませる。PC は12列の格子に、大小の枠（写真・文字・数字・イラスト）を非対称に組む。見開きごとにページ番号（No.01〜05）。スマホは2列 |
| 形 | ふつうの縦長 |
| スライド | なし |
| メインビジュアル | 静止画を動かす（動画風）：カレーの写真1枚がゆっくり寄って流れ（22秒・往復）、湯気が立つ。枠は太い縁の角丸カード |
| 演出の型 | A03（全面の写真が角丸カードになる→完成形の「余白のある角丸カード」だけを格子の枠として使う）／F06（緑→ターメリック色の太い帯。お品書きの見出しの枠を横切って、左右の余白にはみ出す。動かさず形だけ） |
| 動きの主役 | メインビジュアルの寄り（＋湯気）。CSS の @keyframes だけ。GSAP・ScrollTrigger なし（vendor/ なし）。ほかは動かさない。「下からふわっと」は使っていない |
| 架空の店 | 「やさいカレー まめのき」 |
見開きの組み
No.01 メインビジュアル（写真8列＋緑の見出し枠＋黄色の文の枠）→ No.02 まめのきのこと（数字「8」・文・外観の縦写真・店内の横写真・ひとこと）→ No.03 お品書き（帯＋3皿のイラスト枠）→ No.04 スパイス（文の枠＋6つの丸いシール）→ No.05 お店（営業時間・アクセス・お持ち帰り）
色と書体（共通の変数名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（Murecho）--font-head（Potta One）--font-en（Grandstander＋日本語の書体）。
地の色が変わる枠は .t-green .t-yellow .t-leaf が同じ名前の変数を全部上書きする。script.js に色は無い。
動かないとき
prefers-reduced-motion：寄りも湯気も止まる（湯気は隠す）。JS なし：JS はスマホのメニューを閉じるだけなので見た目は同じ。
写真の出どころ
新しく作る：hero（緑のカレー。顔の1枚）。写真庫から（画像を開いて確かめた）：001 店内（interior）・001 外観（exterior）。使わなかった：001 ランチ（トーストのプレートでカレーの店に合わない）・046 茶畑の葉（お茶の畑で野菜に見えない）。料理のイラストは SVG。
外した型と理由
A03 の「縮む動き」と F06 の「伸びる動き」は、主役が2つになるので入れず、形だけ残した。
下層ページを作るときの決まり
- 12列の格子に枠を組む。枠の大きさに差をつけ、同じ大きさを3つ以上並べない（お品書きの3皿だけ例外）
- 枠は角丸 28px・縁 2px の濃い緑・右下に同じ色の影
- 地の色が変わる枠は3種から選ぶ。見出しは Potta One、英字は Grandstander
- 値段・営業時間・電話・お客様の声は見本の値（〇〇）。会員が本物に替える
