--- version: alpha name: Dark Botanical Aroma Chocolate LP description: チャコールグレーの地に、木目の背景、深いオリーブグリーンと焦げ茶の帯をはさむ、落ち着いた大人向けのチョコレート LP。字間を広くとった明朝体の見出しと、全幅の生活シーン写真で香りと植物の物語を伝える。後半は生成りの地に線画アイコンを並べ、配送・保存の注意を整理している。 colors: primary: '#323232' dark-section: '#44403D' surface: '#343031' secondary: '#5E6D4A' accent-1: '#605342' background: '#FFFFFF' background-alt: '#FFFFFF' tint-1: '#E5DECD' accent-2: '#86A374' accent-3: '#DCC55C' marker: '#C4A273' line: '#CACCCB' text: '#323232' on-dark: '#FCFCFC' typography: display: fontFamily: Cormorant Garamond fontSize: 46px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em headline-sm: fontFamily: Montserrat fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.15em body-lg: fontFamily: Shippori Mincho fontSize: 13px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Klee One fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em rounded: sm: 0px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' card-feature: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 320px heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 80px label-number: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.note}' height: 20px box-glossary: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 90px flavor-spec: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 115px badge-circle: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px cert-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 60px notice-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px heading-notice: textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 40px --- # DESIGN.md — チャコール×木目×深緑のボタニカル菓子 LP（Dark Botanical Aroma Chocolate LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、ナチュラル、ラグジュアリー・ダーク - **キーワード**: チャコール地・木目テクスチャ・ボタニカル・広い字間の明朝・全幅写真・くすみカラー - **地の質感**: マットなチャコールの地。木目板の写真背景や植物パウダーの粒子、うっすら透ける工場写真を重ねて質感を出す。 - **形**: 角丸なしの四角が基本。白カードの見出しは黒い帯で角からはみ出させる。素材写真は正円に切り抜く。 - **温度感**: やや暖かく落ち着いた温度。暗い地に白文字を置き、静かな高級感を出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#323232` | メインの暗い地（チャコール） | 18% | 画素の実測 | | `dark-section` | `#44403D` | 商品詳細の暖かいダークグレー地 | 10% | 画素の実測 | | `surface` | `#343031` | フレーバー説明の内側ボックス | 3% | 画素の実測 | | `secondary` | `#5E6D4A` | ブランド紹介の深いオリーブグリーン地 | 8% | 画素の実測 | | `accent-1` | `#605342` | メーカー紹介の焦げ茶の帯 | 7% | 画素の実測 | | `background` | `#FFFFFF` | 注意事項エリアの白地 | 14% | 画素の実測 | | `background-alt` | `#FFFFFF` | 注意事項の生成りの帯 | 8% | 画素の実測 | | `tint-1` | `#E5DECD` | 用語解説のベージュボックス | 1% | 画素の実測 | | `accent-2` | `#86A374` | 番号ラベルのくすんだ緑 | 0% | 画素の実測 | | `accent-3` | `#DCC55C` | 番号ラベルのからし色 | 0% | 画素の実測 | | `marker` | `#C4A273` | 注意事項の大見出しの金茶文字 | 0% | 推定 | | `line` | `#CACCCB` | 注釈の帯と区切り線のグレー | 2% | 画素の実測 | | `text` | `#323232` | 明るい地の本文 | 1% | 画素の主要色に補正 | | `on-dark` | `#FCFCFC` | 暗い地の白文字 | 1% | 画素の実測 | - ページ前半から中盤はチャコールの地が基本。セクションの切り替えに深緑・焦げ茶・木目をはさむ。 - 暗い地の文字はすべてオフホワイトにする。純色の強調色は使わない。 - 番号ラベルには、くすんだ緑・からし色・グレージュをセクションごとに変えて使う。 - 商品そのものの青とピンクは写真と商品イラストだけに出す。UI の色には使わない。 - 注意事項エリアは白と生成りを交互に敷き、明るく実務的に見せる。 - 注意事項の大見出しにだけ金茶を使い、ページ後半の目印にする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの欧文ロゴ風タイトル | 欧文セリフ | Cormorant Garamond | 500 | 46px | 1.1 | 0.08em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 500 | 28px | 1.6 | 0.2em | | `headline-md` | カードの見出しと小見出し | 明朝 | Shippori Mincho | 500 | 20px | 1.5 | 0.15em | | `headline-sm` | フレーバー名などの欧文見出し | 欧文サンセリフ | Montserrat | 500 | 18px | 1.3 | 0.15em | | `body-lg` | 写真に重ねるリード文 | 明朝 | Shippori Mincho | 400 | 13px | 2.2 | 0.15em | | `body-md` | 説明の本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.05em | | `accent` | 手書き風の小さな導入見出し | 手書き・筆 | Klee One | 400 | 14px | 1.4 | 0.1em | | `note` | 注釈と規格表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.7 | 0.03em | - 見出しは明朝体で字間を 0.15〜0.2em に広げる。中央揃えにし、2 行に分ける。 - 本文は小さめのゴシック体で、行間を約 1.9 に広くとる。 - フレーバー名は欧文大文字の見出しを置き、その下にカナ読みを添える。 - 写真の上の文字は白い明朝体にし、薄い影で読ませる。 - 太字は小見出しとラベルだけに使う。本文では使わない。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。説明は写真とテキストを左右 2 列に並べ、左右を交互に入れ替える。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 全幅写真とテキストの帯を交互に重ねる。 - 白カードは左右 6% の余白をとり、木目の背景の上に浮かせる。 - 写真は端まで裁ち落とし、テキスト側にだけ余白を残す。 - 注意事項は、中央の小見出し → 生成りの帯（左にアイコン、右に本文）の繰り返しで組む。 ## Elevation & Depth - 影はほぼ使わない。色の面の差で階層を出す。 - 白カードは木目の上に平置きし、影はごく薄くつけるか、つけない。 - 品質管理のボックスは、半透明の白を写真の上に重ねる。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真の多くは四角の裁ち落とし。素材写真は正円で 2 つ並べる。 - **セクション境界**: 直線で切り替える。斜めや波形は使わない。 - カードとラベルは角丸なしにする。 - 品質管理のポイントは、細い線の正円で 3 つ並べる。 - 見出しの黒帯はカードの左上か右上の角にずらして重ねる。 ## Components - **特長カード**（`card-feature`）: 木目の上の白カード。角に黒帯の見出しをはみ出させ、番号ラベル・本文・写真を 2 列に並べる。 - **黒帯見出し**（`heading-band`）: チャコールの帯に白い明朝体を 2 行で置く。カードの角に重ねる。 - **番号ラベル**（`label-number`）: くすんだ色の細い帯に「01. 名前」の形で書く。セクションごとに色を変える。 - **用語解説ボックス**（`box-glossary`）: ベージュの面に、太字の中央見出し・小さな本文・右側の小さな写真を置く。 - **フレーバー説明ボックス**（`flavor-spec`）: 暗い面の左に、項目名・下線・名称・説明を中央揃えで書く。右には正円写真を 2 つ重ねる。 - **品質ポイントの円**（`badge-circle`）: 細い線の正円の中に 2 行の短い言葉を入れ、3 つ並べる。 - **認証表示の枠**（`cert-box`）: 暗い地に細い白線の枠。認証名とマークを横に 2 つ並べる。 - **注意事項の行**（`notice-row`）: 生成りの帯の左に、白い四角に入れた線画アイコンを置き、右に本文を書く。下にグレーの補足帯を付ける。 - **罫線つきの大見出し**（`heading-notice`）: 金茶の明朝体を中央に置き、左右に細い横線を添える。 ## Do's and Don'ts **Do** - 見出しは明朝体で字間を広くとり、静かに見せる。 - 暗い地・木目・深緑・焦げ茶をセクションごとに切り替え、変化をつける。 - 商品の色は写真で見せ、UI はくすんだ色でまとめる。 - 素材や原料は正円の写真で見せる。 - 注意事項は線画アイコンで統一する。 **Don't** - 彩度の高い赤や黄色のボタンを置かない。 - 丸ゴシックやポップな書体を使わない。 - ボタンや大きな角丸のカードを多用しない。 - 強いドロップシャドウやグラデーションの装飾を使わない。 - 本文を大きくしすぎない。行間を詰めない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と内容量を示す）: 木のテーブルに商品と菓子を置いた写真。上部にコラボのロゴを並べ、下部に欧文セリフの大きなタイトルと線枠の内容量表記を置く。 2. **コンセプト**（商品の価値を短く伝える）: チャコールの地に、2 行の明朝見出しと中央揃えの 3 行リード文を置く。 3. **利用シーン**（日常で楽しむ姿を想起させる）: 人物と食卓の全幅写真に、白い明朝体のリード文を重ねる。 4. **特長**（こだわりを 3 つ示す）: 木目の背景に白カードを 3 枚置く。黒帯の見出し、番号ラベル、写真で構成する。 5. **商品バリエーション**（2 種類の味の違いを説明する）: 全幅の食材写真の後、暗い地に欧文見出し・商品画像・説明・フレーバー説明ボックス 2 つを置く。これを 2 種類分繰り返す。 6. **ブランド紹介**（原料ブランドの信頼性を示す）: 深緑の地に、写真とテキストの 2 列と中央の大見出しを置く。 7. **作り手紹介**（職人の想いを伝える）: 焦げ茶の帯に、モノクロの人物写真・ロゴ・肩書き・本文を置く。 8. **品質管理**（安心感を与える）: 工場写真の上に半透明の白ボックスを重ね、中に正円のポイントを 3 つ並べる。 9. **原料の説明**（天然色素の根拠を示す）: 暗い地で、植物写真と説明を左右交互に並べる。最後に認証表示の枠を置く。 10. **締めのビジュアル**（購買意欲を高める）: 植物に囲まれた商品写真に、白い明朝体の 2 行コピーを重ねる。 11. **商品仕様**（内容・サイズ・付属品を伝える）: 木目の上に商品の真上写真。下に白地の仕様テキストと紙袋写真を 2 列で並べる。 12. **配送・商品の注意事項**（購入前の確認を促す）: チャコールの帯の見出しの後、罫線つきの大見出しとアイコン付きの生成りの行を繰り返す。 ## Imagery - 木のテーブルに自然光を当て、陶器の皿と菓子を置いたライフスタイル写真。 - 柑橘・花・ハーブなどの素材を、暗い背景で俯瞰して撮る。 - 植物のパウダーを散らして、粒子の質感を見せる。 - 人物は柔らかい逆光の中で笑顔を写す。作り手はモノクロにする。 - パッケージは植物と鳥を描いた手描きのボタニカルイラスト。 - 注意事項のアイコンは黒の細い線画で描く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅 860〜1000px の画像列を置き、左右の余白は暗い色で埋める。 - PC では 2 列の写真とテキストの比率を保ったまま余白を広げる。 - PC では見出しを 36px 前後まで大きくし、字間は同じに保つ。 - 特長カードは PC で横幅 80% に収める。 ## 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-ecd09bb8`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/agri-life/aromapp08p/?l-id=shoptop_widget_featured_items/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。