--- version: alpha name: Citrus Orange Botanical Hand Cream LP description: オレンジのグラデーション帯と明朝体の大見出しを組み合わせた、やさしく上品なハンドクリームLP。白〜淡いグレーと生成りの地に、柑橘・植物の写真やオイルの雫を添えている。成分は丸い光彩バッジと図解で見せる。 colors: primary: '#D55822' accent-1: '#FFEA29' background: '#FEFEFD' background-alt: '#FEFBED' tint-1: '#FCEBCF' tint-2: '#DBE1E6' accent-2: '#D46C49' text: '#3A2E28' secondary: '#21482F' dark-section: '#4A2E1B' line: '#B4BBA7' accent-3: '#7A8862' marker: '#F4EA02' typography: display: fontFamily: Shippori Mincho fontSize: 52px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Klee One fontSize: 18px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 24px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' limited-banner: backgroundColor: '{colors.primary}' typography: '{typography.display}' height: 66px point-heading: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 110px ingredient-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px concern-checklist: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px drop-stat: textColor: '{colors.accent-2}' typography: '{typography.display}' height: 160px ingredient-card: backgroundColor: '{colors.background}' typography: '{typography.body-md}' height: 480px material-grid: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px staff-message: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px vertical-marker-copy: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 400px --- # DESIGN.md — 柑橘オレンジ×明朝の植物系ハンドクリームLP（Citrus Orange Botanical Hand Cream LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、上品・高級、ナチュラル、情報量多め・訴求型 - **キーワード**: 柑橘オレンジ・明朝の大見出し・植物オイル・光彩バッジ・肌断面の図解 - **地の質感**: 柔らかい光とボケを入れた写真、淡いグラデーション地、泡や雫のきらめき - **形**: 角の立った白カード、丸い光彩バッジ、オレンジの全幅帯 - **温度感**: 暖色寄り。オレンジと生成りが温かく、白グレーで清潔感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D55822` | Point見出し帯・限定帯のオレンジ | 8% | 画素の主要色に補正 | | `accent-1` | `#FFEA29` | Pointラベルの黄色手書き文字・縦帯 | 1% | 画素の実測 | | `background` | `#FEFEFD` | 本文カードと白地 | 17% | 画素の実測 | | `background-alt` | `#FEFBED` | 生成り寄りのセクション地 | 7% | 画素の実測 | | `tint-1` | `#FCEBCF` | 開発者メッセージ・成分セクションの淡いクリーム地 | 7% | 画素の実測 | | `tint-2` | `#DBE1E6` | FV・悩み部分の淡い青グレー地 | 12% | 画素の実測 | | `accent-2` | `#D46C49` | FVキャッチ・成分名のオレンジ文字 | 2% | 画素の実測 | | `text` | `#3A2E28` | 明朝見出し・本文の濃い焦げ茶 | 3% | 推定 | | `secondary` | `#21482F` | クロージングのキャッチの深緑 | 1% | 画素の実測 | | `dark-section` | `#4A2E1B` | 限定数量の焦げ茶ラベル | 1% | 画素の実測 | | `line` | `#B4BBA7` | 悩み見出しの下線・区切り線 | 1% | 画素の主要色に補正 | | `accent-3` | `#7A8862` | 箇条書きの丸点・チェックのオリーブ | 1% | 画素の主要色に補正 | | `marker` | `#F4EA02` | 縦書きキャッチのイエローマーカー | 1% | 画素の実測 | - 地は白・青グレー・生成りの3系統を、セクションごとに切り替える - Point見出しはオレンジのグラデーション帯に白抜きの明朝で置き、黄色の手書き文字ラベルを上に重ねる - 強調する本文や成分名はオレンジ文字。太字は使いすぎない - 数値の訴求は金色の雫アイコンの上に赤〜オレンジの大きなセリフ数字で置く - クロージングでは深緑の明朝と焦げ茶ラベルを使い、FVと色を変えて落ち着かせる - 注釈は小さめのグレー文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVやクロージングの大キャッチ | 明朝 | Shippori Mincho | 600 | 52px | 1.25 | 0.02em | | `headline-lg` | 成分名の大見出し | 明朝 | Shippori Mincho | 500 | 36px | 1.3 | 0.04em | | `headline-md` | オレンジ帯の中のPoint見出し | 明朝 | Noto Serif JP | 600 | 26px | 1.4 | 0.04em | | `headline-sm` | 悩み見出し・小見出し | ゴシック | Noto Sans JP | 500 | 20px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | Point番号ラベル・手書き風のリード文 | 手書き・筆 | Klee One | 600 | 18px | 1.2 | 0.02em | | `label-button` | 限定帯・ラベルの太字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.05em | - キャッチと見出しは明朝、本文と注釈はゴシックで役割を分ける - キャッチは大きな文字の間に小さい助詞を挟み、文字サイズに強弱をつける - 数字は欧文セリフで大きくし、単位と%は小さくする - 成分名の右肩に※番号を小さく付け、注釈をカードの下にまとめる - 縦書きのキャッチはイエローマーカーを敷いて使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。素材紹介のみ 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算） - Point見出しは全幅のオレンジ帯にし、高さはおよそ 110px - 成分の説明は左右に余白をとった白カードに入れ、カード同士は 16px 空ける - 写真は全幅で敷き、その上に文字やバッジを重ねる - 注釈はカード内の最下部に左寄せで置く ## Elevation & Depth - 白カードには影をほぼ付けず、地色との差で浮かせる - 丸い成分バッジはピンクベージュの光彩グラデーションと内側のハイライトで立体的にする - キャッチの白文字には柔らかな白いグローを付けて、写真から浮かせる ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の角写真のほか、素材写真は円形切り抜きや小さな角写真にする - **セクション境界**: 直線で切り替え、オレンジ帯の上下だけグラデーションの帯を挟む - カードは角丸なしの矩形 - 成分バッジは楕円か正円で、光沢感を出す - 図解の矢印と帯は直線的にする ## Components - **数量限定帯**（`limited-banner`）: ページ最上部の全幅オレンジ帯。白文字のラベルに大きなセリフ数字を組み合わせる - **Point見出し帯**（`point-heading`）: オレンジのグラデーション帯。上に黄色の手書き風Point番号、下に白の明朝2行見出し - **成分光彩バッジ**（`ingredient-badge`）: 淡いピンクベージュの丸に、明朝の成分名と※注記を入れる - **悩みチェックリスト**（`concern-checklist`）: 白カードの中に、チェックアイコン付きのかぎ括弧付きの悩みを4つ並べ、右下に悩む女性のイラストを置く - **雫型数値バッジ**（`drop-stat`）: 金色のオイル雫の上に、成分比率の大きな数字を置く - **成分解説カード**（`ingredient-card`）: 白カードに、明朝の大見出し、肌断面の図解、本文、注釈を順に積む - **素材グリッド**（`material-grid`）: 素材の写真を2列で並べ、下に太字の名前と括弧書きの表示名を添える - **開発者メッセージ**（`staff-message`）: クリーム地に、丸い人物写真と名札ラベル、オリーブの丸点の箇条書きを置く - **縦書きマーカーコピー**（`vertical-marker-copy`）: 黄色のマーカーを敷いた縦書きの明朝キャッチ ## Do's and Don'ts **Do** - 見出しは明朝で大きく、ゆったり組む - 柑橘・葉・花・オイルの写真を四隅に散らして香りを感じさせる - 成分には※番号を付け、注釈はカード下にまとめる - Point番号を付けて特長を3つ程度に分ける - 成分の働きは肌断面のイラストと矢印で図解する **Don't** - ビビッドな原色や黒ベタを多用しない - カードに強い影や大きな角丸を付けない - 見出しをゴシックの極太体にしない - オレンジを本文の地色に広く使わない（帯と強調だけにする） - 注釈を省いて効能を断定する表現にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（質感のベネフィットと限定性を伝える）: 上にオレンジの限定帯。手元をケアする女性の写真に、縦書きの明朝コピーとオレンジの大キャッチを重ねる 2. **商品紹介**（商品名と天然由来比率を示す）: 商品名ロゴの横に雫型の数値バッジ、右にチューブの切り抜き写真 3. **悩みの提起**（使用前の不安に共感する）: 白カードにチェックリストを4項目並べ、悩む女性のイラストを添える 4. **開発者メッセージ**（悩みへの解決姿勢を示す）: クリーム地に、下線付きの見出し、箇条書き、スタッフの丸写真 5. **特長1**（テクスチャと処方を説明する）: Point帯の下に手の写真。成分の光彩バッジを重ね、本文を続ける 6. **特長2**（配合オイルを紹介する）: 緑の茶葉写真を背景に白カードを置く。円形のオイル写真と素材グリッドを並べる 7. **数値訴求**（天然由来比率を強調する）: 暗い緑の写真の上に、白の大きなセリフ数字 8. **特長3**（エイジングケア成分を解説する）: 生成り〜黄色のグラデーション地に、成分ごとの白カードを縦に積み、図解を入れる 9. **香り**（家族で使える香りを伝える）: 母子の写真に、金縁の丸い香りバッジと柑橘・花の切り抜きを添える 10. **クロージング**（FVの訴求を繰り返して締める）: 淡いグレーの地に、焦げ茶の限定ラベル、深緑の明朝キャッチ、商品写真、縦書きのマーカーコピー ## Imagery - 自然光で撮った、柔らかく明るい女性の手元・横顔の写真。白いレースの服 - 柑橘の断面、葉、小花を画面の端に散らした切り抜き素材 - 金色のオイルが垂れる様子や蜂の巣など、素材のクローズアップ写真 - 肌の層をパステルのオレンジとピンクで描いた断面図と矢印 - 泡・水滴・きらめきの光の粒を背景に浮かべる - 人物は線画風のやさしいイラストで悩みを表現する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版は確認できないため推奨。中央に 750px 程度の SP デザインを置き、左右には淡いグレーの地を広げる - オレンジのPoint帯は全幅のまま伸ばし、見出しは中央寄せにする - 素材グリッドは PC で 4 列にする - FV の写真は横長に切り直し、キャッチを右側に配置する ## 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-816904e0`（元 LP の URL から採番） - **元 LP**: https://www.tealife.co.jp/products/detail/14210/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。