民藝の手仕事 Mingei Teshigoto

DESIGN.md

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

https://3pt.co.jp/design-library/md/mingei-teshigoto/DESIGN.md

# DESIGN.md — 民藝の手仕事 / mingei-teshigoto

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

## 1. コンセプト

「用の美」。型染めの反復文様、素朴で不揃いな輪郭、土の色。手仕事の温度を、写真に頼らず
**版画的な自作SVG**（型染め風の文様・器や籠の線画）だけで組む。整然としたグリッドに
乗せず、品目は少しずつ「ずらす」。回転はしない——傾けるとコラージュになり、手仕事の
静かな不揃いさが壊れるため。

**キーワード**: 用の美 / 型染め / 手仕事 / 土の色 / 不揃い
**この見た目が向く場面**: 工芸店・伝統工芸の作り手・道具店・和菓子や染織など「手で作られたもの」を売る業種

## 2. タイポグラフィ

- 和文見出し: Klee One / ウェイト 600（教科書体の手の気配を残す書体。**太らせない**。
  700 相当の極太ウェイトは存在しないため使わない）
- 和文本文: Shippori Mincho B1 / ウェイト 400 / サイズ 16px / 行間 **2.0**（ゆったり）/ 字間 0.01em
- 欧文・数字: 別書体を立てず、**本文明朝（Shippori Mincho B1）の従属欧文で組む**
  （`--font-latin` も同じファミリを指す。EB Garamond 等の別欧文書体を追加しない。
  年号・価格・寸法はこの従属欧文でそのまま組んでよい）
- 見出しスケール: h1（ヒーロー縦書き店名）60px / h2 32px / h3 20px（モバイルは h1 42px / h2 24px）
- 特記: 見出しは字間 0.03〜0.04em、本文は詰めすぎない。英字ラベル（en-label）は
  12px・字間 0.16em・大文字。キャッチコピーは体言止め・断定で短く、
  「〜を、もっと。」型の空虚コピーを書かない。数字・固有名詞・動作を必ず入れる

## 3. カラー

生成り・焦茶・柿渋・灰緑・薄鼠の5色系列のみ。**彩度の高い色を追加しない（排他）**。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース・生成り） | #f2ece0 | 55% |
| 背景（節替え・帳場の濃淡） | #ebe3d2 | — |
| テキスト（主・焦茶） | #4a3b2e | 30% |
| テキスト（弱・キャプション） | #70634e | — |
| 柿渋（塗り専用。文様のfill・下線・点） | #9e5a3c | 8% |
| 柿渋（文字専用の濃色） | #874a30 | — |
| 灰緑（塗り専用。文様のfill・点） | #6f7864 | 5% |
| 灰緑（文字専用の濃色） | #5a634e | — |
| 罫線・境界 | #d9d2c4 | — |
| 罫線（やや強） | #c3b8a3 | — |

- 配色ルール: 柿渋・灰緑には**塗り用と文字用の2段階**がある。生の `#9e5a3c` /
  `#6f7864` は文様の塗り・下線・点にのみ使い、**本文サイズの文字には使わない**
  （背景 #f2ece0 に対し 4.48:1 / 3.93:1 で AA 本文基準に届かないため）。
  文字に使う場合は必ず `-text` 版（`#874a30` / `#5a634e`、対背景 5.85:1 / 5.36:1）を使う
- 純白 #ffffff・純黒 #000000 を使わない。青・紫・信号色（赤緑黄の装飾利用）を足さない
- 実測コントラスト（対 #f2ece0 生成り／対 #ebe3d2 節替え）:
  焦茶 9.12:1 / 8.41:1、弱文字 4.98:1 / 4.59:1、柿渋文字 5.85:1 / 5.39:1、
  灰緑文字 5.36:1 / 4.94:1（すべてWCAG AA 4.5:1以上）

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

- コンテンツ最大幅: 1180px / 左右パディング 48px（モバイルは24px）
- セクション間余白: 上下120px基準（モバイル84px）/ 要素間は8pxの倍数
- グリッドの性格: **broken-grid**。品目リスト（作り手7人分）は12カラムグリッド上で
  カラム開始位置とスパン幅を作り手ごとに変え（例: 1/7, 7/13, 1/6, 6/13…）、
  さらに各ブロックを `transform: translate()` で個別に手作業で少しずつずらす。
  **回転（rotate）は使わない**——zine-collage 等のコラージュ様式との差別化点。
  「傾ける」のではなく「ずらす」だけに徹する
- 催事暦の行も奇数/偶数で `translateX` の量を変え、罫線の上で軽くずれた帳面のように組む
- ヒーローの構成: 「風呂敷の結び目」構図。**中央寄せにしない**。
  左上に店名を縦書き（`writing-mode: vertical-rl`）、中央やや右に型染め文様の大きな面
  （余白を多く残した1点構成。敷き詰めない）、下端に「今月の催事」の帳面風一行。
  **ボタンは置かない**（ナビゲーションが導線になる）

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

- ヘッダー・ナビゲーション: 生成り地・sticky・下に1px罫線のみ。ナビリンクは本文と同じ
  焦茶、ホバーで柿渋文字色＋下線（0.25s）。本文中のリンクと同じ扱いでよい
- 角丸: 0px（常に直角）/ 影: **一切使わない**（box-shadow禁止）/ 境界線: 1px solid（罫線トークン）
- ボタン: 主要導線としてのボタンは作らない。ヒーローに1つも置かず、
  ナビゲーションと本文中の情報だけで次のアクションへ誘導する
- カード的要素: 角丸カード＋影は作らない。品目ブロックは**上端の1px罫線**のみで区切り、
  背景の面替えはしない（罫線＋余白で領域を示す）
- 文様（型染め風モチーフ）: 節見出しの頭（麻の葉くずし・小）と品目リストの頭（豆・mame）に
  自作SVGを置く。fillは柿渋か灰緑の**ベタ塗り**（グラデーション禁止）。輪郭は正六角形などの
  regular な形にせず、頂点位置を手で少しずつ不揃いにする。文様どうしの間隔は
  `stroke: var(--color-bg)` の2px線で「型紙の合わせ目」のように空ける
- 線画（器・籠・徳利）: 線幅は**常に2px統一**。`stroke-linecap: butt` /
  `stroke-linejoin: miter`（角を丸めない。手彫り・木版の折れを意識する）。
  左右対称にしない（例: 碗の左右の縁の高さをわずかに変える、徳利の首を軸から傾ける）
- フォーム要素: 本テイストのデモには入力フォームを置いていない（問い合わせは電話番号の
  テキスト表示のみ）。フォームを追加する場合は生成り背景・1px焦茶罫線・角丸0・
  フォーカス時に罫線が柿渋文字色に変わる、の letterpress-sincerity 同様のルールを踏襲する
- アクセント色の適用範囲: 柿渋文字色は「価格」「催事の月」「ホバー時のリンク色」の3用途、
  灰緑文字色は「作り手の素材ラベル（器/籠/布/木工）」「手順番号」の2用途に限定する。
  地の面（背景）には柿渋・灰緑を使わない

## 6. モーション

- 量: subtle
- 使う動き: `.reveal` クラスの opacity 0→1・translateY(10px)→0 のフェードのみ
  （IntersectionObserver）。**役割差＋階段ディレイ**を必ずつける——
  節見出し（role: head）は0.7s、品目・リスト行（role: item）は0.45sと**長さを変え**、
  品目は40〜60ms刻みで階段状に遅延させる。ホバーは色・下線の変化のみ（0.25s）
- 使わない動き: **文様（型染めモチーフ・線画）自体のアニメーションは禁止**。
  `.motif` クラスの要素は常時 `opacity:1` で、フェードやドローイン等の
  トランジションを一切持たせない（親要素のフェードにも巻き込まれない構造にする）。
  パララックス・自動カルーセル・カウントアップ・マーキー・タイプライターは使わない
- `prefers-reduced-motion: reduce` で全フェードを停止する

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

- **写真は一切使わない**（botanical-earth との最大の差別化点）。すべて自作インラインSVGの
  型染め風モチーフと線画で構成する
- 文様は「敷き詰めて壁紙にする」ことを禁止する。1画面につき大きな文様面は1箇所
  （ヒーロー）に絞り、余白を文様より広く取る。節見出しの小さな文様（36×33px程度）は
  装飾点としてのみ使う
- 線画（碗・籠・徳利）はアイコンではなく「図版」として scoped に使う
  （store概要セクション・直しの受付セクションのみ。ナビやボタンのアイコンには使わない）

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

- 毛筆フォント・行書体・隷書体を使わない（Klee One / Shippori Mincho B1 以外の
  「和風」を演出するための書体を追加しない）
- 雲紋・波紋・唐草などの「和風テンプレ」装飾、朱色の判子・落款を使わない
  （型染め風の自作モチーフ以外の和柄クリップアートを足さない）
- 文様を全面に敷き詰めて壁紙化しない（1画面1箇所の大きな文様面まで。余白が主役）
- グラデーションを一切使わない（背景・文字・文様のfillすべて）。box-shadowを使わない
- 角丸を使わない（border-radiusは常に0）
- 品目の配置に**回転（rotate）を使わない**。ずらすのは `translate` のみ
  （zine-collageの「傾き」との混同を避ける）
- 上記10色（生成り・焦茶・弱文字・柿渋2種・灰緑2種・罫線2種・純白純黒不使用）
  以外の色を追加しない。特に紫〜青・信号色の装飾利用をしない
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
  ヒーローにボタンを置かない
- 絵文字・既製アイコンセットをアイコンとして使わない（自作インラインSVG線画のみ）
- 文様（モチーフ）自体にアニメーションをつけない（§6参照）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f2ece0;
  --color-bg-alt: #ebe3d2;
  --color-ink: #4a3b2e;             /* 対--color-bg 9.12:1 */
  --color-text-weak: #70634e;       /* 対--color-bg 4.98:1 */

  --color-kakishibu: #9e5a3c;       /* 塗り専用（文字には使わない） */
  --color-kakishibu-text: #874a30;  /* 文字専用（対--color-bg 5.85:1） */
  --color-haimidori: #6f7864;       /* 塗り専用（文字には使わない） */
  --color-haimidori-text: #5a634e;  /* 文字専用（対--color-bg 5.36:1） */

  --color-line: #d9d2c4;
  --color-line-strong: #c3b8a3;

  /* 変数には総称ファミリ(serif)を含めないこと */
  --font-heading: "Klee One";
  --font-body: "Shippori Mincho B1";
  --font-latin: "Shippori Mincho B1"; /* 別欧文書体を立てない。本文明朝の従属欧文 */

  --space-unit: 8px;
  --radius: 0;
  --max-width: 1180px;
  --gutter: 24px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Shippori+Mincho+B1:wght@400;600;700&display=swap`
- 本文の font-family は `var(--font-latin), var(--font-body), serif` の順（結果的に同一ファミリ）
- 本文は必ず `line-height: 2;` で組む（本テイストの必須ルール。詰めない）

### 品目リストの broken-grid（ずらし。回転なし）

```css
.makers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 56px 24px;
}
/* カラム開始位置とスパンを作り手ごとに変え、さらに手で translate を与える。
   波形関数などプログラム的な規則性は持たせない＝手仕事の不揃い感 */
.maker--1 { grid-column: 1 / 7;  transform: translate(-6px, 0); }
.maker--2 { grid-column: 7 / 13; transform: translate(18px, 26px); }
.maker--3 { grid-column: 1 / 6;  transform: translate(10px, -10px); }
.maker--4 { grid-column: 6 / 13; transform: translate(-14px, 14px); }
/* モバイル（680px以下）ではずらしを解除し1カラムへ */
@media (max-width: 680px) {
  .maker { grid-column: 1 / 13 !important; transform: none !important; }
}
```

### 型染め風モチーフ（symbol再利用・塗りはベタ・輪郭は不揃い）

```html
<svg style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
  <defs>
    <!-- 豆モチーフ: 完全な楕円にせず、頂点を手で不揃いにする -->
    <symbol id="motif-mame" viewBox="0 0 26 18">
      <path d="M3,9 Q2,5 7,3 L13,1 Q19,2 22,6 L23,10 Q21,14 16,16 L10,17 Q5,16 3,12 Z" />
    </symbol>
  </defs>
</svg>

<!-- 使用箇所（品目リストの頭）。装飾なので aria-hidden、role/aria-labelは付けない -->
<svg class="mame motif" viewBox="0 0 26 18" aria-hidden="true">
  <use href="#motif-mame" class="facet-kaki" />
</svg>
```

```css
.motif { opacity: 1; }             /* 常に不透明。トランジションを一切書かない */
.facet-kaki { fill: var(--color-kakishibu); }
.facet-hai  { fill: var(--color-haimidori); }
.facet-gap  { stroke: var(--color-bg); stroke-width: 2; } /* 型紙の合わせ目 */
```

### 線画（器・籠・徳利）: 2px統一・角を丸めない・非対称

```css
.vessel-line {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-linecap: butt;   /* round にしない＝手彫りの折れ */
  stroke-linejoin: miter; /* round にしない */
}
```

### モーション: 役割差＋階段ディレイ（文様は対象外にする）

```css
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--head { transition-duration: .7s; }   /* 節見出し・主役は長め */
.reveal--item { transition-duration: .45s; }  /* 品目行・脇役は短め */
```

```html
<!-- 品目行は40〜60ms刻みで手動の階段ディレイをつける -->
<li class="reveal reveal--item" style="transition-delay:120ms;">…</li>
<li class="reveal reveal--item" style="transition-delay:160ms;">…</li>
```

```js
// IntersectionObserver は .reveal 要素のみを監視する。
// .motif（文様svg）は最初から opacity:1 固定で監視対象に含めない
var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (e) {
    if (e.isIntersecting) { e.target.classList.add('is-visible'); io.unobserve(e.target); }
  });
}, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
document.querySelectorAll('.reveal').forEach(function (el) { io.observe(el); });
```