--- version: alpha name: Y2K Neon Gradient Haircare LP description: ピンクから青、ミントへ移るグラデの地に、黒い細線フチの淡いパネルを重ねたヘアケア LP。キラキラの星、アーチ窓の商品写真、雲形の写真フレーム、黒い影付きのピル型ボタンを使い、Z世代向けのポップでデジタルな空気を作っている。 colors: primary: '#0565B9' secondary: '#F34081' cta: '#F565AA' on-cta: '#FEF7FF' background: '#E4EFF1' surface: '#EBEBEB' text: '#000000' line: '#2D2F30' accent-1: '#E6F08D' accent-2: '#A2EADE' accent-3: '#89E48E' tint-1: '#F78ACB' dark-section: '#000000' on-dark: '#FFFFFF' cta-accessible: '#DE0E72' typography: display: fontFamily: Montserrat fontSize: 30px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 21px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.45 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em accent: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 8px md: 14px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px button-buy-small: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px copy-box: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 36px ingredient-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 140px arch-window: backgroundColor: '{colors.accent-2}' rounded: '{rounded.lg}' height: 330px series-pill: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px accordion-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 26px sparkle: height: 60px --- # DESIGN.md — 虹色グラデと黒フチのY2Kヘアケア LP（Y2K Neon Gradient Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: ポップ・元気、かわいい、クール・先進的、情報量多め・訴求型 - **キーワード**: Y2K・ネオングラデ・黒フチ・キラ星・アーチ窓・ステッカー感 - **地の質感**: なめらかな縦グラデの地に、フラットな淡色パネル。光沢のある3D装飾はFVだけに使う - **形**: 角丸パネルを黒1pxの線で囲む。アーチ窓・雲形フレーム・正円バッジ・黒い影付きピル - **温度感**: ピンクと青の寒暖が同時に出る、明るく高彩度なトーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0565B9` | ブランドのビビッドブルー（商品・帯） | 7% | 画素の実測 | | `secondary` | `#F34081` | ホットピンク（地のグラデ・星） | 8% | 画素の実測 | | `cta` | `#F565AA` | 購入ボタンのピンク | 1% | 画素の実測 | | `on-cta` | `#FEF7FF` | ボタン上の白文字 | 0% | 画素の実測 | | `background` | `#E4EFF1` | パネルの淡い水色地 | 17% | 画素の実測 | | `surface` | `#EBEBEB` | 説明カードのライトグレー | 9% | 画素の実測 | | `text` | `#000000` | 見出し・本文の黒 | 3% | 画素の実測 | | `line` | `#2D2F30` | パネルの黒フチ線 | 0% | 画素の実測 | | `accent-1` | `#E6F08D` | レモンイエローの見出し帯・円 | 6% | 画素の実測 | | `accent-2` | `#A2EADE` | ミントの円バッジ・見出し帯 | 5% | 画素の実測 | | `accent-3` | `#89E48E` | グリーンの見出し帯 | 3% | 画素の実測 | | `tint-1` | `#F78ACB` | ラインナップカードのピンク | 4% | 推定 | | `dark-section` | `#000000` | ブランドフッターの黒 | 5% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の白文字 | 0% | 画素の実測 | | `cta-accessible` | `#DE0E72` | AA を満たす補正値（計算） | | 計算 | - ページの左右の地は、ピンク→青→ミント→黄へ縦に移るグラデにする - 内容は淡い水色のパネルに載せ、グラデは外周にのぞかせる - 商品ごとにアーチ窓の地色を変える（黄・ミント・ピンク・グリーン・クリーム） - 主 CTA はピンクのグラデのピル、白文字に黒い影をつける - 線と文字の基本は黒。強調は色ではなく白箱＋黒フチで行う - 星の装飾はホットピンクとブルーの2色に限る - `button-primary` は文字 `#FEF7FF` × 背景 `#F565AA` のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DE0E72`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の英字大見出し | 欧文サンセリフ | Montserrat | 800 | 30px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（和文） | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.02em | | `headline-md` | 白箱に入れた訴求コピー | ゴシック | Zen Kaku Gothic New | 700 | 21px | 1.6 | 0.08em | | `headline-sm` | 円バッジの成分名 | ゴシック | Noto Sans JP | 700 | 14px | 1.45 | 0.0em | | `body-md` | カード内の説明文 | ゴシック | Noto Sans JP | 500 | 15px | 1.7 | 0.02em | | `note` | 成分の注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.04em | | `accent` | 商品名のカナ小見出し | ゴシック | Noto Sans JP | 500 | 11px | 1.4 | 0.1em | - 英字の商品名は極太のジオメトリックサンセリフで2行に分け、中央に置く - 英字の下には同じ名前のカナを小さく添える - 訴求コピーは1行ずつ白箱＋黒1.5pxのフチで囲み、左揃えで積む - 見出しの左右に黒い4芒星を置いて挟む - 注釈は8px前後に詰め、パネル下部にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ラインナップだけ 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算） - 左右16px内側に黒フチのパネルを置き、外側にグラデの地を見せる - パネルの中は、商品名→アーチ窓→コピー→円バッジ→写真カード→CTA の順に並べる - 円バッジは上に2つ、下に1つの三角配置にする - 説明カードは上下に分け、上に色帯の見出し、下にグレーの本文を置く - パネルの下端には、青い帯の開閉ボタンをつける ## Elevation & Depth - ぼかしたドロップシャドウは使わない - CTA は右下に黒い影を4px前後ずらして重ね、ステッカー風にする - 立体感は黒1pxのフチ線で出す - 光沢のある3Dオブジェクトは FV だけに使う ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は上が半円のアーチ窓、使用シーンの写真は角丸か雲形（花形）で切り抜く - **セクション境界**: 直線で切り替えるのが基本。強調部だけ、波打つリボン状の帯に英字を流す - パネル・カード・アーチ窓のすべてに黒1pxのフチを引く - 成分バッジは正円。淡色の塗りか白地に黒フチ - フリー表記は白い正円を4つ横に並べる - 4芒星をパネルの角からはみ出させる ## Components - **購入ピルボタン**（`button-primary`）: ピンクのグラデのピル。白文字、右に＞、黒いずらし影と黒フチ - **ラインナップ購入ボタン**（`button-buy-small`）: 薄グレー地に黒文字の小さいピル。黒い影つき - **白箱コピー**（`copy-box`）: 白地に黒フチの四角で、コピーを1行ずつ囲んで積む - **成分の円バッジ**（`ingredient-badge`）: 直径140px前後の淡色の円。成分名と効果を中央に入れる - **アーチ窓**（`arch-window`）: 上が半円の窓。下に向けて青へ抜けるグラデの地に、商品を立てて置く - **シリーズ名ラベル**（`series-pill`）: 白地に黒フチのピル。英字を星で挟む - **二段の説明カード**（`feature-card`）: 上段は色帯に太見出し、下段はグレー地に本文。全体を黒フチの角丸で囲む - **開閉の青帯**（`accordion-bar`）: パネルの下端にある青い帯。中央に白いv字 - **キラ星**（`sparkle`）: 細長い4芒星。ピンク・青・黒の3色で大小を散らす ## Do's and Don'ts **Do** - パネルの外側に、グラデの地を常に見せる - 黒フチと4芒星で、ステッカーのようなポップ感を保つ - 商品ごとに、アーチ窓のパステル色を変える - CTA は黒いずらし影のピルで統一する - 注釈はパネルの中に、小さくまとめて載せる **Don't** - ぼかし影やガラス風のカードにしない - 明朝体や細いフォントを使わない - パネルを白一色の無地にしない - 星の色を増やさない - 角丸のないボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と限定トライアルを伝える）: 赤〜ピンクのグラデに3D装飾と商品写真を重ね、手書き風の大きなコピーを置く。下部に黒い限定帯と丸い吹き出しをつける 2. **シリーズ選択**（髪質に合うシリーズへ誘導する）: 白箱の見出しの下に、シリーズのカードを縦に2つ並べる。カードには商品・コピー・グラデのボタンを入れる 3. **シリーズの紹介**（シリーズ共通の成分を示す）: 濃い青グラデに商品の集合写真を置き、泡のような透明な円で成分を3つ見せる 4. **商品詳細（シャンプー）**（特長と根拠を示す）: パネルの中に、アーチ窓・白箱コピー・円バッジ・フリー表記の丸・雲形の写真・グラフのカード・CTA を並べる 5. **商品詳細（トリートメント）**（テクスチャーと効果の比較を見せる）: 同じ型のパネルを使い、ミントの配色にする。比較写真を2枚横に並べる 6. **香りの紹介**（香りの構成を伝える）: 色帯の見出しカードの中に、ピラミッド図と香料の写真を置き、本文で説明する 7. **関連商品**（洗い流さない商品をクロスセルする）: 波打つリボンの帯で区切り、青帯つきのパネルを商品ごとに縦に積む 8. **ラインナップ**（全商品を購入につなげる）: ピンクのカードを2カラムで並べ、アーチ窓・商品名・容量・購入ボタンを入れる 9. **ブランドフッター・SNS**（SNSへ誘導する）: 黒地にロゴのステッカーを重ね、白抜きの丸い SNS アイコンを横に並べる ## Imagery - 商品の写真は切り抜いて正面に立て、パステルのアーチ窓に置く - 使用シーンはグレーの背景で撮る。泡や濡れた髪の後ろ姿をクローズアップする - イラストは太い黒線と青一色の塗りで描いた人物にし、髪の拡大を吹き出しで見せる - FV は虹色の光沢を持つハートや星などの3D装飾を浮かべる - グラフは黄とグレーの棒だけのシンプルなものにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版も中央に SP 幅のカラム（約480px）を置き、左右はピンク〜ラベンダーの淡いグラデで埋める - PC は左右の余白に、ロゴ・商品の小さな画像・シリーズへのボタンを固定のナビとして置く - PC のフッターの案内リンクは横並びにする ## 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-c21ad0b3`（元 LP の URL から採番） - **元 LP**: https://www.kao-kirei.com/ja/feature/khg/mememe/2508/?&tw=khg - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。