市民ポスターの声明 Civic Poster Statement

DESIGN.md

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

https://3pt.co.jp/design-library/md/shimin-poster/DESIGN.md

# DESIGN.md — 市民ポスターの声明 / shimin-poster

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

## 1. コンセプト

市民運動のポスターと、新聞の意見面をWebに翻訳する。生成りの紙、墨の極太文字、朱の一本線、
太い外枠を使い、**主張は強く、論拠は冷静に**組む。装飾的なかわいさや企業LPの清潔さではなく、
公共の掲示板に貼られた一枚の声明が、そのまま長い読み物へ続く感覚を作る。

**キーワード**: 声明 / 掲示物 / 太罫 / 公共性 / 理由
**この見た目が向く場面**: NPO、公共提言、地域活動、署名・啓発キャンペーン、教育活動、
労働・福祉・環境の論点整理、社会課題を扱うオウンドメディア

## 2. タイポグラフィ

- 和文見出し: Zen Kaku Gothic New / 900。h1 72〜126px、h2 46〜78px、h3 22〜30px。
  行間0.94〜1.08、字間 -0.065em。短い文を2〜4行に切り、句読点も大きさの一部として見せる
- 和文本文: Zen Kaku Gothic New / 500〜700 / 15〜18px / 行間 1.85〜2.0 / 字間 0
- 欧文・番号: Archivo Black。節番号、論点番号、ポスターの発行番号に限定。小さな説明本文には使わない
- 太字だけで全階層を作らない。**見出しの巨大さ、本文の長い行間、番号の固定幅、太罫**を組み合わせる
- コピーは短く具体的にする。「未来を、もっと。」のような空語を避け、対象・行為・理由を含める

## 3. カラー

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 生成り地 | #f3ead7 | 65% |
| 用紙の明るい面 | #fff8e9 | 12% |
| 墨 | #171714 | 20% |
| 弱い墨 | #665f53 | — |
| 朱 | #b8321d | 3%以下 |
| 太罫 | #24231f | — |

- 朱は **主張を切り替える面・重要な一本線・現在の論点番号・主CTA**に限定する
- 朱を小さな本文の色として多用しない。使う場合も生成り地で5.00:1を確保する
- 色面は生成り・墨・朱の3面だけ。追加の青・緑・黄・パステルを足さない
- 純白と純黒を使わない。紙とインクにわずかな温度差を残す

### コントラスト実測値

| 文字色 | 背景 | 比率 | 判定 |
|---|---|---|---|
| #171714 | #f3ead7 | 15.02:1 | AAA |
| #665f53 | #f3ead7 | 5.28:1 | AA |
| #b8321d | #f3ead7 | 5.00:1 | AA |
| #fff8e9 | #b8321d | 5.65:1 | AA |
| #171714 | #fff8e9 | 16.98:1 | AAA |

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

- ページ全体を10〜14pxの墨色外枠で囲う。スマートフォンでは6〜8pxに細くする
- 最大幅1420px。内容は外枠の内側いっぱいに広げ、各セクションを太罫で明確に分割する
- ヒーローは左 3 : 右 1。左に極太の声明、右に象徴図形と立場の要約を置く。
  右面は墨地に反転する。中央寄せにはしない
- 長文セクションはラベル1カラム＋本文3カラム相当の非対称段組。本文の最大行長は38em
- 論点比較は「同じ大きさのカード」ではなく、横に連続する**ポスターの短冊**として組む。
  各短冊を2pxの縦罫で隔て、上端の朱線の長さで強度や段階を示す
- 行動セクションは本文と、少し傾けた用紙（文例・要望書・申込票）を左右に置く。
  用紙だけにオフセット影を許可し、カード全般へ広げない

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

- ヘッダー: 高さ72〜84px、生成り地、下端2px墨罫。ナビは縦罫で分ける。
  最後の主要リンクだけ墨面に反転してよい
- ロゴ: 小さな円または四角を1つだけ使い、太い線で自作する。絵文字・既製アイコンは禁止
- ボタン: 角丸0。主CTAは朱地＋明るい紙色、または墨地＋生成り。影なし。ホバーは墨と朱を入れ替える
- 論点短冊: 背景は生成りのまま。2px罫線、番号、大見出し、本文、脚注の順。浮かせない
- 文例用紙: `border: 3px solid var(--color-ink)`、背景`--color-paper`、
  `box-shadow: 10px 10px 0 var(--color-accent)`、回転は±1度まで。この影は**紙の重なり**という意味があるため例外
- フォーム: 下線または2px枠。角丸なし。フォーカス時は朱の2pxアウトライン
- リンク: 通常は下線なし。ホバー・フォーカスで2pxの朱下線を表示する

## 6. モーション

- 量: static
- 許可: リンク・ボタンの色が120msで切り替わるだけ。位置移動や拡大はしない
- 禁止: スクロールフェード、パララックス、カウントアップ、カルーセル、マーキー、バウンス、
  紙がふわふわ揺れる演出
- このテイストの迫力は静止した版面で作る。動きで足さない

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

- 基本形は写真なし。対象を象徴する図形を**太い輪郭線1種類**で1点だけ描く
- 図形はCSSのborder・疑似要素・単純な矩形や円で作る。細密なイラスト、キャラクター、既製アイコンを置かない
- 写真を使う派生では新聞写真のように1〜2枚だけ、角丸なし、彩度を落とし、短い説明文と出典を必ず添える
- 紙の質感は薄い単色ノイズだけ。破れ・テープ・スタンプを同時に盛らない

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

- Inter / Roboto / Arial / system-uiを主書体に使わない
- 紫青グラデーションを含む、すべてのグラデーションを使わない
- 角丸カード、ピル型バッジ、薄い影の均等3カラムを使わない
- 中央寄せ特大見出し＋サブコピー＋主副ボタン2つの定型ヒーローを作らない
- 英語eyebrowを全セクションに付けない。ラベルは「論点 01」「要望書」など和文の機能語を優先する
- 朱以外のアクセント色を追加しない。赤黄緑の信号色を並べない
- 純白#ffffff・純黒#000000を使わない
- 絵文字、既製アイコンセット、抽象グラデーションブロブを使わない
- box-shadowを一般カードへ使わない。文例用紙のオフセット影だけが例外
- スクロール演出、数字カウントアップ、自動カルーセルを使わない

## 9. 実装ノート

```css
:root {
  --color-bg: #f3ead7;
  --color-paper: #fff8e9;
  --color-ink: #171714;
  --color-ink-muted: #665f53;
  --color-accent: #b8321d;
  --color-accent-ink: #fff8e9;
  --color-rule: #24231f;
  --font-heading: "Zen Kaku Gothic New";
  --font-body: "Zen Kaku Gothic New";
  --font-label: "Archivo Black";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1420px;
  --frame-width: 12px;
}
```

```css
/* ページ全体を囲う太枠 */
body { margin: 0; background: var(--color-rule); }
.poster-page {
  max-width: 1800px;
  margin: 0 auto;
  background: var(--color-bg);
  border: var(--frame-width) solid var(--color-rule);
}
```

```css
/* 論点短冊。角丸・影・アイコンを足さない */
.argument-strip {
  position: relative;
  min-height: 360px;
  padding: 32px 28px;
  border-left: 2px solid var(--color-rule);
}
.argument-strip::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--strength, 50%);
  height: 8px;
  background: var(--color-accent);
}
```

```css
/* 文例用紙だけに許可する印刷物のオフセット */
.petition-sheet {
  background: var(--color-paper);
  border: 3px solid var(--color-ink);
  box-shadow: 10px 10px 0 var(--color-accent);
  transform: rotate(0.8deg);
  padding: 32px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Archivo+Black&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap`
- 紙ノイズを使う場合は`feTurbulence`の単色データURIを固定表示し、opacity 0.04以下、
  `pointer-events:none`にする。ノイズ以外のテープ・スタンプ・網点を同時追加しない
- 朱面の本文は`--color-accent-ink`、生成り面の本文は`--color-ink`か`--color-ink-muted`。
  文例用紙の影以外ではbox-shadowを使わない