DESIGN.md — 金縁と水色線画のティータイム洋菓子 LP（Afternoon Tea Elegant Pastel Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい、レトロ
• キーワード: アフタヌーンティー・金縁フレーム・茶器の線画・パステル・リボン見出し・明朝
• 地の質感: 生成りの紙のような地に、水色の銅版画風線画を薄く敷く。パネルは菱格子の淡い模様入り。
• 形: 上部アーチの縦長フレーム、角を内側にえぐった装飾枠、楕円の写真窓、両端が切れ込むリボン帯。
• 温度感: 暖かい金茶と涼しい水色・ラベンダーが混ざる、柔らかく甘い温度感。

Colors

• 地は淡い水色白に水色線画の茶器柄を全面に敷く。
• 情報は生成りの面に金茶の細線枠で囲んで載せる。
• 文字はすべて茶〜金茶。黒文字は使わない。
• 素材ごとにリボン色を変える（黄緑・ピンク）。
• 強い彩度は商品写真に任せ、装飾はパステルに留める。
• CTA は淡ピンク地に金茶の縁と茶文字。
• page は文字 #966E43 × 背景 #F2FCFD のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#926B41、4.57:1）を使う。
• arch-frame は文字 #966E43 × 背景 #FEFEF4 のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#926B41、4.57:1）を使う。
• ribbon-title は文字 #FEFEED × 背景 #A88A4E のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8A7240、4.52:1）を使う。
• badge-limited は文字 #FEFEED × 背景 #A88A4E のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8A7240、4.52:1）を使う。
• ornate-card は文字 #966E43 × 背景 #FEFEF4 のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#926B41、4.57:1）を使う。
• lattice-panel は文字 #966E43 × 背景 #CFC8EA のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#926B41、4.61:1）を使う。
• voice-label は文字 #966E43 × 背景 #FECBDB のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#926B41、4.55:1）を使う。
• button-primary は文字 #AD8658 × 背景 #FED1D1 のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#775B3A、4.56:1）を使う。
• link-tag は文字 #966E43 × 背景 #FECBDB のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#926B41、4.55:1）を使う。

Typography

• 全文を明朝で統一し、中央揃えにする。
• キャッチはひらがなを小さく漢字を大きくしてリズムを出す。
• 本文は短い行で改行し、詩のように積む。
• 英字の手書きスクリプトを見出し脇に淡く添える。
• 声は鉤括弧で囲み、2行目を字下げする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 24px、基本単位 8px、カード内 28px（375px 幅換算）
• 各ブロックを金茶細線の枠で独立させる。
• FVはアーチ上辺の縦長フレームに見出しと商品写真を収める。
• 素材紹介は格子柄パネル内に装飾枠カードを縦に並べる。
• 茶器の線画イラストをカード外側にはみ出させて配置する。
• 余白は広めに取り、文字は行間を大きく。

Elevation & Depth

• 影はほぼ使わずフラット。
• 商品写真のみ自然な接地影。
• 奥行きは枠の二重線と背景柄で表現する。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 素材写真は縦長楕円、商品は切り抜き。
• セクション境界: 直線で区切らず、枠ごとに背景柄を見せて区切る。
• 枠の角は内側にえぐった装飾角にする。
• 角に小さな菱形の飾りを置く。
• 見出しは両端が燕尾に切れたリボン帯。
• カード枠は破線＋実線の二重縁。

Components

• アーチ型FVフレーム（arch-frame）: 上辺が半円の金茶細線枠。頂点に星形装飾。
• リボン見出し（ribbon-title）: 両端燕尾のリボン帯に商品名・素材名を載せる。
• 期間限定バッジ（badge-limited）: 金茶の円形に白文字2行。
• 装飾枠カード（ornate-card）: 角をえぐった二重縁の生成りカード。楕円写真＋リボン＋説明。
• 格子柄パネル（lattice-panel）: 水色→ラベンダーのグラデに白い菱格子柄。
• 声見出しラベル（voice-label）: 装飾角のピンク札に金の星を左右に置く。
• 回遊ボタン（button-primary）: 淡ピンクのピル型、金茶の縁、末尾に矢印。
• 上部情報リンク（link-tag）: 右上の小さなピンク札リンク。

Do's and Don'ts

Do - 文字は茶系の明朝で統一する。 - 情報ブロックは必ず金茶の細線枠で囲む。 - 茶器や菓子の線画を背景と枠外に散らす。 - 素材ごとにパステルのリボン色を変える。 - 写真は楕円窓で柔らかく見せる。

Don't - 黒や原色の文字・ボタンを使わない。 - ゴシック体を主役にしない。 - 太い影や立体ボタンを使わない。 - 背景を無地の白だけにしない。 - 四角い直線的な写真枠にしない。

Page Structure

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

1. ファーストビュー（世界観と商品を一目で伝える）: アーチ枠内に大きな明朝キャッチ、金リボンの商品名、英字添え書き、茶器と商品写真、期間限定バッジ。
2. コンセプト（味わいのシーンを情緒的に伝える）: 装飾角の生成り枠に短い4行の文を中央揃え。
3. 素材紹介1（主素材のこだわりを伝える）: 格子パネル上の装飾カード。楕円写真、黄緑リボン見出し、飾り罫、説明文。
4. 素材紹介2（副素材の魅力を伝える）: 同型カードでピンクリボンに変える。線画を外にはみ出す。
5. お客様の声（共感と信頼）: 装飾枠にピンク札見出し、鉤括弧の声を4つ、末尾に注釈。
6. CTA（他商品への回遊）: 淡ピンクのピルボタンを中央に1つ。
7. フッター（シェア導線）: 白地にSNS丸アイコンを3つ横並び。

Imagery

• 背景は茶器・ケーキスタンドの水色ペン画を薄く連続配置。
• 金茶の一色線画で茶器やカトラリーを枠の端に添える。
• 素材写真は明るい自然光、白い食器でやわらかく。
• 商品は白背景の切り抜きに素材を添えて構成。
• 飾り罫・菱形・星の小さな装飾を見出し周りに。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも 480px 前後の中央カラムで縦長の構成を保つ。
• 左右の余白は線画柄の背景で埋める。
• 文字サイズは SP 比 1.1 倍程度に留める。
• 装飾線画はカラム外にもはみ出して配置してよい。

Agent Prompt Guide

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

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