--- version: alpha name: Warm Cream Organic Tea LP description: 生成りクリームの地にオレンジと焦げ茶を合わせた、温かみのあるオーガニック茶の商品紹介LP。丸みのあるゴシック、黄色マーカー、不定形の写真切り抜き、リボン見出しで親しみやすさと信頼感を両立する。 colors: primary: '#ED8301' background: '#FCF3E3' background-alt: '#F3E8CA' surface: '#FEFEFC' text: '#5A3A2A' text-body: '#4A3A32' secondary: '#C9A24E' marker: '#F6EA70' line: '#EED2AB' accent-1: '#E46372' accent-2: '#9E1E22' tint-1: '#FFFFFF' on-primary: '#FFFFFF' primary-accessible: '#B06101' accent-1-accessible: '#DC3549' secondary-accessible: '#91712C' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 52px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Quicksand fontSize: 32px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Maru Gothic fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Pacifico fontSize: 28px fontWeight: 400 lineHeight: 1.1 rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 44px check-number: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 56px feature-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 28px marker-text: backgroundColor: '{colors.marker}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 22px review-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 60px cert-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 56px faq-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 150px howto-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 30px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — 生成り×オレンジの自然派お茶 LP（Warm Cream Organic Tea LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、やさしい・柔らかい、信頼・誠実、親しみ・手作り感 - **キーワード**: 生成り・オレンジ・焦げ茶・黄色マーカー・有機・自然・不定形切り抜き - **地の質感**: マットな無地クリーム面。写真は自然光の温かい色調で、面はフラット。 - **形**: 角丸カード、ブロブ形の写真マスク、両端が切れ込んだリボン帯、波形のセクション境界。 - **温度感**: 暖色寄り。紅茶色とベージュで穏やか。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#ED8301` | ブランドオレンジ（見出し・番号・リボン） | 8% | 画素の実測 | | `background` | `#FCF3E3` | メインの生成り地 | 40% | 画素の実測 | | `background-alt` | `#F3E8CA` | FV・導入部のベージュ地 | 18% | 画素の実測 | | `surface` | `#FEFEFC` | FAQ回答・カード面 | 14% | 画素の実測 | | `text` | `#5A3A2A` | 見出しの焦げ茶 | 3% | 推定 | | `text-body` | `#4A3A32` | 本文テキスト | 4% | 推定 | | `secondary` | `#C9A24E` | 認証帯のゴールド | 2% | 推定 | | `marker` | `#F6EA70` | 本文強調の黄色マーカー | 2% | 画素の主要色に補正 | | `line` | `#EED2AB` | 見出し下の細線・タグ枠 | 0% | 画素の主要色に補正 | | `accent-1` | `#E46372` | 高評価バッジのピンク | 0% | 画素の実測 | | `accent-2` | `#9E1E22` | 実績リボンの深紅 | 0% | 推定 | | `tint-1` | `#FFFFFF` | FAQ周辺の薄グレー地 | 5% | 画素の実測 | | `on-primary` | `#FFFFFF` | オレンジ上の白文字 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#B06101` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#DC3549` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#91712C` | AA を満たす補正値（計算） | | 計算 | - 地は生成り〜ベージュを基本にし、白はカードとFAQ回答だけに使う - オレンジは見出しリボン・CHECK番号・FAQ質問帯などの強調だけに使う - 見出しと本文は黒でなく焦げ茶にする - 本文の要点は黄色マーカーで1段落1〜2か所だけ強調する - ピンク・深紅は実績バッジに限定する - 写真は紅茶色の暖色トーンにそろえる - `ribbon-heading` は文字 `#FFFFFF` × 背景 `#ED8301` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B06101`、4.61:1）を使う。 - `review-badge` は文字 `#FFFFFF` × 背景 `#E46372` のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DC3549`、4.52:1）を使う。 - `cert-banner` は文字 `#FFFFFF` × 背景 `#C9A24E` のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#91712C`、4.56:1）を使う。 - `faq-card` は文字 `#FFFFFF` × 背景 `#ED8301` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B06101`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの実績数字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 52px | 1.1 | 0.0em | | `headline-lg` | 英字ロゴ風の大見出し | 欧文サンセリフ | Quicksand | 700 | 32px | 1.2 | 0.02em | | `headline-md` | CHECK項目の見出し | 丸ゴシック | Zen Maru Gothic | 700 | 19px | 1.5 | 0.03em | | `headline-sm` | リボン見出し・FAQ質問 | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.4 | 0.05em | | `body-md` | 本文 | 丸ゴシック | Zen Maru Gothic | 500 | 15px | 1.9 | 0.08em | | `note` | 集計期間などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 筆記体の欧文あしらい・CHECK英字 | 欧文スクリプト | Pacifico | 400 | 28px | 1.1 | 0.0em | - 和文は丸ゴシックで統一し、柔らかい印象にする - 本文は字間を広めにし、行間1.8以上にする - CHECK番号はオレンジの太い欧文と数字を縦に積む - 筆記体の欧文は見出しの添え物として斜めに置く - 背景に薄い大きな英字を透かしで置いてよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と短文の横並びだけ 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - CHECK項目は番号＋見出し→細線→本文→角丸写真の順にする - 淹れ方は円形写真と文を左右交互に並べる - FAQは縦に積み、カード間は16px - 見出し下に細線を全幅で引く ## Elevation & Depth - 影はほぼ使わず、フラットな面で構成する - FAQカードはオレンジの枠と面で区切り、影はつけない - 商品写真だけ自然な接地影を入れる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸長方形・円形・不定形ブロブの3種 - **セクション境界**: ゆるい波形カーブ、直線の色切り替えも併用 - 特長タグは細枠の角丸ピルにする - リボン見出しは両端に切れ込み付きの折り返しをつける - 写真ブロブは2枚をずらして重ねる ## Components - **リボン見出し**（`ribbon-heading`）: オレンジの帯に白文字。両端が切れ込んだ折り返し付き - **CHECK番号見出し**（`check-number`）: オレンジの英字と大きな数字を左に置き、右に焦げ茶の2行見出し - **特長タグ**（`feature-tag`）: 細い枠の角丸ピルで特長語を2列に並べる - **黄色マーカー強調**（`marker-text`）: 本文の要点に黄色の塗りマーカーを敷く - **評価バッジ**（`review-badge`）: ピンクの吹き出し型バッジに白文字と星 - **認証帯**（`cert-banner`）: ゴールドの全幅リボンに認証マークと明朝体文字 - **FAQカード**（`faq-card`）: オレンジの枠と質問帯、内側に白い回答面。Q/Aは大きな細字 - **淹れ方ラベル**（`howto-label`）: 細線枠の角丸ラベルに焦げ茶の太字。円形写真と組む - **吹き出し**（`speech-bubble`）: 白い角丸吹き出しに短い一言。追加の特長を導く ## Do's and Don'ts **Do** - 生成りの地とオレンジ・焦げ茶の3色を軸にする - 写真は不定形や円形で柔らかく切り抜く - CHECK番号で特長を順番に見せる - 本文の要点は黄色マーカーで示す - 余白を広めにとってゆったり読ませる **Don't** - 純黒の文字や寒色の大面積を使わない - 鋭い角や強い影を多用しない - マーカーを1段落に3か所以上使わない - オレンジを本文色に使わない - 写真を青白いトーンで加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（販売実績と商品を一目で伝える）: 月桂樹で挟んだ大きなオレンジ数字、評価バッジ、ベージュ地に商品とお茶の写真 2. **商品名と特長タグ**（商品の特徴を短い言葉で示す）: 筆記体欧文＋大きな英字ロゴ、オレンジの和文サブ、ピルタグを4つ 3. **認証訴求**（品質の裏付けを示す）: ゴールドの全幅リボンに認証マーク 4. **コンセプト説明**（オーガニックの意味を伝える）: ブロブ写真2枚、透かし英字、下線付き見出し、マーカー付き本文 5. **実績写真**（継続実績を示す）: 全幅写真に深紅の縦リボンバッジ、下端は波形 6. **特長**（4つの特長を順に説明）: CHECK番号見出し、細線、本文、角丸写真またはブロブ写真 7. **おすすめの飲み方**（淹れ方を3通り案内）: リボン見出し、枠ラベルと短文、円形写真を左右交互に配置 8. **よくある質問**（不安を解消する）: オレンジ枠のFAQカードを4つ縦に並べる ## Imagery - 紅茶色の液体が映えるガラスの器を自然光で撮る - 茶葉を手のひらにのせた手元カットを不定形に切り抜く - 産地の草原や農園を青空とあわせて明るく撮る - 検査風景や書類で品質の裏付けを見せる - 差し色に手描き風の短い放射線を入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はSP幅相当の1カラムで、PCでも中央の狭い幅のまま表示する - PCでは左右の余白に地色を延長する - SPでは本文15px・左右余白6%を目安にする - 淹れ方の横並びはSPでも写真40%と文60%を保つ ## 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-6e975f92`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/tea-life/90794/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。