--- 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/）からご連絡ください。