# DESIGN.md — 白場のモード / mode-hakuba
> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）
## 1. コンセプト
モードブランドのシーズンカタログの扉、ファッション誌のクレジットページの組版。
写真もイラストも使わず、和文明朝の静けさと欧文グロテスクの硬さ、その**コントラストと
余白だけ**でコレクションを見せる。禁欲が贅沢——足すのではなく、削って残ったものだけを置く。
**キーワード**: 白場 / 禁欲 / 和欧混植 / モード / 沈黙
**この見た目が向く場面**: 受注生産アパレル・デザイナーズブランド・生地/仕立て工房・
コンセプトショップ・ファッションディレクターのポートフォリオ
## 2. タイポグラフィ
- 和文（見出し・本文とも）: Noto Serif JP / ウェイト 300 に統一（**声を潜める細さ**。
大見出しであっても太らせない。強調は「太さ」ではなく「大きさ」でつくる）。
可読性が要る長文段落のみ 400 を許容する（本セクションの説明文・受注の流れの説明文）
- 欧文・数字（Archivo / グロテスク）: **大文字・字間 +0.18em を基本**とする「小さく硬い」
ラベル用法（ナビ・節番号・素材語・点数・価格・キャプション）と、LOOK番号だけに許される
「特大」用法の2種類のみ。**この2種類以外の欧文用法を作らない**（本文の代替書体にしない・
斜体で装飾しない）。ウェイトは 600〜700（ラベル）／ 700（LOOK番号）。**Interに置換しない**
- 見出しスケール: ヒーロー縦書きブランド名 `clamp(52px, 9vw, 128px)` / LOOK番号
`clamp(120px, 20vw, 260px)` / セクション見出し(和文) `clamp(26px, 3.4vw, 36px)` /
本文 16px・行間 2.0 / ラベル類 11〜12px・字間 +0.18em
- **特記（本テイストの核）**: 和文300の「静」と欧文グロテスク700の「硬」を同一画面内で
隣接させ、太さ・字間・書体分類の3方向で対比させる。同じ強さの太字を和欧どちらにも
使わない（和文はどこまでも細く、欧文はどこまでも硬く）。eyebrow（英字小見出し）を
和文見出しの機械翻訳として使わない——欧文ラベルは節番号・素材名・価格など**それ自体が
情報**であるものにのみ使う
- **eyebrowが縦スクロール4節すべてに同じ調子で付く理由（機能面の必然性）**: 本テイストは
写真・アイコン・サイドナビを一切持たない（§7・§8）。訪問者が「今どのセクションにいて、
あと何節残っているか」を把握する手がかりは、この`01 — Collection`のような**節番号ラベル
だけ**である。これは横スクロール部の「LOOK 01 / 08」進行インジケータ（§4・§9）と対に
なる、**もう一つの道案内**でもある——横方向はLOOK番号で現在地を示し、縦方向はeyebrowの
節番号で現在地を示す、という同一の番号方式を2軸に適用する設計。さらに各節番号は
ヘッダーnavのアンカー名と1:1で対応する（`01 — Collection`→`#collection`、
`02 — About`→`#about`、`03 — Stockists`→`#stockists`、`04 — Order`→`#order`。
§5のnav実装を参照）。つまりeyebrowはヘッダーnavの「今どこにいるか」表示を兼ねており、
4節のうち1節だけに付けると通し番号としての道案内機能が壊れる（歯抜けのTOCになる）ため、
全節に機械的にではなく**意図的に**同じ調子で付ける。これは単なる英訳の飾りではなく、
「写真もアイコンもナビの強調表示も使わない画面で、番号だけがナビゲーションを担う」
という本テイストの制約から出た必然（§4・§8参照）
## 3. カラー
**monochrome。彩度のある色を1色も足さない（排他）。**
| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（白場のベース） | #fcfcfb | 70% |
| 地（節替え） | #f4f3f1 | — |
| 墨（見出し・本文・強い要素） | #191817 | 20% |
| 中灰（ラベル・弱・白地専用） | #6b6a68 | 8% |
| 罫線 | #e8e7e5 | — |
| 反転地（ブランドについて・フッターのみ） | #191817 | — |
| 反転地の上の白文字 | #fcfcfb | — |
| 反転地の上の弱文字 | #a8a6a2 | — |
- 配色ルール: 彩度を持つ色（金・青・朱など）を一切追加しない。**「高級=セリフ+金色」に
逃げない（金は禁止）。** 格は色数のゼロさで語る
- **両方向のコントラストを実測して使用範囲を限定する**（WCAG AA 4.5:1以上）：
- 墨 `#191817` on 白 `#fcfcfb` = **17.27:1**
- 中灰 `#6b6a68` on 白 `#fcfcfb` = **5.26:1** ／ on 節替え地 `#f4f3f1` = **4.87:1**
（いずれもAA適合。これより明るい灰色をラベルの既定色にしない）
- 白 `#fcfcfb` on 墨地 `#191817` = **17.27:1**
- 中灰 `#6b6a68` を**そのまま**墨地に置くと **3.28:1** で本文サイズのAAを満たさない。
**反転面の弱文字には専用の `#a8a6a2`（墨地で7.30:1）を使う。中灰を流用しない**
- 純白 `#ffffff`・純黒 `#000000` は使わない
## 4. レイアウト・余白
- コンテンツ最大幅: 1180px（本文段落は 620px まで絞る）
- **縦スクロールは「導入と案内」だけに使う**（ヒーロー／コレクション概要／ブランドに
ついて／取扱店／受注の流れ／フッター）。**コレクション本体（LOOK 01〜08）は横スクロール
（`scroll-snap-type: x mandatory`）で見せる。** 縦スクロールにLOOKのサムネイル一覧を
並べない（グリッド化しない。§8）
- **LOOK 1点＝1画面（1スナップ点）。1画面に置く文字要素は次の5つに固定する（排他リスト。
これ以外を追加しない）**: ①LOOK番号（特大欧文） ②素材語 ③シルエット語 ④点数
⑤価格。LOOK番号下の短い下線は装飾でありこの5要素には含まない。横スクロール中は
「01 / 08」の進行インジケータをUIクロムとして画面下に固定表示してよい（これも
5要素には含まれない＝ナビゲーション要素であり、LOOK自体のコンテンツではない）
- グリッドの性格: 縦スクロール部は非対称の1本道（要素を左右どちらかへ意図的に寄せ、
完全な左右対称の中央寄せにしない）。横スクロール部は各LOOKパネルの左1/3に文字を集め、
右2/3を白場のまま残す（写真がない代わりに、余白そのものを「間」として見せる）
- セクション間余白: 上下 160〜200px 基準（モバイルでも 96px 以上）。**余白が怖くなって
要素を足さない。** §4の5要素ルールと本条を両輪として密度を強制的に抑える
- **ヒーローの構成（雑誌の扉。型外し）**: 画面を左端の縦組み帯（幅 `clamp(120px, 16vw, 220px)`）
と、右側の余白のみの領域に分割する。左端に**ブランド名の縦書き和文**
（`writing-mode: vertical-rl`）を置く。右下隅に**「COLLECTION 2026 A/W」の欧文**
（Archivoラベル用法）を置く。**画面中央には何も置かない**（何も置かない勇気そのものが
設計）。**ボタンを一切置かない。** 「中央寄せ見出し＋サブコピー＋ボタン2つ」の定型を
絶対に作らない
## 5. コンポーネントの質感
- ヘッダー・ナビゲーション: 常時不透明の白地（`backdrop-filter`は使わない）・高さ64px。
左に欧文ワードマーク「HAKUBO」（Archivoラベル用法）、右にナビ4項目
（COLLECTION / ABOUT / STOCKISTS / ORDER、同じくAarchivoラベル用法）。
**ナビリンクは既定で中灰、ホバーで墨へ「瞬時に」切り替わる（0.05sの実質ノートランジション）。**
下線が伸びる／字間が広がるといった柔らかい変化は使わない——本テイストの「硬さ」を
ホバーの質そのもので語る（他テイストとの差別化。§9コード例参照）。スクロールで
下端に1px罫線が現れる（`IntersectionObserver`によるクラス切替。§9）
- 角丸: 0px（すべて直角）/ 影: 使わない（box-shadow禁止） / 境界線: 1px solid
`--color-line`（白地）または `--color-text-weak-invert` を弱めた罫線相当（反転地、
実装は §9 参照）
- ボタン: **ヒーローに置かない。** サイト全体でも主ボタン/副ボタンの対を作らない。
誘導はテキストリンク（欧文ラベル＋動詞）で行う。フォーム送信のみ、墨地・白文字・
直角の最小限のボタンを許可する（受注相談フォームがある場合）
- LOOKパネル（横スクロール・ギャラリーの1点）: §4の5要素構成をそのまま用いる。
LOOK番号の直下にのみ、幅 40px・太さ 2px の短い墨下線を装飾として置く（§9）。
写真・イラスト・アイコン・図形は一切使わない
- カード的要素: 「アイコン＋見出し＋説明」の角丸カードを一切使わない。受注の流れ
（4ステップ）・取扱店情報は、罫線区切りの単カラムリストで組む（§9）
- フォーム要素（使う場合）: input / textarea は白地・下線1px（`--color-line`）のみ
（囲み枠を作らない）・角丸0・フォーカスで下線が墨に太る（1px→2px、色つきの
フォーカスリングにしない）。ラベルは上に11px・字間+0.18emの大文字で置く
- 画像の扱い: **本テイストは写真・イラストを一切使わない（§7）。** 装飾画像・
プレースホルダー画像も使わない
- アクセント色の適用範囲: **アクセント色は存在しない（monochrome厳守）。** 目立たせたい
要素は「墨の面積」「文字の大きさ」「字間」の3つだけで対応する
## 6. モーション
- 量: subtle。「動き＝リッチ」に振らない。動きは常に**意味のある1箇所**にだけ使う
- 使う動き:
- **LOOK番号自体は動かさない（静止）。** 横スクロール・ギャラリーの「現在地」は、
スクロール量やカーソル距離を毎フレーム計算する連続的な数式ではなく、
`IntersectionObserver`の**しきい値通過**（採寸のように、中央の狭い当たりゾーンに
入った瞬間だけ確定させる二値判定）で決める。確定した瞬間、そのLOOKの下線
（`.look-no-rule`、幅40px・太さ2px）だけが0→40pxへ一度引かれ、他のLOOKの下線は
0へ戻る（「線が引かれる」の1箇所だけに動きを絞る。`scroll`イベントの継続監視・
速度やクランプ計算は行わない。§9）
- eyebrowは「テキストの垂直フェード」ではなく、**ラベル文字の短い水平フェード
（-6px→0、0.6s）と、隣接する罫線の幅ドロー（0→40px、0.7s、0.15s遅延）の二部構成**
で現れる。LOOK下線と同じ「線を引く」モチーフを縦スクロール部でも使うことで、
横（LOOK進行）と縦（節番号）の両方の道案内を同一の視覚言語で結ぶ（§2・§9）
- 縦スクロール各節の出現は`IntersectionObserver`で発火するが、**役割ごとに速さを
変える**（見出しは0.9s・本文は0.7s delay 0.1s・リスト項目は0.5s、というように
主役ほど長く遅く。全要素を同じ0.6sで揃えない。§9）
- ヘッダー下端の罫線はスクロール開始で0.2sだけフェードイン（クラス切替）
- ナビホバーの色反転は0.05s（前述、「硬さ」を出すためにあえて短い）
- 使わない動き: 自動送りカルーセル、パララックスの多用、数字のカウントアップ、
マーキー、タイプライター、バウンス、拡大縮小のズーム演出、全要素均一0.6sフェード
- `prefers-reduced-motion: reduce` 時はすべての transition/animation を止め、
要素は最終状態で即表示する。横スクロールの `scroll-snap` 自体は構造なので維持する
## 7. 写真・イラスト・図版
- **写真・イラストを一切使わない。** タイポグラフィと罫線と余白だけでコレクションを
語る（`ornament: flat-minimal`）。プレースホルダー画像・ストック写真・AI生成画像も
使わない
- 装飾として許されるのは「1px罫線」と「LOOK番号下の短い下線（幅40px・太さ2px）」の
**2種類のみ**（排他リスト）。図形・アイコン・写真・影・角丸は禁止
## 8. 禁止事項（must not）
- Inter / Roboto / Arial / Noto Sans / Helvetica を使わない（和文=Noto Serif JP 300、
欧文=Archivoで組む）
- グラデーションを一切使わない（背景・文字・ボタンすべて）。box-shadow を使わない。
border-radius は常に 0
- 純白 `#ffffff`・純黒 `#000000` は使わない。彩度のある色（青・朱・**金**・緑など）を
1色も追加しない——**「高級=セリフ+金色」に逃げない（金禁止）**
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
ヒーローにボタンを置かない。ヒーロー中央に何かを置いて余白を埋めない
- **LOOKパネル1画面につき文字要素を5つ（LOOK番号・素材語・シルエット語・点数・価格）
以内に固定する。** 余白が寂しく感じても要素を追加しない・写真やアイコンで埋めない
- 写真・イラスト・アイコン画像を一切使わない（自作の線画すら使わない。文字と罫線
だけで構成する。§7）
- 「アイコン＋見出し＋説明」の角丸カードを使わない（受注の流れ・取扱店は罫線区切りの
リストで組む）
- 絵文字をアイコンとして使わない
- 全要素を同じ0.6秒の均一フェードで登場させない（§6の役割差を守る）。自動カルーセル・
マーキー・数字カウントアップ・タイプライター演出を使わない
- Pinterest型のマソンリーグリッドでLOOK一覧をサムネイル敷き詰めにしない
（横スクロールの1本の順路以外のギャラリー表現をコレクション本体に使わない）
- 欧文をラベル用法（字間+0.18em・小さく硬く）とLOOK番号用法（特大）以外の目的
（本文の代替書体・斜体の装飾コピー等）に使わない
## 9. 実装ノート
```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
--color-bg: #fcfcfb;
--color-bg-alt: #f4f3f1;
--color-ink: #191817;
--color-text: #191817;
--color-text-weak: #6b6a68; /* 白地専用。5.26:1（白地）/4.87:1（節替え地） */
--color-line: #e8e7e5;
--color-bg-invert: #191817;
--color-text-invert: #fcfcfb; /* 墨地で17.27:1 */
--color-text-weak-invert: #a8a6a2;/* 墨地専用。7.30:1。中灰を墨地に流用しない */
/* 変数には総称ファミリを含めない */
--font-heading: "Noto Serif JP";
--font-body: "Noto Serif JP";
--font-latin: "Archivo";
--tracking-label: 0.18em;
--tracking-display: -0.01em;
--space-unit: 8px;
--radius: 0;
--max-width: 1180px;
--measure: 620px;
}
```
- フォント読み込み:
`https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Noto+Serif+JP:wght@300;400;500&display=swap`
- 本文の font-family は `var(--font-body), serif` の順。欧文ラベルは
`var(--font-latin), sans-serif` を明示的に使う（自動フォールバックに任せない）
**欧文ラベル用法（ナビ・素材語・点数・価格・節番号に共通。この1クラスだけを使い回す）:**
```css
.label-lat {
font-family: var(--font-latin), sans-serif;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--color-text-weak);
}
```
**ヒーロー（雑誌の扉。中央には何も置かない）:**
```html
```
```css
.hero { position: relative; min-height: 100svh; display: flex; }
.hero-mark {
width: clamp(120px, 16vw, 220px);
border-right: 1px solid var(--color-line);
display: flex; align-items: flex-start; justify-content: center;
padding-top: 12vh;
}
.hero-mark-jp {
writing-mode: vertical-rl;
font-family: var(--font-heading), serif;
font-weight: 300;
font-size: clamp(52px, 9vw, 128px);
letter-spacing: 0.15em;
color: var(--color-ink);
}
/* 中央(残りの幅)には意図的に何も置かない。要素を追加しない */
.hero-season {
position: absolute; right: 6vw; bottom: 8vh;
font-size: 13px; letter-spacing: 0.32em;
}
@media (max-width: 700px) {
.hero-mark { width: auto; border-right: none; padding: 14vh 24px 0; }
.hero-mark-jp { writing-mode: horizontal-tb; font-size: clamp(40px, 13vw, 64px); }
.hero-season { right: 24px; bottom: 6vh; }
}
```
**LOOKパネル（5要素固定。横スクロール・スナップの1点）:**
```html
Look
03
Wool Double Weave
落ち肩のコクーン
- Pieces
- 5
- Price
- ¥310,000 —
```
```css
.look-track {
display: flex; align-items: center; gap: 0;
overflow-x: auto; scroll-snap-type: x mandatory;
}
.look { flex: 0 0 100vw; scroll-snap-align: center; padding: 0 8vw; }
.look-no-num {
display: block;
font-family: var(--font-latin), sans-serif;
font-weight: 700;
font-size: clamp(120px, 20vw, 260px);
letter-spacing: var(--tracking-display);
line-height: 0.9;
/* 数字自体には一切のtransition/transformを持たせない。静止のまま */
}
.look-no-rule { /* 短い下線のみ。装飾はこれ1本。現在地の合図を兼ねる */
width: 0; height: 2px;
background: var(--color-ink); margin-top: 16px;
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-current .look-no-rule { width: 40px; }
.look-silhouette {
font-family: var(--font-heading), serif; font-weight: 300; font-size: 22px;
}
```
**現在地の判定は連続的な数式ではなく「しきい値の通過」で行う（gallery-kaiyuの
`(centerX-artCenterX)*0.05`のような距離ベースの連続クランプ計算とは構造から異にする。
毎scrollイベントでの数式評価をやめ、`IntersectionObserver`が中央の狭い当たりゾーンを
通過した瞬間だけ状態を1回更新する）:**
```js
var lookObs = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const i = looks.indexOf(entry.target);
looks.forEach((el, idx) => el.classList.toggle('is-current', idx === i));
// 進行インジケータ（01 / 08、fill幅）もこの1回の確定にだけ連動させる
}
});
}, { root: track, rootMargin: '0px -42% 0px -42%', threshold: 0 }); // 左右42%を除外=中央16%だけが当たりゾーン
looks.forEach((el) => lookObs.observe(el));
```
**反転面（ブランドについて・フッター）: セレクタは要素名で限定しない。
`.invert`単体で一般化し、`section.invert`のようにタグを冠さない
（`