--- version: alpha name: Warm Honey Amber Tea LP description: 生成りの地に琥珀・はちみつ色を重ね、実績パートは深紅と金で格を出す食品通販LP。明朝の大見出しと手描きイラストのレビューで、上品さと親しみを両立させている。 colors: primary: '#F8BE1E' background: '#FCFBF4' surface: '#FEFDFD' background-alt: '#F5EDCB' dark-section: '#A40102' secondary: '#54261A' text: '#2B1A12' accent-1: '#950203' cta: '#D4854B' on-cta: '#FEFEFE' accent-2: '#E494AA' accent-3: '#777955' tint-1: '#DAC5A2' primary-accessible: '#946E05' cta-accessible: '#AE622A' accent-3-accessible: '#767854' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Noto Sans JP fontSize: 36px fontWeight: 900 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Playfair Display fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hex-number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 64px gold-ribbon-stat: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 110px dark-heading-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 80px highlight-box: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 36px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 160px point-tag: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 30px price-set-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 120px recommend-ribbon: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px --- # DESIGN.md — はちみつ色と生成りの紅茶通販 LP（Warm Honey Amber Tea LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、上品・高級、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: はちみつ色・生成り・明朝の大見出し・深紅×金の実績・手描きイラスト・シズル写真 - **地の質感**: 和紙のような淡いクリーム地に、垂れるはちみつや光のボケを重ねた温かい質感 - **形**: 角丸カード、六角形の番号バッジ、金のリボン帯、角丸の色帯見出し - **温度感**: 暖色寄り。琥珀・オレンジ・焦げ茶が中心 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F8BE1E` | はちみつ色の帯・バッジ | 6% | 画素の実測 | | `background` | `#FCFBF4` | 生成りの基本地 | 20% | 画素の実測 | | `surface` | `#FEFDFD` | 白カード面 | 11% | 画素の実測 | | `background-alt` | `#F5EDCB` | 淡いクリーム帯 | 7% | 画素の主要色に補正 | | `dark-section` | `#A40102` | 実績・受賞の深紅背景 | 6% | 画素の実測 | | `secondary` | `#54261A` | 焦げ茶の見出し帯 | 5% | 画素の主要色に補正 | | `text` | `#2B1A12` | 見出し・本文の濃茶黒 | 3% | 推定 | | `accent-1` | `#950203` | 強調文字・数字の赤 | 2% | 画素の実測 | | `cta` | `#D4854B` | オレンジのラベル帯 | 4% | 画素の主要色に補正 | | `on-cta` | `#FEFEFE` | 帯上の白文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#E494AA` | ピンクの価格ラベル | 2% | 画素の実測 | | `accent-3` | `#777955` | オリーブ緑のポイント帯 | 3% | 画素の主要色に補正 | | `tint-1` | `#DAC5A2` | 砂色のカード縁・帯 | 5% | 画素の主要色に補正 | | `primary-accessible` | `#946E05` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#AE622A` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#767854` | AA を満たす補正値（計算） | | 計算 | - 基本地は生成り、カードは白で軽く浮かせる - 実績・受賞のみ深紅地に金と白で格を出す - はちみつ色は帯・バッジ・背景面に限定する - 強調語は赤文字＋下線、数字も赤で大きく - レビュー見出しは黄・橙・ピンク・緑で色分けする - 価格エリアは灰ベージュ地に白カード、ピンクのラベルで1袋単価を示す - `hex-number-badge` は文字 `#FEFEFE` × 背景 `#F8BE1E` のコントラスト比が 1.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#946E05`、4.64:1）を使う。 - `highlight-box` は文字 `#FEFEFE` × 背景 `#D4854B` のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AE622A`、4.55:1）を使う。 - `point-tag` は文字 `#FEFEFE` × 背景 `#777955` のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#767854`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの商品名 | 明朝 | Shippori Mincho | 800 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション大見出し・原料名 | 明朝 | Shippori Mincho | 700 | 32px | 1.35 | 0.08em | | `headline-md` | 帯内の見出し・小見出し | 明朝 | Noto Serif JP | 600 | 20px | 1.5 | 0.08em | | `headline-sm` | レビュー見出し・ラベル | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.4 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em | | `accent` | 実績数字・価格 | ゴシック | Noto Sans JP | 900 | 36px | 1.1 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | 英字見出し・ポイント番号 | 欧文セリフ | Playfair Display | 500 | 28px | 1.2 | 0.02em | - 見出しは明朝で字間を広めに取る - 本文はゴシック中太、中央揃えか左揃えで短く改行 - 実績数字と価格は極太ゴシックで単位だけ小さく - 強調語は色帯ボックスや赤字＋下線で囲む - 英字見出しはセリフ体を和文見出しの下に添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真＋本文の左右分割はカード内のみ - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは全幅の写真・色面で区切る - カードは画面端から約4%内側に置く - 原料紹介は写真見出し→白カード本文の順で繰り返す - 価格セットは縦に並べ、推奨セットの上にリボン見出しを置く ## Elevation & Depth - 白カードに薄い影（0 2px 8px rgba(0,0,0,.08)） - 実績カードは金リボンを重ねて立体感を出す - 割引バッジは赤の円・花形で写真に重ねる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の矩形、カード上部の写真は上角丸 - **セクション境界**: 直線の切り替え。一部カードは大きな角丸で地から浮かせる - 番号は六角形のはちみつ色バッジ - レビュー見出しは上辺が大きく丸いタブ形 - ラベルは角丸小の長方形帯 ## Components - **六角形番号バッジ**（`hex-number-badge`）: 原料番号や開発期間を示すはちみつ色の六角形 - **金リボン実績カード**（`gold-ribbon-stat`）: 金リボンのラベルと白カードに赤の大数字 - **焦げ茶見出し帯**（`dark-heading-band`）: 上角丸の焦げ茶帯に白い明朝見出し - **強調語ボックス**（`highlight-box`）: はちみつ色の帯に白文字、または白枠に橙文字で一語を強調 - **レビューカード**（`review-card`）: 色付きタブ見出し＋白本文、横に手描き人物と星評価 - **ポイントタグ**（`point-tag`）: オリーブ緑の小帯に欧文で番号 - **セット価格カード**（`price-set-card`）: セット名・送料無料タグ・大きな価格・ピンクの単価ラベル・赤い割引バッジ - **おすすめリボン**（`recommend-ribbon`）: 砂色の帯に王冠アイコンと推奨文 ## Do's and Don'ts **Do** - 地は生成りかクリームにして暖かさを保つ - 見出しは明朝で上品にし、レビューは丸ゴシックで親しみを出す - はちみつが垂れる・注がれるシズル写真を要所に入れる - 数字実績は赤の極太で大きく見せる - レビューは見出し色を交互に変え、人物イラストを左右交互に置く **Don't** - 青や寒色を主役にしない - 純黒の文字・背景は使わない - 深紅地を実績・受賞以外に広げない - 本文を長い段落にしない - 角のない無機質なカードだけで組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と甘さの印象を伝える）: 上部に垂れるはちみつ、明朝の商品名、商品パッケージと紅茶・はちみつの写真、縦帯コピーと実績メダル 2. **企業紹介**（産地と企業の信頼性）: 深紅地に茶畑写真付き白カード、赤字下線で強調 3. **販売実績・受賞**（社会的証明）: 金リボンの実績数字カード、深紅のカーテン風背景にトロフィーと利用者写真 4. **こだわり提起**（甘さの方向性を示す）: 注がれる紅茶の全幅写真、チェック付き枠で強調語 5. **理由の説明**（物足りなさへの先回り）: クリーム地に手描きイラスト、黒帯と黄帯で強調語 6. **原料紹介**（原料を3つ順に紹介）: 六角番号＋明朝大見出し付き写真、下に白カード本文と素材写真 7. **製法紹介**（製法の独自性）: 焦げ茶見出し帯、橙ラベル、欧文の頭文字強調 8. **その他の特長**（安心・便利さの補足）: ポイントタグ付きカードに商品写真 9. **お客様の声**（味の共感）: 欧文見出し、色違いタブのレビューカード4枚、イラストと星 10. **飲み方・注意事項**（使い方と注意）: はちみつ色地に白枠ボックスと橙見出しの注意カード 11. **再掲ビジュアル**（購入前の想起）: ファーストビューと同じ商品ビジュアル 12. **価格・セット選択**（まとめ買いへ誘導）: 灰ベージュ地にセット価格カードを縦並び、推奨リボンと割引バッジ ## Imagery - 暖色光で撮る紅茶とはちみつのシズル（注ぐ・垂らす） - 木目や白布のテーブル、ドライフラワー・黄色い花を添える - 背景をぼかした自然光のスタイリング - 線画に淡彩の手描き人物・ミツバチ・花イラスト - 深紅の布と金の紙吹雪で受賞演出 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はPCでも狭幅の1カラムなのでSPはそのまま縦積み - PCは中央に約720px幅で配置し左右は地色で埋める - 写真の左右分割カードはSPでも維持し、狭ければ写真を下へ - 大見出しはSPで32〜40px程度に縮める ## 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-1aa94bae`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/tea-life/96600-2/ - **解析に使った画像**: 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/）からご連絡ください。