区画社(くかくしゃ)

上の提案をもとに AI が起こした詳細ブリーフです。これがそのままコードを書く AI への入力になりました。原文のまま載せています。

# 区画社(くかくしゃ)ブランドサイト 詳細ブリーフ v1

- **slug**: `kukakusha`
- **参考サイト**: Lama Lama(https://lamalama.com/)
- **輸入する型**: 事例一覧の「フル幅1 : スタック2」交互リズム、イントロのロゴモーフ、ロゴマーキー、View +/- による密度制御
- **一文要約**: 図面上の一区画が実際の店になるまでを、サイトのグリッドそのもので語る design-build スタジオのサイト。

## 0. 先に決めた前提(実装者はここを裏切らない)

**捨てるもの(提案 JSON からの意図的な逸脱)**

提案の `palette_dir` は「ウォームグレージュ×テラコッタ」だった。**ウォームグレージュを地色(body bg)にするのは中止する。** 理由は 2 つ。

1. L 0.84〜0.97 / 低彩度 / hue 40〜100 の暖色ニアホワイトは、2026 年時点で最も飽和した AI 既定色である。「アースカラー」と名付けても出てくる画は同じ。
2. 同じリポの `keiro-architects`(建築設計)が既に `--paper: #FBFAF6` + 朱アクセントで立っている。隣接業種で地色まで寄せると 2 本とも印象が薄まる。

**代わりに採る**: `style` の「ハイコントラスト」を配色の主語にする。地は **墨(near-black)**、そこに **テラコッタの全面ドレンチ面** を挟む二地構成。暖かさは写真・素材名・書体が持ち、地色は持たない。グレージュは「石膏ボードの中間調グレー(L 0.76)」として仕様表まわりの小面積にだけ残す。

**アンチ・リファレンス(この 3 つに似たら失敗)**

- 白ギャラリー型の建築事務所サイト(白地 + 均等写真グリッド + 明朝)
- 黒ギャラリー型のクリエイティブスタジオサイト(黒地 + 巨大欧文 + 意味のないカーソル追従)
- 工務店の会社案内サイト(代表挨拶 + 会社概要テーブル + 「トータルサポート」)

---

## 1. ブランド軸

**名前**: 区画社(くかくしゃ)/ 欧文表記 `KUKAKUSHA` / 図面上の略号 `KKS`

**業種**: 商業空間デザイン(飲食店・小売店の内装を、設計から施工まで一社で請ける design-build スタジオ / B2B)

**ペルソナ**:

- **主**: 2〜3 店舗目を出す飲食店オーナー、35〜48 歳。路面 20〜40 坪、スケルトン渡し。1 店舗目でデザイン会社と施工会社を分けて発注し、「図面通りに作れない」「追加費用の責任がどちらにあるか分からない」で消耗した経験がある。今回は責任の所在が一本の相手を探している。
- **副**: 小売ブランドの出店担当(社内に設計部門を持たない)。開業日が先に決まっており、工期が動かせない。
- **意思決定の瞬間**: 「この会社は、うちの坪数・業態・予算の実例を持っているか」を事例一覧で 90 秒以内に判定する。だから事例に **坪数・工期・業態・予算帯** が付いているかどうかが受注の分岐点になる。

**価格帯**:

- 設計・デザイン単独: 80 万円〜(基本設計 + 実施設計)
- 設計施工一括: 工事費 1,000 万〜4,000 万円(20〜40 坪、坪単価 45〜95 万円)
- 設計料は工事費の 8〜12%。相見積もりを取らせない代わりに、内訳を先に開示する。
- **標準工期 45〜75 日**(解体着手から引き渡しまで)

**ブランド人格(4 語)**: 実測的 / 一貫している / 素っ気ない / 施工現場の匂いがする

**Why-This-Brand**

内装業界では、設計する会社と作る会社が別なのが普通で、その継ぎ目に施主の損失が溜まる。図面は綺麗なのに現場で納まらない、納まらないから変更が出る、変更が出ると誰の責任か分からなくなり、工期と予算が同時に膨らむ。区画社はこの継ぎ目を消すために、設計と施工を一つの契約と一人の担当者に束ねている。図面を引いた人間が現場に立ち、現場で決めたことがそのまま図面に戻る。派手な思想があるわけではない。引き渡しの日から逆算して、そこに至るまでの矛盾を先に潰す会社である。

---

## 2. 差別化軸

**同業の凡庸な見せ方(この 3 つが業界の 9 割)**

1. **白背景に竣工写真の均等グリッド + 「実績 200 件」**。写真は綺麗だが、坪数も工期も業態も書いていない。どれも同じ大きさで並んでいるので、スクロールするほど記憶が薄れる。誰の仕事か分からないまま終わる。
2. **「ヒアリング → 設計 → 施工 → アフター」の横並び 4 アイコン工程図**。丸いアイコンに矢印。全社が同じ図を出しているので、設計施工一括の会社と、下請けに丸投げする会社が同じ絵になる。差が見えない。
3. **代表挨拶 + 会社概要テーブル + お問い合わせフォームの役所 3 点セット**。加えて「店舗内装 費用 相場」の SEO 記事への内部リンク。検索から来た人向けであって、発注を決めかけている人向けではない。

**この案の踏み外し方**

| 凡庸 | 区画社 |
|---|---|
| 均等写真グリッド | **フル幅1 : スタック2 の交互リズム**。1 件ごとに面積・工期・業態・席数を図面の表記法(`38.4㎡ / 工期62日 / 席数24`)で添える。写真の大きさが不揃いなことが記憶の掛かりになる |
| 4 アイコン工程図 | **テラコッタ全面ドレンチの工程表**。設計期間と施工期間の横棒が **重なっている** ことを見せる。design-build である証拠がレイアウトそのものになる。アイコンは 1 つも使わない |
| 代表挨拶 | **「見積もりの前に必要な 4 つの数字」**。区画の坪数・スケルトンか居抜きか・希望開業日・予算上限。問い合わせフォームがそのまま実務の入口になる |
| 竣工写真だけ | **ホバーで竣工写真とスケルトン写真がクロスフェード**する。before が見えることは演出であると同時に、この会社が「何もない箱を渡された状態」から始めた証拠になる |

**踏み外しの上限**: 実務書類の体裁を借りるが、実務書類そのものにはしない。読ませたいのは写真であり、図面ではない。図面的な要素(通り芯、求積表、工程表)は **3 箇所まで**。それ以上使うと、装飾としての図面ごっこになる。

---

## 3. トーン & マナー

**一人称**: 「区画社」(社名で受ける)。「私たち」は 1 ページに最大 2 回まで。「弊社」は使わない。

**二人称**: 「お客様」は使わない。**「その区画」「この 30 坪」「開業予定日」** のように、相手ではなく相手の案件を指す。相手を主語にするときは「オーナー」または業態名(「店主」「出店担当」)。

**敬体 / 常体**: 本文は **敬体(です・ます)**。見出しと事例のスペック表記のみ **常体または体言止め**。この段差自体がリズムになる。敬体の中に常体の見出しが立つ構成を守る。

**抽象度**: 具体 8 : 抽象 2。数字・素材名・工程名を先に出す。「心地よい空間」ではなく「厨房から客席まで 7 歩」。抽象語を使うときは必ず直後に数字か固有名詞を置く。

**リズム**: 中程度の文長(40〜70 字)を基調にし、段落の最後だけ短くする。**警句調(重い断定 → 短い否定)を連続させない。** 3 セクション以上が「〜ではない。」で終わっていたら書き直す。ページ全体で警句調の締めは **最大 2 回**。

**避ける言葉(そのまま禁止リスト)**

- ワンストップ / トータルサポート / 一気通貫 / 丸ごとお任せ
- 空間をデザインする / 想いをカタチに / 世界観をつくる / 唯一無二
- お客様に寄り添う / 心地よい / こだわり抜いた / 妥協しない
- 実績多数 / 豊富な経験 / 業界最安値 / 完全オーダーメイド
- 欧文の "seamless" "premium" "curated"
- **ダッシュ(—、--)は使わない**。読点・コロン・括弧で書く

**言い換えの例**

- ×「ワンストップで対応します」→ ○「設計を担当した人間が、そのまま現場監督を務めます」
- ×「豊富な実績」→ ○「直近 3 年で 41 件。うち飲食 28 件」
- ×「お客様の想いを形に」→ ○「決まっていないことを、決まっている順に決めていきます」

---

## 4. デザイン原則

### 4-1. 配色(戦略: Committed → 部分 Drenched)

地色を 2 つ持つ。「未施工の躯体(墨)」と「引き渡し(テラコッタ)」。ページを縦にスクロールすると、この 2 面が交互に現れる。テラコッタは総面積の 25〜35% を占める **面** であり、アクセント色ではない。

```css
body.kukakusha-page {
  /* 地 1: 墨。スケルトン、夜の躯体。ページの基調 */
  --sumi:            oklch(0.155 0.006 45);
  --sumi-lift:       oklch(0.190 0.007 45);  /* 写真を浮かせる 1 段上の面 */

  /* 地 2: 素焼き。工程表・契約・問い合わせのドレンチ面 */
  --terracotta:      oklch(0.445 0.125 38);
  --terracotta-lit:  oklch(0.680 0.145 45);  /* 墨面上のリンク・アクティブ・罫 */

  /* 面 3: 石膏ボードの中間調グレー。仕様表・求積表まわりの小面積のみ */
  --sekkou:          oklch(0.760 0.014 75);

  /* 文字 */
  --hakka:           oklch(0.965 0.004 60);  /* 墨面・テラコッタ面の本文 */
  --hakka-2:         oklch(0.740 0.012 55);  /* 墨面の二次テキスト */
  --ink:             oklch(0.185 0.010 45);  /* 石膏面の本文 */
  --ink-2:           oklch(0.300 0.012 50);  /* 石膏面の二次テキスト */

  /* 罫。図面の線。白ではなくテラコッタの透過 */
  --rule:            color-mix(in oklch, var(--terracotta-lit) 18%, transparent);
  --rule-strong:     color-mix(in oklch, var(--terracotta-lit) 42%, transparent);
}
```

**コントラスト実測(全て AA 以上、実装後に再検証すること)**

| 前景 / 背景 | 比 | 用途 |
|---|---|---|
| `--hakka` / `--sumi` | 約 13.7:1 | 墨面の本文・見出し |
| `--hakka-2` / `--sumi` | 約 7.4:1 | 墨面のキャプション・スペック |
| `--hakka` / `--terracotta` | 約 5.0:1 | ドレンチ面の本文 |
| `--ink` / `--sekkou` | 約 7.2:1 | 石膏面の本文 |
| `--ink-2` / `--sekkou` | 約 4.9:1 | 石膏面の二次テキスト |
| `--terracotta-lit` / `--sumi` | 約 6.1:1 | 墨面のリンク・アクティブ |

**禁止**: `--terracotta`(L 0.445)の上に `--hakka-2` を置かない(3:1 を切る)。ドレンチ面の二次情報は `--hakka` の 100% で文字サイズを落として処理する。プレースホルダ文字も 4.5:1 を守る。

**トークン命名の禁止**: `--paper` `--cream` `--sand` `--linen` `--bone` `--ivory`。素材の日本語名(墨・素焼き・石膏・白華)で命名する。

### 4-2. タイポ体系(2 ファミリーのみ)

**和文 = Murecho**(可変、wght 100〜900 / Google Fonts)。角ゴシックだが字面が四角く、図面の文字に近い骨格を持つ。Noto Sans JP / Zen Kaku Gothic New は反射で選ばれる既定なので使わない。

**欧文・数字 = Archivo**(可変、wght 100〜900 + **wdth 62〜125** / Google Fonts)。幅軸を持つグロテスク。狭幅は図面のタイトル欄、広幅は竣工プレートの表情になる。Inter / Space Grotesk / Helvetica 系は使わない。

```css
--font: "Archivo", "Murecho", "Hiragino Sans", "Yu Gothic", sans-serif;
```

欧文と数字は Archivo、和文は Murecho に自動的に落ちる。これが混植の実装。3 ファミリー目(明朝・モノスペース)は入れない。

**スケール(1.28 比、clamp)**

| 役 | サイズ | ウェイト | 備考 |
|---|---|---|---|
| Hero h1 | `clamp(2.6rem, 6.4vw, 5.2rem)` | 800 | 上限 5.2rem。6rem を超えない |
| セクション h2 | `clamp(1.9rem, 3.6vw, 3.1rem)` | 700 | |
| 事例タイトル h3 | `clamp(1.3rem, 2.1vw, 1.85rem)` | 600 | |
| 本文 | `clamp(0.98rem, 1.05vw, 1.09rem)` | 400 | 行長 38〜42 全角字(和文の 65〜75ch 相当) |
| スペック値 | `0.9rem` | 500 | Archivo `wdth 87.5` + `tabular-nums` |
| 通り芯記号 | `0.72rem` | 600 | Archivo `wdth 100` |

**和文固有の作法**

- `font-feature-settings: "palt" 1` は **見出しのみ**。本文では切る(和文本文の palt は可読性を落とす)。
- 見出しの `letter-spacing` は **-0.02em で止める**。和文は -0.04em まで詰めると濁点と句読点が潰れる。
- 本文 `line-height: 1.85` / 見出し `1.28`。墨地(暗地)の本文は `1.9` に上げる。
- `text-wrap: balance` を h1〜h3、`text-wrap: pretty` を本文に。
- **和文の任意改行(`<br>`)を入れない**。ブレークポイントごとに壊れる。改行制御が要る箇所は `<wbr>` か `word-break: auto-phrase`。
- 全角数字は使わない。数値は半角 + `tabular-nums`(`38.4㎡` `工期62日`)。

### 4-3. グリッド / レイアウト原則

**基幹グリッド**: 12 列 / gutter `clamp(16px, 1.6vw, 28px)` / 最大幅 1440px。ただし事例セクションはフル幅(コンテナを抜ける)。

**署名システム: 通り芯(structural gridline markers)**

セクションの左ガター(デスクトップ時 48px 幅)に、建築図面の通り芯記号(円の中に `X1` `Y2`)を縦に打つ。これがセクションの区切り記号になる。

- **これは眉毛ラベル(小さい大文字 + 広トラッキングのキッカー)の代替であり、併用ではない。** 「ABOUT」「WORKS」のような英字キッカーは **1 箇所も置かない**。
- 通り芯記号は必ず左ガターの固定位置に置く。見出しの真上には置かない。
- モバイル(< 768px)ではガターが消えるので、通り芯記号も消す。代わりにセクション境界のヘアラインだけを残す。
- 「01 / 02 / 03」の連番は工程表セクション(実際に順序が情報になる箇所)でだけ使う。他セクションには持ち込まない。

**モジュラーグリッド崩し**

セクション境界のヘアライン(`--rule`、1px)を **全幅で引き切る**。その線を事例の写真が **意図的にまたぐ**(写真の上端がヘアラインの上に 40〜80px はみ出す)。図面の区画割りが実物によって破られる、という一貫した比喩。崩す方向は常に「写真が線を越える」の一方向に統一する。ランダムにずらさない。

**Works の交互リズム(この案の中核・Lama Lama からの直輸入)**

```
[ ブロック A ] フル幅 1 件   : 動画または横長竣工写真。左右余白 0、高さ 72vh
[ ブロック B ] スタック 2 件 : 12 列を 7 : 5 で割る。左は下に 96px オフセット
[ ブロック A' ] フル幅 1 件
[ ブロック B' ] スタック 2 件 : 割りを 5 : 7 に反転(B と鏡像)
...
```

- A と B の間の縦マージンは **0**(写真同士を接触させる)。B と次の A の間は `clamp(6rem, 9vw, 11rem)`。**間の非対称がリズムの正体**であり、均等な余白にした瞬間にこの型は死ぬ。
- タブレット(768〜1023px)では B のオフセットを 48px に、モバイルでは A も B も 1 列に落ちる。**ただしモバイルでも「大きい 1 件 → 小さい 2 件」のサイズ差は維持する**(全部同じ幅の縦積みにしない)。

**View +/- による密度制御(progressive disclosure)**

Works の右上に密度コントロール(`粗 / 標準 / 密` の 3 段、`role="radiogroup"`)。

- **粗**: 上記の交互リズムのまま、初期表示 6 件
- **標準**: フル幅を 56vh に圧縮、スタック 2 を 3 列に、12 件
- **密**: 全件を 4 列のスペック優先表示(写真は 3:2 のサムネ、面積・工期・業態が主役)、全 24 件
- 状態は `sessionStorage` に保持。JS 無効時は「標準」の静的マークアップが出る(コンテンツを JS でゲートしない)。
- 密度変更は **レイアウトプロパティのトランジションで繋がない**。`view-transition-name` によるクロスフェード、または即時切替 + 200ms のフェードイン。grid-template の補間アニメーションは禁止。

**カード禁止**

事例は border と background を持つカードにしない。写真 + 直下のテキスト、ヘアラインで区切る。ネストしたカードは論外。

**z-index スケール**

`--z-rule: 1` / `--z-sticky: 100` / `--z-nav: 200` / `--z-overlay: 300` / `--z-dialog: 400`。999 や 9999 は書かない。

### 4-4. モーション言語

**イージング**: `--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1)` を基本、イントロのみ `--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1)`。バウンス・エラスティックは使わない。

**エントランスを持つのはページ全体で 4 箇所だけ。** それ以外のセクションはスクロールリビールを持たない。全セクションに同じフェードアップを撒くのが AI の反射である。

1. **イントロ「区画割り」(0〜900ms、初回訪問時のみ)**
   全画面 1 枚の墨の矩形が、縦 1 本 → 横 1 本の線で 3 区画に分割され、そのままヒーローのグリッドに着地する。最後に残った矩形が社名の「区」の囲いに重なって、ロゴが確定する。ロゴモーフの正体は「分割する行為そのもの」。
   実装は `clip-path: inset()` のアニメーションと `transform`。レイアウトプロパティは触らない。`sessionStorage` で 1 セッション 1 回に制限。

2. **屋号マーキー(常時)**
   取引先の屋号を横に流す帯。`transform: translate3d` で 42s linear infinite。**ホバーで停止せず 0.35 倍に減速**する(読めるが止まらない、という速度感がこの会社の口調に合う)。ロゴ画像は用意しないので、Archivo `wdth 87.5` の欧文屋号と Murecho の和文屋号を交互に置く。`aria-hidden` を付け、同じ内容を視覚的に隠したリストで提供する。

3. **事例の交互スタッガー**
   フル幅ブロック(A)は **エントランスを持たない**(最初から見えている)。スタック 2(B)だけが `clip-path: inset(0 0 14% 0)` → `inset(0)` を 60ms 差で解放する。`IntersectionObserver`、`once`、`threshold 0.14`。
   **重要**: 既定の可視状態は「見えている」。クラス付与で初めて表示されるゲート方式にしない(headless レンダラや非アクティブタブでトランジションが発火せず、セクションが空で公開される)。

4. **工程表の横棒(テラコッタ面)**
   設計・施工・検査の横棒が左から伸びる。`transform: scaleX()` + `transform-origin: left`。3 本を 90ms 差。重なり区間は透過ではなく別トーンで塗る。

**ホバー**: 事例サムネで竣工写真 ↔ スケルトン写真を **260ms のマスクワイプ**でクロスフェード(要素中心からの `mask-image` の拡張。カーソル追従はしない)。タッチデバイスでは表示切替ボタン(`竣工 / 施工前` のトグル)を出す。**ホバーでしか得られない情報を作らない**。

**reduced-motion**

```css
@media (prefers-reduced-motion: reduce) {
  /* イントロ: 最終状態を即時表示(スキップではなく到達点で開始) */
  /* マーキー: 静止し、2 行の折返しリストになる */
  /* スタッガー: 全件が最初から可視。transition なし */
  /* 工程表: 横棒は完成状態で描画 */
  /* ホバー: マスクワイプを 0ms のクロスフェードに置換 */
}
```

### 4-5. 写真 / 動画の役割

**竣工写真が主役であり、装飾ではない。** 写真がないセクションは、写真がないことに理由があるセクションだけ(工程表・問い合わせ)。

| 用途 | 内容 | 仕様 |
|---|---|---|
| Hero | 夜の飲食店を **内側から** 見た 1 枚。外の通りが窓越しに見えている。人は 1〜2 人まで。決定的な 1 枚に賭ける(複数枚のスライドショーにしない) | 2400×1350、AVIF/WebP、`fetchpriority="high"`、`loading="eager"` |
| Works フル幅(A) | 実尺の横パン動画 1 本(店内を左から右へ 8 秒)。他は横長竣工写真 | 動画は `muted playsinline loop`、`poster` 必須、`preload="metadata"`、モバイルでは poster 静止画に置換 |
| Works スタック(B) | 竣工写真 + ホバー用スケルトン写真の 2 枚組 | 1600×2000(縦)/ 1600×1067(横)、`loading="lazy"` |
| 素材 | 塗装サンプル、タイル、木口、金物のマクロ写真。石膏面セクションでのみ使う | 800×800 |
| 工程表 | 写真なし。ドレンチ + 横棒のみ | |

**alt テキストはコピーの一部**。「店舗の内観」ではなく「引き渡し当日の客席。テラコッタタイルのカウンターと真鍮のフットレール」。

**画像の初期実装**: `data-img-spec` 付きプレースホルダで組み、後段の `fill-images.sh` が本画像に差し替える(portfolio-demos の規約)。単色 `<div>` で埋めない。動画は生成が難しいため、A ブロックのうち **1 件だけ動画、残りは横長静止画**とし、動画が用意できなかった場合は poster 画像で成立する構造にしておく。

---

## 5. ページ構成

各セクションの「主張 1 行」は、そのセクションが読者に残す 1 文である。これが書けないセクションは削る。

### 5-1. イントロ + Hero(墨)

- **主張**: 図面の一区画が、実際に人が飯を食う場所になるまでを、この会社が一社で引き受ける。
- 必要要素:
  - 区画割りアニメ(4-4 の 1)からヒーローへの着地
  - 全幅の竣工写真(夜の店内 / 内側から)
  - h1(コピー案は 6-1)
  - 補足 1 文(設計施工一括であることを言い切る)
  - 実務スペックの 1 行:`設計施工一括 / 標準工期45〜75日 / 20〜40坪 主戦場`(`tabular-nums`)
  - ヘッダ: 社名 + `works / 引き受ける範囲 / 会社 / 相談する`。スクロール 1 画面目を過ぎたら墨の帯で固定
  - スキップリンク(`#main`)

### 5-2. 屋号マーキー(墨)

- **主張**: この会社は既に街にある店を作っている。
- 必要要素: 取引先屋号 14 件の横流し帯 / `aria-hidden` + 視覚的に隠したリスト / 上下に `--rule` のヘアライン / 高さ 88px

### 5-3. Works(墨、フル幅)

- **主張**: どの店も、坪数と工期と予算が具体的に分かる。
- 必要要素:
  - 交互リズム(A / B / A' / B' ...、4-3 の仕様)
  - 密度コントロール `粗 / 標準 / 密`(`role="radiogroup"`、キーボード矢印キー対応)
  - 各件のスペック:業態 / 面積(㎡・坪 併記)/ 席数 or 什器数 / 工期(日)/ 竣工年月
  - ホバーで竣工 ↔ スケルトン(タッチはトグルボタン)
  - 「さらに 12 件」ボタン(初期表示を絞る。無限スクロールにはしない)
  - 全 24 件、うち飲食 15・物販 6・複合 3

### 5-4. 引き受ける範囲(テラコッタ全面ドレンチ)

- **主張**: 設計と施工が重なっている期間があることが、この会社の全部である。
- 必要要素:
  - 工程表(ガント形式の横棒)。行 = `実測・基本設計` `実施設計` `見積・確認申請` `解体・躯体` `内装工事` `什器・照明` `検査・引き渡し`。設計行と施工行が **重なっている区間**を別トーンで塗る
  - 各行に担当(設計 / 現場 / 兼務)。兼務の行が最も多いことが一目で分かること
  - この 1 セクションだけ「01 / 02 / 03」の連番が許される(実際に順序が情報だから)
  - 本文は `--hakka` 100%。二次テキストは色を落とさずサイズで落とす

### 5-5. 実績の数字(石膏面、小面積)

- **主張**: 実績は件数ではなく、内訳で見る。
- 必要要素:
  - **求積表の体裁**(図面の面積表)で組む。巨大数字 + 小ラベル + サポート統計、というヒーローメトリクスのテンプレは使わない
  - 行 = `直近3年の竣工件数 41` `うち飲食 28` `平均工期 61日` `平均坪単価 68万円` `再依頼率 34%`
  - `tabular-nums` で桁を揃え、罫線は横罫のみ(縦罫を引くと表計算になる)
  - 素材マクロ写真 3 枚を右列に

### 5-6. 会社と体制(墨)

- **主張**: 設計を引いた人間が現場に立つのは、社内に施工管理を持っているから。
- 必要要素:
  - 体制の説明(設計 4 名 / 施工管理 3 名 / 兼務 2 名。この兼務が仕組みの核)
  - 代表挨拶は置かない。代わりに「区画社が断る仕事」を 3 つ書く(工期 30 日未満の突貫 / 図面のみの受注で施工が他社 / 予算 600 万円未満の 30 坪超)。断る条件を書く会社は信用される
  - 事務所写真 1 枚 + 会社概要(所在地・設立・建設業許可番号・保有資格)
  - 建設業許可番号を明記する(B2B では実在性の証拠になる)

### 5-7. 相談の入口(テラコッタドレンチ)

- **主張**: 見積もりを出すには 4 つの数字が要る。それだけ用意してくれれば話が早い。
- 必要要素:
  - 「見積もりの前に必要な 4 つの数字」:区画の面積(坪 or ㎡)/ スケルトンか居抜きか / 希望開業日 / 予算上限
  - フォーム(`<label>` と `for` の関連付け必須、`autocomplete` 属性、`inputmode="numeric"` を数値欄に、エラーは `aria-live="polite"`)
  - 送信ボタンのラベルは「相談内容を送る」(「送信」「OK」は使わない)
  - 電話番号と対応時間 / 対応エリア
  - 「図面がなくても構いません。手書きの間取りで十分です」の 1 行(発注前の心理的障壁の実体はここ)

### 5-8. フッター(墨)

- **主張**: 会社としての実在情報。
- 必要要素: 社名ロゴ / 事業内容 / 建設業許可 / 所在地 / 電話 / プライバシーポリシー / 制作年。過剰なサイトマップは置かない

---

## 6. コピー方針

### 6-1. Hero コピー草案

**第 1 候補(推奨)**

> **設計図を引いた人間が、そのまま現場に立ちます。**
> 飲食店と小売店の内装を、実測から引き渡しまで一社で。区画社は東京・神奈川で年 14 件ほどを担当しています。

design-build の提案を、比喩なしで言い切っている。バズワードが 1 語もない。B2B の意思決定者が探している情報がそのまま見出しになっている。

**第 2 候補**

> **その区画が、店になるまで。**
> 何もない箱を渡された日から、開店前夜まで。区画社は設計と施工を分けません。

**第 3 候補**

> **引き渡しの日から、逆算して引く。**
> 開業日が動かせないことを前提に図面を引くので、工程表が先に決まります。

**第 4 候補(硬め)**

> **20坪から40坪。飲食と物販。設計施工一括。**
> 得意な範囲を狭く書いておきます。区画社が最も精度を出せるのはこの条件です。

**採用しない案(理由も残す)**

- ×「空間に、意味を。」→ 抽象度が高すぎて誰の会社か分からない
- ×「図面のままの店は、一軒もない。」→ 警句調が強く、ページ後半のコピーまで同じ調子に引きずられる

### 6-2. 各セクションの言葉のトーン

| セクション | トーン | 見本 |
|---|---|---|
| Hero | 断定・敬体。名詞で終わらせず動詞で締める | 「そのまま現場に立ちます」 |
| マーキー | テキストなし(屋号のみ) | |
| Works | **説明しない**。スペック表記が語る。キャプションは 1 行 20 字以内 | 「炭焼と日本酒 / 38.4㎡(11.6坪) / 席数24 / 工期62日 / 2025.11」 |
| 引き受ける範囲 | 事務的、工程の言葉。ここだけ主語が「工程」になる | 「実施設計と解体は 6 日重なります。壁を壊してから確定する寸法があるからです」 |
| 実績の数字 | 数字だけ。修飾語を 1 語も足さない | 「再依頼率 34%」 |
| 会社と体制 | 一段だけ人の声。ただし挨拶ではなく判断基準の開示 | 「工期 30 日未満の突貫は断ります。図面の精度が落ちて、結局オーナーが損をするからです」 |
| 相談の入口 | 依頼者の負担を下げる方向。命令形にしない | 「図面がなくても構いません。手書きの間取りで十分です」 |
| フォームのエラー | 何が起きたか + どうすればいいか | 「メールアドレスに @ が含まれていません。もう一度ご確認ください」 |
| ボタン | 動詞 + 目的語 | 「相談内容を送る」「事例をさらに 12 件見る」「施工前の写真を見る」 |
| リンクテキスト | 単体で意味が通ること | ×「詳しくはこちら」 ○「この店舗の工程と費用内訳を見る」 |

---

## 7. クラフトの肝(ここで勝つ 5 点)

### 7-1. ホバー: 竣工 ↔ スケルトンのマスクワイプ

事例サムネにポインタが乗ったら、竣工写真の上に施工前(スケルトン)写真が **要素中心から外へ 260ms / ease-out-quart で mask-image を広げて** 現れる。単純な opacity クロスフェードにしない。マスクの拡張は「壁が剥がされていく」動きに読めるので、この会社の仕事そのものの比喩になる。

- ポインタが外れると 180ms(戻りは往路より速く)で竣工写真に戻る
- タッチデバイスでは `竣工 / 施工前` のトグルボタン(44×44px 以上)を写真右下に出す。**ホバーでしか得られない情報を作らない**
- 2 枚目は `loading="lazy"` + ホバー時に初めてデコード(初期表示のコストを倍にしない)
- `prefers-reduced-motion` では 0ms のクロスフェード

### 7-2. 間: 「フル幅の直後だけ 0」

Works の縦方向マージンを 3 値に固定する。

```css
--gap-touch:  0;                              /* A → B の間。写真同士を接触させる */
--gap-block:  clamp(6rem, 9vw, 11rem);        /* B → A' の間 */
--gap-scene:  clamp(9rem, 14vw, 17rem);       /* セクション間 */
```

均等な余白は事例一覧を「一覧」にしてしまう。**接触と離隔の交互**が、この型が単調さを消す仕組みの本体である。値を 4 つ以上に増やした時点でリズムが濁るので、3 値から増やさない。加えて、フル幅写真の上端が直前のヘアラインを 40〜80px またぐ(4-3 のグリッド崩し)ので、接触部には 1px の線が写真の裏に走っている。この線が見えることで「接触」が事故ではなく設計だと分かる。

### 7-3. タイポ詳細: 和文の詰めと数字の桁

- 見出しのみ `font-feature-settings: "palt" 1`。本文は `"palt" 0`。和文本文にプロポーショナルメトリクスをかけると、句読点の後の空きが不揃いになって読速が落ちる
- 見出しの `letter-spacing` は **-0.02em で止める**(欧文の -0.04em 基準を和文に持ち込まない)
- スペック値は Archivo の `font-variation-settings: "wdth" 87.5` + `font-variant-numeric: tabular-nums`。狭幅にすることで数字列が図面の寸法記入に見え、かつ 24 件分の桁が縦に揃う
- 単位(`㎡` `日` `万円`)は本文色ではなく `--hakka-2` に落とし、数値だけが立つようにする
- `㎡` は環境依存字形なので `m<sup>2</sup>` ではなく `㎡`(U+33A1)を使い、読み上げ用に `<abbr title="平方メートル">` を添える
- h1〜h3 に `text-wrap: balance`、本文に `text-wrap: pretty`。**`<br>` による手動改行は 1 箇所も入れない**

### 7-4. 色のニュアンス: 罫は白ではない / 写真は影ではなく地で浮かす

- 墨地の上のヘアラインを白の透過にすると、暗地の上でグレーに沈んで「安い線」になる。**テラコッタを 18% で透過させた線**にすると、暗所でわずかに赤みを持ち、図面の朱書きに見える。これが 1px の中に入っている温度がページ全体の質感を決める
- 竣工写真の周囲 8px に `--sumi-lift`(墨より L +0.035)の面を敷いて写真を浮かせる。**`box-shadow` を使わない**。影は光源を要求するが、この会社の写真は「壁に貼られた図面」の質感で見せたい。地の明度差だけで浮かせる
- テラコッタドレンチ面は単一のベタではなく、`--terracotta` に 0.02 の明度差を持つ極薄の縦帯(96px 周期)を重ねる。素焼きタイルの目地に見える程度。目視で「模様」と認識されたら濃すぎるので落とす
- 石膏面(L 0.76)は 1 セクションのみ。2 箇所以上使うとページ全体の明度が上がって「ハイコントラスト」が崩れる

### 7-5. モーション量: エントランスは 4 箇所、それ以外は 0

ページに存在するエントランスモーションは 4-4 に挙げた 4 つだけ。「セクションが視界に入ったらフェードアップ」を全セクションに撒くのが AI の反射であり、この案の敗北条件である。

- 見出し・本文・数字・写真の 90% は **最初から静止して見えている**
- リビール対象は「スタック 2 の写真」と「工程表の横棒」のみ。どちらも `IntersectionObserver` + `once`
- 既定の可視状態は「見えている」。クラス付与で初めて可視になるゲート方式は禁止(headless レンダラ・非アクティブタブでトランジションが走らず、本番だけ空セクションで公開される)
- マーキーは停止せず減速(0.35 倍)。完全停止は「壊れた」に見える
- 総モーション予算: 初回ロードから最初のスクロールまでに動くものは **イントロ 1 系統のみ**。900ms で終わる。それ以降スクロールするまで何も動かない

---

## 8. 実装メモ(portfolio-demos 規約)

- `src/pages/kukakusha/index.astro` と `src/pages/kukakusha/en/index.astro`
- `src/layouts/KukakushaLayout.astro`(`DemoBanner` + スキップリンク + `<slot />`)
- `src/components/kukakusha/`(`KkHeader` `KkHero` `KkMarquee` `KkWorks` `KkScope` `KkFigures` `KkStudio` `KkContact` `KkFooter`)
- `src/styles/kukakusha.css`(先頭 `@import "tailwindcss"`、`body.kukakusha-page` にトークンをスコープ)
- `site-content-kukakusha.json` / `site-content-kukakusha.en.json` に本文コピーを全分離。`/images/...` のパスは JSON に直書きし、CDN 化は `asset-rewrite.mjs` に任せる
- フォント: Google Fonts から Archivo(wght + wdth 可変)と Murecho(wght 可変)。`display=swap`、`preconnect` を 2 本、サブセットは日本語のため `text=` は使わず通常配信 + `font-display: swap`
- 画像は `data-img-spec` 付きプレースホルダで実装し、`fill-images.sh` に差し替えさせる
- 動画は A ブロック 1 件のみ。用意できなければ poster 静止画のまま成立する構造にする

## 9. 完成判定チェックリスト

- [ ] 地色に L 0.84〜0.97 の暖色ニアホワイトが **1 つも** 使われていない
- [ ] 小さい大文字 + 広トラッキングの英字キッカーが **0 箇所**(通り芯記号は左ガター固定で代替済み)
- [ ] 連番(01/02/03)は工程表セクションのみ
- [ ] 事例に面積・工期・業態・席数が全件付いている
- [ ] Works の縦マージンが 3 値のみ。フル幅の直後が 0 になっている
- [ ] エントランスモーションが 4 箇所以内
- [ ] JS を切っても全セクションのテキストと画像が見える
- [ ] コントラスト実測を DevTools で再検証(表 4-1 の 6 組すべて)
- [ ] 375 / 768 / 1024 / 1440 / 1920px で見出しが溢れない
- [ ] `prefers-reduced-motion: reduce` で全 5 系統に代替がある
- [ ] 禁止語リストの語が本文に 1 語も出ていない
- [ ] ダッシュ(—、--)が本文コピーに 0 箇所
- [ ] 単色 `<div>` のプレースホルダが残っていない