生成り×カカオ茶の機能性素材 LP

Warm Cacao Brown Research Ingredient LP

生成りの布目テクスチャを地に、濃いカカオブラウンの帯と白カードで研究データを見せる BtoB 向けの素材紹介 LP。ゴシック体を落ち着いた茶色で組み、グラフを整然と並べて信頼感を出す。

BtoB・SaaS・ITサービス信頼・誠実ナチュラル上品・高級情報量多め・訴求型SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は生成りの布目テクスチャで全体を統一する
濃いカカオブラウンはヒーロー下帯と機能性セクション上部の帯にだけ使う
データは必ず白カードに載せ、生成り地との段差で区切る
見出し・本文は黒でなく茶系で組む
黄土茶はFEATURE番号・英字ラベル・主ボタン・棒グラフの強調に限定
グラフの赤青はデータ比較専用で装飾に使わない

TYPOGRAPHY

書体

displayヒーローの素材名ゴシック／ Noto Sans JP 500 ／ 24px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出しゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

accent見出し上の英字ラベル・FEATURE表記欧文サンセリフ／ Open Sans 700 ／ 9px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm機能性カードの小見出しゴシック／ Noto Sans JP 700 ／ 11px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文・説明文ゴシック／ Noto Sans JP 400 ／ 9px ／行間 2.0

あなたの LP を、もっと伝わる形に。Aa 123

note出典・文献表記ゴシック／ Noto Sans JP 400 ／ 7px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンラベルゴシック／ Noto Sans JP 700 ／ 11px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-lgリード文（中央揃え）ゴシック／ Noto Sans JP 400 ／ 10px ／行間 2.1

あなたの LP を、もっと伝わる形に。Aa 123

見出しは英字小ラベル→細い二重線→日本語見出しの3段で中央揃え
帯見出しの下に大きな英字を半透明で重ねる
本文は小さめ・行間広めで研究文書らしく
出典は本文より一段小さく茶系で添える
FEATURE番号は英字小+数字大の組み合わせ

PAGE STRUCTURE

セクション構成

ヘッダーメニュー導線生成り地に右上の英字MENUと二本線アイコンだけ
ファーストビュー素材の印象づけ原料写真を全幅に置き、下に濃茶帯で説明と素材名、縦書きSCROLL
素材の説明素材の概要を伝える英字ラベル付き見出しと中央揃えリード、左右に豆の切り抜き
機能性の導入機能の数を示す濃茶帯に白見出しと半透明大英字、カードが帯に食い込む
機能性 1〜3研究データで根拠を示す白カードに番号・小見出し・本文・出典・複数グラフを縦積み
原料紹介原料の形状を伝える白い大きな半円の中に原料種別と線画アイコン
CTA規格確認と問い合わせ黄土茶と濃茶の横長ボタンを2段
フッター補助リンクと企業表記茶文字のリンク縦並び、企業ロゴ、コピーライト、縦書きPAGE TOP

COMPONENTS

部品

主ボタン（製品規格） button-primary黄土茶の横長矩形、中央白文字、右端に＞
サブボタン（問い合わせ） button-secondary濃茶の横長矩形、主ボタンと同形で縦に並べる
英字ラベル付き見出し section-heading黄土の英字小ラベル、細線、茶の日本語見出しを中央に積む
機能性カード feature-card白地カード。左上に淡黄の四分円とFEATURE番号、小見出し・本文・出典・グラフ
グラフ枠 chart-frame細いベージュ線の枠に茶色タイトルのグラフを収める
茶色帯見出し brown-band濃茶の帯に白見出しと半透明の大英字、上部にカカオ実のアイコン
ヒーロー下帯 hero-caption写真下端に濃茶帯を重ね、白文字で説明と素材名
出典注記 source-note本文下に小さく文献情報を添える

守ること

地は必ず生成りの布目テクスチャにする
データは白カード＋細線枠で整然と並べる
見出しは英字ラベルと日本語の2段で組む
カカオ豆の切り抜きを画面端に散らす
文字色は茶系で統一する

DON'T

避けること

純黒の文字や背景を使わない
ボタンやカードを角丸にしない
ビビッドな色を装飾に使わない
グラフを枠なしで地に直接置かない
派手なバッジや煽り表現を入れない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 生成り×カカオ茶の機能性素材 LP（Warm Cacao Brown Research Ingredient LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

業種: BtoB・SaaS・ITサービス／ 雰囲気: 信頼・誠実、ナチュラル、上品・高級、情報量多め・訴求型
キーワード: カカオブラウン・生成り布目・研究データ・白カード・英字ラベル
地の質感: 生成りの紙・布のような細かい布目テクスチャを全体の地に敷く
形: ほぼ角のない四角い白カードと横長ボタン。カード左上に淡い円形の装飾、原料セクションに大きな半円
温度感: 暖色寄り。茶とベージュで温かく落ち着いた印象

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#633422`	濃いカカオブラウンの帯・見出し文字	7%	画素の実測
`background`	`#F2ECDD`	生成りの布目地	30%	画素の実測
`surface`	`#FFFFFF`	データを載せる白カード	45%	画素の実測
`cta`	`#A16B13`	製品規格ボタンの黄土茶	0%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の白文字	0%	画素の主要色に補正
`secondary`	`#623C2E`	お問い合わせボタンの濃茶	0%	画素の実測
`accent-1`	`#AA6901`	FEATURE番号・英字ラベル・棒グラフ	2%	画素の実測
`tint-1`	`#F6E1BA`	カード左上の淡い黄の円装飾	0%	画素の実測
`text-body`	`#4A3A33`	本文テキスト	1%	推定
`line`	`#CCC7BF`	グラフ枠の細線	0%	画素の主要色に補正
`accent-2`	`#E04848`	グラフの比較群の赤	0%	推定
`accent-3`	`#3E6DB5`	グラフの対照群の青	0%	推定
`text-muted`	`#ADA5A2`	対照群の灰色棒・注記	0%	画素の実測

地は生成りの布目テクスチャで全体を統一する
濃いカカオブラウンはヒーロー下帯と機能性セクション上部の帯にだけ使う
データは必ず白カードに載せ、生成り地との段差で区切る
見出し・本文は黒でなく茶系で組む
黄土茶はFEATURE番号・英字ラベル・主ボタン・棒グラフの強調に限定
グラフの赤青はデータ比較専用で装飾に使わない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ヒーローの素材名	ゴシック	Noto Sans JP	500	24px	1.4	0.05em
`headline-lg`	セクション見出し	ゴシック	Noto Sans JP	700	18px	1.5	0.05em
`accent`	見出し上の英字ラベル・FEATURE表記	欧文サンセリフ	Open Sans	700	9px	1.4	0.1em
`headline-sm`	機能性カードの小見出し	ゴシック	Noto Sans JP	700	11px	1.8	0.05em
`body-md`	本文・説明文	ゴシック	Noto Sans JP	400	9px	2.0	0.03em
`note`	出典・文献表記	ゴシック	Noto Sans JP	400	7px	1.6	0.0em
`label-button`	ボタンラベル	ゴシック	Noto Sans JP	700	11px	1.4	0.08em
`body-lg`	リード文（中央揃え）	ゴシック	Noto Sans JP	400	10px	2.1	0.05em

見出しは英字小ラベル→細い二重線→日本語見出しの3段で中央揃え
帯見出しの下に大きな英字を半透明で重ねる
本文は小さめ・行間広めで研究文書らしく
出典は本文より一段小さく茶系で添える
FEATURE番号は英字小+数字大の組み合わせ
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、PC はカード内で本文左・グラフ右の 2 カラム
本文ブロックの幅: 画面幅の約 85%
余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
カードは画面幅の約85%で中央配置
グラフは細線枠で囲い縦に積む
機能性カード同士は大きく間隔を空ける
見出し・リードは中央揃え、カード内本文は左揃え
ヒーロー右端に縦書きSCROLLと縦線

Elevation & Depth

白カードに薄くぼかした影を下方向に落とす
グラフ枠は影なしの細線のみ
ボタンは影なしフラット

Shapes

角丸: 小 0px ／中 0px ／大 0px。ボタンは角丸の長方形。
写真の切り抜き: ヒーロー写真は全幅矩形、カカオ豆は切り抜きで画面端からはみ出させる
セクション境界: 直線の色面切替。原料セクションは白い大きな半円を地に置く
カード・ボタンは角丸なしの直角
カード左上に淡黄の四分円装飾
ボタンは右端に細い山形矢印

Components

主ボタン（製品規格）（button-primary）: 黄土茶の横長矩形、中央白文字、右端に＞
サブボタン（問い合わせ）（button-secondary）: 濃茶の横長矩形、主ボタンと同形で縦に並べる
英字ラベル付き見出し（section-heading）: 黄土の英字小ラベル、細線、茶の日本語見出しを中央に積む
機能性カード（feature-card）: 白地カード。左上に淡黄の四分円とFEATURE番号、小見出し・本文・出典・グラフ
グラフ枠（chart-frame）: 細いベージュ線の枠に茶色タイトルのグラフを収める
茶色帯見出し（brown-band）: 濃茶の帯に白見出しと半透明の大英字、上部にカカオ実のアイコン
ヒーロー下帯（hero-caption）: 写真下端に濃茶帯を重ね、白文字で説明と素材名
出典注記（source-note）: 本文下に小さく文献情報を添える

Do's and Don'ts

Do - 地は必ず生成りの布目テクスチャにする - データは白カード＋細線枠で整然と並べる - 見出しは英字ラベルと日本語の2段で組む - カカオ豆の切り抜きを画面端に散らす - 文字色は茶系で統一する

Don't - 純黒の文字や背景を使わない - ボタンやカードを角丸にしない - ビビッドな色を装飾に使わない - グラフを枠なしで地に直接置かない - 派手なバッジや煽り表現を入れない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

ヘッダー（メニュー導線）: 生成り地に右上の英字MENUと二本線アイコンだけ
ファーストビュー（素材の印象づけ）: 原料写真を全幅に置き、下に濃茶帯で説明と素材名、縦書きSCROLL
素材の説明（素材の概要を伝える）: 英字ラベル付き見出しと中央揃えリード、左右に豆の切り抜き
機能性の導入（機能の数を示す）: 濃茶帯に白見出しと半透明大英字、カードが帯に食い込む
機能性 1〜3（研究データで根拠を示す）: 白カードに番号・小見出し・本文・出典・複数グラフを縦積み
原料紹介（原料の形状を伝える）: 白い大きな半円の中に原料種別と線画アイコン
CTA（規格確認と問い合わせ）: 黄土茶と濃茶の横長ボタンを2段
フッター（補助リンクと企業表記）: 茶文字のリンク縦並び、企業ロゴ、コピーライト、縦書きPAGE TOP

Imagery

カカオポッドと粉を木の上で暖色光で撮った寄りの写真
カカオ豆の切り抜きを画面端からはみ出して散らす
グラフは茶の軸線、黄土の棒、赤青の折れ線で統一
原料形状は茶色の細い線画アイコン
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCはヒーロー写真を右寄せにし、左の濃茶面に文字を置く
PCのカードは本文左・グラフ右の2カラム
PCの帯見出し下の英字は横一行で大きく
PCのCTAボタンは横並び2つ
PCフッターのリンクは横一列

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Warm Cacao Brown Research Ingredient LP
description: 生成りの布目テクスチャを地に、濃いカカオブラウンの帯と白カードで研究データを見せる BtoB 向けの素材紹介 LP。ゴシック体を落ち着いた茶色で組み、グラフを整然と並べて信頼感を出す。
colors:
  primary: '#633422'
  background: '#F2ECDD'
  surface: '#FFFFFF'
  cta: '#A16B13'
  on-cta: '#FFFFFF'
  secondary: '#623C2E'
  accent-1: '#AA6901'
  tint-1: '#F6E1BA'
  text-body: '#4A3A33'
  line: '#CCC7BF'
  accent-2: '#E04848'
  accent-3: '#3E6DB5'
  text-muted: '#ADA5A2'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Open Sans
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 7px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 2.1
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 36px
  button-secondary:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 36px
  section-heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 60px
  feature-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 1200px
  chart-frame:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 280px
  brown-band:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 130px
  hero-caption:
    backgroundColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 90px
  source-note:
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 20px
---

# DESIGN.md — 生成り×カカオ茶の機能性素材 LP（Warm Cacao Brown Research Ingredient LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、ナチュラル、上品・高級、情報量多め・訴求型
- **キーワード**: カカオブラウン・生成り布目・研究データ・白カード・英字ラベル
- **地の質感**: 生成りの紙・布のような細かい布目テクスチャを全体の地に敷く
- **形**: ほぼ角のない四角い白カードと横長ボタン。カード左上に淡い円形の装飾、原料セクションに大きな半円
- **温度感**: 暖色寄り。茶とベージュで温かく落ち着いた印象

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#633422` | 濃いカカオブラウンの帯・見出し文字 | 7% | 画素の実測 |
| `background` | `#F2ECDD` | 生成りの布目地 | 30% | 画素の実測 |
| `surface` | `#FFFFFF` | データを載せる白カード | 45% | 画素の実測 |
| `cta` | `#A16B13` | 製品規格ボタンの黄土茶 | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `secondary` | `#623C2E` | お問い合わせボタンの濃茶 | 0% | 画素の実測 |
| `accent-1` | `#AA6901` | FEATURE番号・英字ラベル・棒グラフ | 2% | 画素の実測 |
| `tint-1` | `#F6E1BA` | カード左上の淡い黄の円装飾 | 0% | 画素の実測 |
| `text-body` | `#4A3A33` | 本文テキスト | 1% | 推定 |
| `line` | `#CCC7BF` | グラフ枠の細線 | 0% | 画素の主要色に補正 |
| `accent-2` | `#E04848` | グラフの比較群の赤 | 0% | 推定 |
| `accent-3` | `#3E6DB5` | グラフの対照群の青 | 0% | 推定 |
| `text-muted` | `#ADA5A2` | 対照群の灰色棒・注記 | 0% | 画素の実測 |

- 地は生成りの布目テクスチャで全体を統一する
- 濃いカカオブラウンはヒーロー下帯と機能性セクション上部の帯にだけ使う
- データは必ず白カードに載せ、生成り地との段差で区切る
- 見出し・本文は黒でなく茶系で組む
- 黄土茶はFEATURE番号・英字ラベル・主ボタン・棒グラフの強調に限定
- グラフの赤青はデータ比較専用で装飾に使わない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ヒーローの素材名 | ゴシック | Noto Sans JP | 500 | 24px | 1.4 | 0.05em |
| `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.05em |
| `accent` | 見出し上の英字ラベル・FEATURE表記 | 欧文サンセリフ | Open Sans | 700 | 9px | 1.4 | 0.1em |
| `headline-sm` | 機能性カードの小見出し | ゴシック | Noto Sans JP | 700 | 11px | 1.8 | 0.05em |
| `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 9px | 2.0 | 0.03em |
| `note` | 出典・文献表記 | ゴシック | Noto Sans JP | 400 | 7px | 1.6 | 0.0em |
| `label-button` | ボタンラベル | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.08em |
| `body-lg` | リード文（中央揃え） | ゴシック | Noto Sans JP | 400 | 10px | 2.1 | 0.05em |

- 見出しは英字小ラベル→細い二重線→日本語見出しの3段で中央揃え
- 帯見出しの下に大きな英字を半透明で重ねる
- 本文は小さめ・行間広めで研究文書らしく
- 出典は本文より一段小さく茶系で添える
- FEATURE番号は英字小+数字大の組み合わせ
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、PC はカード内で本文左・グラフ右の 2 カラム
- **本文ブロックの幅**: 画面幅の約 85%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- カードは画面幅の約85%で中央配置
- グラフは細線枠で囲い縦に積む
- 機能性カード同士は大きく間隔を空ける
- 見出し・リードは中央揃え、カード内本文は左揃え
- ヒーロー右端に縦書きSCROLLと縦線

## Elevation & Depth

- 白カードに薄くぼかした影を下方向に落とす
- グラフ枠は影なしの細線のみ
- ボタンは影なしフラット

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: ヒーロー写真は全幅矩形、カカオ豆は切り抜きで画面端からはみ出させる
- **セクション境界**: 直線の色面切替。原料セクションは白い大きな半円を地に置く
- カード・ボタンは角丸なしの直角
- カード左上に淡黄の四分円装飾
- ボタンは右端に細い山形矢印

## Components

- **主ボタン（製品規格）**（`button-primary`）: 黄土茶の横長矩形、中央白文字、右端に＞
- **サブボタン（問い合わせ）**（`button-secondary`）: 濃茶の横長矩形、主ボタンと同形で縦に並べる
- **英字ラベル付き見出し**（`section-heading`）: 黄土の英字小ラベル、細線、茶の日本語見出しを中央に積む
- **機能性カード**（`feature-card`）: 白地カード。左上に淡黄の四分円とFEATURE番号、小見出し・本文・出典・グラフ
- **グラフ枠**（`chart-frame`）: 細いベージュ線の枠に茶色タイトルのグラフを収める
- **茶色帯見出し**（`brown-band`）: 濃茶の帯に白見出しと半透明の大英字、上部にカカオ実のアイコン
- **ヒーロー下帯**（`hero-caption`）: 写真下端に濃茶帯を重ね、白文字で説明と素材名
- **出典注記**（`source-note`）: 本文下に小さく文献情報を添える

## Do's and Don'ts

**Do**
- 地は必ず生成りの布目テクスチャにする
- データは白カード＋細線枠で整然と並べる
- 見出しは英字ラベルと日本語の2段で組む
- カカオ豆の切り抜きを画面端に散らす
- 文字色は茶系で統一する

**Don't**
- 純黒の文字や背景を使わない
- ボタンや カードを角丸にしない
- ビビッドな色を装飾に使わない
- グラフを枠なしで地に直接置かない
- 派手なバッジや煽り表現を入れない

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ヘッダー**（メニュー導線）: 生成り地に右上の英字MENUと二本線アイコンだけ
2. **ファーストビュー**（素材の印象づけ）: 原料写真を全幅に置き、下に濃茶帯で説明と素材名、縦書きSCROLL
3. **素材の説明**（素材の概要を伝える）: 英字ラベル付き見出しと中央揃えリード、左右に豆の切り抜き
4. **機能性の導入**（機能の数を示す）: 濃茶帯に白見出しと半透明大英字、カードが帯に食い込む
5. **機能性 1〜3**（研究データで根拠を示す）: 白カードに番号・小見出し・本文・出典・複数グラフを縦積み
6. **原料紹介**（原料の形状を伝える）: 白い大きな半円の中に原料種別と線画アイコン
7. **CTA**（規格確認と問い合わせ）: 黄土茶と濃茶の横長ボタンを2段
8. **フッター**（補助リンクと企業表記）: 茶文字のリンク縦並び、企業ロゴ、コピーライト、縦書きPAGE TOP

## Imagery

- カカオポッドと粉を木の上で暖色光で撮った寄りの写真
- カカオ豆の切り抜きを画面端からはみ出して散らす
- グラフは茶の軸線、黄土の棒、赤青の折れ線で統一
- 原料形状は茶色の細い線画アイコン
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCはヒーロー写真を右寄せにし、左の濃茶面に文字を置く
- PCのカードは本文左・グラフ右の2カラム
- PCの帯見出し下の英字は横一行で大きく
- PCのCTAボタンは横並び2つ
- PCフッターのリンクは横一列

## 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-3a8af8b6`（元 LP の URL から採番）
- **元 LP**: https://www.morinaga.co.jp/cocoaflavanol/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.morinaga.co.jp/cocoaflavanol/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

BtoB・SaaS・ITサービス白×紺ブルーの採用AI SaaS LPClean Blue Corporate SaaS Recruitment LP BtoB・SaaS・ITサービス紺×水色の清潔感ある店舗向けSaaS LPClean Slate Navy Wellness SaaS LP BtoB・SaaS・ITサービス黄緑×黄×黒のポップなBtoB広告サービスLPLime Yellow Pop BtoB Marketing LP BtoB・SaaS・ITサービス藍紫×白グレーの静かなAI SaaS LPIndigo Minimal AI SaaS Pre-Registration LP BtoB・SaaS・ITサービス水色×オレンジの店舗向けSaaS特典LPBright Sky Blue SaaS Campaign LP BtoB・SaaS・ITサービス若草グリーン×オレンジCTAのBtoB SaaS LPFresh Green Corporate SaaS LP