カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 製造・BtoB（電子部品） |
| 系統 | 可愛い系（丸い書体・大きな角丸・太めの線・顔のついた部品のイラスト・色の面） |
| 骨組み | K02 雑誌の格子：PC は 12 列の格子（タブレットは6列、スマホは1列）に、大小の枠を組む。区切りの帯は積まず、枠の大きさの差と色の面で読ませる |
| 形 | ふつうの縦長 |
| スライド | なし |
| メインビジュアル | 画像1枚のLP風（大きなコピー）：指先の部品の写真1枚を、最初の大きな枠いっぱいに。左に白い板を敷いて大きなコピーとボタン。下の縁は波 |
| 演出の型 | E01（「tiny!」の文字の形に写真をくり抜く）／F03（波の縁。最初の枠と工場の写真の下）。外した型：A04（ロゴの幕）— 動きの主役が2つになるため外した |
| 動きの主役 | 「tiny!」の中の写真が、スクロールで横に流れる（CSS の background-position を --flow 変数で動かす。JS は数行）。ほかは動かさない。GSAP は使わない（vendor なし） |
| 架空の会社 | 「こつぶ電子（KOTSUBU DENSHI）」— 小さなチップ部品・LED・コネクタを、1個から試作に応じる部品メーカー |
格子の組み方（PC）
1〜6行：メインビジュアル（12列）→ 7〜10行：こつぶ電子のこと（5列）＋3つの小さな枠（黄・薄青・空色）→ 11〜15行：「tiny!」の大きな枠（8列・紺）＋文章（4列）→ 16〜21行：部品の見出し（4列・青）＋5つの部品の枠（各4列）→ 22〜26行：検査室の写真（6列）＋工場の文章と数字（6列）→ 27〜31行：物流の写真（6列）＋2つの文字の枠 → 32〜35行：相談の流れ4枠 → 36〜39行：相談の大きな枠。枠の置き場所は grid-area: 開始行 / 開始列 / 終了行 / 終了列 で書く。
色と書体（共通の変数名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（Kiwi Maru）--font-en（Nunito＋日本語の書体）。
枠の色の面は .is-white .is-pale .is-sky .is-yellow .is-blue .is-navy。同じ名前の変数を上書きする（文字・線・アクセント文字まで）。部品のイラストの色も、これらの変数を class で読む（SVG に色コードを書かない）。
動かないとき
JS なし・動きを減らす設定：「tiny!」の中の写真は止まったまま。全部読める。
写真の出どころ
- 顔の1枚：
hero（指先の部品。前の版で作ったものをそのまま使用） - 写真庫から（画像を開いて確かめた）：検査室の技術者
research（034）・クリーンルームのフィルムfilm（034・「tiny!」の中）・物流センターsorting（037） - 使わなかった：
build（ロボット教材。黄と紫が強く、青の見本に合わない）。tray・boardは外した元の指定
見本の値（会員が本物に替える）
最小ロット・納期・件数・電話・住所は〇〇。部品の寸法は見本の値。
下層ページを作るときの決まり
- 枠は角丸 28px・線 2px。1ページに色の面は5種類まで
- 見出しは Kiwi Maru、英字は Nunito 900。伏せ字の「〇」は日本語の書体（
.fz） - 波の縁は1ページに3回まで。「tiny!」のくり抜き文字は1ページに1つ
- 部品のイラストの顔は、トップと製品ページだけ
