--- version: alpha name: Sage Green Salon Haircare Mincho LP description: くすんだセージグリーンと白を基調にしたヘアケア商品のLPです。明朝体の字間を広く取った見出し、顕微鏡写真やビフォーアフター写真、成分写真を縦に積み、サロン品質を落ち着いたトーンで伝えます。背景は水面のテクスチャで、白い本文パネルを浮かせる構成です。 colors: primary: '#B2C4AC' background: '#FEFFFF' background-alt: '#E0E6D8' secondary: '#AECEBB' dark-section: '#79A38E' text: '#292929' text-body: '#5A5048' text-muted: '#8C8E8D' on-primary: '#FFFFFF' accent-1: '#1D4E9B' accent-2: '#E0457A' line: '#ACA89B' tint-1: '#C7DFD2' primary-accessible: '#627E59' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.12em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.2em headline-md: fontFamily: Shippori Mincho fontSize: 19px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 16px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px check-heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 26px rule-heading: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 44px before-after-pair: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 140px data-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px bar-chart: textColor: '{colors.text}' typography: '{typography.label-button}' height: 110px ingredient-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 150px scent-pyramid: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 160px --- # DESIGN.md — セージグリーン×明朝のサロン系ヘアケアLP（Sage Green Salon Haircare Mincho LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、ナチュラル、清潔・爽やか、やさしい・柔らかい - **キーワード**: セージグリーン・明朝体・サロン品質・科学的根拠・水面テクスチャ・静かな高級感 - **地の質感**: 外枠は淡い緑の水面テクスチャ。本文は白か薄いグレージュの無地パネルで、マットで透明感のある質感にする。 - **形**: 四角いパネルと角丸の小さい写真が基本。ポイントは白い正円バッジで示し、香りのピラミッドには三角形を使う。 - **温度感**: やや涼しい中間色。緑と生成りで穏やかにまとめる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B2C4AC` | ブランドのセージグリーン（見出し帯・図形） | 7% | 画素の実測 | | `background` | `#FEFFFF` | 本文パネルの白 | 36% | 画素の実測 | | `background-alt` | `#E0E6D8` | セクション地のグレージュグリーン | 10% | 画素の実測 | | `secondary` | `#AECEBB` | 外枠の水面ミントグリーン | 20% | 画素の主要色に補正 | | `dark-section` | `#79A38E` | ファーストビューの深いグリーン | 6% | 画素の主要色に補正 | | `text` | `#292929` | 見出しのダークブラウン | 5% | 画素の実測 | | `text-body` | `#5A5048` | 本文のグレーブラウン | 3% | 推定 | | `text-muted` | `#8C8E8D` | 注釈の薄いグレー | 1% | 画素の実測 | | `on-primary` | `#FFFFFF` | 緑帯の上の白い文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#1D4E9B` | データを示すネイビーの円バッジ | 0% | 画素の実測 | | `accent-2` | `#E0457A` | 強調文字のピンク | 0% | 推定 | | `line` | `#ACA89B` | 見出しの上下に引く罫線 | 0% | 画素の主要色に補正 | | `tint-1` | `#C7DFD2` | グラフ・矢印の淡いグリーン | 2% | 画素の実測 | | `primary-accessible` | `#627E59` | AA を満たす補正値（計算） | | 計算 | - 地は白とグレージュの2色を交互に使い、外枠に水面ミントのテクスチャを敷く。 - 緑はくすみ系に限定し、彩度の高い緑は使わない。 - 文字は黒ではなくダークブラウン系にする。 - ピンクとネイビーは数値・注意喚起にだけ少量使う。 - グラフの比較では、使用前を薄いグレー、使用後を淡い緑にする。 - FVだけは深い緑のトーンで写真全体をまとめる。 - `check-heading-band` は文字 `#FFFFFF` × 背景 `#B2C4AC` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#627E59`、4.52:1）を使う。 - `scent-pyramid` は文字 `#FFFFFF` × 背景 `#B2C4AC` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#627E59`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | 明朝 | Shippori Mincho | 600 | 30px | 1.4 | 0.12em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 600 | 28px | 1.4 | 0.2em | | `headline-md` | 大見出しの上に置くリード行 | 明朝 | Shippori Mincho | 500 | 19px | 1.5 | 0.12em | | `headline-sm` | 緑帯や罫線で挟む小見出し | 明朝 | Noto Serif JP | 500 | 16px | 1.5 | 0.08em | | `body-md` | 説明文（中央揃え） | 明朝 | Noto Serif JP | 400 | 13px | 1.8 | 0.08em | | `label-button` | 図版のキャプション・成分名 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.05em | | `accent` | 欧文ラベル（香り名・Point） | 欧文セリフ | Cormorant Garamond | 500 | 16px | 1.3 | 0.1em | | `note` | 注釈・成分表記 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | - 見出しは明朝体にし、字間を0.15em前後まで広く取る。 - 見出しは「小さいリード行＋大きい本見出し」の2段で組む。 - 本文はすべて中央揃えにし、1行を20字前後で改行する。 - 図版のキャプションだけは太いゴシック体にして読みやすくする。 - 欧文はセリフ体の大文字で添える。 - 注釈は8px程度の小さい文字で右寄せにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。図版は 2 列比較をよく使う - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - 外枠の水面テクスチャの上に、幅約92%の白いパネルを置く。 - 比較は左右に2枚並べ、中央に淡い三角矢印を置く。 - 写真は横幅いっぱいか、2列グリッドで配置する。 - 見出しと写真の間は16〜24pxあける。 - セクションごとに地の色を切り替えて区切る。 - 香りのピラミッドは左に図、右にテキストを置く。 ## Elevation & Depth - 影はほぼ使わず、フラットにする。 - FVのポイントバッジにだけ、ごく薄い影をつける。 - 写真に半透明の白パネルを重ねて奥行きを出す。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸4〜8pxの矩形。FVはバッジを正円にする。 - **セクション境界**: 直線で地の色を切り替える。見出しの上下に細い罫線を引く。 - ポイントは白い正円に明朝体の文字を入れる。 - 強調の帯は角のない長方形にする。 - 数値を示すバッジは円形にする。 - 香りの構成は三角形を3段に分けて示す。 ## Components - **ポイント円バッジ**（`point-circle-badge`）: 白い正円の中に、欧文の番号と短い特長を縦に並べる。FVの左に3つ縦積みする。 - **チェック付き緑帯見出し**（`check-heading-band`）: セージグリーンの横帯に、チェック記号と白い明朝体の文字を入れる。 - **罫線挟み見出し**（`rule-heading`）: 上下に細い罫線を引き、その間に中サイズの明朝体見出しを置く。 - **ビフォーアフター比較**（`before-after-pair`）: 写真を2枚並べ、間に淡い緑の三角矢印を置く。下にキャプションを添える。 - **数値バッジ**（`data-badge`）: ネイビーの円の中に、白い文字で上昇率を大きく表示する。 - **簡易棒グラフ**（`bar-chart`）: 使用前をグレー、使用後を淡い緑の棒にし、ピンクの上昇矢印を添える。 - **成分カード**（`ingredient-card`）: 2列の成分イメージ写真の下に、太字ゴシックの成分名を中央揃えで置く。 - **香りピラミッド**（`scent-pyramid`）: 緑の三角を3段に分け、各段に欧文の段名を入れる。右側に香料名を並べる。 ## Do's and Don'ts **Do** - 見出しは明朝体で字間を広く取り、2段で組む。 - 根拠の写真・グラフ・注釈をセットで見せる。 - 緑はくすんだトーンでそろえる。 - 余白を多めに取り、本文は中央揃えにする。 - 白いパネルと水面テクスチャの外枠を組み合わせる。 **Don't** - ビビッドな色や原色の大きなボタンを置かない。 - 太い丸ゴシック体で見出しを組まない。 - 強い影や派手なグラデーションを使わない。 - 本文を左揃えで長く詰めない。 - 強調色を広い面に使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と主要な特長を一目で伝える）: 緑のトーンの台座に商品ボトルを置いた写真。上に白い明朝体のコピーと細い罫線、左にポイントの円バッジを3つ並べる。 2. **品質の根拠**（試験データで効果を示す）: 白いパネルに大見出しを置き、緑帯の小見出しの下に顕微鏡写真の比較と光沢度グラフ・数値バッジを並べる。 3. **仕組みの図解**（効果の仕組みを視覚化する）: グレージュの地に、2つの3Dイラストを矢印でつないで比較する。 4. **イメージビジュアル**（使用後の髪を情緒的に伝える）: 髪がなびく女性の写真に、半透明の白パネルを重ねて説明文を入れる。 5. **機能訴求1**（悩みとその解決を示す）: 2段の明朝体見出し、ピンクの強調文、罫線挟みの見出し、CGイメージ、説明文の順に並べる。 6. **機能訴求2**（補修成分の効果を示す）: 後ろ姿の髪のビフォーアフター写真を比較で並べる。 7. **成分紹介**（配合成分を紹介する）: 罫線挟みの見出しの下に、2列の成分カードを置く。 8. **香り紹介**（香りの魅力を伝える）: 明朝体の見出しと欧文ラベル、花と果物の写真2枚、香りピラミッドを並べる。 ## Imagery - 商品はミント色の台座に置き、柔らかな自然光で撮る。プリズムの光を少し入れる。 - 電子顕微鏡風のモノクロ写真で科学的な印象を出す。 - 髪は艶のあるストレートを後ろ姿や横顔で撮る。 - 成分はグリーンや淡いオレンジの透明感あるCGで表現する。 - 花や果物は明るい自然光でみずみずしく撮る。 - 背景は淡いミント色の水面テクスチャにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC版の画像がないため、以下は推奨。 - PCでは本文パネルを最大幅約750pxで中央に置き、左右を水面テクスチャで埋める。 - FVは商品を中央から右に寄せ、ポイントバッジを横並びにしてもよい。 - 比較図版は2列のまま拡大する。見出しは32〜40pxにする。 - 成分カードは3〜4列に増やせる。 ## 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-e3335a80`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/tsurunishi/manual-q-4setsss/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。