---
version: alpha
name: Kyoto Confectionery Anniversary Timeline LP
description: 生成りの地に朱赤を差した、和菓子ブランドの周年記念サイトの型。明朝体を字間広めに組み、カードの上下は飾り罫入りの帯で縁取る。年号を大きく見せる年表カードを縦に並べ、手描き矢印と短い注釈で商品の歴史を語る。後半は朱赤一色の面でキャンペーンを見せ、その後に企画カードとお知らせ一覧が続く。
colors:
  primary: '#EA392A'
  background: '#FFFEFA'
  surface: '#FEFEFA'
  background-alt: '#FCFBF7'
  tint-1: '#F5B2A9'
  tint-2: '#F5EFD5'
  text: '#2E2C29'
  accent-1: '#DA3426'
  accent-2: '#D9BA0A'
  line: '#C7C1B0'
  text-muted: '#8A8580'
  on-dark: '#FFF5ED'
  dark-section: '#8B2422'
  accent-2-accessible: '#816F06'
  dark-section-accessible: '#DD7573'
typography:
  display:
    fontFamily: Noto Serif JP
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.8
    letterSpacing: 0.2em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.3em
  body-lg:
    fontFamily: Shippori Mincho
    fontSize: 16px
    fontWeight: 500
    lineHeight: 2.2
    letterSpacing: 0.18em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  label-button:
    fontFamily: Shippori Mincho
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 4px
  md: 16px
  lg: 28px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 120px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  timeline-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 640px
  year-number:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 70px
  section-label:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 90px
  link-arrow:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 30px
  badge-octagon:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 150px
  project-card:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 175px
  button-pill-image:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 64px
  news-box:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 130px
  tab-sns:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 50px
---

# DESIGN.md — 朱赤と生成りの和菓子周年記念 LP（Kyoto Confectionery Anniversary Timeline LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 和風、上品・高級、親しみ・手作り感、やさしい・柔らかい
- **キーワード**: 朱赤×生成り・明朝の広い字間・年表カード・手描き矢印・霞雲の装飾・周年記念
- **地の質感**: 生成りの紙を思わせる無地。にじんだ朱赤の三角形と、かすれた霞雲（すやり霞）を装飾として散らす
- **形**: 上下の角を内側にえぐった飾り枠のカード、円形の写真切り抜き、八角形バッジ、ピル型のリンクボタン
- **温度感**: 暖かい。朱赤と淡いサーモンピンクのグラデーションで祝祭感を出す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#EA392A` | ブランドの朱赤（年号・キャンペーン面） | 13% | 画素の実測 |
| `background` | `#FFFEFA` | ページ地の生成り | 38% | 画素の実測 |
| `surface` | `#FEFEFA` | 年表カードの面 | 17% | 画素の実測 |
| `background-alt` | `#FCFBF7` | お知らせボックス・SNSフィード枠の面 | 5% | 画素の実測 |
| `tint-1` | `#F5B2A9` | セクション上端のサーモングラデーション | 7% | 画素の実測 |
| `tint-2` | `#F5EFD5` | 霞雲の装飾 | 3% | 画素の実測 |
| `text` | `#2E2C29` | 見出し・本文の墨色 | 3% | 画素の実測 |
| `accent-1` | `#DA3426` | 年号・キャッチの朱赤文字 | 1% | 画素の実測 |
| `accent-2` | `#D9BA0A` | 八角形バッジの黄土色 | 1% | 画素の実測 |
| `line` | `#C7C1B0` | お知らせ一覧の区切り線 | 1% | 画素の主要色に補正 |
| `text-muted` | `#8A8580` | 日付・注記 | 1% | 推定 |
| `on-dark` | `#FFF5ED` | 朱赤面に乗せる白文字 | 1% | 画素の実測 |
| `dark-section` | `#8B2422` | フッター手前の深い臙脂（写真まわり） | 2% | 画素の実測 |
| `accent-2-accessible` | `#816F06` | AA を満たす補正値（計算） |  | 計算 |
| `dark-section-accessible` | `#DD7573` | AA を満たす補正値（計算） |  | 計算 |

- 地は生成り（#FFFEFA）。純白は使わず、温かみを残す
- 朱赤は面として使うのはキャンペーンと締めの年表カードの 2 か所だけにする
- 年表カードでは年号とキャッチだけを朱赤の文字にし、それ以外の文字は墨色にする
- セクションの上端には朱赤から生成りへ落ちるサーモンのグラデーションを敷く
- 黄土色は八角形バッジだけに使う
- 朱赤の面に乗せる文字は白にし、生成りのカードを重ねて内容を収める
- `badge-octagon` は文字 `#FFF5ED` × 背景 `#D9BA0A` のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#816F06`、4.64:1）を使う。
- `project-card` は文字 `#2E2C29` × 背景 `#8B2422` のコントラスト比が 1.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#DD7573`、4.55:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 年表の年号の大数字 | 欧文セリフ | Noto Serif JP | 700 | 56px | 1.1 | 0.05em |
| `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 24px | 1.8 | 0.2em |
| `headline-md` | 年表カードの見出し・年号の下のキャッチ | 明朝 | Noto Serif JP | 700 | 21px | 1.5 | 0.08em |
| `accent` | 英字ラベル（History など） | 欧文セリフ | Cormorant Garamond | 500 | 14px | 1.4 | 0.3em |
| `body-lg` | リード文 | 明朝 | Shippori Mincho | 500 | 16px | 2.2 | 0.18em |
| `body-md` | 注釈・説明の短文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.6 | 0.05em |
| `note` | 日付・注記・コピーライト | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.02em |
| `label-button` | 詳細リンク・ボタン | 明朝 | Shippori Mincho | 500 | 14px | 1.4 | 0.1em |

- 見出しとリード文は明朝体にし、字間を 0.15〜0.2em と広めに取る
- 見出しの上に、朱赤の小さな三角形と欧文セリフのラベルを添える
- 年号は大きなセリフ数字で中央に揃え、その下に朱赤の太い明朝でキャッチを 2 行置く
- 商品説明の短い注釈はゴシック体で 3〜4 行に収め、手描き矢印を添える
- PC では見出しを縦書きにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。企画カードは全幅で縦積み
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算）
- 年表カードは左右に約 30px の余白を取って中央に置き、カード同士の間隔は 100px 以上空ける
- カード内の要素は中央揃えにする
- 写真と注釈は左右交互に配置し、矢印でつなぐ
- ファーストビューは記念ロゴ以外を広く空け、余白を多く取る
- お知らせはカテゴリ・タイトル・日付の順に並べ、区切り線で仕切る

## Elevation & Depth

- 年表カードの周囲に、大きくぼかした淡い影を付ける（blur 40px・透明度 6% 程度）
- 企画カードやボタンには影を付けず、平面で見せる
- SNS 埋め込み枠は細い線で囲み、影は付けない

## Shapes

- **角丸**: 小 4px ／ 中 16px ／ 大 28px。ボタンはピル型。
- **写真の切り抜き**: 人物や菓子の写真は正円に切り抜く。商品写真は角丸 8px か切り抜きで見せる
- **セクション境界**: 直線で切り替える。セクション上端は朱赤から生成りへのグラデーションでつなぐ
- 年表カードは上下の角を内側にえぐった飾り枠にし、内側に朱赤の二重罫と点線を入れる
- キャンペーンの数字訴求は八角形のバッジにする
- 企画カードは角丸 16px の写真カードにし、文字は白い帯に乗せる
- 公式サイトへの導線は、左に写真を入れたピル型ボタンにする

## Components

- **年表カード**（`timeline-card`）: 飾り枠のカード。見出し・写真と注釈・大きな年号・朱赤のキャッチ・詳細リンクを縦に並べる
- **年号表示**（`year-number`）: 朱赤の大きなセリフ数字。下に朱赤の太字キャッチを 2 行置く
- **英字ラベル付き見出し**（`section-label`）: 朱赤の小三角形と欧文セリフの英字ラベルを置き、その下に明朝の見出しを組む
- **詳細リンク**（`link-arrow`）: 下線付きの明朝テキスト。右に灰色の小さな四角と斜め矢印を添える
- **八角形バッジ**（`badge-octagon`）: 黄土色の八角形。抽選人数や応募期間を白い太字で入れる
- **企画カード**（`project-card`）: 全幅の写真カード。左上に白い Project 番号、下に白い帯の説明文を置く
- **写真入りピルボタン**（`button-pill-image`）: 左半分に菓子の写真、右に明朝の文言と矢印を置き、細い線で囲む
- **お知らせボックス**（`news-box`）: 淡い灰色の角丸の箱に、ラベル・日付・タイトルを入れる
- **SNS切替タブ**（`tab-sns`）: 上辺を角丸にしたタブ。選択中は生成り、それ以外は灰色にする

## Do's and Don'ts

**Do**
- 生成りの地を広く取り、余白で品のよさを出す
- 明朝の見出しは字間を広げてゆったり組む
- 年号は大きく朱赤にし、各カードの主役にする
- 注釈には手描き風の朱赤の矢印を添える
- にじんだ朱赤の三角形と霞雲を、画面の端にだけ散らす

**Don't**
- 純白の地や寒色の背景は使わない
- 朱赤の面を多用しない（キャンペーンと締めのカードに限る）
- ゴシックの太字を大見出しに使わない
- 強い影や立体的なボタンは使わない
- カードを角丸の四角だけで済ませない。飾り枠を省くと和の雰囲気が崩れる

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（周年の記念ロゴを印象づける）: 生成りの地の中央に楕円の飾り枠と記念ロゴを置き、周囲ににじんだ朱赤の三角形と霞雲を散らす。左上に朱赤の円形ロゴ、右上にハンバーガーメニュー
2. **お知らせ**（最新情報を 1 件知らせる）: 淡い灰色の角丸の箱に日付とタイトルを入れる
3. **ブランドメッセージ**（周年に込めた想いを伝える）: 明朝の大見出しと、字間を広げたリード文を左揃えで組む
4. **歴史年表**（商品の挑戦の歴史を見せる）: 上端にサーモンのグラデーションを敷き、飾り枠の年表カードを年代順に縦に並べる
5. **締めのメッセージ**（未来への想いで年表を締めくくる）: 朱赤の飾り枠カードの中に、白文字の見出し、円形の子ども写真、年号を置く
6. **キャンペーン**（ハッシュタグ投稿を募る）: 朱赤一色の面に、白の大見出し、賞品の写真、黄土色の八角形バッジを置く
7. **UGCフィード**（投稿を紹介する）: 朱赤の面の上に生成りのパネルを重ね、SNS 切替タブと埋め込み投稿を並べる
8. **特別企画一覧**（周年の企画を紹介する）: Project 番号付きの写真カードを 6 枚、縦に積む
9. **最新情報**（ニュースの一覧を見せる）: カテゴリ・下線付きのタイトル・日付を並べ、区切り線で仕切る
10. **公式サイト導線・フッター**（本サイトへ送客する）: 写真入りのピルボタンを置く。フッターは淡いピンクのグラデーションにし、筆文字ロゴと SNS アイコンを入れる

## Imagery

- 商品は箱と中身を俯瞰で撮り、自然光で柔らかく見せる
- 人物は子どもや親子が菓子を食べる場面を、暖かい光で撮る
- 生産者や家族は線画に淡い色を差したイラストで描く
- 手描き風の朱赤の曲線矢印で注釈と写真をつなぐ
- 水引・稲穂・梅などの和の模様を白い線画で添える
- ぼかしのかかった朱赤の三角形を浮遊する装飾として使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では見出しを縦書きにして左右の端に置き、本文は横書きにする
- PC の年表カードは横長の楕円型飾り枠にし、年号とキャッチを横に並べる
- PC の UGC フィードは 3 列のグリッドにする
- PC の企画カードは 2 列のマソンリー状に並べ、大きなカードを混ぜる
- PC のお知らせ一覧は、左に縦書き見出し、右にリストを置く 2 カラムにする

## Agent Prompt Guide

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-b2d07cd9`（元 LP の URL から採番）
- **元 LP**: https://www.otabe.kyoto.jp/anniversary/60th/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-12、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。