活版の実直 Letterpress Sincerity

DESIGN.md

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

https://3pt.co.jp/design-library/md/letterpress-sincerity/DESIGN.md

# DESIGN.md — 活版の実直 / letterpress-sincerity

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

## 1. コンセプト

印刷物の実直さをWebに持ち込む。紙のような背景色、オールド明朝、細い罫線だけで画面を組み、
飾らないことで誠実さと年輪を感じさせる。装飾は「朱色の印」と「罫線」の2つしか持たない。

**キーワード**: 実直 / 活版 / 静けさ / 年輪 / 紙
**この見た目が向く場面**: 老舗企業・製造業・士業・工芸・和菓子など、歴史と信頼を語りたいサイト

## 2. タイポグラフィ

- 和文見出し: Shippori Mincho B1 / ウェイト 600
- 和文本文: Shippori Mincho / ウェイト 400 / サイズ 16px / 行間 2.1 / 字間 0.06em
- 欧文・数字: EB Garamond（font-family で常に和文フォントより先に指定し、
  英数字が自動的に Garamond で組まれるようにする。年号・ページ番号・英語ラベルに使う）
- 見出しスケール: h1 34px / h2 26px / h3 19px（比率 約1.3。大きさより字間で格を出す）
- 縦書きのキャッチコピーは h1 と同じ 34px を基準に、字間 +0.3em・行間 2 で組む
  （縦書きは同サイズでも小さく見えるため、40px まで上げてよい。モバイルは 26px）
- 特記: 見出しは字間 +0.14em でゆったり組む。英語ラベルは 12px・字間 +0.2em・
  大文字（例: COMPANY PROFILE）で見出しに小さく添える。本文は詰め込まず、
  1段落 3〜4行で改段する

## 3. カラー

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #f5f1e8（生成りの紙） | 60% |
| 背景（セクション替え） | #ede7da | — |
| テキスト（主） | #2b2725（墨） | 30% |
| テキスト（弱） | #6e655b（薄墨） | — |
| アクセント | #9e3b2c（朱） | 10%以下 |
| 罫線・境界 | #c9bfaf | — |

- 配色ルール: 朱は「小さな点景」にのみ使う。許される用法は
  ①本文中のリンク ②落款 ③セクションの通し番号 ④見出し脇の短い強調線 の4つ。
  面（背景色）としては絶対に使わない。上記6色以外を追加しない
- ナビゲーション・フッターのリンクは墨色・下線なし（ホバーで朱の下線）。
  朱を機械的に全リンクへ適用すると画面が朱だらけになるため、朱リンクは本文中のみ

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

- コンテンツ最大幅: 1080px / 基本は誌面のような段組（縦の罫線で区切った2〜3段）
- セクション間余白: 上下 112px 基準 / 要素間は 8px の倍数で刻む
- グリッドの性格: 罫線が見えるグリッド。カラムの区切りは余白ではなく
  1px の縦罫線（#c9bfaf）で示す
- 各セクションの頭には「通し番号（EB Garamond、例: 01）＋和文見出し＋英語ラベル」の
  3点セットを罫線の上に置く（雑誌の柱のように）。通し番号は最初のコンテンツ
  セクションを 01 とする（ヒーローは数えない）
- モバイル等で段組が1カラムに落ちるときは、縦罫線を横の点線罫線
  （1px dotted #c9bfaf）に置き換える。罫線を単に消さない
- ヒーローの構成: 中央寄せにしない。キャッチコピーは縦書き
  （writing-mode: vertical-rl）で左または右に立て、説明文を横書きで並置する。
  ボタンは置かず、下端の罫線で締める

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

- 角丸: 0px（すべて直角） / 影: 使わない / 境界線: 1px solid #c9bfaf
- ボタン: 直角・透明背景・1px の墨色罫線・字間 +0.2em。
  ホバーで背景が墨色、文字が紙色に反転する（0.3s）
- カード的要素: 面や影で区切らず、罫線（実線または点線）で区切る。
  背景色を変えるのはセクション単位のみ
- リンク: 朱色＋下線。ホバーで下線が実線→なし
- 表・年表: 罫線は横線のみ（1px、下線）。日付・年号は EB Garamond
- 画像の扱い: 角丸なし・フィルタなし。白フチ（紙色 8px）＋外側に 1px 罫線で
  「貼り込んだ写真」のように見せる
- フォーム要素: input / textarea は紙色背景・1px 墨罫線・角丸0・
  フォーカスで罫線が朱に変わる。プレースホルダは薄墨。select も同様
- 紙の質感: 背景全面に SVG ノイズ（feTurbulence）を透明度 3〜4% で重ねる。
  重ね順はコンテンツより上の固定オーバーレイ（position: fixed・
  pointer-events: none）とし、文字にも薄く質感が乗るようにする

## 6. モーション

- 量: subtle
- 使う動き: スクロールで要素が opacity 0→1、translateY(8px)→0 に入るフェードのみ
  （0.6s ease、IntersectionObserver）。ホバーは色の反転（0.3s）のみ
- 使わない動き: パララックス、自動カルーセル、バウンス、拡大縮小、常時アニメーション
- prefers-reduced-motion 時はすべての動きを止める

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

- 写真がない構成でも成立させる（罫線・組版・縦書きが主役）。使う場合は
  彩度を抑えた実物写真（紙・道具・手元）のみ。イラスト・3D・抽象グラデ画像は使わない
- 装飾が欲しい場合は「落款」（朱色の小さな正方形に白抜き1文字）を1画面に1つまで

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

- Inter / Roboto / Arial / Noto Sans を使わない（明朝系のみで組む）
- グラデーションを一切使わない（背景・文字・ボタンすべて）
- box-shadow を使わない。立体感を出さない
- 角丸を使わない（border-radius は常に 0）
- 「3カラムの角丸カード＋影」構成を作らない。区切りはすべて罫線で表現する
- 絵文字・汎用アイコンフォントをアイコンとして使わない。
  記号が必要なら「※」「─」「→」などの約物か、落款を使う
- 上記6色以外の色を追加しない。特に純白 #ffffff と純黒 #000000 は使わない
- 中央寄せの定型ヒーロー（見出し＋サブコピー＋ボタン2つ）を作らない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f5f1e8;
  --color-bg-alt: #ede7da;
  --color-text: #2b2725;
  --color-text-weak: #6e655b;
  --color-accent: #9e3b2c;
  --color-rule: #c9bfaf;
  /* 変数には総称ファミリ(serif)を含めないこと（フォールバック連結が壊れる） */
  --font-heading: "Shippori Mincho B1";
  --font-body: "Shippori Mincho";
  --font-latin: "EB Garamond";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1080px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Shippori+Mincho+B1:wght@400;600&family=Shippori+Mincho&display=swap`
- 本文の font-family は `var(--font-latin), var(--font-body), serif` の順に指定する
  （英数字が自動で Garamond になる）
- 縦書きは `writing-mode: vertical-rl`。モバイル（768px以下）では横書きに戻してよい