--- version: alpha name: Terracotta Fermented Tea Supplement LP description: テラコッタ色と焦げ茶を軸に、金色の丸メダルや木目背景、黒板風の枠を組み合わせた美容サプリの縦長 LP。手書き文字の吹き出しや黄色マーカーで親しみを出しつつ、番号付きカードで成分を一つずつ説明していく訴求型の構成。 colors: primary: '#D5644A' dark-section: '#5D2C0D' background: '#FEFEFE' background-alt: '#F9F5F2' secondary: '#9E8364' accent-1: '#E3C399' text: '#3B1C09' text-body: '#414038' marker: '#F6E6A3' surface: '#FDF3DB' accent-2: '#2F2F2F' line: '#D9A595' on-primary: '#FEFAF3' primary-accessible: '#C64A2E' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 38px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Klee One fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Montserrat fontSize: 22px fontWeight: 700 lineHeight: 1.0 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ingredient-medal: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px ingredient-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 480px heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 90px handwritten-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 80px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 420px point-row: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px marker-text: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 24px trust-panel: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 520px --- # DESIGN.md — テラコッタ×木目の発酵茶サプリ LP（Terracotta Fermented Tea Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、ナチュラル、親しみ・手作り感、やさしい・柔らかい - **キーワード**: テラコッタ・焦げ茶・金メダル・木目・手書き吹き出し・黄色マーカー - **地の質感**: 木目の板、クリップボード、黒板、葉模様の地紋など、実物の素材感がある背景を多く重ねる - **形**: 円形メダルと円形の番号バッジ、細い二重線の白カード、角丸の白パネル - **温度感**: 暖色寄り。紅茶やはちみつのような温かみのあるオレンジブラウン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D5644A` | 見出し帯・番号バッジ・強調面のテラコッタ | 11% | 画素の実測 | | `dark-section` | `#5D2C0D` | 上部の帯・切り替えセクションの焦げ茶 | 6% | 画素の実測 | | `background` | `#FEFEFE` | 本文の白地 | 24% | 画素の実測 | | `background-alt` | `#F9F5F2` | 淡いグレーの区切り地 | 5% | 画素の実測 | | `secondary` | `#9E8364` | 木目背景の中間色 | 5% | 画素の主要色に補正 | | `accent-1` | `#E3C399` | 金色メダルの色 | 7% | 画素の主要色に補正 | | `text` | `#3B1C09` | 見出しの濃い茶黒 | 3% | 画素の実測 | | `text-body` | `#414038` | 本文の濃いグレー茶 | 3% | 画素の実測 | | `marker` | `#F6E6A3` | 強調語の下の黄色マーカー | 1% | 推定 | | `surface` | `#FDF3DB` | GMP 説明などのクリーム色ボックス | 2% | 画素の実測 | | `accent-2` | `#2F2F2F` | 黒板の暗いチャコール | 3% | 推定 | | `line` | `#D9A595` | カードの細い二重枠線 | 1% | 推定 | | `on-primary` | `#FEFAF3` | テラコッタ面上の白文字 | 1% | 画素の実測 | | `primary-accessible` | `#C64A2E` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレー。区切りにテラコッタの全幅帯を入れる - テラコッタは見出し帯・番号バッジ・強調語の文字色に使う - 焦げ茶はページ最上部の帯と商品登場前の切り替えに使う - 成分名は金色の丸メダルで見せ、色数を増やさない - 本文の強調は黄色マーカーかテラコッタ文字。両方を同時に使わない - 黒板パネルではテラコッタと黄色を差し色にする - `number-badge` は文字 `#FEFAF3` × 背景 `#D5644A` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C64A2E`、4.57:1）を使う。 - `heading-band` は文字 `#FEFAF3` × 背景 `#D5644A` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C64A2E`、4.57:1）を使う。 - `marker-text` は文字 `#D5644A` × 背景 `#F6E6A3` のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C64A2E`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー | ゴシック | Zen Kaku Gothic New | 900 | 38px | 1.25 | 0.02em | | `headline-lg` | セクションの大見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-md` | 成分カードの見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-sm` | カード内のまとめ文 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `accent` | 吹き出しの手書き文字・メダル内の明朝 | 手書き・筆 | Klee One | 600 | 18px | 1.4 | 0.02em | | `note` | 商標などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | 番号バッジ・POINT ラベル | 欧文サンセリフ | Montserrat | 700 | 22px | 1.0 | 0.0em | - 見出しは極太ゴシックで、一部の語だけテラコッタにする - 成分メダルの文字は明朝体（Shippori Mincho など）で上品に見せる - 悩みや気持ちを表す言葉は手書き体にし、吹き出しの中に置く - 本文は 14px、行間 1.8 で、1 段落 4〜6 行程度にする - 数字は大きくし、単位は小さくしてメリハリを付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内は写真と本文の 2 列を交互に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 成分カードは上辺中央に円形の番号バッジをはみ出して重ねる - カードの写真は左右を交互に入れ替える - 背景（木目・黒板）の上に白カードを浮かせ、外側に 16px ほど背景を見せる - メダルは 3〜4 列のグリッドで、下段を中央寄せにする - 全幅のテラコッタ帯で章を区切る ## Elevation & Depth - 白カードには薄いドロップシャドウ（0 2px 6px rgba(0,0,0,.15)） - 金メダルはグラデーションと影で立体的にする - クリップボードや黒板は実物の写真風で、奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 成分の写真は角丸なしの長方形。人物は背景を切り抜いて重ねる - **セクション境界**: 直線で切り替える。章の区切りは全幅の色帯 - 番号バッジと成分メダルは正円 - 成分カードは角丸なしで、内側に細い二重線の枠を付ける - 品質訴求のパネルは白地に 20px の角丸 - 吹き出しは手描き線の雲形にする ## Components - **金色成分メダル**（`ingredient-medal`）: 金色グラデーションの円の中に成分名を明朝で 2〜3 行入れる - **番号バッジ**（`number-badge`）: テラコッタの円に白い 2 桁の数字。カードの上辺に重ねる - **成分説明カード**（`ingredient-card`）: 木目の上に白カード。見出し、写真と本文、マーカー付きのまとめ文の順に並べる - **テラコッタ見出し帯**（`heading-band`）: 白い細枠が内側に入ったテラコッタの長方形に、白い見出しを入れる - **手書き吹き出し**（`handwritten-bubble`）: 雲形の線画吹き出しに手書き体で悩みを入れ、一部をテラコッタにする - **チェックシート**（`check-list`）: クリップボード上の紙に、チェックボックス付きの悩みを 4 項目並べる - **黒板 POINT 行**（`point-row`）: 黒板に白い円の POINT 番号を置き、右に白とテラコッタの文字を入れる - **黄色マーカー強調**（`marker-text`）: 強調語の下半分に黄色の帯を敷く - **品質訴求パネル**（`trust-panel`）: テラコッタ地に白い角丸パネル。大見出し、写真 3 枚、クリーム色の説明ボックスの順 ## Do's and Don'ts **Do** - 暖色の茶系とテラコッタで全体を統一する - 成分は番号付きカードで 1 つずつ説明する - 強調語には黄色マーカーかテラコッタ文字を使う - 木目や黒板など素材感のある背景を章ごとに変える - 人物は笑顔の女性を切り抜いて大きく配置する **Don't** - 寒色をメインに使わない - メダルを平面の単色にしない - カードに大きな角丸を付けない（成分カードは角丸なし） - 1 画面に強調色を 3 色以上混ぜない - 本文を中央揃えで長く組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（話題性と主な成分を一目で伝える）: 焦げ茶の細い帯、女性の写真、極太コピー、金メダル 3 つ、テラコッタの補足ラベル 2. **悩みの提起**（対象者に当てはまると感じてもらう）: クリップボードのチェックシートに悩みを 4 つ。困り顔の女性を添える 3. **素材の説明**（素材の概要を伝える）: テラコッタの葉模様の帯に写真、かぎ括弧付きの見出し、円形のスタンプ吹き出し 4. **栄養素の紹介**（含まれる栄養素を見せる）: 見出し帯付きの白カードに、銅色の丸メダル 7 個 5. **従来品の不満**（従来の形状の不便さを示す）: キャラクター化した瓶の周りに手書き吹き出しを 3 つ 6. **解決提案**（サプリ化を提案する）: 焦げ茶のグラデーション帯に白い見出し、女性と商品パッケージ、巨大なコピー 7. **配合成分一覧**（独自の配合を示す）: キラキラした背景に金メダルを 3 列×2 段 8. **成分の詳細**（成分ごとの根拠を説明する）: 木目の背景に番号付きの白カードを 01〜04。写真は左右交互、顕微鏡写真の比較図も入れる 9. **継続の訴求**（毎日続ける大切さを伝える）: テラコッタの全幅帯に、小さな英字筆記体と白い見出し 10. **ポイント**（サプリのメリットを 3 つ示す）: 木枠の黒板に POINT 01〜03 の円バッジと商品写真 11. **品質と価格**（安心感と価格の理由を伝える）: テラコッタ地に白い角丸パネルを 2 枚。国旗アイコン、工場写真、番号付きリスト 12. **クロージング**（ブランドの印象で締める）: 瓶とグラスの写真の上に、英字の大きなロゴ風文字と吹き出し ## Imagery - 明るい自然光の中で、ナチュラルメイクの女性が笑顔で写った写真 - 紅茶色の液体が入ったガラス瓶とグラスを逆光で撮り、琥珀色を見せる - 野菜・果物・粉末などの素材を俯瞰で寄って撮る - 木目の板、クリップボード、黒板など実物の素材を背景にする - 茶色の線の手描きイラストと吹き出し。瓶に顔を描いたゆるいキャラも使う - ソフトカプセルを艶のある琥珀色で添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版も中央 952px 前後の 1 カラムで、SP と同じ構成 - SP ではメダルを 3 列から 2〜3 列に縮め、径は 100px 前後にする - カード内の写真と本文の 2 列は、SP では写真を上に置く縦積みにしてもよい - FV の極太コピーは SP では 34〜38px に抑えて 3 行に収める - 背景の木目や黒板は SP でも左右に 12〜16px 見せる ## 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-39106c3d`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/oga/kb/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。