--- version: alpha name: Pastel Harlequin Diamond Dessert LP description: ミント・ラベンダー・ベージュ・オレンジの菱形パッチワーク地に商品写真を大きく浮かせる、期間限定アイスバーの単ページ LP。文字はこげ茶の太い明朝とスラブセリフ欧文で、紅茶らしいクラシックな上品さとポップな配色を両立させている。 colors: primary: '#CABADD' secondary: '#74CEC5' accent-1: '#DFA370' tint-1: '#DBC6AB' tint-2: '#EDDCE0' background: '#FEFEFD' background-alt: '#F5EAFB' text: '#432B26' text-body: '#4A4040' cta: '#6A2A8A' on-cta: '#FFFFFF' dark-section: '#714544' accent-2: '#E2721C' line: '#BAA191' accent-1-accessible: '#AC6426' typography: display: fontFamily: Zilla Slab fontSize: 44px fontWeight: 700 lineHeight: 1.05 headline-lg: fontFamily: Shippori Mincho B1 fontSize: 30px fontWeight: 800 lineHeight: 1.25 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho B1 fontSize: 24px fontWeight: 800 lineHeight: 1.45 letterSpacing: 0.04em accent: fontFamily: Zilla Slab fontSize: 22px fontWeight: 600 lineHeight: 1.1 headline-sm: fontFamily: Shippori Mincho B1 fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-limited: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px badge-onomatopoeia: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px tag-info: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px heading-bilingual: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px callout-number: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px ornament-divider: textColor: '{colors.line}' height: 12px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px share-icons: rounded: '{rounded.full}' height: 42px --- # DESIGN.md — ミント×ラベンダー菱形柄の期間限定アイス LP（Pastel Harlequin Diamond Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、上品・高級、ポップ・元気、やさしい・柔らかい - **キーワード**: 菱形パッチワーク・パステル多色・こげ茶の明朝・商品の切り抜き・茶葉の線画・部位解説 - **地の質感**: 平塗りの菱形に細かなドット・シェブロン・ストライプ柄を重ね、白地には淡い茶葉の線画を散らしている - **形**: 45度に傾けた菱形タイルが基本。ボタンはピル型、番号は丸 - **温度感**: 暖色と寒色がバランスよく混ざった、ややあたたかい甘さ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CABADD` | 菱形パターンの主色（ラベンダー） | 10% | 画素の実測 | | `secondary` | `#74CEC5` | 菱形パターンのミント色 | 6% | 画素の実測 | | `accent-1` | `#DFA370` | 菱形のオレンジ・期間限定バッジ | 6% | 画素の主要色に補正 | | `tint-1` | `#DBC6AB` | 菱形のベージュ面 | 12% | 画素の実測 | | `tint-2` | `#EDDCE0` | 淡いピンクの柄面 | 7% | 画素の主要色に補正 | | `background` | `#FEFEFD` | 本文エリアの白地 | 22% | 画素の実測 | | `background-alt` | `#F5EAFB` | 下部の淡いラベンダーのグラデ地 | 6% | 画素の実測 | | `text` | `#432B26` | 見出し・商品名のこげ茶 | 2% | 画素の実測 | | `text-body` | `#4A4040` | 本文の濃いグレーブラウン | 2% | 推定 | | `cta` | `#6A2A8A` | サブ CTA ボタンの紫 | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#714544` | 情報タグ・番号丸のこげ茶 | 0% | 画素の主要色に補正 | | `accent-2` | `#E2721C` | PC 外側背景のオレンジ | 4% | 画素の実測 | | `line` | `#BAA191` | 茶葉線画・飾り罫の薄茶 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#AC6426` | AA を満たす補正値（計算） | | 計算 | - 商品ビジュアル部分はラベンダー・ミント・ベージュ・オレンジ・ピンクの菱形を交互に敷く - 菱形の一部にドット・シェブロン・ストライプの細かい柄を重ねて単調さを避ける - 説明文ブロックは白地にし、こげ茶の文字で読みやすさを優先する - 文字色は黒を使わず、こげ茶と濃いグレーブラウンで統一する - CTA だけ濃い紫を使い、パステル地の中で目立たせる - オノマトペのバッジはオレンジ地に白文字＋こげ茶の縁取り - `badge-limited` は文字 `#FFFFFF` × 背景 `#DFA370` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#AC6426`、4.56:1）を使う。 - `badge-onomatopoeia` は文字 `#FFFFFF` × 背景 `#DFA370` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#AC6426`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 欧文の商品名（3行積み） | 欧文セリフ | Zilla Slab | 700 | 44px | 1.05 | 0.0em | | `headline-lg` | 和文の商品名・部位名 | 明朝 | Shippori Mincho B1 | 800 | 30px | 1.25 | 0.02em | | `headline-md` | コンセプト見出し（中央3行） | 明朝 | Shippori Mincho B1 | 800 | 24px | 1.45 | 0.04em | | `accent` | 部位名の欧文ラベル（白抜き） | 欧文セリフ | Zilla Slab | 600 | 22px | 1.1 | 0.0em | | `headline-sm` | FV のキャッチ（2行、文字サイズに強弱） | 明朝 | Shippori Mincho B1 | 700 | 21px | 1.4 | 0.02em | | `body-md` | 説明本文（中央揃え） | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.04em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | ボタン・タグ文字 | ゴシック | Noto Sans JP | 500 | 15px | 1.2 | 0.04em | - 見出しは太い明朝、本文はゴシックで役割を分ける - 欧文スラブセリフを和文名の上に置き、2言語の見出しにする - FV キャッチはひらがなを小さく、漢字を大きくして文字サイズに強弱をつける - パステル地の上の見出しには白いフチをつけて読みやすくする - 本文は中央揃えで、行間を 2.0 前後と広くとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。部位解説は左右交互の配置 - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算） - FV は画面いっぱいの菱形地に商品をはみ出し気味に大きく置く - テキストブロックの上下に小さな飾り罫を置いて区切る - 部位解説は商品写真を中心に置き、番号丸から引き出し線で説明を四隅に配置する - 右上に小さな情報タグを固定位置で置く ## Elevation & Depth - 商品写真にだけ、うっすら落ち影や白い影の形をつける - カードの影は使わず、平面的な菱形の重ねで奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品・カップ・スプーンは背景を消して切り抜き、枠をはみ出させる - **セクション境界**: 菱形タイルの斜めの辺で白地とつなぐ。直線の帯は使わない - 期間限定バッジは円形 - 番号はこげ茶の丸に白い数字 - オノマトペは傾けた手描き風の不定形バッジ ## Components - **期間限定の丸バッジ**（`badge-limited`）: オレンジの円に白文字を2行で入れる - **食感オノマトペのバッジ**（`badge-onomatopoeia`）: 傾けたオレンジの不定形に、白い太字とこげ茶の縁取り - **情報リンクのタグ**（`tag-info`）: 右上に置くこげ茶のピル型タグ。矢印つき - **欧文と和文の2段見出し**（`heading-bilingual`）: 白抜きのスラブ欧文の下に、こげ茶の太い明朝を置く - **番号つき引き出し線**（`callout-number`）: こげ茶の丸数字から細い線を伸ばし、説明文につなぐ - **飾り罫**（`ornament-divider`）: 唐草風の小さなオーナメントを中央に置く - **回遊ボタン**（`button-primary`）: 濃い紫のピル型。白文字で右に山形矢印をつける - **SNSシェアアイコン**（`share-icons`）: 円形の公式アイコンを3つ中央に並べる ## Do's and Don'ts **Do** - 菱形タイルは4色以上をランダムに混ぜ、柄の面を所々に入れる - 商品写真は大きく切り抜き、傾けて躍動感を出す - かけらや茶葉を周囲に散らして食感を見せる - 白地には淡い茶葉の線画を余白に添える - 見出しは欧文と和文の2言語で組む **Don't** - 真っ黒な文字や原色の赤・青は使わない - 角丸カードや影の強いボックスを並べない - 菱形地の上に長い本文を置かない - CTA を何個も並べない。紫のボタンは1個だけにする - ゴシックの極太で見出しを組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の見た目と期間限定感を一目で伝える）: 菱形パッチワーク地。上部に2行キャッチ、中央に商品の切り抜き、左に限定バッジと欧文・和文の商品名、右に小さなパッケージ 2. **素材イメージ**（原料の質感を見せる）: 菱形地の上に原料をのせたスプーンを斜めに大きく配置する 3. **コンセプト説明**（味のこだわりを文章で伝える）: 白地に飾り罫、3行の明朝見出し、中央揃えの本文2段落。余白に茶葉の線画 4. **イメージ写真**（風味の世界観を連想させる）: ティーカップの切り抜きを白地から菱形地へまたがるように置く 5. **構造解説**（4つの層それぞれの特長を説明する）: 断面を見せた商品を中央に置き、番号丸と引き出し線で4つの2言語見出しと短文を四隅に配置する 6. **注釈**（素材用語を補足する）: 右寄せの小さな注釈と素材写真 7. **回遊CTA・シェア**（ほかの商品への誘導と拡散）: 淡いラベンダーのグラデ地に紫のピル型ボタン1個、その下にSNSアイコン3つ。茶葉の線画を添える ## Imagery - 商品は白背景で撮って切り抜き、やや斜めに傾けて置く - 断面カットでソースの層を見せる - 砕いたクランチや茶葉を周囲に浮かべるように散らす - 金縁の白い陶器カップやゴールドのスプーンで上品さを出す - 茶葉の枝を描いた細い線画を薄茶で散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も SP と同じ幅のカラム（約 440px）を中央に置くだけ - PC の外側は鮮やかなオレンジ地に、紅茶の水面のようなグラデと茶葉の線画を敷く - PC で本文を横に並べるレイアウトには変えない ## 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-daae9a01`（元 LP の URL から採番） - **元 LP**: https://www.haagen-dazs.co.jp/products/special/royal-milk-tea-crunch/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。