---
version: alpha
name: Sage and Taupe Calm Aroma LP
description: 生成りの地に、くすんだセージグリーンとトープブラウンで 2 種の香りを色分けした静かな縦長 LP。細身の欧文見出しと控えめなゴシック本文。リネンや植物の柔らかい写真で、夜のくつろぎを表現する。
colors:
  background: '#F4F1EC'
  surface: '#FEFFFE'
  primary: '#859379'
  secondary: '#927D6C'
  accent-1: '#86927A'
  accent-2: '#B3947B'
  dark-section: '#2A441E'
  on-dark: '#FFFFFF'
  text: '#333333'
  accent-3: '#7A8C6A'
  marker: '#8A9A78'
  text-muted: '#BCB9B4'
  line: '#E3DAD0'
  cta: '#FEFEFE'
  on-cta: '#333333'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Marcellus
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.08em
rounded:
  sm: 2px
  md: 4px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-detail:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 32px
  worry-checklist:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 160px
  compare-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 280px
  point-circle:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 150px
  section-title-en:
    textColor: '{colors.accent-3}'
    typography: '{typography.headline-lg}'
    height: 60px
  type-pill:
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 22px
  ingredient-tile:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 110px
  voice-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 110px
  big-number:
    textColor: '{colors.line}'
    typography: '{typography.accent}'
    height: 60px
---

# DESIGN.md — セージ緑×トープの眠り系アロマ LP（Sage and Taupe Calm Aroma LP）

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

## Overview

- **業種**: 日用品・生活雑貨 ／ **雰囲気**: ナチュラル、上品・高級、やさしい・柔らかい、シンプル・ミニマル
- **キーワード**: くすみカラー・リネン・植物・夜のくつろぎ・細身の欧文・余白
- **地の質感**: 霧や雲、リネンのしわを感じる柔らかい写真の質感。面はフラットで、薄い陰影だけを使う。
- **形**: 角はほぼ四角。ラベルとボタンは小さな角丸。ポイント紹介だけ細い線の円を使う。
- **温度感**: やや温かい中間色。彩度を落としたグリーンとブラウンで落ち着かせる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F4F1EC` | メインの生成り地 | 30% | 画素の実測 |
| `surface` | `#FEFFFE` | 白セクション・カード面 | 18% | 画素の実測 |
| `primary` | `#859379` | ブランドのセージグリーン（ギフト・商品帯） | 12% | 画素の実測 |
| `secondary` | `#927D6C` | 2 つ目の香りを示すトープブラウン | 8% | 画素の実測 |
| `accent-1` | `#86927A` | 比較カードの緑ラベル | 1% | 画素の実測 |
| `accent-2` | `#B3947B` | 比較カードのブラウンラベル | 1% | 画素の実測 |
| `dark-section` | `#2A441E` | ヘッダー・フッター帯の深緑 | 2% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 色面上の白文字 | 1% | 画素の主要色に補正 |
| `text` | `#333333` | 見出し・本文の濃い墨色 | 3% | 推定 |
| `accent-3` | `#7A8C6A` | 欧文セクション見出しのセージ文字 | 1% | 推定 |
| `marker` | `#8A9A78` | 本文中の強調語の緑文字 | 0% | 推定 |
| `text-muted` | `#BCB9B4` | 注釈の薄いグレー | 0% | 画素の実測 |
| `line` | `#E3DAD0` | 円・吹き出し・区切りの細線 | 1% | 画素の主要色に補正 |
| `cta` | `#FEFEFE` | 「詳しくみる」の白ボタン | 0% | 画素の実測 |
| `on-cta` | `#333333` | ボタン上の文字 | 0% | 推定 |

- 地は生成りと白を交互に使い、セクションを区切る。
- 2 つの香り・商品は緑とトープで色分けし、ラベル・帯・背景で一貫させる。
- 色面の上では文字を白にする。
- 強調はセージ緑の文字色だけで行い、赤や黄は使わない。
- 濃い深緑はヘッダーとフッターの帯に限って使う。
- どの色も彩度を落としたくすみトーンにそろえる。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV のキャッチコピー（写真の上に白文字） | ゴシック | Zen Kaku Gothic New | 500 | 24px | 1.5 | 0.08em |
| `headline-lg` | 欧文セクション見出し（POINT、LINE UP など） | 欧文セリフ | Marcellus | 400 | 30px | 1.1 | 0.04em |
| `headline-md` | 和文のセクション見出し（2 行・中央揃え） | ゴシック | Zen Kaku Gothic New | 500 | 19px | 1.7 | 0.08em |
| `headline-sm` | ポイントの小見出し（セージ色） | ゴシック | Zen Kaku Gothic New | 500 | 17px | 1.5 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em |
| `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 大きな薄い番号（01・02）と英字ラベル | 欧文セリフ | Cormorant Garamond | 300 | 56px | 1 | 0em |
| `label-button` | ボタン・小ラベル | ゴシック | Noto Sans JP | 500 | 12px | 1.2 | 0.08em |

- 欧文見出しは細めのセリフ体で大きく置き、すぐ下に小さな和文の訳を添える。
- 見出しは太くしすぎず、500 前後で上品に見せる。
- 本文は行間を広めにし、字間も少し空ける。
- 番号は大きく薄いセリフ数字にして、見出しの背景に重ねる。
- 和文見出しは中央揃え、ポイントの説明は左揃えにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品の比較と成分の写真だけ 2〜3 列に並べる
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 左右の余白は 16〜20px にそろえる。
- セクションは地色を切り替えて区切り、線はほとんど使わない。
- 2 つの商品は同じ形のカードで左右に並べて比べられるようにする。
- 成分の写真は 3 列の正方形タイルに並べ、写真の下端に名前を白文字で重ねる。
- 写真は横幅いっぱいに置き、前後には余白をたっぷり取る。

## Elevation & Depth

- 影はほとんど使わず、フラットに見せる。
- 悩みリストの白い箱は色面の上にのせて、浮いて見せる。
- ポイントの円にはごく薄い影か細い線だけを使う。

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの矩形。比較や成分の写真は正方形か縦長で、2 枚並べるときは隙間なく接する
- **セクション境界**: 直線で地色を切り替える。FV の下は雲のような霧の写真でなじませる
- ボタンは角丸の小さい矩形にし、細い線と右矢印を付ける。
- 英字ラベル（香りの種類）は細い線のピル型にする。
- ポイントは細い線の円を 3 つ、三角形に重ねて配置する。
- お客様の声は細い線の吹き出しにする。

## Components

- **詳細ボタン**（`button-detail`）: 白地に細い枠線と右矢印を付けた小さな矩形ボタン。商品カードや色面の上に置く。
- **悩みのチェックリスト**（`worry-checklist`）: 白い箱にチェックボックスを付けて悩みを 4 行並べる。後半の語句はセージ色で強調する。
- **商品の比較カード**（`compare-card`）: 上に色付きラベル（欧文と和文の名前）、中に商品写真、下に香りの短い説明を置く。2 枚を左右に並べる。
- **ポイントの円**（`point-circle`）: 細い線の円の中に番号・短い見出し・下向き矢印を入れ、3 つを三角形に配置する。
- **欧文セクション見出し**（`section-title-en`）: 大きな細身のセリフ欧文の下に、小さな和文の訳を左揃えで添える。
- **香りのタイプのラベル**（`type-pill`）: 色面の上に置く白枠のピル型ラベル。中に短い英単語を入れる。
- **成分の写真タイル**（`ingredient-tile`）: 植物の写真を 3 列に並べ、下端に英名と和名を白文字で重ねる。
- **お客様の声の吹き出し**（`voice-bubble`）: 細い線の矩形の吹き出し。下にしっぽを付け、一部の語句をセージ色にする。
- **大きな薄い番号**（`big-number`）: 01〜03 の細いセリフ数字を薄いグレーで大きく置き、小見出しの背景に重ねる。

## Do's and Don'ts

**Do**
- くすんだグリーンとブラウンだけで商品を色分けする。
- 欧文の見出しと和文の訳をセットで使う。
- 写真はリネン・植物・手元を柔らかい光で撮る。
- 余白を広く取り、ゆったりと読ませる。
- 強調は文字色だけで控えめにする。

**Don't**
- 原色や蛍光色のボタンを使わない。
- 太いゴシックで大きく煽る見出しにしない。
- ドロップシャドウやグラデーションのボタンを使わない。
- 価格を大きく赤字で強調しない。
- 写真の角を丸くしたり、楕円に切り抜いたりしない。

## Page Structure

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

1. **ファーストビュー**（商品の世界観と効果を一目で伝える）: 手のひらに 2 本のボトルをのせた写真を雲の背景に置く。下部に白文字のキャッチと短い補足、注釈を添える。
2. **悩みの提起**（眠りの悩みに共感する）: セージ色の霧の写真の上に白い 2 行見出しを置く。白い箱にチェックリストを 4 行並べ、下に矢印を付ける。
3. **解決の提示**（使う場面を想像させる）: 白地に 2 行の見出しを置き、一部をセージ色にする。写真を 2 枚並べ、短い説明文を中央揃えで続ける。
4. **商品の比較**（2 つの香りの違いを見せる）: 生成り地にスラッシュで挟んだ短いリード文を置き、色ラベル付きのカードを 2 枚並べる。カードの下に詳細ボタンを置く。
5. **特長（3 つのポイント）**（技術・成分・使い方の価値を伝える）: 欧文見出しの下に 3 つの円を置く。続けて大きな番号付きの小見出し、本文、写真を 3 回繰り返す。
6. **ラインナップ**（商品ごとの詳細と価格を見せる）: 商品ごとにセージ緑とトープの写真背景を切り替える。ラベル・名前・説明・商品写真・価格・ボタンを置き、成分タイルを 3 列で添える。
7. **研究データ**（根拠を示して信頼を得る）: 欧文見出しのあと、2 行の和文見出しで一部の語を色付きのかぎ括弧で強調する。本文・資料画像・注釈を続ける。
8. **使い方**（使う手順を簡単に示す）: 暗めの商品写真を横幅いっぱいに置き、下に短い説明文を添える。
9. **お客様の声**（実際の感想で安心させる）: 白地に細い線の吹き出しを 4 つ、縦に並べる。
10. **ギフト提案**（贈り物としての需要を広げる）: セージ色の面にスライダー写真を置き、白文字の見出し・説明・注釈を続ける。
11. **クロージング CTA**（購入へ導く）: 白地に 2 行の見出しを置き、商品カード 2 枚に価格と詳細ボタンを付ける。

## Imagery

- 生成りのリネンや寝具を背景に、柔らかい自然光で撮る。
- 琥珀色のガラスボトルを主役にし、手のひらや指先と一緒に写す。
- ラベンダーやハーブなど植物の接写を、浅い被写界深度で撮る。
- 雲や霧のような淡い背景で、夢見心地の雰囲気を出す。
- 人物は顔を隠すか横顔にし、くつろぐ仕草を写す。
- 写真全体を低彩度・ややウォームに色調補正する。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも LP 本体は中央の約 340px 幅の SP 用カラムで見せる。
- PC では左右の余白に、ぼかした寝具とボトルの写真を固定背景として敷く。
- PC の右側には、セクションへ飛ぶ縦並びのナビを細い線付きで置く。
- PC の左側にはロゴを白で置く。
- SP ではカラムを画面幅いっぱいに広げ、背景写真とサイドナビは隠す。

## 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-549fdf79`（元 LP の URL から採番）
- **元 LP**: https://phutawan.jp/pages/pillow-spray
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（9/15 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-12、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。