--- version: alpha name: Charcoal Black and Pastel Botanical Hair Color Shampoo LP description: 白地と大理石・白タイル風の地に、炭のような黒と、ラベンダー〜水色のパステルグラデーションを重ねた縦長の訴求型 LP。柑橘とハーブの水彩装飾、手書き風ロゴ、黄色マーカー、ピンクの強調文字で、ナチュラルさと効果の実感を両方伝える。 colors: background: '#FEFEFE' background-alt: '#F6F6F6' primary: '#2D2D2D' dark-section: '#2C2C2C' on-dark: '#FEFFFF' secondary: '#A2877F' accent-1: '#B49AE0' tint-1: '#E4F5FF' line: '#99ADB6' accent-2: '#DA7D96' marker: '#FFF07A' text-body: '#383231' tint-2: '#C3E2EB' accent-3: '#F2E24A' accent-1-accessible: '#895FCE' line-accessible: '#607A86' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Dancing Script fontSize: 18px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Klee One fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' chapter-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.display}' rounded: '{rounded.full}' height: 420px before-after: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 180px badge-ranking: backgroundColor: '{colors.accent-3}' typography: '{typography.display}' height: 260px pro-voice-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 190px ingredient-row: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 120px number-list: typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 52px review-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 150px connector-band: backgroundColor: '{colors.line}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 60px speech-bubble: backgroundColor: '{colors.line}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 50px --- # DESIGN.md — 炭黒×パステルの植物系白髪染めシャンプーLP（Charcoal Black and Pastel Botanical Hair Color Shampoo LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 情報量多め・訴求型、ナチュラル、やさしい・柔らかい、力強い・インパクト - **キーワード**: 炭の黒・パステルグラデーション・柑橘とハーブ・大理石テクスチャ・ビフォーアフター・黄色マーカー - **地の質感**: 白い大理石、白タイル、ひび割れた漆喰、木目の板壁など、薄いテクスチャを地に敷く。黒のセクションにはざらついた炭の質感を使う。 - **形**: 円のバッジ、斜めの V 字の区切り、吹き出し、ノートのリング付きカード、ややラフな枠線。 - **温度感**: 白とグレーの涼しい地に、柑橘のオレンジや木の茶色で温かみを少し足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEFE` | 基本の白地 | 22% | 画素の実測 | | `background-alt` | `#F6F6F6` | 淡いグレーの大理石地 | 12% | 画素の実測 | | `primary` | `#2D2D2D` | 炭黒。ロゴ・黒セクション・品質カード | 9% | 画素の実測 | | `dark-section` | `#2C2C2C` | 黒いセクションの地 | 6% | 画素の実測 | | `on-dark` | `#FEFFFF` | 黒地の上の白文字 | 2% | 画素の主要色に補正 | | `secondary` | `#A2877F` | くすんだブラウン。見出しの帯・バッジ | 4% | 画素の主要色に補正 | | `accent-1` | `#B49AE0` | ラベンダー。グラデーション・下線 | 4% | 推定 | | `tint-1` | `#E4F5FF` | 淡い水色の地 | 9% | 画素の実測 | | `line` | `#99ADB6` | ブルーグレーの区切り帯 | 5% | 画素の実測 | | `accent-2` | `#DA7D96` | ピンク。数字や強調文字 | 1% | 画素の実測 | | `marker` | `#FFF07A` | 黄色の文字下マーカー | 1% | 推定 | | `text-body` | `#383231` | 本文の濃いグレー | 3% | 画素の主要色に補正 | | `tint-2` | `#C3E2EB` | ペールミントの宣言セクション地 | 3% | 画素の実測 | | `accent-3` | `#F2E24A` | 黄色〜金。ランキングや金文字 | 3% | 推定 | | `accent-1-accessible` | `#895FCE` | AA を満たす補正値（計算） | | 計算 | | `line-accessible` | `#607A86` | AA を満たす補正値（計算） | | 計算 | - 地は白と大理石グレーを基本にし、効果を見せる章だけ炭黒の全幅セクションにする - ポイント章の扉はラベンダー→水色→黄色のパステルグラデーションの円にする - 強調語は黄色マーカーかピンク文字で示す。1 文につき 1〜2 か所まで - 成分説明は淡い水色やミントの地で区切り、清潔感を出す - ブラウンは見出しの帯やラベルに限る - 黒地の上の見出しには金のグラデーション文字を使ってよい - `chapter-circle` は文字 `#FEFFFF` × 背景 `#B49AE0` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#895FCE`、4.57:1）を使う。 - `connector-band` は文字 `#FEFFFF` × 背景 `#99ADB6` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `line-accessible`（`#607A86`、4.53:1）を使う。 - `speech-bubble` は文字 `#FEFFFF` × 背景 `#99ADB6` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `line-accessible`（`#607A86`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と章扉の大見出し | ゴシック | Dela Gothic One | 900 | 52px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（明朝で上品に） | 明朝 | Shippori Mincho | 600 | 30px | 1.35 | 0.04em | | `headline-md` | ゴシックの太い訴求見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.4 | 0.05em | | `headline-sm` | カードの見出し・小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.75 | 0.04em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `accent` | 成分名やラベルに添える欧文の筆記体 | 欧文スクリプト | Dancing Script | 400 | 18px | 1.2 | 0.0em | | `label-button` | 手書き風の吹き出し・つなぎの言葉 | 手書き・筆 | Klee One | 600 | 20px | 1.4 | 0.05em | - 見出しは明朝とゴシックの太字を章ごとに使い分ける - 数字（%・順位・本数）は本文の 2〜3 倍の大きさにする - 強調語は文字サイズを 1.3 倍にして色を変える - 「さらに」「だから」のようなつなぎの言葉は、手書き風の書体で中央に置く - 成分名には英字の筆記体を斜めに重ねる - 本文は左揃えで 2〜4 行に収める - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較や成分は 2 列にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 画像と見出しはほぼ全幅で縦に積む - ビフォーアフターは左右 2 枚の間に矢印を入れる - 成分は円形写真と文章を左右交互に並べる - 章扉は円のグラデーションを中央に置き、周りを植物で囲む - セクションの終わりに V 字の帯とつなぎの言葉を置き、次へ流す ## Elevation & Depth - カードは影をほとんど付けず、細い枠線とテクスチャで区切る - 品質宣言の白カードには、右下に黒いずらし影を付ける - 商品写真には地面に落ちる自然な影を付ける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は基本は角丸なしの四角。成分とバッジは円で切り抜く - **セクション境界**: V 字の矢印帯、液だれ状の黒い境界、斜めの切り替え - バッジは円形にする - 吹き出しは雲形かラフな枠にする - 見出しは手描き風の線で囲むか、引用符で挟む - ナンバーは黒い正方形に白い数字で入れる ## Components - **ポイント章扉**（`chapter-circle`）: パステルグラデーションの円に、番号バッジと大きな問いかけの見出しを入れる。周りを柑橘とハーブで囲む - **ビフォーアフター比較**（`before-after`）: 2 枚の写真にラベルの帯を付け、三角矢印でつなぐ - **実績バッジ**（`badge-ranking`）: 月桂樹と王冠で囲んだ大きな順位の数字を、黄色い光の地に置く - **専門家コメントカード**（`pro-voice-card`）: 黒板のような黒いカードにリングを綴じたノート風の飾りを付け、顔写真を右に置く - **成分紹介行**（`ingredient-row`）: 円形の水彩イラストに筆記体の英名を重ね、隣に成分名と短い説明を置く - **宣言リスト**（`number-list`）: 黒い四角の番号と、白カードにずらし影を付けた 4 行のリスト - **お客様の声カード**（`review-card`）: グレーのカードに似顔絵イラスト、年代、短い見出しを入れ、角に三角の飾りを付ける - **つなぎの帯**（`connector-band`）: V 字の帯の上に、手書き風のつなぎの言葉を置く - **雲形吹き出し**（`speech-bubble`）: 淡いブルーの雲形に白抜き文字を入れ、安心させる一言を言う ## Do's and Don'ts **Do** - 白黒の商品と柑橘・ハーブを組み合わせ、自然派らしさを出す - 効果は必ずビフォーアフターと数字で見せる - 章の始まりはグラデーションの円で統一する - 強調には黄色マーカーとピンク文字を使う - 地にテクスチャを敷き、平坦な単色を避ける **Don't** - 原色の赤や青のベタ塗りを広い面に使わない - 黒セクションを続けて置かない - 本文を長い段落にしない - 角の丸いピル型ボタンを多用しない - テクスチャの濃さで文字が読みにくくならないようにする ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（1 本で 3 役になることを一目で伝える）: 極太の見出し、女性モデル、黒い商品、柑橘の装飾。円バッジ 3 つに役割を並べる 2. **ブランド紹介**（商品の誕生を印象づける）: 白タイルの壁の前に商品写真。手書き風ロゴと明朝の見出しを置く 3. **実績**（人気の証拠を示す）: 黄色い光の地に月桂樹の順位バッジを置く 4. **悩みの提起**（白髪が見られている不安を呼び起こす）: 円グラフの大きな % とイラスト 5. **効果の実証**（1 回と継続で染まる様子を見せる）: 黒い全幅セクションに、ビフォーアフター写真と金文字の見出し 6. **従来品の欠点**（サロン染めと泡シャンプーの問題を示す）: ひび割れた漆喰の地にブラウンの雲形見出しと、チェックリスト 7. **なぜ染まるか**（仕組みを説明する）: 章扉の円、内側×外側の 2 つの丸、図解、色見本 8. **専門家の声**（プロの推薦で信頼を得る）: 板壁の地に黒いノート風カードを 3 枚並べる 9. **洗浄の仕組み**（泡タイプと比べた違いを図で示す）: ピンクの頭皮断面図を上下 2 段で比較する 10. **潤いと成分**（配合成分の魅力を伝える）: 円形の水彩イラストと筆記体の英名を左右交互に並べる 11. **こだわり**（製造品質と使いやすさを伝える）: 研究所の写真、手洗いの比較、容器の工夫 12. **品質宣言**（約束を明言する）: ミントの地に黒い看板と、番号付き白カード 4 枚 13. **お客様の声**（利用者の満足を示す）: 似顔絵イラスト付きのグレーカード 3 枚 14. **使い方**（手順を示す）: 白地にロゴと手のイラスト ## Imagery - 白と黒の商品パウチを、木の板・柑橘・ハーブ・炭と一緒に、明るい自然光で撮る - 40〜50 代の女性モデルが、髪に触れて笑う柔らかい写真 - 生え際や根元のアップで染まり具合がわかるビフォーアフター - 柑橘・オリーブ・ハーブの水彩イラストで枠を飾る - 頭皮断面や髪の毛のシンプルな図解イラスト - お客様の声には線画の似顔絵を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP の 1 カラムを中央に 750px 程度で置く - 左右の余白は淡いグレー、またはセクションの地色を広げる - 成分紹介や声のカードは、PC では 2〜3 列に並べてもよい - 見出しサイズは SP の 1.3 倍程度にとどめる ## 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-d7055164`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/ibiki-kenkyujyo/az-711/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。