Ishinomaki Laboratory（石巻工房） DESIGN.md

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 でグレー。

• ウェイトは 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 禁則処理・改行ルール

cssoverflow-wrap: break-word;
letter-spacing: 0.06em;

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

3.7 OpenType 機能

cssfont-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

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

• 濃淡が必要なときは影ではなく 純黒の α 値（--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

• 文字サイズはモバイルでも 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 は引いて写真で語る