まちのしおり Town Almanac

DESIGN.md

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

https://3pt.co.jp/design-library/md/machi-shiori/DESIGN.md

# DESIGN.md — まちのしおり / machi-shiori

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

## 1. コンセプト

地域フリーペーパーの誌面をWebに翻訳する。情報量は多いのに親しみがある——秘密は
パステルの「コーナー色」だ。特集・店・催し・コラムという誌面の区分けを、色面の
耳付きタブでそのまま分類記号にする。雑誌の目次のように、区分と見出しを一望できる
ページを作る。**高密度だが、事務的でも、うるさくもない**。パステルは飾りではなく
「どのコーナーの記事か」を一瞬で伝えるための機能色として使う。

**キーワード**: 誌面 / コーナー色 / 目次 / 親しみ / 高密度
**この見た目が向く場面**: 地域フリーペーパー、商店会・観光協会の情報サイト、
タウン誌のWeb版、自治会・地域コミュニティの月刊便り、イベント盛りだくさんの
ローカルメディア

## 2. タイポグラフィ

- 和文見出し: M PLUS 1p / ウェイト 700
- 和文本文: M PLUS 1p / ウェイト 400 / サイズ 14px / 行間 1.9 / 字間 0.01em
  （人文的で穏当な字面がこのテイストの核。**丸ゴシック系書体に置換しない**——
  「かわいい＝丸ゴシック」の手癖を避けるための必須指定）
- 欧文・数字: Karla（日付・号数・価格・時刻・件数などの算用数字と欧文ラベルは
  必ずこちらで組む。日付・催しリストの数字は `font-feature-settings: "tnum" 1`
  で桁を揃える。**Inter に置換しない**）
- 見出しスケール: h1〜h3の**フォントサイズを大きくしすぎない**（コーナー見出し
  20px・記事見出し17px・小見出し15px 太字）。階層は「§4・§5のコーナー色タブ」
  との組み合わせで作る。見出し単体の級数で目立たせることを意図的にしない
  （swiss-precision のような大級数主役とは逆の選択。色面＋級数の**併用**で階層化する）
- 特記: 号数・発行日は Karla の太字で 28〜40px 程度まで大きくしてよい（表紙の
  号数表記の慣習）。これは「ヒーロー特大見出し」ではなく雑誌の号数表記として許容する。
  本文中の強調は太字（700）のみで行い、下線強調は使わない（下線はリンクとホバー専用）

## 3. カラー

クリーム地＋墨茶の文字に、**パステルのコーナー色4色**を分類記号として使う。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #fbf8f0（クリーム） | 60% |
| 背景（コーナー外の区画替え） | #f4efe1 | — |
| テキスト（主・墨茶） | #3c3833 | 30% |
| テキスト（弱・墨茶の弱色） | #6f665a | — |
| コーナー色：桜（特集） | #f2cdd0 | 分類タブ・面積小 |
| コーナー色：空（店めぐり） | #cbe0ee | 分類タブ・面積小 |
| コーナー色：若葉（今月の催し） | #d6e6c8 | 分類タブ・面積小 |
| コーナー色：薄卵（連載コラム） | #f4e3b8 | 分類タブ・面積小 |
| 罫線（ヘアライン） | #e6ddc9 | — |
| 罫線（強調・マストヘッド下等） | #3c3833 | — |

- 配色ルール: **パステル4色は必ず「コーナー分類」の意味を持たせて使う。**
  対応関係は固定——桜=特集／空=店めぐり／若葉=今月の催し／薄卵=連載コラム。
  この4用途以外にパステルを使わない（無意味な装飾色面・背景の帯・区切り線の
  彩色などへの流用は禁止）。1ページに同じコーナー色が複数箇所出るのは、
  同一コーナーの見出しタブ・目次内タグ・記事内の小見出し帯など、**同じ分類を
  指し示す場合に限る**
- パステル面の上の文字は必ず墨茶 `--color-ink`（#3c3833）を使う。パステルの
  彩度を上げて「甘く」しない。地はクリーム、文字は墨茶でコントラストを確保する
  のが本テイストの一貫ルール（後述の実測値を参照）
- 4色を同一画面内で隣接させる場合も、面積はタブ・タグ程度の小面積に抑える。
  ページ全体の主役はあくまでクリーム地＋墨茶文字であり、パステルは「案内標識」
  の役割にとどめる
- 信号色トリオ（赤・黄・緑）を状態表現として使わない。純白・純黒を使わない

### コントラスト実測値（WCAG）

| 文字色 | 背景 | 比率 | 判定 |
|---|---|---|---|
| 墨茶 #3c3833 | クリーム #fbf8f0 | 10.95:1 | AA/AAA適合 |
| 墨茶 #3c3833 | 桜 #f2cdd0 | 7.98:1 | AA/AAA適合 |
| 墨茶 #3c3833 | 空 #cbe0ee | 8.55:1 | AA/AAA適合 |
| 墨茶 #3c3833 | 若葉 #d6e6c8 | 8.87:1 | AA/AAA適合 |
| 墨茶 #3c3833 | 薄卵 #f4e3b8 | 9.15:1 | AA/AAA適合 |
| 墨茶弱色 #6f665a | クリーム #fbf8f0 | 5.31:1 | AA適合（本文サイズで使用可） |

墨茶1色をすべてのコーナー色・クリーム地・区画替え地に対して両方向で実測し、
すべて4.5:1を上回ることを確認した。**文字色はコーナー色に応じて変えない**
（墨茶で統一することが可読性とテイストの一貫性を両立させる）。

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

- コンテンツ最大幅: 1180px / 誌面段組は**2〜3カラム**を基本とする（セクション
  ごとに段数を変えてよい。特集は2カラム、店めぐりは2カラム、催しリストは
  1カラムの詰まったリスト）
- 密度の作り方: セクション間の余白は最小限（上下 48〜64px）。行間 1.9 と
  ヘアライン罫線のリズムで情報を仕切る。余白の広さで高級感を演出しない
- コーナー見出しの型: 各コーナーの頭に**色面の耳付きタブ**を置く（§5・§9参照）。
  タブはコーナー色の地に墨茶文字。耳（タブの上に飛び出す小さな台形の凸部）は
  雑誌のインデックスタブを模し、そのコーナーの「めくりしろ」を示す
- 今月の催し: **日付順の詰まったリスト**（1行1件）。日付は Karla・等幅数字で
  左端に揃え、右にコーナー名を持たず本文と同じ墨茶で件名・会場を続ける
  （このセクション内はすべて若葉タブの配下にあるため、行ごとの再彩色はしない）
- 店めぐり: 段組の誌面として組む。**写真は使わない**。各店は「店名・見出し・
  本文・一言地図（徒歩の目印を文章で示す1〜2行）」の順で構成し、文章と
  一言道案内だけで場所を伝える
- 配布場所一覧: 4つのコーナーのいずれにも属さない「奥付・実務情報」として扱う。
  **コーナー色を割り当てない**（分類色の排他ルールにより、コーナーでない
  区画にパステルを使わない）。地色は `--color-bg-alt` の区画替えのみで表現する
- ヒーローの型外し: **雑誌の表紙ではなく「目次」から始める。** ページ最上部
  （マストヘッドの直下）は号数・発行日・今月の見出し一覧（コーナー色のタグ付き）
  で構成する。中央寄せの特大キャッチコピーやボタンを置かない。目次の各項目は
  該当セクションへのアンカーリンクとして機能させ、実務的な導線を兼ねる

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

- ヘッダー・ナビゲーション: マストヘッド（クリーム地・墨茶文字、下端に2px
  `--color-line-strong` の罫線）にロゴ文字列と号数・発行日を横並びで置く。
  その下の目次セクションの各項目リンクがナビを兼ねるため、独立したグローバル
  ナビ（複数リンクの横並びバー）は置かない。目次項目・本文内リンクはホバー時に
  **そのリンクが属するコーナー色の下線**が現れる（下線色以外の変化はさせない。
  背景色や太字への変化を足さない）
- 角丸: 0px（全要素直角。丸くしない——picture-book系との差別化の核） / 影:
  一切使わない（box-shadow禁止） / 境界線: 通常 1px solid `--color-line`、
  区画の強い境界（マストヘッド下、セクション区切りの最初の罫線）は
  1〜2px solid `--color-ink`
- コーナー見出し（耳付きタブ）: `.corner-head` は該当コーナー色の背景・墨茶
  文字・角丸なし。疑似要素 `::before` でタブ上部に**台形の「耳」**を
  `clip-path: polygon()` で作る（実装は§9参照）。耳の形は同一コーナー内で
  常に同じ台形寸法を使う。影・グラデーションを耳につけない
- カード的要素: **角丸カード＋影の3カラムfeatureカードを作らない。** 情報の
  まとまりはすべて「コーナー色タブの下に続く罫線区切りの誌面」または
  「1行1件の詰まったリスト（催し）」で表現する
- 目次タグ: 目次内の各見出し行の先頭に、該当コーナー色の小さな正方形スウォッチ
  （8×8px、角丸なし）＋コーナー名ラベルを置く。スウォッチは「めくりしろ」の
  予告として機能し、装飾ではない
- フォーム要素: 本デモに入力フォームは置かない（配布場所一覧・お問い合わせは
  静的なテキスト情報として提示する）
- 画像の扱い: 写真・イラスト・図版を一切使わない（§7参照）。誌面はすべて
  文字・色面・罫線で構成する
- アクセント色（コーナー色）の適用範囲: §3・§4で定めた「コーナー見出しタブ・
  目次内スウォッチ・そのコーナー配下の小見出し帯・そのコーナー内リンクの
  ホバー下線」の4用途に厳密に限定する。配布場所一覧・フッター・マストヘッドには
  コーナー色を使わない

## 6. モーション

- 量: **static（動きを使わない）**
- 許される最小の動き: リンクホバー時の下線表示のみ（0.12s ease、色は
  そのリンクが属するコーナー色）。それ以外の要素にホバーの変化を付けない
- 使わない動き: スクロール連動フェード、パララックス、数字のカウントアップ、
  カルーセル、マーキー、タイプライター、カードの持ち上がり（translateY）。
  「動き＝リッチ」「かわいい＝動く」という手癖をここでは明確に否定する

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

- 写真・イラスト・アイコン・SVG線画を含め、**図版を一切使わない**（排他）。
  店めぐりの位置情報も地図画像でなく文章の「一言地図」で示す。装飾は
  §5の色面（コーナー色タブ・スウォッチ）と1px罫線だけで作る
- ロゴ・見出し内の記号的要素も、すべてタイポグラフィ（Karla の号数表記、
  M PLUS 1p の和文）と罫線・色面の組み合わせで表現し、絵柄を描かない

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

- Inter / Roboto / Arial / 丸ゴシック系書体をデフォルトで使わない（M PLUS 1p /
  Karla で組む。「かわいい＝丸ゴシック＋角丸＋絵文字」という手癖をこのテイストは
  明確に否定する）
- グラデーションを一切使わない（背景・文字・タブすべて）。box-shadow を使わない
- border-radius を使わない（常に0。角丸カードを一切作らない。丸くしないことが
  picture-book-warm 等の丸い手描き系との差別化の核）
- パステル4色（桜・空・若葉・薄卵）を「コーナー分類」以外の目的で使わない
  （無意味な装飾帯・背景ブロック・ランダムな彩色を禁止。対応は固定——
  桜=特集／空=店めぐり／若葉=催し／薄卵=コラム）
- パステル面の上の文字色を墨茶 `#3c3833` 以外に変えない（彩度の高い色文字や
  白文字を乗せて「甘く」しない）
- 写真・イラスト・絵文字・既製アイコンセット・自作SVG線画を一切使わない
  （§7参照。装飾は色面と1px罫線のみ）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
  ファーストビューは必ず「号数・発行日・コーナー色タグ付きの目次」から始める
- スクロール連動アニメ・フェードイン・数字カウントアップ・カルーセルを使わない
  （motion: static を厳守）
- 純白 #ffffff・純黒 #000000 を使わない
- 信号色トリオ（赤・黄・緑）を状態表現に使わない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #fbf8f0;
  --color-bg-alt: #f4efe1;
  --color-ink: #3c3833;
  --color-ink-soft: #6f665a;
  --color-line: #e6ddc9;
  --color-line-strong: #3c3833;
  --corner-tokushu: #f2cdd0;   /* 桜 — 特集 */
  --corner-mise: #cbe0ee;      /* 空 — 店めぐり */
  --corner-moyoshi: #d6e6c8;   /* 若葉 — 今月の催し */
  --corner-column: #f4e3b8;    /* 薄卵 — 連載コラム */
  --font-heading: "M PLUS 1p";
  --font-body: "M PLUS 1p";
  --font-latin: "Karla";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1180px;
  --gutter: 20px;
  --cols: 12;
}
```

```css
/* コーナー見出し（耳付きタブ）— このテイストの核となる視覚要素 */
.corner-head {
  position: relative;
  display: inline-block;
  background: var(--corner-color);   /* 呼び出し側で --corner-color を指定 */
  color: var(--color-ink);
  padding: 8px 20px 8px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
}
.corner-head::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 18px;
  width: 28px;
  height: 8px;
  background: var(--corner-color);
  clip-path: polygon(12% 100%, 0 0, 100% 0, 88% 100%);
}
/* 呼び出し例 */
/* .sec-feature  { --corner-color: var(--corner-tokushu); } */
/* .sec-shops    { --corner-color: var(--corner-mise); } */
/* .sec-events   { --corner-color: var(--corner-moyoshi); } */
/* .sec-columns  { --corner-color: var(--corner-column); } */
```

```css
/* 目次のコーナー色スウォッチ */
.toc-tag {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--corner-color);
  margin-right: 8px;
  vertical-align: middle;
}
```

```css
/* リンクホバー: コーナー色の下線のみ（唯一許されるモーション） */
a { color: var(--color-ink); text-decoration: none; }
.sec-feature a:hover  { text-decoration: underline; text-decoration-color: var(--corner-tokushu); text-decoration-thickness: 2px; }
.sec-shops a:hover    { text-decoration: underline; text-decoration-color: var(--corner-mise); text-decoration-thickness: 2px; }
.sec-events a:hover   { text-decoration: underline; text-decoration-color: var(--corner-moyoshi); text-decoration-thickness: 2px; }
.sec-columns a:hover  { text-decoration: underline; text-decoration-color: var(--corner-column); text-decoration-thickness: 2px; }
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=M+PLUS+1p:wght@400;700&display=swap`
- 本文の font-family は `var(--font-body), var(--font-latin), sans-serif` の順。
  日付・号数・価格など算用数字を含む語は `.num { font-family: var(--font-latin);
  font-feature-settings: "tnum" 1; }` で括り、桁を揃える
- レイアウトは `display: grid; grid-template-columns: repeat(12, 1fr); gap:
  var(--gutter);` を基本コンテナに敷く。誌面段組は `column-count` または
  グリッドの列指定で2〜3カラムに分ける。今月の催しリストは1カラムの
  `<ol>`/`<table>` で組み、日付セルを `.num` で揃える
- 判定は実際の祖先背景色で行う。クラス名を安全リストとして固定しない
  （例えば `.corner-head` という名のまま `--corner-color` に任意の色を渡せば
  分類の意味は崩れる。**実装側は必ず4色のいずれかを、対応する4コーナーにのみ
  割り当てること**）
- 最小限の vanilla JS（アンカーリンクのスムーススクロール抑制＝ブラウザ標準
  ジャンプのみ、フレームワーク不可）以外のスクリプトは書かない。演出目的の
  JS（スクロール連動・カウントアップ等）は書かない