植物と土 Botanical Earth

DESIGN.md

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

https://3pt.co.jp/design-library/md/botanical-earth/DESIGN.md

# DESIGN.md — 植物と土 / botanical-earth

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

## 1. コンセプト

写真が主役、UIは黒衣（くろこ）。土・野菜・手仕事の写真を、裁ち落としと段差のある
グリッドで組み、紙とインクは脇に退く。「自然派風の装飾」ではなく、**写真の質と余白**
で語る。農と食のリトルプレス・種苗カタログ・スローフード運動の出版物を参照様式とする。

**キーワード**: 図鑑 / 段差 / 余白 / 手仕事 / 土
**この見た目が向く場面**: 農業・食品生産者・工芸・産直・スローフード関連の紹介サイト

## 2. タイポグラフィ

- 和文見出し: Zen Kaku Gothic Antique / ウェイト 500（人文的で穏やか。太字の 700 は
  使わない。強調は級数差で作る）
- 和文本文: Noto Sans JP / ウェイト 400 / サイズ 15px / 行間 1.85 / 字間 0em
- 欧文・数字: Karla（ラベル・節番号・日付・価格・単位は必ずこちらで組む。
  本文の font-family 先頭に指定し、英数字が自動でKarlaになるようにする）
- 見出しスケール: h1 30px（**写真が主役のため、h1でも大きくしすぎない**）/
  h2 23px / h3 16px / キャプション本文 15px・キャプションラベル 12px
- 特記: キャプション・ラベル類は 11〜12px＋字間 0.14〜0.22em＋大文字（Karla）で、
  図鑑の学名表記のような佇まいにする。eyebrow（英字小見出し）は節番号とセットの
  型組みとしてのみ使い、全節を機械的に英訳しない

## 3. カラー

彩度の高い緑（いかにも「オーガニック」な黄緑）を**使わない**。earthトーン限定。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース・生成り） | #f4efe6 | 55% |
| 背景（節替え） | #ece4d5 | — |
| テキスト（主・焦茶） | #3f342a | 30% |
| テキスト（弱・土） | #6b4f37 | — |
| 補助（オリーブ） | #7a7a4a | 装飾的使用は避ける（§8参照） |
| アクセント（テラコッタ・面/点用） | #b25e3f | 10%以下。CTA面・下線・点のみ |
| アクセント（テラコッタ・文字用） | #9c4c2e | リンク文字色。本文サイズでの
  4.5:1 確保のため面用より暗くしている（§8参照） |
| 罫線（弱） | #d8cdb8 | — |
| 罫線（強） | #b9ab8f | — |

- 配色ルール: アクセントは①CTAボタンの塗り面 ②本文リンクの文字色（`--color-accent-text`
  を使う。`--color-accent` を本文サイズの文字色に使わない） ③図鑑ラベルの文字色
  ④ホバー時の下線 の4用途に限定。面（背景）に敷く場合はCTAボタンのみで、それ以外の
  背景に敷かない
- オリーブ #7a7a4a は本文サイズの文字色として使わない（背景コントラスト実測で
  3.89:1 と AA 未達のため）。大見出し・罫線・大きな図形の塗りなど、
  3:1 要件で足りる用途に限定する

### コントラスト実測（WCAG AA）

- 本文 #3f342a on 背景 #f4efe6 → 約10.6:1（余裕あり）
- リンク文字 #9c4c2e on 背景 #f4efe6 → 約5.26:1（AA適合）
- CTAボタン: **地 #9c4c2e（--color-accent-text）× 文字 #fdfaf5 → 実測 約5.78:1（AA適合）**。
  #b25e3f 地に生成り文字を載せると実測 約4.42:1 でAA僅差未達のため、
  **生成り文字を載せる塗り面には必ず #9c4c2e を使う**（#b25e3f は文字が載らない面・点の
  アクセントに限定）。**`--color-accent`（#b25e3f）を本文サイズの文字色に使うのも背景比
  約4.02:1 でAA未達**のため、文字用途には必ず `--color-accent-text` を使う
- 弱テキスト #6b4f37 on 背景 #f4efe6 → 約6.55:1（AA適合）
- 写真の上に文字を載せる場合は必ず不透明の生成り帯を敷いた上に置く（§7参照）。
  半透明スクリムの上に文字を置いて実測を省略しない

## 4. レイアウト・余白

- コンテンツ最大幅: 1240px / 12カラムグリッド（gutter 24px）を基準に、
  **写真は列をまたいで意図的にずらす**（broken-grid）
- グリッドの性格: 罫線で厳格に揃えるのではなく、写真の縦位置をブロックごとに
  段差（margin-top のオフセット）で崩し、隣り合う写真がわずかに重なるように組む
- セクション間余白: 上下 96px 基準（モバイル 64px）/ 要素間は 8px の倍数。
  余白はたっぷり取り、写真の周囲を詰めない
- ヒーローの構成: 中央寄せ・ボタン2つの定型を使わない。全幅裁ち落としの畑写真の
  **下端に生成りの帯を差し込み**、帯の中に園名・一行紹介・CTA1つを置く。
  帯は写真の幅いっぱいに敷かず、非対称に片側へ寄せて幅を絞ることで、写真の
  一部が帯の外に見え続け、その矩形のずれ自体が broken-grid の構成を予告する
  （§9 コード例参照）

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

- ヘッダー・ナビゲーション: 常に不透明な生成り地（`--color-bg`）。**写真の上に
  重ねて透過させない**。ナビリンクは本文と同じ焦茶、ホバーでテラコッタの
  下線が入る（文字色は変えない）。sticky で常に不透明を保つ
- 角丸: 0px（全要素直角。写真・ボタン・帯すべて角丸なし）/ 影: 使わない（写真の
  縁は直線の裁ち落としのみで表現する）/ 境界線: 1px solid（弱#d8cdb8・強#b9ab8f）
- ボタン: 直角・濃テラコッタ地（#9c4c2e = --color-accent-text）＋生成り文字（#fdfaf5）。
  ホバーで地色がさらに濃く（#7f3b22、実測 約7.9:1）沈む。1画面に主CTAは1つまで。
  明るいテラコッタ #b25e3f をボタンの地に使わない（生成り文字と4.42:1でAA未達）
- 図鑑的リスト（写真＋キャプション）: 角丸カード・影付きカードを使わない。
  キャプションは写真の**外**（下）に置き、ラベル（Plate 01 等）＋タイトル＋
  メタ情報（圃場・時期・数量などを半角スラッシュや空白区切りで並べる）の3層で
  組む。3枚を横並びの均等カードにしない（§8参照）
- 定期便・仕様のような一覧: 罫線区切りの行リストで組む。角丸カード3枚に
  しない。価格・数値はKarlaの等幅感を活かして右寄せ・揃える
- フォーム要素: 使う場合は背景 `--color-bg`・1px `--color-line-strong` の罫線・
  角丸0・フォーカスでテラコッタ罫線に変わる
- 画像の扱い: 角丸なし・枠なし・影なし。全写真に §9 のトーン統一フィルタを
  一律適用する。裁ち落とし（bleed）とグリッド内のトリミング（object-fit: cover
  ＋固定 aspect-ratio）を併用し、極端に縦長/横長な原版でもレイアウトが崩れない
  ようにする
- アクセント色の適用範囲: §3 の4用法に限定。ナビの全リンク・本文の強調・
  背景一般には使わない

## 6. モーション

- 量: subtle。写真のフェードイン（役割差＋階段ディレイ）とホバーでキャプション色が
  沈む程度に限定する
- 使う動き: `IntersectionObserver` による写真のフェードイン。主役（ヒーロー写真）は
  長め（0.9s）、脇役（図鑑リストの写真・帯）は短め（0.5〜0.7s）に**役割で時間を
  変える**。さらに同一セクション内で出現順に90msずつディレイを足し、階段状に
  出す（§9 コード例参照）。ホバーはキャプションタイトルの文字色が
  `--color-ink` へ0.25sで沈むのみ
- 使わない動き: パララックス（**禁止**）、カウントアップ、マーキー、
  カルーセル、backdrop-filter によるぼかし演出

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

- 写真はCommons由来のCC0/Public Domainのみ。4枚使用（ヒーロー1・図鑑リスト3）
- 全写真に同一のCSSフィルタ（`saturate(0.82) contrast(0.97) sepia(0.06)`）を
  一律適用し、出典の異なる写真間のトーンを統一する（§9コード例）
- 写真の上に文字を載せる場合は**不透明の生成り帯**のみ。半透明スクリム
  （`rgba(...)` ＋ blur 等）は使わない
- イラスト・アイコンは使わない。葉っぱの絵文字・アイコンによる「オーガニックらしさ」の
  装飾を禁止する（§8参照）。UI上必要な最小限の記号（ハンバーガーメニュー等）のみ
  自作インラインSVGの線画で表現する

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

- Inter / Roboto / Arial をデフォルトで使わない（Zen Kaku Gothic Antique /
  Noto Sans JP / Karla の組み合わせで統一する）
- 紫〜青の装飾グラデーションを使わない。グラデーション全般（背景・文字・
  ボタン）を使わない
- 葉っぱの絵文字・アイコンによる「オーガニック」装飾を禁止する。手書き風フォントも
  使わない（本テイストの禁止の核。人文的だが手書きではないゴシックで組む）
- 角丸カード3枚（アイコン＋見出し＋説明）の「こだわり紹介」を作らない。
  代わりに写真＋キャプションの図鑑的リスト（§5）で構成する
- 半透明スクリム（`rgba(0,0,0,0.x)` や `rgba(255,255,255,0.x)` ＋ blur）を
  写真の上に敷かない。文字を載せる場合は不透明の生成り帯のみ（§7）
- `--color-accent`（#b25e3f）を本文サイズの文字色にそのまま使わない
  （AA未達。文字用途は `--color-accent-text` を使う。§3参照）
- オリーブ #7a7a4a を本文サイズの文字色に使わない（AA未達。大見出し・罫線・
  大きな図形の塗りに限定）
- パララックス・backdrop-filter によるぼかしを使わない
- 彩度の高い黄緑・信号色（緑/黄/赤）を装飾に追加しない
- 絵文字をアイコンとして使わない（UIに必要な最小限の記号は自作インラインSVGの
  線画のみ）
- 写真ごとに異なるトーン・彩度のまま並べない。§9のフィルタを全写真に一律適用する

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f4efe6;
  --color-bg-panel: #ece4d5;
  --color-ink: #3f342a;
  --color-soil: #6b4f37;
  --color-olive: #7a7a4a;
  --color-accent: #b25e3f;       /* テラコッタ：面・点・下線のみ */
  --color-accent-text: #9c4c2e;  /* テラコッタ：文字用（AA 4.5:1確保） */
  --color-line: #d8cdb8;
  --color-line-strong: #b9ab8f;

  --font-heading: "Zen Kaku Gothic Antique";
  --font-body: "Noto Sans JP";
  --font-latin: "Karla";

  --space-unit: 8px;
  --radius: 0;
  --max-width: 1240px;
  --gutter: 24px;
  --cols: 12;

  --photo-filter: saturate(0.82) contrast(0.97) sepia(0.06);
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Karla:wght@400;500;700&display=swap`
- 本文の `font-family` は `var(--font-latin), var(--font-body), sans-serif` の順に
  指定し、英数字が自動でKarlaになるようにする

### 写真トーン統一（全写真に一律適用・必須）

```css
.photo, .hero-photo {
  filter: var(--photo-filter);
}
```

出典の異なる写真（時代・カメラ・光の条件が違う）を同じサイトに混在させると
ちぐはぐな印象になる。彩度を落とし・コントラストをわずかに下げ・セピアを薄く
乗せることで、後から加工した印象を残さずに統一する。**画像編集ソフトでの
事前加工ではなく、必ずCSSフィルタで行う**（コードの複製で誰でも同じ見た目を
再現できるようにするため）。

### ヒーローの型外し（帯を差し込む構成）

```html
<section class="hero">
  <div class="hero-photo-wrap">
    <img class="hero-photo fade-in" data-role="lead" src="..." alt="...">
  </div>
  <div class="hero-band fade-in" data-role="support">
    <p class="hero-eyebrow">Oita / Chuusankanchi Farm</p>
    <h1>土に、季節に、<br>素直な野菜をつくる。</h1>
    <p class="lead">…一行紹介…</p>
    <a class="hero-cta" href="#teiki">CTA</a>
  </div>
</section>
```

```css
.hero-photo-wrap { width: 100%; height: 60vh; min-height: 380px; overflow: hidden; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; }

.hero-band {
  position: relative;
  margin-top: -104px;      /* 写真の下端に帯を差し込む */
  margin-left: 6%;
  width: min(560px, 74%);  /* 全幅にしない。非対称に寄せて写真の一部を見せ続ける */
  background: var(--color-bg);
  border-top: 1px solid var(--color-line-strong);
  padding: 34px 40px 38px;
}
.hero-band h1 {
  margin-top: -14px; /* 見出し冒頭を帯の内側でわずかに持ち上げ、段差を予告する */
}
```

中央寄せの「特大見出し＋サブコピー＋ボタン2つ」を作らない。帯は幅を絞って
写真の右・上に余白を残すことで、その矩形のずれ自体が後続セクションの
broken-grid を予告する導入になる。

### 図鑑的リスト（broken-grid・写真の段差とずれ）

```css
.plate-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gutter);
}
.plate img { width: 100%; height: auto; object-fit: cover; }

/* 各写真の原版比率が違っても崩れないよう、意図した比率に固定する */
.plate--01 img { aspect-ratio: 4 / 5; }
.plate--02 img { aspect-ratio: 6 / 5; }
.plate--03 img { aspect-ratio: 3 / 4; }

.plate--01 { grid-column: 1 / 6; }
.plate--02 { grid-column: 6 / 13; margin-top: 116px; margin-left: -6%; } /* 段差＋わずかな重なり */
.plate--03 { grid-column: 2 / 9; margin-top: 64px; z-index: 2; }

.plate-label {
  font-family: var(--font-latin), sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
```

キャプションは写真の**外**（下）に置く。ラベル（`Plate 01` のような通し番号）・
タイトル・メタ情報（圃場名・時期・数量など）の3層構成にし、図鑑の標本ラベルの
ように扱う。3枚を同じ大きさ・同じ余白で均等に並べる「カード」にしない。

### モーション（役割差＋階段ディレイ）

```css
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
.fade-in[data-role="lead"] { transition-duration: 0.9s; }    /* 主役は長め */
.fade-in[data-role="support"] { transition-duration: 0.5s; } /* 脇役は短め */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}
```

```js
var counters = {};
var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      var el = entry.target;
      var group = el.closest('section') || el.closest('.hero');
      var key = group ? (group.id || 'hero') : 'global';
      counters[key] = counters[key] || 0;
      var delay = Math.min(counters[key] * 90, 360); // 階段状に90msずつ足す
      counters[key] += 1;
      setTimeout(function () { el.classList.add('is-visible'); }, delay);
      io.unobserve(el);
    }
  });
}, { threshold: 0.2, rootMargin: '0px 0px -40px 0px' });
```

全要素を同じ0.6sで均一にフェードさせない。主役（ヒーロー写真）は長く・脇役は
短く時間差を付け、同一セクション内の出現順に階段状のディレイを足すことで
「動きの意味」を作る。パララックスは使わない。