---
version: alpha
name: Tricolor Gingham Anniversary Sweets Shop LP
description: 真紅と青の2色を主役に、ギンガムチェック・ガーランド・手描き線画でお祭り感を出す周年記念LP。赤と青の帯を交互に置き、白カードと生成りの年表でメリハリをつける。丸みのある書体と筆記体を合わせ、レトロでかわいい洋菓子店らしさを作る。
colors:
  primary: '#D80B1A'
  on-primary: '#FEFDFB'
  secondary: '#0162B1'
  background: '#FCF3E4'
  surface: '#FEFEFE'
  cta: '#D80C18'
  on-cta: '#FFFFFF'
  text-body: '#222222'
  line: '#E3A497'
  accent-1: '#97131C'
  tint-1: '#EAE2DA'
  dark-section: '#233D8A'
typography:
  display:
    fontFamily: Cinzel
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Zen Maru Gothic
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Maru Gothic
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.1em
  body-md:
    fontFamily: Zen Maru Gothic
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  accent:
    fontFamily: Caveat
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.02em
  note:
    fontFamily: Rampart One
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.1em
  label-button:
    fontFamily: Zen Maru Gothic
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.1em
rounded:
  sm: 8px
  md: 16px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  button-outline:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 50px
  section-title-stack:
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 100px
  awning-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 900px
  circle-photo-text:
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 320px
  collab-tab-card:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 170px
  timeline-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 480px
  letter-card:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    height: 820px
  film-frame:
    textColor: '{colors.on-primary}'
    rounded: '{rounded.sm}'
    height: 230px
---

# DESIGN.md — 赤×青ギンガムと線画の老舗スイーツ店周年LP（Tricolor Gingham Anniversary Sweets Shop LP）

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

## Overview

- **業種**: 飲食店・レストラン ／ **雰囲気**: ポップ・元気、かわいい、レトロ、親しみ・手作り感
- **キーワード**: 赤×青のトリコロール・ギンガムチェック・三角ガーランド・手描き線画・周年記念・年表
- **地の質感**: ベタ塗りの赤・青面に白の線画を重ねる。生成り地や斜め格子の柄でレトロな紙の質感を出す
- **形**: 角丸カード、店先のテント（オーニング）型の上辺、アーチ型見出し、波形の境界、円形の写真と円周テキスト
- **温度感**: 暖かく賑やか。赤が多めで、青は締め色

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#D80B1A` | メインの赤。セクション地・見出し・ボタンに使う | 24% | 画素の実測 |
| `on-primary` | `#FEFDFB` | 赤地に置く白文字と白の線画 | 3% | 画素の実測 |
| `secondary` | `#0162B1` | 締め色の青。動画セクションの地・小見出し・年号に使う | 9% | 画素の実測 |
| `background` | `#FCF3E4` | 年表セクションの生成り地 | 24% | 画素の実測 |
| `surface` | `#FEFEFE` | 白カードの面（キャンペーン・プロジェクト） | 14% | 画素の実測 |
| `cta` | `#D80C18` | 詳細ボタンの赤い塗り | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `text-body` | `#222222` | 本文の濃い墨色 | 3% | 推定 |
| `line` | `#E3A497` | 白地の外側に敷く斜め格子柄の淡い赤線 | 6% | 画素の主要色に補正 |
| `accent-1` | `#97131C` | 年表の飾りに使う茶色の手描き線画 | 1% | 画素の主要色に補正 |
| `tint-1` | `#EAE2DA` | 準備中カードの淡いグレー面 | 3% | 画素の主要色に補正 |
| `dark-section` | `#233D8A` | フッターの紺 | 3% | 画素の実測 |

- セクション地は赤→青→白カード→赤→生成り→赤→紺の順に切り替えて、帯のリズムを作る
- 赤地と青地では文字も線画もすべて白にする
- 白カードと生成り地では見出しを赤、英字の小見出しと一部の見出しを青にする
- 年表の見出しと年号は赤と青を交互に使う
- 主ボタンは赤の塗りに白文字。サブボタンは白地に赤い枠線と赤文字
- 生成り地の飾りは茶色の線画にして、赤・青と喧嘩させない
- グラデーションは使わない。ベタ塗りと線だけで作る

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの英字見出し（スモールキャップス風） | 欧文セリフ | Cinzel | 700 | 30px | 1.1 | 0.02em |
| `headline-lg` | 赤地のメインコピー | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.4 | 0.04em |
| `headline-md` | プロジェクトカードの見出し（赤） | 丸ゴシック | Zen Maru Gothic | 500 | 24px | 1.35 | 0.08em |
| `headline-sm` | 年表の各項目の見出し・日本語のサブタイトル | 丸ゴシック | Zen Maru Gothic | 500 | 16px | 1.5 | 0.1em |
| `body-md` | 本文・リード文 | 丸ゴシック | Zen Maru Gothic | 500 | 13px | 2 | 0.08em |
| `accent` | 英字の筆記体の飾り（50th・お礼の一言など） | 欧文スクリプト | Caveat | 400 | 26px | 1.3 | 0.02em |
| `note` | 白抜き文字で縦に置く年表の年号 | 装飾・ディスプレイ | Rampart One | 400 | 34px | 1 | 0.1em |
| `label-button` | ボタンの文字 | 丸ゴシック | Zen Maru Gothic | 500 | 16px | 1 | 0.1em |

- 見出しは3段で組む：上に小さな英字、中央に大きな英字セリフ、下に日本語の小見出し
- 大見出しの右下に、筆記体の『50th』のような飾り文字を斜めに重ねる
- 本文は中央揃えにし、行間を2前後にして文字間もゆったり取る
- 年表の年号は袋文字にし、写真の横に縦書きで置く
- 写真の円周に沿って小さな英字セリフの文字を回す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。コラボカードだけ2カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- 白カードは画面端から12px内側に置き、カードの外には柄の地を見せる
- セクションの上の左右の角に、三角ガーランドを斜めに垂らす
- 年表は写真→見出し→本文を1組にし、組の間を点線の曲線でつなぐ
- ボタンは幅約70%で中央に置く
- 装飾の線画は余白に散らし、本文には重ねない

## Elevation & Depth

- 影はほぼ使わない。平面のベタ塗りと線で奥行きを出す
- カードは影ではなく、白か赤の1〜2pxの枠線で区切る
- メッセージ部分は、少し傾けた便箋の線画を重ねて重なりを表す

## Shapes

- **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸8pxの長方形が基本。特長の写真は円や楕円で一部を切り抜き、円周に文字を回す
- **セクション境界**: 直線の切り替えが基本。年表の前後だけ波形にし、上辺はテント型やアーチ型にする
- カード上部は店先のテント（赤白の波形）にする
- コラボカードはタブのような山型の見出しを持つ角丸カードにする
- ボタンは完全なピル型にする

## Components

- **詳細ボタン**（`button-primary`）: 赤いピル型。白文字で、右に小さな三角を付ける
- **アウトラインボタン**（`button-outline`）: 白地に赤の枠線と赤文字のピル型。結果一覧などへの誘導に使う
- **3段見出し**（`section-title-stack`）: 小さな英字・大きな英字セリフ・日本語サブタイトルを重ね、筆記体の飾りを添える
- **テント付き白カード**（`awning-card`）: 上辺が赤青の店先テント型の白カード。中に方眼の地を敷く
- **円形写真＋円周文字**（`circle-photo-text`）: 円く切り抜いた写真の外周に、小さな英字を一周させる
- **コラボカード**（`collab-tab-card`）: 白枠の赤カードに山型のタブ見出しを付ける。準備中はグレー面に線画と枠付きの『近日公開』ボタン
- **年表の項目**（`timeline-item`）: 角丸写真に袋文字の縦の年号を添え、色見出しと本文を置き、点線でつなぐ
- **便箋風メッセージ**（`letter-card`）: 赤地に白線の罫線便箋を少し傾け、中央揃えの白文字を罫線に沿わせる
- **フィルム枠の動画**（`film-frame`）: 黒いフィルム枠のコマ穴の中にサムネイルを置き、赤丸の再生ボタンを重ねる

## Do's and Don'ts

**Do**
- 赤と青のベタ面を交互に置き、テンポのよいお祭り感を出す
- ギンガムチェックや斜め格子などの柄を、ファーストビューとカードの外側に使う
- 余白には白・茶・青の手描き線画（ハート・リボン・星）を散らす
- 見出しには必ず日本語のサブタイトルと筆記体の飾りを添える
- 年表は写真と年号を左右交互に置き、点線で流れを見せる

**Don't**
- グラデーション・ドロップシャドウ・ガラス風の効果は使わない
- 赤と青以外の強い色をメインにしない
- 四角く角張ったカードやボタンにしない
- 細い明朝体で硬い印象にしない
- 線画を本文の上に重ねて読みにくくしない

## Page Structure

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

1. **ヘッダー**（ロゴとお知らせへの導線）: 白地の左にロゴ、右に赤いピル型のお知らせボタンと赤い三本線メニュー
2. **ファーストビュー**（周年記念の祝祭感を一目で伝える）: 赤いギンガムの額縁の中の白地に、赤と青の線画の商品・道具を散らし、中央に記念ロゴを大きく置く
3. **ごあいさつ**（感謝と企画の趣旨を伝える）: 赤地にガーランド、筆記体の英字、白い太字コピー、波線の飾り、中央揃えの白い本文。下に円の線画と横線を置く
4. **キャンペーン**（メインの企画とランキングへ誘導する）: 赤地にアーチ型の見出し。テント付き白カードに商品写真を2段並べ、エンブレムとアウトラインボタンを置く
5. **スペシャル動画**（ブランドの物語を映像で伝える）: 青地にガーランドと3段見出し、白線のカメラ線画、本文、フィルム枠の動画。下に流れる英字ロゴ帯
6. **プロジェクト（特長）**（記念企画を3つ紹介する）: 斜め格子柄の地に大きな白カード。円形写真＋円周文字、青い英字番号、赤い見出し、本文、赤いピル型ボタンを縦に繰り返す
7. **コラボレーション**（コラボ企画を一覧で見せる）: 赤地に2列のタブ付きカードを8枚。公開前のものはグレーのカードに線画と近日公開のボタン
8. **年表**（創業からの歩みを伝え、信頼を高める）: 波形の境界から生成り地へ。写真・袋文字の縦の年号・赤青交互の見出し・本文を点線でつなぎ、茶色の線画で飾る
9. **締めのメッセージ**（感謝と今後への思いを伝える）: 波形の境界で赤地へ。中央に記念ロゴ、便箋風の罫線メッセージ、筆記体のお礼、商品の写真
10. **フッター**（会社情報とサイト内の導線）: 紺地にロゴと住所を中央揃え、2列の白文字リンク、SNSアイコン、コピーライト

## Imagery

- イラストは太さが均一なペンの線画。赤・青・白・茶の単色で、塗りは最小限
- モチーフはクレープの包み・ホイップ袋・ソースのボトル・苺・リボン・ハート・星
- 商品写真は白背景の切り抜きで、真上に近い斜めの角度から明るく撮る
- 年表の写真は昔の色あせたフィルム写真を生かし、色調補正しすぎない
- 人物写真はスタッフの笑顔で、明るい店内の自然光で撮る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは本文幅を約80%の中央寄せにし、ナビをヘッダーに横並びで出す
- プロジェクトは、PCでは円形写真と本文を左右交互の2カラムにする
- コラボカードは、PCでは4列×2段にする
- 年表は、PCでは写真と本文を左右に並べ、蛇行する点線でジグザグにつなぐ
- キャンペーンは、PCではエンブレムとリード文・ボタンを横並びにする
- フッターは、PCではロゴ・住所を左、リンクを中央、SNSを右に置く

## 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-aa5c4a60`（元 LP の URL から採番）
- **元 LP**: https://www.marion.co.jp/50th/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-22、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

:root {
  --color-primary: #d80b1a;
  --color-on-primary: #fefdfb;
  --color-secondary: #0162b1;
  --color-background: #fcf3e4;
  --color-surface: #fefefe;
  --color-cta: #d80c18;
  --color-on-cta: #ffffff;
  --color-text-body: #222222;
  --color-line: #e3a497;
  --color-accent-1: #97131c;
  --color-tint-1: #eae2da;
  --color-dark-section: #233d8a;
  --spacing-unit: 8px;
  --spacing-card: 20px;
  --spacing-section: 64px;
  --rounded-sm: 8px;
  --rounded-md: 16px;
  --rounded-lg: 24px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。