--- version: alpha name: Warm Watercolor Chocolate Drink Recipe LP description: 生成りや淡いピンクの水彩地に白い角丸カードを重ねた、読み物型の食品プロモーション LP。章ごとにオレンジ・ピンク・水色・緑のひし形しずくエンブレムで色分けし、手描きイラストと写真を組み合わせてやさしく親しみやすい雰囲気でレシピや豆知識を紹介する。 colors: primary: '#5A3A2C' background: '#FEFEFE' background-alt: '#F9EDD3' tint-1: '#FDEDE6' surface: '#FFFFFF' accent-1: '#E8822A' accent-2: '#D9437A' secondary: '#33A4DB' accent-3: '#4A9A3A' cta: '#3A9AD9' on-cta: '#FFFFFF' text-body: '#4A3A32' line: '#F0E3D5' tint-2: '#A9CDE8' accent-1-accessible: '#B75F14' secondary-accessible: '#1F7EAD' typography: display: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Zilla Slab fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 12px 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}' chapter-emblem: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 110px content-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 400px numbered-circle: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 160px recipe-step: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 80px tool-tab: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 90px notice-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px button-link: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px venn-diagram: textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.full}' height: 120px column-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 生成り水彩×4色ひし形の飲料レシピ LP（Warm Watercolor Chocolate Drink Recipe LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: やさしい・柔らかい、ナチュラル、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 水彩にじみ地・章ごとの色分け・ひし形しずくエンブレム・白い角丸カード・手描きイラスト・読み物型 - **地の質感**: 和紙のような生成り地に水彩のにじみやドット柄スタンプを重ねる。カードはフラットな白。 - **形**: 大きな角丸カード、円形の番号カード、ひし形の下にしずくが垂れるエンブレム、ピル型の小ボタン。 - **温度感**: 暖色寄り。焦げ茶の文字とクリーム地が温かく、章ごとの色で軽さを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5A3A2C` | ブランドの焦げ茶（見出し・本文・ロゴ） | 3% | 推定 | | `background` | `#FEFEFE` | ページの白地 | 42% | 画素の実測 | | `background-alt` | `#F9EDD3` | 章背景の生成り水彩地 | 14% | 画素の実測 | | `tint-1` | `#FDEDE6` | ピンク章の淡い背景 | 7% | 画素の実測 | | `surface` | `#FFFFFF` | 章背景上の白いカード | 25% | 画素の主要色に補正 | | `accent-1` | `#E8822A` | 第1章オレンジ（見出し・番号） | 2% | 推定 | | `accent-2` | `#D9437A` | 第2章ピンク（見出し・罫線） | 2% | 推定 | | `secondary` | `#33A4DB` | 第3章水色（見出し・帯） | 2% | 画素の実測 | | `accent-3` | `#4A9A3A` | 第4章グリーン（見出し） | 1% | 推定 | | `cta` | `#3A9AD9` | ピル型リンクボタンの枠 | 0% | 推定 | | `on-cta` | `#FFFFFF` | 水色帯の上の白文字 | 0% | 画素の主要色に補正 | | `text-body` | `#4A3A32` | 本文テキスト | 2% | 推定 | | `line` | `#F0E3D5` | レシピ図の細い枠線 | 0% | 画素の主要色に補正 | | `tint-2` | `#A9CDE8` | 水彩のブルーアクセント | 2% | 推定 | | `accent-1-accessible` | `#B75F14` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1F7EAD` | AA を満たす補正値（計算） | | 計算 | - 文字と導入部の基調色は焦げ茶。黒は使わない - 章ごとにテーマ色を 1 色決め、エンブレム・見出し・番号・罫線をその色でそろえる - 章の背景は生成りか淡いピンクの水彩地にし、その上に白い角丸カードを置く - 強調したい注意書きは章の色で塗ったピル帯に白文字で入れる - 彩度の高い色は見出しとエンブレムだけに使い、広い面には淡い色だけを使う - `chapter-emblem` は文字 `#FFFFFF` × 背景 `#E8822A` のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B75F14`、4.51:1）を使う。 - `numbered-circle` は文字 `#E8822A` × 背景 `#FFFFFF` のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B75F14`、4.51:1）を使う。 - `tool-tab` は文字 `#33A4DB` × 背景 `#FFFFFF` のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1F7EAD`、4.52:1）を使う。 - `notice-band` は文字 `#FFFFFF` × 背景 `#33A4DB` のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1F7EAD`、4.52:1）を使う。 - `button-link` は文字 `#33A4DB` × 背景 `#FFFFFF` のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1F7EAD`、4.52:1）を使う。 - `column-badge` は文字 `#FFFFFF` × 背景 `#33A4DB` のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1F7EAD`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 冒頭の大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.5 | 0.08em | | `headline-lg` | 章のリード見出し（章の色） | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.5 | 0.06em | | `headline-md` | カード内の小見出し・レシピ名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.05em | | `headline-sm` | シーン名・特長の見出し | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.05em | | `body-md` | 本文・手順の説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.06em | | `note` | 出典・注意書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | エンブレムの欧文ラベル、番号 | 欧文セリフ | Zilla Slab | 700 | 20px | 1.2 | 0.02em | | `label-button` | ピル型ボタン・帯のラベル | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.04em | - 見出しは章の色にし、2 行に分けて置く - 本文は行間を約 1.9 と広めにし、字間も少し空けて読みやすくする - 冒頭の導入文は中央揃え、カード内は左揃え - 手順の番号は細い欧文数字を章の色で本文の左に置く - シーンの添え字には手書き風の筆記体の欧文を斜めに置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内の写真とテキストは縦に積む。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 章の頭にはエンブレムとリード見出し、導入文をまとめて置く - 白カードは左右に 16px ほど余白を取って水彩地を見せる - レシピは図と手順文を 1 組にして縦に 4 段並べる - 特長は円形カード 3 枚。SP では縦に並べるか 2 列にする - 写真とテキストは段ごとに左右を入れ替えて交互に配置する ## Elevation & Depth - カードは影を付けず、白い面と地色の差だけで浮かせる - エンブレムだけに薄いドロップシャドウと光沢を付ける - レシピ動画の枠には軽い影を付けてもよい ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形。レシピ図は細い枠線で囲む。 - **セクション境界**: 直線の境界の上に水彩のにじみを重ね、ぼかして切り替える - 大きなカードは角丸 24px - 番号付きの特長は真円の白いカードにする - 章のエンブレムはひし形の下にしずくが垂れる形にする - 道具のアイコンは角丸の四角い枠に入れる ## Components - **章エンブレム**（`chapter-emblem`）: グラデーションのひし形の下にしずくを付け、欧文の章名と小さな日本語を白で入れる。下に章の色で 2 行の説明を添える。 - **白い角丸カード**（`content-card`）: 水彩地の上に置く白い大きなカード。中に写真と文章のブロックを並べる。 - **番号付き円カード**（`numbered-circle`）: 白い円の中に、章の色の大きな数字・見出し・短い説明・イラストを入れる。 - **レシピ手順**（`recipe-step`）: 細い枠で囲んだイラストを左に、番号付きの手順文を右に置く。4 段で 1 組。 - **道具選択アイコン**（`tool-tab`）: 角丸の白い枠に道具の写真を入れ、その下に道具名と所要時間の短い説明を入れる。 - **注意書きピル帯**（`notice-band`）: 章の色で塗ったピル型の帯に、白文字 1 行で補足を入れる。 - **ピル型リンクボタン**（`button-link`）: 白地に章の色の細い枠を付け、三角アイコンとテキストを入れる。 - **比較の丸図**（`venn-diagram`）: 細い線の円を 3 つ重ね、比較のポイントを短い言葉で入れる。 - **コラムバッジ**（`column-badge`）: 楕円の水色バッジに小さなコラムのラベルを入れ、横にドット柄を添える。 ## Do's and Don'ts **Do** - 章ごとに色を 1 色決め、エンブレム・見出し・番号をすべてその色でそろえる - 背景には水彩のにじみやドット柄を淡く入れて、手作りの温かみを出す - 手順はイラストで描き、写真より図で伝える - 本文は焦げ茶にして行間を広く取る - 人物は線画に淡い色を塗ったイラストで添える **Don't** - 純黒の文字や濃い色で塗った広い面を使わない - カードに強い影や立体的な装飾を付けない - 1 つの章で複数のテーマ色を混ぜない - 大きくて目立つ販売ボタンを並べて、読み物の雰囲気を壊さない - 角張った硬い書体を見出しに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品を飲むシーンとプロジェクトの世界観を伝える）: グラスの写真を水彩とドット柄で囲み、ひし形のロゴと手書き風の斜めのコピーを重ねる 2. **導入**（企画の趣旨と歴史を紹介する）: 白地に中央揃えの見出しと本文を置き、ピル型ボタンでメンバー紹介へ誘導する 3. **章ナビ**（4 つの章へ誘導する）: 4 色のひし形エンブレムを横並びにし、下に章の色で 2 行の説明を入れる 4. **豆知識（歴史）**（飲み物としての歴史を物語で伝える）: 生成り地の上の白カードに、写真とテキストを交互に配置する 5. **飲むと食べるの違い**（違いを 3 つのポイントで示す）: 人物イラストとリード文の下に、番号付きの円カードを 3 つ並べる 6. **比較**（似た商品との違いを図で説明する）: カード内でテキストを左に、3 つの円を重ねた図を右に置く 7. **目的別おすすめ商品**（目的に合う商品を紹介する）: ピンク地に商品パッケージを並べ、グラフ 2 点で根拠を示す 8. **作り方の選択**（道具ごとの作り方を選んでもらう）: 水色の章。導入文・注意帯・道具アイコン 4 つを並べる 9. **レシピ手順**（失敗しない手順を見せる）: 道具ごとに白カードを分け、イラストと手順を 4 段で並べる。動画枠とリンクボタンを添える 10. **コラム**（おすすめの組み合わせを提案する）: 楕円のバッジを付けたカードに文章を左、写真を右に置く 11. **楽しみ方シーン**（生活シーンでの飲み方を提案する）: 緑の章。シーンの写真・文・人物イラスト・筆記体の添え字をジグザグに配置する ## Imagery - 写真は自然光で撮り、明るい石目や布の背景に飲み物を置く - 手順は細い線画に淡い水彩風の色を塗ったイラストで描く - 人物は丸メガネなどを付けた、親しみのある線画イラストにする - 装飾には水彩のブルーやオレンジのにじみと、ドット柄の円を使う - 商品パッケージは切り抜いて、少し傾けて置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文を中央 約 75% 幅にまとめ、左右に水彩地を見せる - SP では章ナビを 2×2 のグリッドにする - SP ではエンブレムとリード見出しを縦に積み、エンブレムは 90px 程度にする - レシピ手順は SP でもイラストを左・テキストを右に置くが、イラストは幅 40% にする - 円カード 3 枚は SP では縦 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-d1a5808e`（元 LP の URL から採番） - **元 LP**: https://www.meiji.co.jp/learned/choco-drink/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（4/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。