--- version: alpha name: Soft Greige Hair Care Ingredient LP description: 生成り〜グレージュの地に、焦げ茶の太字ゴシックと金茶の強調文字を重ねたヘアケア商品LP。商品パッケージのレモンイエローをマーカーやピラミッド図に使っている。成分を白い丸バッジで並べ、縦書きのラベルと水滴の写真で、みずみずしく上品な印象にしている。 colors: primary: '#AD9A85' background: '#F4F3EF' background-alt: '#FDFCF8' surface: '#FEFEFE' text: '#3D3426' text-body: '#6E6560' text-muted: '#AD9A85' marker: '#FDF464' accent-1: '#FFFFA6' secondary: '#5E5550' tint-1: '#E5E2DC' accent-2: '#D0388A' line: '#C8C4B5' primary-accessible: '#86715A' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 38px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 21px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Klee One fontSize: 30px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.05em headline-sm: fontFamily: Montserrat fontSize: 40px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.1em label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em rounded: sm: 4px md: 12px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-debut: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px label-check: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px card-worry: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px badge-ingredient: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 70px label-vertical: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 230px heading-point: textColor: '{colors.primary}' typography: '{typography.accent}' height: 40px card-voice: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 170px step-number: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px --- # DESIGN.md — グレージュ×レモンイエローのヘアケアLP（Soft Greige Hair Care Ingredient LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、清潔・爽やか、ナチュラル - **キーワード**: グレージュ・水滴・成分バッジ・縦書きラベル・金茶アクセント・黄色マーカー - **地の質感**: 薄いグレージュのグラデーション地に、水滴・ジェル・オイルの透明感ある写真を散らす - **形**: 正円バッジと大きく弧を描くセクション境界、ピル型のチェックカード - **温度感**: やや暖かいニュートラル ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AD9A85` | 強調見出し・Point英字・円バッジの金茶 | 4% | 画素の主要色に補正 | | `background` | `#F4F3EF` | ページ基調の生成りグレージュ | 40% | 画素の実測 | | `background-alt` | `#FDFCF8` | 明るいオフホワイト地 | 15% | 画素の実測 | | `surface` | `#FEFEFE` | カード・成分バッジの白 | 12% | 画素の実測 | | `text` | `#3D3426` | 見出しの焦げ茶 | 3% | 画素の実測 | | `text-body` | `#6E6560` | 本文のグレーブラウン | 2% | 推定 | | `text-muted` | `#AD9A85` | 注釈の薄グレー | 1% | 画素の主要色に補正 | | `marker` | `#FDF464` | 見出し下のレモン色マーカー | 1% | 画素の実測 | | `accent-1` | `#FFFFA6` | 商品カラーのイエロー（ピラミッド図） | 2% | 画素の実測 | | `secondary` | `#5E5550` | CHECKラベル・ピルの濃グレー | 1% | 推定 | | `tint-1` | `#E5E2DC` | 縦書きラベル地のベージュグレー | 2% | 画素の実測 | | `accent-2` | `#D0388A` | 口コミ内強調のマゼンタ文字 | 0% | 推定 | | `line` | `#C8C4B5` | 区切り線・カード枠 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#86715A` | AA を満たす補正値（計算） | | 計算 | - 地はグレージュとオフホワイトを交互に置き、弧の境界で切り替える - 見出しは焦げ茶。キーワードだけ金茶に変える - レモンイエローは商品カラー。マーカーと図表だけに使う - 成分は白い円バッジに金茶か焦げ茶の文字で載せる - 口コミの強調だけマゼンタ太字にし、ほかに派手な色は使わない - 注釈は薄グレーの小さい文字でまとめる - `badge-debut` は文字 `#FEFEFE` × 背景 `#AD9A85` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#86715A`、4.6:1）を使う。 - `step-number` は文字 `#FEFEFE` × 背景 `#AD9A85` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#86715A`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し・縦書きコピー | ゴシック | Zen Kaku Gothic New | 900 | 38px | 1.3 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.5 | 0.08em | | `headline-md` | 各ポイントの見出し | ゴシック | Zen Kaku Gothic New | 700 | 21px | 1.6 | 0.06em | | `body-md` | 本文・口コミ | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.05em | | `note` | 成分の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.03em | | `accent` | Point番号の手書き風英字 | 欧文スクリプト | Klee One | 600 | 30px | 1.1 | 0.05em | | `headline-sm` | 細い線のアウトライン英字見出し | 欧文サンセリフ | Montserrat | 300 | 40px | 1.1 | 0.1em | | `label-button` | CHECK・STEPラベル | 欧文サンセリフ | Montserrat | 700 | 13px | 1.2 | 0.12em | - 見出しは字間を広めにとる - キーワードは金茶に色を変えるか、黄色マーカーを敷く - 成分名は縦書きにして、ベージュ地のラベルに載せる - 英字のセクション見出しは細い線のアウトライン文字で大きく置く - 傍点や「＼ ／」で小見出しを飾る - 本文は行間を2.0前後にとり、ゆったり見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しは中央揃え、Pointの本文は左揃え - 縦書きラベルを右端に置き、左側に写真やバッジを配置する - 成分バッジは3個＋2個の互い違いに並べる - セクション間は大きな弧のカーブでつなぐ ## Elevation & Depth - 白い円バッジに薄い影をつける - 口コミカードと手順カードは影なしか、ごく薄い影にする - 水滴の写真は浮遊感を出す装飾として重ねる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 成分・香りは正円、植物写真は片側を大きく丸めた角丸 - **セクション境界**: 大きく弧を描くカーブ - 円は細い金茶の線で縁取る - 悩みのリストはピル型カードにチェックマークを添える - フリー設計は斜線入りの円で「不使用」を表す ## Components - **発売日の円バッジ**（`badge-debut`）: 金茶の正円に白文字で日付を2行で入れる - **CHECKラベル**（`label-check`）: 濃グレーのピルに英字を入れ、左右に放射線を飾る - **悩みのピルカード**（`card-worry`）: 半透明の白いピルに金茶のチェックと悩みを2〜3行で書く。写真の上に重ねる - **成分の円バッジ**（`badge-ingredient`）: 白い円に成分名を太字で入れ、下に注釈番号を添える - **縦書きの成分ラベル**（`label-vertical`）: ベージュグレーの帯に、焦げ茶の太字で縦書きする - **Point見出し**（`heading-point`）: 金茶の手書き風英字に下線をつけ、その下に焦げ茶の2行見出しを置く - **口コミの吹き出しカード**（`card-voice`）: 左にイラストのアイコンとイニシャル・年代、右に白いカードを置く。強調はマゼンタにする - **STEP番号の円**（`step-number`）: 金茶の円にSTEPと2桁の番号を入れ、手順は点線の下線つきで書く ## Do's and Don'ts **Do** - 地はグレージュとオフホワイトでまとめる - キーワードを金茶か黄色マーカーで一点だけ強調する - 成分は丸バッジと縦書きラベルで図のように見せる - 水滴やジェルの透明な写真を余白に散らす - 注釈は※番号でまとめ、薄グレーの小さい文字にする **Don't** - 真っ白一色や黒い地のセクションにしない - 黄色を大きな面の地に使わない - 四角くて硬い区切りを多用しない - 派手な赤のCTAや価格訴求の帯を入れない - 見出しの字間を詰めすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と仕上がりのイメージを伝える）: 水しぶきとシルクの背景に商品を置く。縦書きコピーと発売日の円バッジを添え、下に大見出しと黄色マーカーを置く 2. **悩みの提起**（共感を得る）: CHECKラベルと見出しの下に、モノクロの髪写真を敷く。その上に悩みのピルカードを3つ重ねる 3. **解決の提示**（商品へ橋渡しする）: 短い縦書きの導入文とV字の矢印に続き、黄色マーカーつきの見出しと商品の集合写真を置く 4. **特長ポイント**（処方の根拠を示す）: Point01〜03を見出し・本文・成分バッジ・縦書きラベル・成分写真の順で並べる 5. **フリー設計**（安心感を与える）: かっこで囲んだ見出しの下に、斜線入りの円を5つ並べる 6. **香り**（使用感を想像させる）: アウトラインの英字見出し、香り素材の円形写真、黄色のピラミッド図で構成する 7. **イメージビジュアル**（仕上がりを印象づける）: なびく髪の写真に、白い帯のコピーを3行重ねる 8. **お客様の声**（信頼を高める）: アウトラインの英字見出しの下に、アイコンと白カードの口コミを並べる 9. **使い方**（シリーズで使ってもらう）: 白いパネルにSTEP円と商品画像を縦に並べ、手順の間を点でつなぐ ## Imagery - 水滴・ジェル・オイルを白〜グレーの明るいトーンで撮る - 商品は正面から撮り、柔らかい影を落とす - 人物は髪の流れを主役にし、顔は横向きか一部だけ見せる - 悩みの写真はモノクロ寄りの低彩度にする - 香りや植物の素材は正円に切り抜く - 口コミのアイコンは黄色を基調にしたシンプルな線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 960px に収め、中央に置く - Pointは左に本文、右にビジュアルの2カラムにする - 成分バッジは横一列に並べる - 縦書きラベルはPCでもそのまま残す - 口コミはPCで2カラム化する ## 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-0088b98c`（元 LP の URL から採番） - **元 LP**: https://www.matsukiyococokara-online.com/news/1373 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。