カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 小売・EC（器・陶器店） |
| 系統 | 綺麗系（広い余白・細い明朝・1pxの線・青磁の緑・ゆっくりした動き） |
| 骨組み | K09 大きな番号の手順：01〜05 の大きな番号を縦の細い線でつなぎ、LP の流れ（悩み→答え→中身→安心→申し込み）を手順として読ませる。PC では番号の列を140px、スマホでは76px |
| 形 | LP型（1枚もの）：ヘッダーはロゴと「申し込む」だけ。申し込みボタンは5か所（ヘッダー・最初の画面・02・04・05）＋スマホは画面の下に固定 |
| スライド | なし |
| メインビジュアル | 文字が主役（タイポ）：画面いっぱいの細い明朝「毎日の、三つの器。」。写真は右上に小さく1枚 |
| 演出の型 | E04（崩れた字が正しい字に揃う）／E06（ペン先が悩みの文を書き、要所に蛍光ペンの線） |
| 外した型 | B03（左の写真を固定し右の説明で切り替える）：番号と線でつなぐ縦の流れと、固定した写真が取り合うため。器の中身（03）は写真を3つの小さな切り出しで並べた |
| 動きの主役 | E04（メインビジュアルの文字が揃う・1.7秒・読み込み時に1回）。E06 は 01 の3行だけの小さな動きで、画面に入ったときに1回。「下からふわっと」は使っていない。GSAP なし（素の JS と CSS） |
| 架空の店 | 「うつわ 苔日（こけび）」— 小さな窯元と組んで器を選ぶ、町の器店とオンラインの店 |
| LPの売り物 | 「はじめての器 三つのセット」（飯碗・取り皿・湯のみ。割れたら一度だけ同じ器を送り直す） |
手順の順番
01 迷い（E06）→ 02 答え（地の色を淡い緑に・写真・申し込み）→ 03 中身（3つの切り出し）→ 04 安心（声3件・料金2種・申し込み・淡い緑）→ 05 申し込み（よくある質問・大きな申し込み）→ フッター
色と書体（共通の変数名13個だけ）
--c-bg（生成り）--c-bg-alt（淡い緑）--c-text --c-sub --c-line（線の緑）--c-accent（ボタンの深い緑）--c-accent-text（文字用の緑 #3f6a4c）--c-on-accent --c-2（青磁）--c-3（蛍光ペンの線）--font-ja（Noto Sans JP）--font-head（Kaisei Decol 400）--font-en（Bellefair＋日本語の書体）。
淡い緑の区切り（02・04）は .t-mist が同じ名前の変数を上書きする。番号の裏の地は --c-bg なので、区切りの色が変わっても線が番号を突き抜けない。script.js に色は無い。
動かないとき
JSなし・prefers-reduced-motion：コピーは最初から正しい字、悩みの3行は書き終わった状態で線も引かれている。動きは .is-motion（JS が付ける）のときだけ。読み上げは h1 の aria-label に正しいコピー。
写真の出どころ
新しく作った：set（三つのセット・顔の1枚）。ヒーローの小さな写真と、03 の3つの切り出し（飯碗・取り皿・湯のみ）に使う。 写真庫から（画像を開いて確かめた）：046 の「白い器と灰色の碗」（02。青磁ではないが、湯のみ2つと碗の取り合わせが「三つ」に合う）。 使わなかった：044 の一輪挿し（黄色い花と木の丸椅子で、緑の配色に合わない）／046 の煎茶・玉露（お茶の写真で器が主役でない）。前の版が選んでいた3枚を外した。
会員が本物に替えるもの
料金・送料・サイズ・お客様の声・送り直しの期間・電話番号・住所は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 1列。番号の列＋文字の列（640px）。区切りの上下は 120px 以上（スマホ 80px）
- 線は 1px の
--c-line。角は丸めない。見出しは Kaisei Decol 400、太字は使わない - 淡い緑の区切りは
.t-mist。隣どうしを同じにしない。動きは1ページに1つ（小さな動きを足すなら1か所まで）
