カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 飲食・カフェ（ラーメン店） |
| 系統 | 可愛い系（丸み・太い線と影・手書き風・弾む動き・シールと吹き出し） |
| テイスト | ポップ・元気 |
| 色 | 赤・ピンク |
| 形 | LP型（1枚もの）。ヘッダーはロゴと申し込みボタンだけ。スマホは画面の下に申し込みボタンを固定 |
| スライド | なし |
| メインビジュアル | 文字が主役（タイポ）。画面いっぱいの「ちゅるっ」の文字が主役で、丼の写真は文字の上に1つだけ |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | A08（巨大な文字に切り抜き写真が重なり、スクロールで左右に割れる）／B02（区画を固定して1件ずつ切り替え「1／4」）／A05（写真が下からせり上がり、霧の縁。店名がグラデで浮かぶ） |
| 架空の店 | 「麺処 ちゅるぴ」— 町の小さなラーメン店。店の味を冷凍でお取り寄せできる |
だれに向けたページか
お店の行列に並べない・近くに店が無い・夜中に食べたい人。広告やSNSから1枚目に来て、そのまま申し込むまでを1本の流れで読ませる。 「おいしそう」より先に「たのしそう」と思わせる。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#fff4f6 |
背景（うすいピンク） |
--c-pink |
#ff7aa2 |
丸・シール・飾り（線と図形だけ） |
--c-pinkpale |
#ffe3ea |
吹き出し・カードの地 |
--c-accent |
#c8102e |
申し込みボタンの地（白文字 5.88） |
--c-accent-text |
#c2123f |
うすいピンクの上の赤い文字（5.66） |
--c-yellow |
#ffd43b |
「替え玉無料」などのシール（黒文字 12.17） |
--c-ink |
#2a1416 |
見出し・太い線・ずらした影 |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し・巨大文字：RocknRoll One（太くて丸い）。黒い太線のふち＋右下にずらした影で、シールのように見せる
- 吹き出し・手書きのひとこと：Hachi Maru Pop
- 本文：Zen Kaku Gothic New 16px・行の高さ 1.9
ページの構成と演出（LPの1本の流れ）
- メインビジュアル（A08・タイポ）：画面いっぱいに「ちゅる」「るっ」の2つの巨大文字。真ん中に丼の切り抜きが1つ。スクロールすると文字が左右に割れて、すき間からコピーと申し込みボタン①が出る
- 悩み：吹き出し3つ（行列に並べない／近くに店が無い／夜中に食べたい）。弾んで出る
- 解決（A05）：店の写真が下からせり上がり、下の縁は霧のぼかし。写真の上に巨大な「CHURUPI」がピンク→赤→黄のグラデで浮かぶ
- 特長（B02）：区画を止めたまま、セットの中身を4つ（しょうゆ／からうま／まかない丼／替え玉）1件ずつ切り替え、「1／4」の数字が進む
- 申し込みボタン②の帯
- お客様の声：吹き出しカード3つ（見本の文。会員が本物に替える）
- 料金：セット3つ（料金は〇〇）。申し込みボタン③
- よくある質問：details の開け閉め
- 申し込み：最後の大きなボタン④と電話
動きの決まり
- 弾む動き（
back.out）を基本にする。速さは0.5〜0.9秒 - JSや GSAP が無いとき：巨大文字・丼・コピーは重ならずに縦に並ぶ。セットの4つは縦に並ぶ。写真は最初から見えている。どれも全部読める
prefers-reduced-motionのときは「動かない版」- 画面を揺らす・回す動きはしない（丼が少し傾くだけ）
写真
新しく作る：丼の切り抜き2つ（しょうゆ・からうま）／店の中（湯気とピンクのタイル）。 写真庫から：まかない丼（011-yakiniku の rice）・生ビール（013-brewery の pour）。
数字・声について
料金・送料・お客様の声・電話番号は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- LP は1枚で完結させる。足すなら「特定商取引法の表示」「よくある質問の全部」だけ
- 見出しは RocknRoll One の太線ふち＋ずらした影。吹き出しは Hachi Maru Pop
- 申し込みボタンはどのページでも同じ赤（
--c-accent）。ほかの色のボタンを作らない
