旅の帖面 Tabi Scrap

DESIGN.md

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

https://3pt.co.jp/design-library/md/tabi-scrap/DESIGN.md

# DESIGN.md — 旅の帖面 / tabi-scrap

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

旅人が宿帳に貼り込んだ切符・スタンプ・地図の切れ端。時間の積もった帳面の質感を、
**几帳面な人が組んだ静かなコラージュ**で表す。切り貼りは乱雑ではなく、几帳面に
角をそろえて貼られている。動かない。帳面は静止している。

**キーワード**: 帳面 / 貼り込み / 土色 / 几帳面 / 静止
**この見た目が向く場面**: 宿・旅館・ゲストハウス・喫茶・工芸店など、時間の積み重ねと
実直さを語りたい小規模事業者

## 2. タイポグラフィ

- 和文見出し: Zen Old Mincho / ウェイト 600
- 和文本文: Zen Old Mincho / ウェイト 400 / サイズ 16px / 行間 1.9 / 字間 0.03em
- 欧文・数字（切符番号・日付・料金）: IBM Plex Mono / ウェイト 400・500。
  和文本文中に地の文として混植しない。**必ず「切符の様式」として独立した小片
  （宿札の番号、日付印、料金の数字部分）にのみ使う**
- 見出しスケール: h1（帳面題箋）30px・縦書き（§9のコード例と同値。他のサイズにしない） / h2（節見出し）26px / h3（紙片内見出し）18px /
  キャプション 12.5px
- 特記: **手書き風フォントは使用しない（排他・禁止）**。「手の気配」は書体でなく
  紙片の**わずかな回転・重なり・目打ち線**で出す。見出しは字間 +0.06em でゆったり組み、
  帳面らしい落ち着きを保つ

## 3. カラー（earth・7色固定）

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 藁半紙（地・帳面の紙） | #f3ecd6 | 60% |
| 藁半紙・節替え | #ece2c3 | — |
| 茶墨（本文・見出し） | #43392e | 30% |
| 茶墨弱（キャプション・フッター文字） | #6b5e4d | — |
| 土（罫線・タグ枠・アイコンなど非テキスト専用） | #8a6f52 | 6% |
| 土の文字色（帖タグ等、文字に土系を使う場合は必ずこちら） | #6e5638 | 2% |
| 錆浅葱（節区切り線・切り抜き枠など非テキスト専用） | #5f7d78 | — |
| 錆浅葱の文字色（経路番号等、文字に錆浅葱系を使う場合は必ずこちら） | #46615c | — |
| 消印の朱（スタンプ・点使い限定） | #b8452c | 2%以下 |
  ※朱（--color-stamp）を文字色（点強調）に使ってよいのは **--color-bg（#f3ecd6）上のみ**
  （実測4.53:1でAA適合）。**--color-bg-alt（#ece2c3）上では実測4.14:1でAA未達のため、
  bg-altが背景になる節・要素の内部では朱を文字色に使わない**。朱の点強調を持つ紙片・枠
  （宿札・カレンダー枠等）は、節背景がどちらでも影響を受けないよう、当該紙片自身に
  `background: var(--color-bg)` を明示すること（.ticket-edge が既にこの実装をしている）

- 配色ルール（排他・この構成以外を追加しない）: **`--color-soil` / `--color-asagi` は
  罫線・枠線・アイコンなど非テキスト要素専用**（実測 3.97:1 / 3.79:1＝非文字要素の
  WCAG基準3:1は満たすが、本文サイズの文字色としての4.5:1には届かないため）。
  **文字色として土・錆浅葱の色みを使いたい場合は、サイズや太さに関わらず必ず
  `--color-soil-text`(#6e5638・地に対し5.83:1) / `--color-asagi-text`(#46615c・地に対し5.69:1)
  を使う**（「18px以上かつ600ウェイト以上なら装飾色のまま文字に使ってよい」という
  サイズ依存の例外運用はしない。過去にこの例外運用で `.section-no` 12px に `--color-soil`
  を直接使ってしまいAA未達になった反省から、文字用途は常に専用トークンに分離する）。
  朱は実測4.53:1で小文字でも規定を満たすが、面積は「スタンプ・点」用途に限定する
  （見出し全体やボタン全面には使わない）。`--color-line` は罫線専用（地に対し1.6:1のため
  文字色には一切使わない）
- 土・錆浅葱を**背景の塗り**として使う場合、その上に置く文字は必ず藁半紙地に置いた
  別片（インセット）にする。段落本文を土/錆浅葱の面の上に直接置かない
- 固定9色の値そのもの以外に、それらへ opacity や rgba() のアルファ値を適用した
  派生色を文字色として新たに作らない（背景が変わる業種転換時にAA基準を割り込む
  リスクがあるため）。半透明表現が必要な場合も、文字要素には適用禁止とし、
  文字色は必ず表内の9色のいずれかをそのまま使うこと。特に、地に対して4.5:1
  ぎりぎりの派生色を作らないこと。既存の `--color-soil-text`（5.83:1）・
  `--color-asagi-text`（5.69:1）のような十分な安全マージンを持つ専用トークンの
  追加が必要な場合のみ、新たなCSS変数として定義しこの表に追記する運用にする

## 4. レイアウト・余白（collage）

- コンテンツ最大幅: 1040px（帳面の見開き幅）/ 品書き・帖面本文は 720px の狭い版面
- **紙片コラージュの型**: 部屋紹介＝「宿札」風の短冊（縦長、目打ち線の上辺、
  切符番号を左上にIBM Plex Monoで配置）。地図・周辺案内＝「切り抜き」風の枠
  （四隅にトンボ状のL字罫線を配置した枠、錆浅葱の細罫。矩形の角を切り欠くのではなく、
  矩形の外周はそのままに四隅へL字マークを重ねる。実装は§9参照）。旅の記録＝「貼った便箋」（横長矩形、
  角にテープ跡、右上に消印スタンプ）
- **回転は -1.5deg 〜 1.5deg まで（排他・厳守）**。0度に近い微差の集合で「几帳面に
  貼った」印象を作る。zine-collage のような ±5度超の大胆な回転・入り乱れた重なりは禁止
- **重なりは各節につき1〜2箇所まで**（テープが紙片の角に少しかかる程度）。
  紙片同士を雑然と何枚も折り重ねない。整列を基本とし、コラージュは「わずかな崩し」に留める
- セクション間余白: 96px 基準 / 要素間は 8px の倍数
- ヒーローの構成: **中央寄せの特大見出し＋ボタン2つを作らない。** 帳面の表紙を模した
  型（§5参照）。ボタンはヒーローに置かない。予約導線はナビと末尾の「予約と行き方」節に限定する

## 5. コンポーネントの質感

- **節見出しの帖タグ（eyebrow に代わる装置）**: 各節の見出し直上に、検印風の
  紙片・切符などコンポーネント個別の番号ラベルも和文（漢字略称＋番号。例:「宿-01」「便-03」）を
  基本とし、英字表記（TICKET No.01 等）にしない。英字は§9の定めるブランド副題等の限定用途のみ
  角枠タグ「帖ノ壱／帖ノ弐／帖ノ参／帖ノ四」を置く。**英字ラベル（"01 — ROOMS" の
  ような番号+ラテン英字の直訳）は使わない（排他）**。土の文字色（`--color-soil-text`）
  で1px角枠＋和文の通し呼称のみを組む。この帖面固有の呼び方（帖ノ壱〜四）を使うことで、
  最近傍パターン letterpress-sincerity の `.sec-num`(番号)+`.sec-en`(英字ラベルを
  右寄せで併記) という「番号+ラテン語彙」の型から意匠面で明確に離す
- ヘッダー・ナビゲーション: 藁半紙地・茶墨文字・下線なし。ナビはホバーで
  ホバーで朱の下線が現れる変化は、宿札状のリンク片（ボタン代替リンク）にも同様に
  `transition: border-color 0.15s ease;` を明示適用する（ナビだけに書いてリンク片で
  書き漏らさない）
  **朱の下線のみ**が現れる（色替え不要、下線1本、0.15sで十分。他の装飾は付けない）
- 角丸: 0px（全紙片・全要素直角）/ 影: 使わない。奥行きはテープ跡の色面と
  紙片の重なりの前後関係（z-index 1段のみ）で出す
- **切符の目打ち線（ticket-edge）**: 宿札の上辺に破線状の穴を模した縁を作る。
  実装は §9 参照（CSSグラデーション関数は使わず、地色の円を描いたSVGデータURIを
  `background-repeat: repeat-x` でタイル化して「ミシン目」を表現する）
- **消印スタンプ**: 円形・二重の枠線・朱色・わずかにかすれた質感（SVG feTurbulence を
  displacement に使い縁を欠けさせる）。旅の帖面の各便箋につき1個のみ、右上に配置
- **セロテープ跡**: 半透明にしない。`--color-tape: #e4cd94` の**不透明な色面**を
  矩形（幅 46px 高さ 20px 目安）で紙片の角に重ね、わずかに回転させる
- ボタン: **原則使わない。** 誘導はすべて下線付きテキストリンクか、宿札・切符状の
  リンク片（枠線＋角の目打ち＋ホバーで朱下線）で行う
- カード的要素（宿札・便箋・切り抜き枠）: 罫線1px（土 or 錆浅葱）＋わずかな回転。
  角丸なし。影なし
- フォーム要素: 使う場合は藁半紙地・1px 土罫線・角丸0・フォーカス時に罫線が朱に変わる
- 画像の扱い: **写真は使用しない（排他）**。図版はすべて自作インラインSVGの線画
  （灯台マーク、自転車アイコン、経路図など）で統一。線幅 1.5px、色は茶墨 or 土 or 錆浅葱のみ
- アクセント色の適用範囲: 朱は「①消印スタンプ ②ホバー時の下線 ③料金・切符番号の
  1文字程度の点強調」の3用途に限定。面（背景）に朱を使わない

## 6. モーション

- 量: **static（一切動かさない）**。帳面は静止している。スクロール連動アニメ・
  フェードイン・パララックス・カウントアップは使わない
- 許される唯一の動き: リンク／ナビのホバー時に**朱の下線が現れる**変化のみ
  （0.15s ease、下線の出現のみ。色替え・拡大・影は付けない）
- 使わない動き: opacity/translateのスクロール出現、数字カウントアップ、
  カルーセル、マーキー、パララックス、ホバーでのtranslateY・拡大・影増し

## 7. 写真・イラスト・図版

- 写真は一切使用しない（排他・slop罠回避の核）。すべて自作インラインSVGの線画で統一
  （灯台マーク、自転車、経路図の点線ルート、スタンプ、封筒の折り目線）
- 地図は写実的な地図画像を使わず、**typographic な経路図**（番号つきの直線ルートと
  分数表記）を切り抜き枠の中に組む

## 8. 禁止事項（must not）

- 手書き風フォント（Klee One / うずらフォント等の手書き系）を一切使用しない
  （排他。手の気配は紙片の回転・重なり・目打ち線でのみ表現する）
- 回転角を ±1.5deg を超えて使わない（zine-collage 系の大胆な回転・入り乱れた
  重なりと混同しない。本作は土色の静かな貼り込み帳）
- 紙片の重なりを各節2箇所を超えて多用しない（雑然とした散らかしにしない。
  帳面は几帳面な人が貼ったもの）
- 写真（実写・ストック風含む）を一切使用しない
- `--color-soil` / `--color-asagi`（装飾トークン）を文字色として直接使わない
  （§3参照。罫線・枠線・アイコン用途に限定。文字に使う場合は必ず
  `--color-soil-text` / `--color-asagi-text` を使う）。`--color-line` も文字色に使わない
  （罫線専用）。朱を面（背景）として塗らない
- 節見出しの装置に英字ラベル（"01 — ROOMS" 等、和文見出しの直訳を添えるだけのラテン語）
  を使わない（§5参照。帖ノ壱〜四のような帖面固有の和文の通し呼称を使う）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
  ヒーローに予約ボタンを置かない
- Inter / Roboto / Arial / システムフォントのデフォルト依存をしない
  （Zen Old Mincho / IBM Plex Mono の指定に従う）
- 絵文字をアイコンとして使わない（線幅を統一した自作インラインSVGのみ）
- グラデーション・box-shadow のぼかし・backdrop-filter を使わない
  （奥行きはテープ色面と紙片の重なりのみで表現する）（目打ち線もrepeating-radial-gradient等の
  CSSグラデーション関数ではなく、SVG円のタイル画像で実装すること。slop-scanは
  repeating-radial-gradientも含め全てのgradient関数を検出対象とする）
- セロテープ跡を半透明（rgba＋blur等）で表現しない。不透明な色面で表現する

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f3ecd6;
  --color-bg-alt: #ece2c3;
  --color-ink: #43392e;
  --color-ink-weak: #6b5e4d;
  --color-soil: #8a6f52;        /* 罫線・枠・アイコンなど非テキスト専用 */
  --color-soil-text: #6e5638;   /* 文字に土系を使う場合は必ずこちら */
  --color-asagi: #5f7d78;       /* 罫線・枠など非テキスト専用 */
  --color-asagi-text: #46615c;  /* 文字に錆浅葱系を使う場合は必ずこちら */
  --color-stamp: #b8452c;
  --color-tape: #e4cd94;
  --color-line: #cabb9a;        /* 罫線専用。文字色には使わない */
  --font-heading: "Zen Old Mincho";
  --font-body: "Zen Old Mincho";
  --font-mono: "IBM Plex Mono";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1040px;
  --tilt-max: 1.5deg;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap`

- **回転クラス（-1.5deg〜1.5deg厳守。この6値以外を追加しない）**:
```css
.tilt-a  { transform: rotate(-1.5deg); }
.tilt-b  { transform: rotate(-0.8deg); }
.tilt-c  { transform: rotate(-0.3deg); }
.tilt-d  { transform: rotate(0.4deg); }
.tilt-e  { transform: rotate(0.9deg); }
.tilt-f  { transform: rotate(1.5deg); }
```

- **切符の目打ち線（ticket-edge）**: 上辺にミシン目を作る。**CSSグラデーション関数
  （repeating-radial-gradient 等）は一切使わない（§8参照）**。地色の円を
  `data:image/svg+xml` のインラインSVGとして1個描き、`background-repeat: repeat-x`
  でタイル化してミシン目を表現する:
```css
.ticket-edge {
  position: relative;
  border: 1px solid var(--color-soil);
  background: var(--color-bg);
}
.ticket-edge::before {
  content: "";
  position: absolute;
  top: -5px; left: 0; right: 0; height: 10px;
  /* ミシン目の穴を地色の円タイルで表現（gradient関数は使わず、SVGの円をタイル化） */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10"><circle cx="6" cy="0" r="4" fill="%23f1ebdd"/></svg>');
  background-repeat: repeat-x;
  background-size: 12px 10px;
  background-position: 6px 0;
}
```
  ※ SVG内の `fill` は `--color-bg`(#f3ecd6) 相当の地色を16進カラーコードで直書きする
  （data URI内でCSS変数は参照できないため）。地色トークンを変更した場合はこの
  `fill` 値も同時に更新すること。

- **地図・周辺案内の切り抜き枠（area-frame）**: §4の「切り抜き風の枠」は矩形の角を
  くり抜くのではなく、四隅すべてに幅16px・線幅相当2pxのL字型トンボ風マークを
  重ねて配置する。色は `var(--color-asagi)` のみ（罫線・枠専用トークン。文字には使わない）。
  HTML側は矩形要素の中に `.corner.c-tl` / `.c-tr` / `.c-bl` / `.c-br` を1個ずつ配置する:
```css
.area-frame {
  position: relative;
  border: 1px solid var(--color-asagi);
  padding: 40px 32px;
}
/* 切り抜き枠の四隅マーク（トンボ風のL字。写真コーナーの代替として自作） */
.area-frame .corner { position: absolute; width: 16px; height: 16px; }
.area-frame .corner::before, .area-frame .corner::after { content: ""; position: absolute; background: var(--color-asagi); }
.area-frame .corner::before { width: 16px; height: 2px; }
.area-frame .corner::after { width: 2px; height: 16px; }
.c-tl { top: -1px; left: -1px; }
.c-tl::before { top: 0; left: 0; } .c-tl::after { top: 0; left: 0; }
.c-tr { top: -1px; right: -1px; }
.c-tr::before { top: 0; right: 0; } .c-tr::after { top: 0; right: 0; }
.c-bl { bottom: -1px; left: -1px; }
.c-bl::before { bottom: 0; left: 0; } .c-bl::after { bottom: 0; left: 0; }
.c-br { bottom: -1px; right: -1px; }
.c-br::before { bottom: 0; right: 0; } .c-br::after { bottom: 0; right: 0; }
```
```html
<div class="area-frame tilt-d">
  <span class="corner c-tl"></span><span class="corner c-tr"></span>
  <span class="corner c-bl"></span><span class="corner c-br"></span>
  <!-- 経路図SVGなどをここに配置 -->
</div>
```

- **消印スタンプ（自作SVG。かすれは feTurbulence の displacement で表現。写真・既製素材不使用）**:
```html
<svg class="postmark" viewBox="0 0 100 100" width="64" height="64" aria-hidden="true">
  <filter id="scratch"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" result="n"/>
    <feDisplacementMap in="SourceGraphic" in2="n" scale="6"/></filter>
  <g filter="url(#scratch)" fill="none" stroke="var(--color-stamp)" stroke-width="2">
    <circle cx="50" cy="50" r="42"/>
    <circle cx="50" cy="50" r="34"/>
  </g>
</svg>
```
```css
.postmark { color: var(--color-stamp); }
```
色は `var(--color-stamp)` のみ。1紙片につき1個。面積が大きくならないよう 56〜72px に収める。

- **セロテープ跡（不透明色面。半透明にしない）**:
```css
.tape {
  position: absolute;
  width: 46px; height: 20px;
  background: var(--color-tape); /* 不透明。rgba/blurを使わない */
  transform: rotate(-4deg);
}
```

- **帳面題箋（ヒーローの縦書き見出し）**: 必ず `<h1>` でマークアップする
  （divやpで実装しない。ページ内のh1はこの題箋1箇所のみ）:
```html
<h1 class="cover-title">灯台屋<span class="sub">旅の帖面 — 尾道</span></h1>
```
```css
.cover-title {
  writing-mode: vertical-rl;
  font-family: var(--font-heading), serif;
  font-weight: 600;
  font-size: 30px;          /* §2の見出しスケールと同値。40pxや32pxにしない */
  letter-spacing: 0.24em;
  color: var(--color-bg);
  border: 1px solid var(--color-bg);
  padding: 30px 12px;
}
```

- 数値（切符番号・日付・料金）は `font-family: var(--font-mono), monospace;` を明示し、
  和文本文の `var(--font-body)` と混植しない（切符片・スタンプ・料金表記のみに限定）
- 藁半紙のノイズは `feTurbulence baseFrequency 0.7前後 / opacity 0.045前後 / mix-blend-mode: multiply`
  を body::after に敷き、他パターン（letterpress-sincerity・kissa-melancholy）と
  周波数を変えて識別できるようにする