カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 製造・BtoB |
| テイスト | ナチュラル・やさしい／高級感 |
| 色 | 茶・ベージュ |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | A02 寄りの写真が縮み、中央に椅子が1脚浮かぶ→左右から単語／F07 線画の椅子がスクロールで寄ってくる／C05 ページの一部が雑誌の見開きのように横に流れる（縦書きと組む） |
| 架空の工房 | 「木曜舎（MOKUYOSHA）」— 職人4人で無垢材の椅子とテーブルをつくる家具工房。店舗・ホテルの特注も受ける |
だれに向けたページか
長く使える家具を探している30〜60代の個人と、店舗やホテルの家具を特注したい設計担当者。 木の手ざわりと、図面から形になるまでの確かさを、静かに見せる。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f4eee4 |
背景（生成り） |
--c-paper |
#ebe2d3 |
見開きの紙の色 |
--c-ink |
#2b2118 |
見出し・こげ茶の面 |
--c-accent |
#a0764a |
線・線画の椅子（文字には使わない） |
--c-accent-text |
#7a5530 |
生成りの上の茶色の文字（5.74） |
--c-on-dark |
#e8d9c4 |
こげ茶の面の上の文字（11.36） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し：Zen Old Mincho 700（大見出しは縦書き）
- 英字：Cormorant Garamond（斜体を添え字に）
- 本文：Zen Kaku Gothic New 16px・行の高さ 2.0
ページの構成と演出
- メインビジュアル（A02）：画面いっぱいのクルミの木目。スクロールすると木目が角丸の小さな板に縮み、その前に切り抜いた椅子が1脚浮かぶ。左から「削る」右から「座る」（縦書き）が寄ってくる。最初の全画面の木目の上には「無垢材の家具工房 木曜舎／SCROLL」の小さな案内（画面を止めるのは 1.3画面ぶんだけ）
- ごあいさつ：縦書きの見出し「百年、座れる椅子を。」と短い文
- 図面から、一脚へ（F07）：こげ茶の面の上で、細い線だけで描いた椅子（Canvas に透視で描く）がスクロールで少し回りながら寄ってくる。寄るにつれて「脚・座面・背もたれ・ほぞ」の注記が出る
- 工房の一年（C05）：雑誌の見開きのような5つの見開き（選ぶ／ねかせる／削る／組む／仕上げる）が横に流れる。各ページに縦書きの見出しと写真。PCは縦スクロールで横に流れ、スマホは指で横に送る
- つくるもの：個人の注文と、店舗・ホテルの特注の2つ
- ご注文の流れ・工房見学
- フッター
動きの決まり
- JSや GSAP が無いとき：木目の写真は角丸の板に縮んだ完成形、椅子は中央、単語は定位置。線画の椅子は斜めから見た止まった絵。見開きは指で横に送れる。全部読める
prefers-reduced-motionのときは、上と同じ「動かない版」- 線画の椅子は回転を 30度までにとどめる。ぐるぐる回さない
写真（codex）
木目／切り抜きの椅子／ダイニング／かんなをかける手／ほぞ組み／工房／材木／オイル仕上げ、の8枚。人は手だけ。
見本の値（会員が本物に替える）
価格・納期・創業年・住所・電話は見本（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 大見出しは Zen Old Mincho の縦書き、英字は Cormorant Garamond の斜体の添え字
- こげ茶の面は1ページに1回まで。ほかは生成りと紙の色
- 写真は角を小さく丸める（6px）。強い影は付けない
