カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 小売・EC（文房具店） |
| 系統 | 綺麗系（大きな余白・髪の毛のような細い線・細い明朝・白黒グレーだけ・ゆっくりした動き） |
| テイスト | シンプル／高級感 |
| 色 | 白・黒・グレー（強調にだけブルーブラックのインク色） |
| 形 | LP型（1枚もの）：悩み→解決→想い→選べる素材→仕立ての手順→声→料金→よくある質問→予約 |
| スライド | Swiper（vendor/swiper-bundle.min.*・MIT）：選べる紙と表紙。点・矢印・キーボード操作・自動送りの一時停止ボタン。prefers-reduced-motion では自動送りしない。JSなしでは指で横に送れる並び |
| メインビジュアル | 分割（3枚）：縦長の写真3枚（ペン先・紙・インク）を並べる |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | A07 1画面を縦3枚に割った写真が時間差でゆっくり拡大＋縦書き／B06 手順が付箋タブのように積み重なる（CSSだけ）／E02 読み進めると灰色の文字が1字ずつ濃く染まる |
| 架空の店 | 「文具店 白線堂（はくせんどう）」HAKUSENDO — 紙と綴じを選んで、一冊を仕立てるオーダーノートの店 |
だれに向けたページか
書くことが好きな20〜50代。既製品のノートでは満足できず、「自分のための一冊」がほしい人。贈り物を探す人も。 ゴールは「オーダーノートの仕立て会（予約制）」の予約。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#fafaf8 |
背景（紙の白） |
--c-paper |
#f0efeb |
交互の区切り・カード |
--c-ink |
#1a1a1a |
見出し・ボタン |
--c-line |
#d6d5d0 |
髪の毛の線 |
--c-gray-text |
#737373 |
E02 の染まる前の文字（紙の白の上 4.54。読めるぎりぎりの灰） |
--c-accent |
#26334d |
ブルーブラック。E02 の強調句・下線 |
--c-accent-text |
#26334d |
白の上の強調の文字（12以上） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し：Noto Serif JP 300（とても細い明朝）・500
- 英字：EB Garamond（イタリックを添え字に）
- 本文：Noto Sans JP 300・400 16px・字間広め
ページの構成と演出
- メインビジュアル（A07・分割3枚）：画面を縦に3つに割り、ペン先・紙束・インク瓶の写真を並べる。読み込むと3枚が0.4秒ずつずれて現れ、そのあと10秒かけてゆっくり拡大。各写真の上に縦書きの短い句「書く」「綴じる」「残す」。下に細い明朝の大きなコピーと予約ボタン
- 悩み・解決：細い線の表で「既製品だと…」→「白線堂なら…」
- 想い（E02）：短い文章を、読み進めると灰色の字が1字ずつ黒く染まる。「あなたの手の速さ」だけブルーブラック
- 選べる素材（Swiper）：紙6種・表紙を1枚ずつ送る
- 仕立ての手順（B06）：紙の仕切り（インデックス）のように、右端に縦のタブが付いたカードが積み重なる。タブは少しずつ下にずれて、重なっても全部読める。CSSだけ
- 声：3件
- 料金：3つ
- よくある質問
- 予約：フォーム
- 予約ボタンはヘッダー・メインビジュアル・素材のあと・料金のあと・フォームの5か所。スマホは画面の下に固定
動きの決まり
- JSや GSAP が無いとき：3枚の写真は最初から並び、文章は最初から全部黒。Swiper は指で横に送れる並び
prefers-reduced-motionのとき：上と同じ。Swiper の自動送りもしない- 動きはどれもゆっくり（1.5秒以上）。拡大は 1.0→1.08 まで
写真
新しく作る：ペン先（pen）／紙束（paper）／インク瓶（ink） 写真庫から：001 窓辺の机（desk）／005 付箋とノートPC（notes）
数字・料金
料金・日数・お客様の声は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 色は白・灰・黒だけ。ブルーブラックは1ページに2か所まで
- 線は 1px の
--c-line。影は付けない - 見出しは Noto Serif JP 300、英字の添え字は EB Garamond のイタリック
- 演出は1ページに1つまで
