--- version: alpha name: Afternoon Tea Elegant Pastel Dessert LP description: 生成り地に金茶の細枠とアーチ型フレーム、水色の茶器線画を敷き詰めた、アフタヌーンティー風の上品な期間限定スイーツ LP。素材紹介はパステルの菱格子パネルに、リボン見出しと楕円写真を組み合わせる。 colors: background: '#F2FCFD' surface: '#FEFEF4' primary: '#A88A4E' text: '#966E43' accent-1: '#C9DDE9' accent-2: '#FECBDB' cta: '#FED1D1' on-cta: '#AD8658' accent-3: '#DCE6A3' tint-1: '#CFC8EA' on-primary: '#FEFEED' background-alt: '#FEFFFE' text-accessible: '#926B41' primary-accessible: '#8A7240' on-cta-accessible: '#775B3A' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 19px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em body-lg: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.06em body-md: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Dancing Script fontSize: 15px fontWeight: 400 lineHeight: 1.2 note: fontFamily: Shippori Mincho fontSize: 10px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em label-button: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 200px full: 999px spacing: unit: 8px card: 28px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' arch-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 560px ribbon-title: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 44px badge-limited: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 56px ornate-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 560px lattice-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' height: 1200px voice-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 50px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px link-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 24px --- # DESIGN.md — 金縁と水色線画のティータイム洋菓子 LP（Afternoon Tea Elegant Pastel Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、かわいい、やさしい・柔らかい、レトロ - **キーワード**: アフタヌーンティー・金縁フレーム・茶器の線画・パステル・リボン見出し・明朝 - **地の質感**: 生成りの紙のような地に、水色の銅版画風線画を薄く敷く。パネルは菱格子の淡い模様入り。 - **形**: 上部アーチの縦長フレーム、角を内側にえぐった装飾枠、楕円の写真窓、両端が切れ込むリボン帯。 - **温度感**: 暖かい金茶と涼しい水色・ラベンダーが混ざる、柔らかく甘い温度感。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F2FCFD` | 線画柄の地色（淡い水色白） | 20% | 画素の実測 | | `surface` | `#FEFEF4` | フレーム内の生成り面 | 33% | 画素の実測 | | `primary` | `#A88A4E` | 金茶（枠線・バッジ・リボン） | 6% | 推定 | | `text` | `#966E43` | 見出し・本文の茶色文字 | 3% | 画素の主要色に補正 | | `accent-1` | `#C9DDE9` | 茶器線画の水色 | 9% | 画素の主要色に補正 | | `accent-2` | `#FECBDB` | ピンクのリボン・CTA | 5% | 画素の実測 | | `cta` | `#FED1D1` | 下部ボタンの淡ピンク | 1% | 画素の実測 | | `on-cta` | `#AD8658` | ボタン文字 | 0% | 画素の実測 | | `accent-3` | `#DCE6A3` | 黄緑のリボン | 2% | 画素の実測 | | `tint-1` | `#CFC8EA` | ラベンダー〜水色の格子パネル | 9% | 推定 | | `on-primary` | `#FEFEED` | 金茶リボン上の白文字 | 0% | 画素の実測 | | `background-alt` | `#FEFFFE` | SNSフッターの白 | 3% | 画素の実測 | | `text-accessible` | `#926B41` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#8A7240` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#775B3A` | AA を満たす補正値（計算） | | 計算 | - 地は淡い水色白に水色線画の茶器柄を全面に敷く。 - 情報は生成りの面に金茶の細線枠で囲んで載せる。 - 文字はすべて茶〜金茶。黒文字は使わない。 - 素材ごとにリボン色を変える（黄緑・ピンク）。 - 強い彩度は商品写真に任せ、装飾はパステルに留める。 - 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（大小の字を混ぜる） | 明朝 | Shippori Mincho | 700 | 34px | 1.4 | 0.05em | | `headline-lg` | リボン上の商品名 | 明朝 | Shippori Mincho | 700 | 24px | 1.3 | 0.08em | | `headline-md` | 素材名・セクション見出し | 明朝 | Shippori Mincho | 600 | 19px | 1.4 | 0.08em | | `body-lg` | コンセプト文・声 | 明朝 | Shippori Mincho | 600 | 17px | 1.9 | 0.06em | | `body-md` | 素材説明 | 明朝 | Shippori Mincho | 500 | 15px | 1.8 | 0.05em | | `accent` | 英字の手書き添え書き | 欧文スクリプト | Dancing Script | 400 | 15px | 1.2 | 0.0em | | `note` | 注釈 | 明朝 | Shippori Mincho | 500 | 10px | 1.5 | 0.03em | | `label-button` | ボタン文字 | 明朝 | Shippori Mincho | 600 | 15px | 1.3 | 0.05em | - 全文を明朝で統一し、中央揃えにする。 - キャッチはひらがなを小さく漢字を大きくしてリズムを出す。 - 本文は短い行で改行し、詩のように積む。 - 英字の手書きスクリプトを見出し脇に淡く添える。 - 声は鉤括弧で囲み、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 ```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-d09e6a21`（元 LP の URL から採番） - **元 LP**: https://www.haagen-dazs.co.jp/products/special/milk-tea-and-cookie/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。