絵本のぬくもり Picture-book Warmth

DESIGN.md

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

https://3pt.co.jp/design-library/md/picture-book-warm/DESIGN.md

# DESIGN.md — 絵本のぬくもり / picture-book-warm

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

## 1. コンセプト

絵本を1ページずつめくるように、上から下へ読み下すサイト。丸い書体、温かい紙色、
リソグラフのようにインクを刷り重ねた3色。手描きの気配を残した自作イラストが主役で、
まるさとやわらかさで安心を伝える。かわいいが、幼稚でも安っぽくもない温かさを目指す。

**キーワード**: まるい / 温かい / 手づくり / 物語 / 安心
**この見た目が向く場面**: 保育・こども園・教育・習い事・NPO・子ども向け商品・絵本

## 2. タイポグラフィ

- 和文（見出し・本文とも）: Zen Maru Gothic（丸ゴシック。見出し 700〜900・本文 500。
  角のまるさが世界観の核）
- 欧文・数字: Fredoka（丸みのあるサンセリフ。ラベル・数字・園名の英字に。
  かわいいが崩れない。**Inter に置換しない**）
- 本文: 16px / 行間 2.0 / 字間 0.04em（ゆったり、読み聞かせのリズムで）
- 見出しスケール: 大見出し 44px / h2 30px / h3 20px（モバイルは大見出し 32px）。
  比率はゆるめ。大きさより「まるさ」と「余白」で語る
- 特記: 見出しは 700 以上でぽってり組む。感嘆符は控えめに1つまで。
  英字ラベルは 12px・字間 +0.14em・小文字（例: hoikuen / since 2012）。
  文はやさしい語り口。専門用語を並べない
- eyebrow（見出し上の小ラベル）: 和文見出しの逐語英訳にしない。
  「節番号＋その節固有のデータ（時刻・件数・地名など）」の型組みとして置く
  （例: `01｜08:30–13:30`、`02｜みっつの、やくそく`、`03｜大阪・豊中市`）。
  意味のない英語だけの見出し（"about" 等）は置かない。各ラベルは「一度消して
  それでも成立するか」を検証し、固有情報を足せないなら思い切って外す
- 独自性の一手（書体の組み合わせが安全解に寄るのを避ける）: Fredoka×Zen Maru
  Gothic の基本組みは保ちつつ、ヒーローに**縦書き（writing-mode: vertical-rl）
  のページタブ**を1つだけ効かせる。絵本の「しおり」のように、イラストの角に
  短い縦書きコピーを重ねる。多用せず、サイトに一箇所の効かせどころとして使う

## 3. カラー

温かいクリーム地に、**リソ刷りのような3色**（pastel）。冷たいラベンダー/ミントの
既製AIパステルに寄せないこと。全体に少しだけ彩度を落とし、紙に刷った温かさを出す。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（クリーム紙） | #fbf6ec | 60% |
| 背景（節替え・濃いクリーム） | #f3e7d2 | — |
| テキスト（茶インク） | #4a3f35 | 20% |
| テキスト（弱・装飾ラベル専用） | #8a7a68 | — |
| テキスト（弱・本文用） | #6b5d4c | — |
| アクセント1（柿色コーラル・主役／**面色専用**） | #e8896b | 10% |
| アクセント2（マスタード／面色専用） | #edb95e | — |
| アクセント3（セージ緑／**面色専用**） | #82a98a | — |
| コーラルの文字用インク（coral-ink） | #a8452a | — |
| コーラルの文字用インク・hover（coral-ink-hover） | #8a3720 | — |
| セージの文字用インク（sage-ink） | #4c6b52 | — |
| フッター専用の深緑（sage-deep） | #375339 | — |

- 配色ルール: 3アクセント（コーラル/マスタード/セージ）はイラストとブロック塗り・
  ボタン・見出しの一語ハイライトに使う。**グラデーションにしない**（フラット塗り。
  リソの刷り重ねはフラット2色の重なりで表現）。**純黒 #000000・純白 #ffffff を使わない**
  （文字は茶インク #4a3f35、白は紙のクリーム）。青紫の寒色を主役にしない
- 4色目以上の彩度色を足さない。多色でにぎやかにするより、3色を刷り重ねて深みを出す
- **面色（塗り・イラスト・境界線）と文字として使う色はトークンを分ける**:
  `--color-coral` / `--color-sage` / `--color-mustard` はクリーム地#fbf6ec上での
  文字色としては使わない（`--color-coral` は約2.4:1、`--color-sage` は約2.9:1しかなく
  AA未達）。クリーム地の上で文字として使う場合は、専用の沈めたインク色
  `--color-coral-ink`（#a8452a・約5.5:1）／`--color-coral-ink-hover`
  （#8a3720・約7.4:1）／`--color-sage-ink`（#4c6b52・約5.5:1）を使う。
  ボタンの境界線（ghostボタンのborder等）のような非テキストの装飾要素は、
  最低3:1を目安に元の面色のままでよい
- フッターのように濃い色を背景に敷く場合は、`--color-sage` そのものではなく
  さらに沈めた `--color-sage-deep`（#375339）を背景にし、文字はクリーム
  `--color-bg`（背景比 約7.9:1）を載せる。背景上のホバー色（マスタード等）も
  同様に実測（約4.8:1）してから使う
- **コントラスト（WCAG AA 4.5:1）**: `--color-text-weak` (#8a7a68) は `--color-bg`
  (#fbf6ec) 上で約3.85:1しかなく、本文には不可。**本文（p タグ等、内容を伝える
  文章）には必ず `--color-text-soft` (#6b5d4c・約5.9:1) を使う**。
  `--color-text-weak` は chip・lbl・時刻ラベルのような短い装飾添え字だけに使い、
  段落本文と混同しない
- **運用ルール**: 配色トークンは「面色」と「文字色」を別軸で管理し、面色トークンを
  新たに文字へ転用するときは必ずコントラストを実測（WebAIM等）してAA基準を
  満たす専用インク色を用意してから使うこと（装飾扱いで妥協する場合も最低3:1）

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

- コンテンツ最大幅: 900px（本文は 640px に絞る）/ **single-column**（一本道で上から読み下す）
- セクション間余白: 上下 100px 基準（ゆったり）。イラストの帯は全幅に広げてよい
- グリッドの性格: 段組みで詰めない。1画面に1つの話題を、イラストと短い文で置く。
  情報を並べるより「めくって進む」リズムを作る
- 各節の頭に「まるいチップ（節番号 or 小さなラベル）＋やさしい見出し」を置く
- ヒーローの構成: **非対称2カラム**（文字は左揃え・イラストは右に大きく）を
  基本形にする。中央寄せの「チップ→大見出し→サブコピー→ピルCTA」を縦一列に
  積む定型は作らない。ボタンは丸く1つ、左揃えの文字列の下に置く。
  イラスト側にはページタブ（縦書きの小さな一言、§2参照）を角に重ね、
  物語の入口として機能させる。狭幅では1カラムに畳むが、文字→イラストの
  順（DOM順）と左揃えは保つ（中央寄せに戻さない）

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

- ヘッダー・ナビゲーション: クリーム地・茶インク文字・下線なし。ナビはホバーで
  文字がコーラルに変わる（or まるい下線がふわっと出る）。園名ロゴは丸ゴシック＋小さな英字
- 角丸: **大きめ 22px（ボタン・ブロック・画像すべて丸くする）**。ボタンはピル形（全角丸）でよい。
  角のまるさがこのテイストの要
- 影: box-shadow を使わない（立体でなく、フラットな色面とイラストで温かさを出す）。
  奥行きが欲しければ「色面を少しずらして重ねる」リソ風で表現する
- 境界線: 使うなら 2px の茶インク or アクセント色。細く弱い罫線より、色面で仕切る
- ボタン: ピル形・**コーラルインク地（`--color-coral-ink`）＋クリーム文字**、ホバーで少し沈む
  （`--color-coral-ink-hover` に濃くなる 0.2s）。明るい `--color-coral` 生地にクリーム文字を
  載せない（約2.4:1でAA未達）。副ボタン（ghost）は 2px コーラル罫線＋透明地。**文字色は
  `--color-coral` ではなく `--color-coral-ink` を使い**、ホバーで塗る場合も `--color-coral-ink`
  で塗る（罫線は面色の元のコーラルのままでよい）。角ばったボタンを作らない
- **クリーム文字を載せる面は必ずink系トークン**（`--color-coral-ink` / `--color-sage-ink` /
  `--color-sage-deep`）にする。丸バッジ等も同様（明度が確保できる `--color-mustard` のみ
  明るい面＋濃い文字 `--color-text` の組み合わせにする）。面色トークンと文字色は
  必ずペアでコントラスト比を実測してから使う（本文4.5:1以上、装飾でも3:1以上）
- フッター: 背景は `--color-sage` ではなく `--color-sage-deep`（#375339）を使う。
  `--color-sage` をそのまま敷くとクリーム文字との比が約2.4:1でAA未達になる
- **同一導線の反復を避ける**: 同じ予約導線をヘッダー／ヒーロー／ページ末尾で
  繰り返す場合、**文言・見た目のどちらも変える**（例: ヘッダーは短い語＋ghost
  ピル、ヒーローは主役の塗りピル、末尾は電話番号を主役にしテキストリンクを
  添える）。同一文言・同一意匠のピルを3回機械的に反復しない
- カード的要素: 使うならクリーム or 濃クリームの丸角ブロック（影なし）。
  「アイコン＋見出し＋説明の3カラム角丸カード＋薄影」の量産をしない。
  **カラム数を問わず**、テキストだけの角丸カードを2枚以上横並びにしない —
  カード的要素を使う場合は各項目に必ず手描きイラストを1点添える。
  むしろ1カラムで、各項目に手描きイラストを添えて縦に並べる
- フォーム要素: 丸角・2px 茶罫 or 色面・フォーカスでコーラルに。ラベルはやさしい言葉で
- 画像・イラストの扱い: 角丸22px。写真より**自作イラスト**を優先（§7）
- アクセント色の適用範囲: イラスト・ブロック塗り・ボタン・見出し一語のハイライト・
  まるいチップに使う。本文テキストは茶インクのまま

## 6. モーション

- 量: subtle（やさしく、ゆっくり）
- 使う動き: スクロール進入で opacity 0→1・translateY(12px)→0。**全要素を同じ速さで
  一律にフェードさせない**: 主役（節見出し）は 0.7s でゆっくり、リスト項目は 0.35s＋
  0.07s 刻みの階段状ディレイ、その他は 0.45s と、役割で速さと間に差をつける。
  イラストの一部（太陽・雲・鳥など）を上下に 2〜4px ゆっくり揺らす程度（4s ループ、
  ごく控えめ）。ボタンホバーの沈み込み
- 使わない動き: 派手なバウンス、キャラクターの大きな動き、紙吹雪、パララックス多用、
  自動カルーセル、数字カウントアップ。動きは「そよ風」程度に留める
- prefers-reduced-motion 時はすべて停止する

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

- **主役は自作のフラットSVGイラスト。** 太陽・丘・木・家・鳥・雲・絵本・道具などの
  自然物と物を、まるい形と3色で描く。線は使うなら太め（3〜4px）の茶インクで、手描きの
  少しの歪みを許す。塗りはフラット（グラデ・3D・光沢を使わない）
- **既製の3Dブロブ・グラデ抽象イラスト・「Corporate Memphis（手足が大きく顔のない
  フラット人物）」風の量産イラストを使わない**（AIの手癖の代表）。人物を描くなら
  紙工作のように極シンプルに（丸い頭＋簡素な体、極端な誇張をしない）
- 写真を使う場合も角丸22px・暖色寄りに整え、イラストと世界観をそろえる
- 絵文字をアイコン代わりに使わない（必要なら自作の小さなイラストか丸いチップ）

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

- Inter / Roboto / Arial / Noto Sans を使わない（Zen Maru Gothic / Fredoka で組む）
- グラデーションを使わない（背景・イラスト・ボタンすべてフラット塗り）。box-shadow を使わない
- 純黒 #000000・純白 #ffffff を使わない（文字は茶インク、白はクリーム）
- 冷たいラベンダー/ミント等の既製AIパステルに寄せない（温かいリソ調3色を守る）。
  4色目以上の彩度色・寒色主役を足さない
- **Corporate Memphis 風・3Dブロブ・グラデ抽象のイラスト素材を使わない**（自作フラットSVGで統一）
- カラム数を問わず「バッジ/アイコン＋見出し＋説明文」だけで構成された角丸カードを
  2枚以上横並びにしない（1カラムのナラティブにするか、各項目に手描きイラストを添える）
- 中央寄せの硬い定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ＋背景グラデ）を作らない
- 絵文字をアイコンとして使わない
- 角ばったデザイン（直角・シャープな影・詰まった高密度）に寄せない。まるさと余白を保つ
- eyebrow を和文見出しの逐語英訳や意味の薄い1語（"about" 等）にしない。
  節番号＋固有データの型組みにする（§2参照）
- 同一の予約導線ボタンを、文言・見た目とも同一のままヘッダー／ヒーロー／末尾で
  3回反復しない（§5参照）
- 本文コピーに `--color-text-weak` を使わない（AA未達。`--color-text-soft` を使う）
- `--color-coral` / `--color-sage` をクリーム地の上で**文字色**として使わない
  （それぞれ約2.4:1・約2.9:1でAA未達）。文字には `--color-coral-ink` /
  `--color-sage-ink` を使う。フッター背景に `--color-sage` をそのまま使わない
  （`--color-sage-deep` を使う）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #fbf6ec;       /* クリーム紙（純白は使わない） */
  --color-bg-alt: #f3e7d2;   /* 節替えの濃いクリーム */
  --color-text: #4a3f35;     /* 茶インク（純黒は使わない） */
  --color-text-weak: #8a7a68;  /* 装飾ラベル専用（chip/lbl等）。本文には使わない */
  --color-text-soft: #6b5d4c;  /* 本文の弱色。--color-bg 上でAA(4.5:1)以上を確保 */
  --color-coral: #e8896b;    /* 柿色コーラル。主役アクセント。面色専用（文字にしない） */
  --color-mustard: #edb95e;  /* マスタード。面色専用 */
  --color-sage: #82a98a;     /* セージ緑。面色専用（文字にしない） */
  --color-sage-ink: #4c6b52;  /* セージの文字用インク。--color-bg 上で実測 約5.5:1 */
  --color-coral-ink: #a8452a; /* コーラルの文字用インク。--color-bg 上で実測 約5.5:1 */
  --color-coral-ink-hover: #8a3720; /* coral-ink のホバー用。--color-bg 上で実測 約7.4:1 */
  --color-sage-deep: #375339; /* フッター背景専用の深緑。クリーム文字比 実測 約7.9:1、マスタードホバー比 実測 約4.8:1 */
  /* 変数には総称ファミリ(sans-serif)を含めないこと */
  --font-heading: "Zen Maru Gothic";
  --font-body: "Zen Maru Gothic";
  --font-latin: "Fredoka";
  --space-unit: 8px;
  --radius: 22px;            /* 大きめの角丸。まるさが要 */
  --max-width: 900px;
  --measure: 640px;         /* 本文カラムの最大幅 */
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Zen+Maru+Gothic:wght@500;700;900&display=swap`
- 本文の font-family は `var(--font-latin), var(--font-body), sans-serif` の順に指定する
  （英数字が自動で Fredoka になる）
- イラストは inline SVG。塗りは CSS 変数（--color-coral 等）を fill に使い、色を統一する。
  グラデ・フィルタ・drop-shadow を使わない。手描き感は path の微妙な非対称で出す
- ボタン・ブロック・画像は `border-radius: var(--radius)`。角丸を惜しまない
- ヒーローのページタブ（しおり）: `writing-mode: vertical-rl; text-orientation: mixed;`
  の色面を2枚、`transform: translate(4px, 4px)` 程度ずらして重ねる（box-shadow は
  使わず、色面のオフセットだけで奥行きを出すリソ風の手法）。
  **背面レイヤー（back）はテキストを持たない単色の色面のみ**とする。しおりの文言は
  前面レイヤー（front）の1枚にのみ乗せ、背面に同じ文言を重複させない
  （重複させると小さいオフセットのせいで文字がにじんで見える）
- スクロール進入モーションは以下をそのまま使うこと。クラスを定義するだけでなく、
  リスト状に並ぶ要素（day-item / value / news-item 等）には必ず `.reveal-fast` と
  `nth-child` の階段状ディレイを**セットで適用**する。全セクションが同じ速さで
  一律にフェードする状態は不合格とみなす:

```css
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.reveal.reveal-slow { transition-duration: .7s; }  /* 節見出し等の主役に付与 */
.reveal.reveal-fast { transition-duration: .35s; } /* リスト項目に付与 */
.reveal.reveal-fast:nth-child(3) { transition-delay: .07s; }
.reveal.reveal-fast:nth-child(4) { transition-delay: .14s; }
.reveal.reveal-fast:nth-child(5) { transition-delay: .21s; }
.reveal.visible { opacity: 1; transform: none; }
/* nth-child の番号は「節見出しが同じ親の第1子にいる」前提。DOM構造に合わせて調整する */
```