--- version: alpha name: Iridescent Pastel Haircare LP description: ピンク・ラベンダー・水色のオーロラグラデーションと三角形の装飾で、きらめく艶を表したヘアケア商品 LP。白地にパステルの帯セクションを挟み、悩み提起から成分、商品一覧、香り、使い方の順に見せる。 colors: primary: '#C08AC8' secondary: '#7DD1E9' background: '#FFFFFF' background-alt: '#F5F5F5' dark-section: '#B1878F' accent-1: '#F5E04A' accent-2: '#EB95C3' accent-3: '#A0C3DE' tint-1: '#F1EBF5' tint-2: '#F8E2E8' surface: '#FEFDFE' text: '#4A4A55' text-muted: '#9A9AA5' on-dark: '#FFFFFF' accent-2-accessible: '#D72C87' accent-3-accessible: '#3C7BAC' primary-accessible: '#994DA4' dark-section-accessible: '#82555D' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 36px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Montserrat fontSize: 22px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.3em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Dancing Script fontSize: 22px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-en: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 48px worry-circle: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px free-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px tag-label: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 24px white-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 320px product-triangle: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 260px fragrance-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 420px step-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 56px highlight-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 60px --- # DESIGN.md — オーロラパステルの艶ヘアケア LP（Iridescent Pastel Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: かわいい、清潔・爽やか、やさしい・柔らかい、上品・高級 - **キーワード**: オーロラグラデーション・パステル・三角形モチーフ・艶・透明感・字間広めの欧文見出し - **地の質感**: ホログラムのような虹色グラデーションに、ボケた光とガラス片風の三角形を重ねる。地は白と淡いグレーのフラット。 - **形**: 三角形・菱形のジグザグ帯でセクションを区切る。ボタンは円・ピル。カードは小さめの角丸。 - **温度感**: やや涼しめのパステル。ピンクで甘さを、水色で清潔感を出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C08AC8` | ブランドのラベンダーピンク（見出し文字・ラベル） | 3% | 推定 | | `secondary` | `#7DD1E9` | 水色の帯セクションの地 | 9% | 画素の実測 | | `background` | `#FFFFFF` | ページの基本の地 | 34% | 画素の実測 | | `background-alt` | `#F5F5F5` | 手順セクションの淡いグレー地 | 8% | 画素の実測 | | `dark-section` | `#B1878F` | 悩みセクションのモカブラウンの波地 | 5% | 画素の主要色に補正 | | `accent-1` | `#F5E04A` | 原因を強調するイエロー（文字・手順バッジ） | 1% | 推定 | | `accent-2` | `#EB95C3` | 悩み円バッジ・ラベルのピンク | 1% | 画素の実測 | | `accent-3` | `#A0C3DE` | 悩み円バッジ・ラベルの水色 | 1% | 画素の主要色に補正 | | `tint-1` | `#F1EBF5` | 香りカードの淡いラベンダー地 | 5% | 画素の実測 | | `tint-2` | `#F8E2E8` | 淡いピンク地 | 4% | 画素の実測 | | `surface` | `#FEFDFE` | 白いカード | 8% | 画素の実測 | | `text` | `#4A4A55` | 見出し・本文の濃いグレー | 2% | 推定 | | `text-muted` | `#9A9AA5` | 注釈・容量の淡いグレー | 1% | 推定 | | `on-dark` | `#FFFFFF` | 帯セクション上の白文字 | 1% | 画素の主要色に補正 | | `accent-2-accessible` | `#D72C87` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#3C7BAC` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#994DA4` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#82555D` | AA を満たす補正値（計算） | | 計算 | - 地は白をベースにする。区切りにピンク→ラベンダー→水色のオーロラグラデーション帯を挟む。 - 悩み提起だけはモカブラウンの波模様の地にして、空気を変える。 - 成分訴求は水色の単色地に白カードを載せる。 - 強調色は3色まで。ピンク・水色・ラベンダーをラベルや円バッジに順番に割り当てる。 - イエローは原因の強調や手順バッジなど、要所だけに使う。 - 文字は真っ黒にせず、濃いグレーにする。 - `worry-circle` は文字 `#FFFFFF` × 背景 `#EB95C3` のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D72C87`、4.57:1）を使う。 - `tag-label` は文字 `#FFFFFF` × 背景 `#A0C3DE` のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#3C7BAC`、4.54:1）を使う。 - `fragrance-card` は文字 `#C08AC8` × 背景 `#F1EBF5` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#994DA4`、4.54:1）を使う。 - `highlight-box` は文字 `#F5E04A` × 背景 `#B1878F` のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#82555D`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦組み風キャッチ | 丸ゴシック | M PLUS Rounded 1c | 800 | 36px | 1.3 | 0.05em | | `headline-lg` | 英字のセクション見出し（字間を広く） | 欧文サンセリフ | Montserrat | 400 | 22px | 1.3 | 0.3em | | `headline-md` | 日本語の強調見出し・原因提示 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.08em | | `headline-sm` | 商品名・ポイント見出し | ゴシック | Noto Sans JP | 500 | 16px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 注釈・容量・価格の補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 商品写真に重ねる筆記体の飾り文字 | 欧文スクリプト | Dancing Script | 400 | 22px | 1.2 | 0.0em | | `label-button` | ラベル・円バッジ | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.1em | - セクション見出しは小文字の英字を字間広め（0.3em）で置き、下に小さな日本語を添える。 - 英字見出しの上下や左右に細い罫を添える。 - 価格は数字だけ大きく細身にし、税込表記は小さく添える。 - 商品カテゴリー名を白抜きの大きな英字にして、図形に半透明で重ねる。 - 強調する語は色を変えて太字にする。下線は使わない。 - 本文は中央揃えで、短い行で改行する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品は写真と説明を縦に積む。悩み・処方は2〜4列の円バッジにする。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは中央揃え。英字見出しから始める。 - 商品は三角形の図形と商品写真を重ね、左右交互に配置する。 - 水色・グラデーションの帯の上に、白カードを浮かせて載せる。 - 円バッジは同じ大きさで横に並べ、SP では2列に折り返す。 - 手順は番号＋商品写真＋黄色の円バッジを横に並べる。SP では2×2にする。 ## Elevation & Depth - 白カードには淡くて広い影（0 4px 16px rgba(0,0,0,.08)）をつける。 - 商品写真は切り抜きにし、影はほぼなしにする。 - 全体はフラットにし、奥行きはグラデーションと透明感で出す。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き写真にする。SNS の写真は角丸の正方形にする。 - **セクション境界**: 三角形・菱形が連なるジグザグのプリズム帯。悩みセクションは縦の波模様。 - 装飾の基本は、角を丸めた大きな三角形（再生ボタン形）。 - 悩み・フリー処方は円形バッジにする。 - ラベルは小さな角丸の長方形を色違いで並べる。 ## Components - **英字セクション見出し**（`section-title-en`）: 字間を広げた小文字の英字。下に罫で挟んだ小見出しを添える。 - **悩み円バッジ**（`worry-circle`）: 色違いの円の中に、悩みを短い言葉で書く。4つ並べる。 - **フリー処方円**（`free-circle`）: 白い円に淡い色の太い縁をつけ、無添加項目を書く。7つ並べる。 - **特長ラベル**（`tag-label`）: パステル色の小さな角丸ラベルに、特長を3つ並べる。 - **浮遊白カード**（`white-card`）: グラデーション地や水色地の上に載せる、成分・コンセプト説明のカード。 - **商品三角ビジュアル**（`product-triangle`）: グラデーションの三角形に商品写真と筆記体を重ね、半透明の英字を置く。 - **香りカード**（`fragrance-card`）: 淡いラベンダーのカード。香名、果実の写真、三層のピラミッド図を縦に並べる。 - **手順バッジ**（`step-badge`）: 大きな番号と商品写真の下に、黄色い円で効果を短く書く。 - **原因提示ラベル**（`highlight-box`）: 白枠の小さなラベルの下に、黄色の太字で原因を書く。 ## Do's and Don'ts **Do** - ピンク・ラベンダー・水色のオーロラグラデーションを主役にする。 - 三角形やプリズムのモチーフを、区切り・背景・商品の台座で繰り返す。 - 英字見出しは細身にして字間を広く取る。 - 余白をたっぷり取り、軽さと透明感を保つ。 - 悩み提起のセクションだけ暖色ブラウンにして、緩急をつける。 **Don't** - 原色の濃い赤・黒の大きなボタンを置かない。 - 純黒の太いゴシック見出しで重くしない。 - 角ばった重い影や立体ボタンを使わない。 - グラデーションの上に細かい本文を直接置かない（白カードに載せる）。 - パステル以外の彩度の高い色を増やさない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（艶の世界観と商品ラインを一目で伝える）: オーロラ光の背景に、ボトルを斜めに並べる。右に大きなキャッチと三角ロゴを置く。 2. **ブランド導入**（悩みを解決するブランドとして紹介する）: 白地の中央にロゴを置き、色違いの特長ラベルを3つ並べる。 3. **コンセプト**（シリーズの考え方を説明する）: グラデーション帯の上に英字と和文の見出しを置き、白カードで本文を見せる。 4. **悩みの提起**（髪の悩みに共感を得る）: ブラウンの波模様の地に悩み円バッジを4つ置き、黄色字で原因を示す。毛髪の断面図を矢印で比較する。 5. **解決提示**（ブランドが解決策であると示す）: 白地にロゴと、ラベンダー色のリード文を置く。 6. **成分・処方**（技術的な裏付けを示す）: 水色地に白枠の見出しを置く。白カードの中で、ケア前後の比較図と成分を説明する。 7. **ポイント**（主要な特長を4つ提示する）: グラデーション地に、大きな横長カード1枚と小さなカード3枚を並べる。 8. **フリー処方**（やさしさを訴求する）: 白抜きの円バッジを横一列に7つ並べる。 9. **商品一覧**（各商品と価格を紹介する）: 三角形のビジュアルと説明を左右交互に置き、価格と購入先ロゴを添える。 10. **詰め替え・限定品**（関連商品を見せる）: 淡いグラデーション帯の上に半透明の英字を置き、商品を3列・2列で並べる。 11. **香り**（香りの違いを伝える）: ラベンダーのカードを2枚並べ、果実の写真と香りのピラミッド図を入れる。 12. **使い方ステップ**（ライン使いの手順を示す）: グレー地に番号と商品を4つ並べ、黄色の円で効果を添える。 13. **SNS**（公式アカウントへ誘導する）: オーロラ地にSNSアイコンを置き、角丸の正方形の写真を横に流す。 ## Imagery - 透明ボトルを光の反射ときらめきで撮り、背景はパステルのボケにする。 - ホログラムやオーロラ風の虹色グラデーションに、ガラス片のような三角形を散らす。 - 毛髪のキューティクルを、イラストの断面図で円形に切り抜いて比較する。 - 果実・花・パールなど、成分や香りの物撮りを白背景で見せる。 - SNSの写真は単色のパステル背景で、テクスチャや商品を物撮りする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 60% の幅にコンテンツを置き、グラデーション帯は全幅で敷く。 - SP では商品の左右交互配置をやめ、ビジュアル→説明の縦積みにする。 - 悩み円は4つ横並びから2×2に、フリー処方円は7つ横並びから3〜4列に折り返す。 - 香りカードは PC の2列から SP の1列にする。 - ポイントの小カード3枚は、SP で縦に積むか横スクロールにする。 - SNS の写真は 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-d05c95c3`（元 LP の URL から採番） - **元 LP**: https://ulumee.jp/glow_protein/?utm_source=ig&utm_medium=paid&utm_campaign=23857065026280687&utm_term=23857066454550687&utm_content=23857066454560687&utm_id=23857065026280687&fbclid=PAZXh0bgNhZW0BMABhZGlkAasmQei63tABpx-vcgzL6oi8wouu2_VwsKF5ZwFsOC01m6705J9d - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。