白場のモード Mode Hakuba

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

# 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
<section class="hero">
  <div class="hero-mark">
    <span class="hero-mark-jp">白暮</span>
  </div>
  <p class="hero-season label-lat">Collection 2026 A/W</p>
</section>
```
```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
<div class="look-track" id="lookTrack" role="list">
  <article class="look" role="listitem" data-look="03">
    <p class="look-no">
      <span class="look-no-label label-lat">Look</span>
      <span class="look-no-num">03</span>
    </p>
    <p class="look-material label-lat">Wool Double Weave</p>
    <p class="look-silhouette">落ち肩のコクーン</p>
    <dl class="look-spec">
      <div><dt class="label-lat">Pieces</dt><dd class="label-lat">5</dd></div>
      <div><dt class="label-lat">Price</dt><dd class="label-lat">¥310,000 —</dd></div>
    </dl>
  </article>
  <!-- ×8 -->
</div>
```
```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;
}
```

**現在地の判定は連続的な数式ではなく「しきい値の通過」で行う。毎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`のようにタグを冠さない
（`<footer class="site-footer invert">`のようにセクション以外の要素にも
`.invert`が付くため、タグ限定セレクタにすると取りこぼして地と文字が同化する）:**
```css
.invert {
  background: var(--color-bg-invert);
  color: var(--color-text-invert);           /* 17.27:1 */
}
.invert .weak { color: var(--color-text-weak-invert); } /* 7.30:1。--color-text-weakを流用しない */
```

**節の出現（役割ごとに速さを変える。全要素同じ0.6秒にしない）:**
```css
.section-head h2 { transition: opacity 0.9s ease, transform 0.9s ease; }
.section-lead { transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s; }
.list-row { transition: opacity 0.5s ease, transform 0.5s ease; }
```

**eyebrow（節番号ラベル）: 垂直フェードではなく「ラベルの短い水平フェード＋隣の罫線の
幅ドロー」の二部構成。LOOK下線と同じ「線を引く」モチーフを縦スクロール部に持ち込み、
横（LOOK進行）・縦（節番号）どちらの道案内も同じ視覚言語にする（§2・§6）:**
```css
.eyebrow {
  opacity: 0;
  transform: translateX(-6px);           /* 縦フェードにしない */
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.eyebrow::after {                        /* 節番号の横の短い罫線 */
  content: ""; width: 0; height: 1px; background: var(--color-line);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; /* ラベルよりわずかに遅れて伸びる */
}
.is-visible .eyebrow::after { width: 40px; }
```

**ナビホバー（硬い瞬時反転。下線が伸びる/字間が広がる等の柔らかい変化にしない）:**
```css
.nav-link {
  color: var(--color-text-weak);
  transition: color 0.05s linear; /* あえて短く、切り替わる質感にする */
}
.nav-link:hover, .nav-link:focus-visible { color: var(--color-ink); }
```

**フォーカスリング（monochrome厳守。ブラウザ既定の青リングを上書きする）:**
```css
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
```

- モバイル（768px以下を目安）: ヘッダーは「HAKUBO」＋「MENU」テキストトグルに変更
  （ハンバーガーアイコンを使わない。文字ラベルで開閉する）。LOOKパネルはネイティブの
  タッチスワイプに任せ（`overflow-x: auto` のまま）、進行インジケータ「01 / 08」を
  画面下中央に固定表示する
- `prefers-reduced-motion: reduce` では全 transition/animation を `none` にし、
  最終状態で即時表示する


## ヘッダーロゴ（2026-09-15追加）

ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。