# DESIGN.md — Ishinomaki Laboratory（石巻工房）

> Ishinomaki Laboratory / 石巻工房（https://ishinomaki-lab.org/）のデザイン仕様書。
> 2011年の東日本大震災の復興から生まれた、世界的に評価される日本の DIY 家具ブランド。素の合板（plywood）と最小限の直線で構成される、質実剛健なものづくりの思想がそのまま Web デザインになっている。
> 最大の特徴は **モノスペース・グロテスク書体（General Grotesque Mono）一本槍** と、**角丸を一切持たない直角（radius 0）の作り**、**純白 #FFF 地に近似黒 #000・グレー #8D8C8A・ヘアライン #f1f1f1** で構成される徹底したフラット設計。装飾色を持たず、合板の家具写真そのものを主役にする。差し色は「砂」を思わせる **サンド #F3EFE8** と、ごく稀に使われる **レッド #c70e0e** のみ。文字はすべて広めの字送り（letter-spacing 0.06em）で、工業製品のラベルのように端正に置かれる。
> 実サイトの computed style / CSS Custom Properties 実測（2026-07-01 取得）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **モノスペース書体と余白と合板写真**だけで構成する、工房的（workshop）で機能主義的なミニマリズム。文字は等幅で広く送り、罫線はヘアライン、角は立て、色は持たない。DIY のプロダクトを大きく置き、UI は限りなく引く
- **石巻工房について**: 2011年3月11日の東日本大震災をきっかけに石巻でスタートした「Made in Local」の家具ブランド。「DIY：自分自身でやる」を思想の核に、素の合板を使ったシンプルで頑丈なプロダクトを世界に届ける。実物のプロダクトが持つ素材感・手作業感を、Web も等幅書体・白地・直角でそのまま表現する
- **密度**: 低密度。大きな家具ビジュアルと広い余白、等幅の英字ラベル。情報は最小限に絞り、写真で語る
- **キーワード**: モノスペース（等幅）、General Grotesque Mono、直角（radius 0）、純白 #FFF、近似黒 #000、グレー #8D8C8A、ヘアライン #f1f1f1、ダーク #151515、サンド #F3EFE8、合板（plywood）、DIY、Made in Local、広い字送り、工房的
- **特徴**:
  - 書体は **General Grotesque Mono（等幅グロテスク）一系統のみ**。見出し・本文・ナビ・ラベル・価格すべてこれ。和文専用 Web フォントは持たず、後ろにシステム和文を任せる
  - テキストは **純黒 #000** が基本（Graphpaper のような近似黒ではなく、素直な #000）。補助・価格は **グレー #8D8C8A**
  - **角丸を一切持たない**（`border-radius: 0`）。ボタンも入力も画像枠もすべて直角
  - **字送りが広い**。全要素に `letter-spacing: 0.84px`（14px 基準で約 0.06em）が効いており、等幅書体と相まって図面のラベルのような端正さを生む
  - 罫線は **ヘアライン #f1f1f1** の極細。枠で主張せず、面の境目をそっと示す
  - 差し色は **サンド #F3EFE8**（`--sand`、面色・パネル地）と、**レッド #c70e0e**（`--red`、エラー・強調のごく稀な差し色）のみ。それ以外は無彩色
  - フッターや一部セクションは **ダーク #151515** のベタ塗り面（合板写真を引き立てる暗面）
  - ナビ・ラベルは **大文字英字（ONLINE STORE / SHOPLIST / CONTACT / ABOUT）** が基本

---

## 2. Color Palette & Roles

> CSS Custom Properties（`--black` / `--white` / `--grey` / `--sand` / `--red`）実測値。装飾色を持たない無彩色＋極小の差し色。すべて hex 表記。

### Core（背景・面）

- **White** (`#ffffff`): ページ・ヘッダー・カードの基本地（`--white`）
- **Sand** (`#f3efe8`): パネル・セクション面の淡いサンドベージュ（`--sand`）。合板・紙の質感を思わせる唯一の面色
- **Dark** (`#151515`): フッター等の暗面ベタ塗り（実測 rgb(21,21,21)）。合板写真を引き立てる
- **Border / Hairline** (`#f1f1f1`): 標準の区切り線・淡いパネル境界（実測で最頻の背景色）

### Text

- **Text** (`#000000`): 本文・見出し・リンクの基本テキスト（`--black`）。素直な純黒
- **Text Muted / Price** (`#8d8c8a`): 補助テキスト・価格・キャプション（`--grey`、実測 rgb(141,140,138)）。ウォームグレー
- **Text on Dark** (`#ffffff`): ダーク面・画像オーバーレイ上のテキスト（`--white`）

### Accent

- **Red** (`#c70e0e`): エラー・削除・ごく稀な強調（`--red`）。無彩色基調を崩さないよう最小限に

### Alpha / Overlay

- **Light Grey (overlay)** (`rgba(0,0,0,0.2)`): 画像オーバーレイ・淡い罫線（`--light-grey`）。純黒の α 値で濃淡を表現する

### Semantic

- **Danger / Error** (`#c70e0e`): エラー・危険な操作。`--red` を流用（独立した赤を増やさない）
- **Warning / Success**: 独立した色を持たない。必要時のみ本リポジトリ汎用（`#c98a1a` / `#2f8f4e` 等）を控えめに当て、基本は無彩色で階層をつくる

---

## 3. Typography Rules

> 実サイトは **General Grotesque Mono Regular, sans-serif の一系統のみ**（一部の装飾なしボタン・スライダー UI のみ Arial にフォールバック）。和文専用 Web フォントは指定せず、システム和文に委ねる。全要素に広めの字送り（0.84px ≒ 0.06em）が効いているのが石巻工房の作法。
> General Grotesque Mono はライセンスフォントのため preview.html では表示できない。preview では **Space Mono**（Google Fonts の等幅グロテスク）で近似し、和文は Noto Sans JP を当てる。

### 3.1 和文フォント

- **専用の和文 Web フォントは持たない**。`"General Grotesque Mono Regular", sans-serif` の後ろに OS の和文（ヒラギノ角ゴ／游ゴシック／Noto Sans JP 等）が自動で当たる
- 和文も欧文と同じく **広めの字送り（0.06em 相当）** で組む。等幅書体と和文が混植されるため、間延びしすぎないよう本文は line-height 1.4 前後に抑える

### 3.2 欧文フォント

- **等幅グロテスク（唯一の書体）**: `"General Grotesque Mono Regular", sans-serif`。本文・見出し・ナビ・ラベル・価格すべてこれ
- ナビ・カテゴリ・CTA は **大文字（uppercase）** で組むことが多い
- スライダーのページネーション・動画コントロール等、ごく一部の UI パーツのみ `Arial` にフォールバックする

### 3.3 font-family 指定

```css
/* 全要素共通 */
font-family: "General Grotesque Mono Regular", sans-serif;

/* 一部 UI パーツ（スライダー等）のフォールバック */
font-family: Arial, sans-serif;
```

- **フォールバックの考え方**: General Grotesque Mono → generic `sans-serif`。和文は明示せずシステムに委ねる（最小構成）

**preview.html での代替フォント**:
- General Grotesque Mono → **Space Mono**（Google Fonts）で近似。等幅グロテスクで字面の骨格が近い。より幾何学的にしたい場合は **Martian Mono** も可
- 和文 → **Noto Sans JP**（preview 表示用。実サイトは未指定でシステム和文）

### 3.4 文字サイズ・ウェイト階層

> デスクトップ（1440px）実測 px。**サイズ差が非常に小さい**のが特徴。見出し（h2/h4）も本文もほぼ 14px で揃え、階層は大文字・位置・余白でつくる。価格は 14px でグレー。

| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|------|--------|-------------|----------------|------|
| Section Heading (h2) | Mono | 14px | 400 | 1.3 (18.2px) | 0.06em (0.84px) | 「Explore our furniture」等。色 #000 |
| Sub Heading (h4) | Mono | 14px | 400 | 1.3 (18.2px) | 0.06em (0.84px) | 「the Originals」等。色 #000 |
| Body | Mono | 14px | 400 | 1.4 (19.6px) | 0.06em (0.84px) | 本文・説明。色 #000 |
| Body (small) | Mono | 13px | 400 | 1.4 (18.2px) | 0.06em (0.84px) | 日付・メタ（post date 等）。色 #000 |
| Price | Mono | 14px | 400 | 1.4 (19.6px) | 0.06em (0.84px) | 商品価格。色 #8d8c8a |
| Nav Item | Mono | 14px | 400 | 1.4 (19.6px) | 0.06em (0.84px) | グローバルナビ（ONLINE STORE 等、大文字）。色 #000 |
| Video Caption | Mono | 12.8px | 400 | 1.4 (17.9px) | 0.06em (0.84px) | 動画上のタイム表示等。色 #fff（暗面上） |
| Footer Label | Mono | 14px | 400 | 1.4 (19.6px) | 0.06em (0.84px) | フッターのカテゴリ（大文字）。色 #fff（ダーク面） |

- **ウェイトは 400（Regular）で統一**。太字（700）は基本使わない。強調は大文字・余白・色（#000 ↔ #8d8c8a）でつくる
- 文字色は #000 が基本、補助・価格に #8d8c8a、暗面上・画像上に #fff
- **サイズで威圧しない**。ほぼ 14px に揃え、等幅の整然さと広い字送りで端正さを出す設計（必要に応じ見出しを +2〜6px 程度に上げてもよいが、サイズ差の小ささそのものが石巻工房の個性）

### 3.5 行間・字間

- **行間 (line-height)**: 見出し 1.3、本文 1.4 前後。等幅書体なので詰めすぎず、和文が混じっても読めるよう確保する
- **字間 (letter-spacing)**: **0.06em（14px 基準で 0.84px）を全要素に適用**するのが石巻工房の特徴。等幅書体をさらに広く送り、図面ラベルのような端正さを出す
- 大文字ラベル（uppercase）もこの 0.06em の字送りのまま置く

### 3.6 禁則処理・改行ルール

```css
overflow-wrap: break-word;
letter-spacing: 0.06em;
```

- 和文の標準的な行頭・行末禁則を守る
- 行頭禁止: `）」』】、。・：；？！` ／ 行末禁止: `（「『【`
- 商品名・英字ラベルは折り返しを避け、ひとまとまりで見せる

### 3.7 OpenType 機能

```css
font-feature-settings: normal;
```

- 実測では `font-feature-settings: normal`。**palt は使わない**。等幅（monospace）書体なので字幅を詰めず、素のメトリクス＋広い字送りをそのまま活かす
- 詰めや約物処理に頼らず、等幅の整然さと広い字送り・余白で端正さを出す

### 3.8 縦書き

該当なし。横書きのみ。

---

## 4. Component Stylings

### Buttons

> **角丸なし（radius 0）が絶対**。石巻工房のボタンは塗りつぶしよりも「テキストリンク＋下線」「大文字ラベル＋矢印」が基本で、UI 自体を引く。強い塗りボタンは持たず、ダーク面／サンド面との対比で誘導する。

**Text / Underline（下線リンク）** — `同意して続ける` 等
- Background: `transparent`
- Text: `#000000`（Mono / 14px / 0.06em）
- Border: なし（下線 `link-underline` クラスで表現）
- Border Radius: `0px`
- Padding: `0 0 4px`（下線分の余白）

**Ghost / Label（大文字ラベル・矢印）** — ニュースレター送信・`VIEW MORE` 等
- Background: `transparent`（実サイトの送信ボタンは透明地＋矢印、ホバーで回転する `btn--hover-rotate`）
- Text: `#000000`（Mono / 14px / 大文字 / 0.06em）
- Border: 下線ヘアライン、または枠 1px solid `#000`
- Border Radius: `0px`
- Padding: `20px 0`（縦に十分な余白）

**Dark（暗面上のリンク）** — フッター等
- Background: `#151515`（ダーク面）
- Text: `#ffffff`（Mono / 14px / 大文字）
- Border: なし
- Border Radius: `0px`

**推奨: Solid（本リポジトリ拡張の塗りボタン）**
- 実サイトは塗りボタンをほぼ持たないが、アプリ UI で必要な場合は **#000 地＋白文字**、または **#151515 地＋白文字** の直角ボタンにする。radius は必ず 0

### Inputs

- Background: `#ffffff`
- Border: 下線のみ（`border-bottom: 1px solid #000`）が基本。枠で囲む場合は 1px solid `#000`
- Border (focus): 下線／枠を `#000` に保ち、ごく薄い `rgba(0,0,0,0.2)`（`--light-grey`）のアンダーラインまたはリングで示す
- Border Radius: `0px`（角丸なし）
- Padding: 約 `20px 0`（縦長・下線スタイル。ニュースレター入力実測）
- Font: Mono / 14px / 0.06em
- Placeholder: `#8d8c8a`
- Label: Mono / 14px（大文字ラベルが多い）

### Cards

- Background: `#ffffff`
- Border: なし、または `#f1f1f1` のヘアライン
- Border Radius: `0px`
- 家具ビジュアル（画像）を大きく直角の枠で置き、その下に Mono の商品名（14px / #000）＋価格（14px / #8d8c8a）を小さく添える
- 影は持たず、白地・サンド面・ヘアライン・余白で面を分ける

---

## 5. Layout Principles

### Spacing

- 大きな家具ビジュアルと広い余白で構成。要素間は十分に空け、等幅の文字が窮屈に見えないようにする
- ヘッダー分の上部余白（実測 `padding-top: 130px`）を取り、コンテンツを下げてヒーロー写真を伸びやかに置く
- 罫線はヘアライン #f1f1f1。区切りで主張せず、余白で間を取る

### Container

- ワイドなエディトリアル・グリッド。左右に余白を取り、合板の家具写真を主役にする
- セクション間は縦余白を十分に確保。サンド面 #F3EFE8／ダーク面 #151515 で写真セクションを挟み、リズムをつくる

### Grid

- 商品・記事一覧はカードグリッド（2〜4 カラム、ビューポートで可変）
- Gutter: 中〜広め。画像の縦横比を揃え、Mono の等幅ラベルを等間隔に並べる

---

## 6. Depth & Elevation

> 石巻工房は影を使わない。白地・サンド面・ダーク面・ヘアライン・余白・直角で階層をつくる完全フラット設計。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | none | 全コンポーネントの基本。ヘアライン #f1f1f1／面色（白・サンド・ダーク）で階層を分ける |
| 1 | `0 1px 2px rgba(0,0,0,0.08)` | ドロップダウン・クッキーポップアップ等、必要箇所のみ最小限 |
| 2 | `0 8px 24px rgba(0,0,0,0.12)` | モーダル等（実サイトでは稀） |

- 濃淡が必要なときは影ではなく **純黒の α 値（`--light-grey` = rgba(0,0,0,0.2)）** や **面色の切り替え（白 ↔ サンド ↔ ダーク）** で表現する
- フラット・直角・ヘアラインが基本姿勢

---

## 7. Do's and Don'ts

### Do（推奨）

- 書体は General Grotesque Mono, sans-serif の一系統（等幅）で通す（代替は Space Mono／和文 Noto Sans JP）
- 全要素に広めの字送り `letter-spacing: 0.06em`（0.84px）を効かせる
- サイズ差を小さく保つ（見出しも本文もほぼ 14px。階層は大文字・位置・余白・面色でつくる）
- ウェイトは 400 で統一する（太字に頼らない）
- テキスト色は純黒 #000 を基本に、補助・価格を #8d8c8a、暗面・画像上を #fff
- 角は立てる（border-radius: 0）。ボタン・入力・画像枠すべて直角
- 罫線はヘアライン #f1f1f1 の極細にする
- 面色は 白 #FFF ／ サンド #F3EFE8 ／ ダーク #151515 の三段で切り替える
- 入力は下線スタイル（border-bottom）を基本にする
- ナビ・CTA・ラベルは大文字英字（ONLINE STORE / SHOPLIST / CONTACT）で組む
- 合板の家具ビジュアルを大きく直角の枠で置き、UI は引く

### Don't（禁止）

- 角丸（border-radius）を付けない（直角が個性。radius 0 を厳守）
- 装飾色・原色を足さない（無彩色＋サンド #F3EFE8＋レッド #c70e0e 以外を持ち込まない）
- 明朝やプロポーショナル書体、複数書体を混ぜない（等幅グロテスク一系統）
- サイズや太字で文字を大きく主張させない（等幅の整然さと余白で端正さを出す）
- 太い枠や濃いボーダーで仕切らない（ヘアラインで十分）
- 字送りを詰めない（0.06em の広めの送りを保つ。palt も使わない）
- レッド #c70e0e を多用しない（エラー・ごく稀な強調のみ）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1〜2 カラム、ナビはドロワー。合板写真を主役に縦積み |
| Tablet | 768–1023px | 2〜3 カラムの商品・記事グリッド |
| Desktop | ≥ 1024px | 2〜4 カラムのワイドなエディトリアル・グリッド |

- 文字サイズはモバイルでも 13〜14px を基準に保ち、極端に縮めない
- 広い字送り 0.06em・ヘアライン・余白・直角の作りはブレークポイントを越えて一貫させる
- 面色（白・サンド・ダーク）の切り替えリズムはモバイルでも維持する

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG基準）。下線リンク・大文字ラベルでもタップ領域（padding）は十分に確保する

### フォントサイズの調整

- 本文・ラベルは 13〜14px を基準に、モバイルでも小さくしすぎない
- 大文字ラベルの字送りは 0.06em を維持する

---

## 9. Agent Prompt Guide

### クイックリファレンス

```
Background: #ffffff / サンド面 #f3efe8 / ダーク面 #151515
Text: #000000（基本・純黒）/ #8d8c8a（補助・価格）/ #ffffff（暗面・画像上）
Border: #f1f1f1（標準ヘアライン）/ rgba(0,0,0,0.2)（--light-grey オーバーレイ）
Accent: #c70e0e（レッド・エラー／ごく稀な強調のみ）
Font（全要素）: "General Grotesque Mono Regular", sans-serif  /* 代替: Space Mono / 和文 Noto Sans JP */
サイズ: ほぼ 14px に統一（見出しも本文も）/ 補助 13px / lh 1.3〜1.4
Letter-spacing: 0.06em（0.84px）を全要素に
ウェイト: 400 で統一（太字に頼らない）
OpenType: font-feature-settings: normal（palt は使わない）
Button: 下線テキストリンク／大文字ラベル＋矢印が基本。塗りが必要なら #000 or #151515 地＋白文字。いずれも radius 0
Input: 下線スタイル（border-bottom: 1px solid #000）、radius 0
Radius: 0px（全要素・直角厳守）
面色リズム: 白 #FFF ↔ サンド #F3EFE8 ↔ ダーク #151515
```

### プロンプト例

```
石巻工房（Ishinomaki Laboratory）のデザインシステムに従って、合板家具ブランドの EC トップ＋商品一覧を作成してください。
- 書体は "General Grotesque Mono Regular", sans-serif の等幅一系統のみ（代替 Space Mono／和文 Noto Sans JP）。明朝や他書体は混ぜない
- 全要素に letter-spacing: 0.06em（0.84px）を効かせる。ウェイトは 400 で統一し、太字に頼らない
- テキストは純黒 #000 を基本、補助・価格を #8d8c8a、暗面・画像上を #fff。背景は純白 #ffffff
- サイズ差を小さく: 見出しも本文もほぼ 14px（補助 13px）。階層は大文字・位置・余白・面色でつくる
- 角丸を一切使わない（border-radius: 0）。ボタン・入力・画像枠すべて直角
- 罫線はヘアライン #f1f1f1 の極細。入力は下線スタイル（border-bottom: 1px solid #000）
- 面色は 白 #FFF ／ サンド #F3EFE8 ／ ダーク #151515 の三段で切り替え、合板家具の写真セクションを挟む
- CTA は下線テキストリンク、または大文字ラベル＋矢印。塗りが必要なら #000 or #151515 地＋白文字（大文字）。radius は必ず 0
- ナビ・ラベルは大文字英字（ONLINE STORE / SHOPLIST / CONTACT / ABOUT）
- 合板の家具ビジュアルを大きく直角の枠で置き、その下に等幅の商品名（#000）と価格（#8d8c8a）を添える。UI は引いて写真で語る
```