--- version: alpha name: Frosted Glass Aqua Blue Haircare LP description: 淡いブルーの水面テクスチャを地に、すりガラス風の半透明パネルとピル型見出しを重ねたヘアケア LP。データや成分図解を理系的に見せつつ、透明感と清涼感でまとめている。 colors: primary: '#5A7FBF' background: '#B2C2E5' background-alt: '#B4C5E9' dark-section: '#7693C8' surface: '#E2E9F4' text: '#383944' on-primary: '#F4FDFE' secondary: '#3A3230' line: '#7C99B4' text-muted: '#7D889B' accent-1: '#8CAAE2' cta: '#EAECEB' on-cta: '#323433' primary-accessible: '#4B74B9' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.75 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 600 lineHeight: 1.1 label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-glass-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 70px heading-blue-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 64px point-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 36px glass-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 320px stat-ring: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 150px tag-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px badge-circle: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px step-number: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 80px faq-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 70px --- # DESIGN.md — 水色×すりガラス質感のヘアケア LP（Frosted Glass Aqua Blue Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 清潔・爽やか、クール・先進的、信頼・誠実、上品・高級 - **キーワード**: 透明感・すりガラス・水滴・ブルーグラデ・科学的根拠・季節ケア - **地の質感**: 水面のゆらぎ写真や方眼グリッドの上に、白い縁と内側の光沢を持つ半透明ガラスパネルを重ねる - **形**: ピル型の見出しバー、角丸の大きいガラスカード、正五角形のモチーフ、円形バッジ - **温度感**: 冷たく澄んだ寒色系。濃いチャコール文字で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5A7FBF` | ブランドの青（見出しバー・提案円） | 6% | 推定 | | `background` | `#B2C2E5` | 水面テクスチャの淡青の地 | 45% | 画素の実測 | | `background-alt` | `#B4C5E9` | 方眼グリッド地の明るい青 | 15% | 画素の実測 | | `dark-section` | `#7693C8` | 課題提起エリアの濃い青地 | 8% | 画素の実測 | | `surface` | `#E2E9F4` | すりガラスパネル面 | 12% | 画素の主要色に補正 | | `text` | `#383944` | 見出し・本文の濃いチャコール | 4% | 画素の実測 | | `on-primary` | `#F4FDFE` | 青バー上の白文字 | 2% | 画素の実測 | | `secondary` | `#3A3230` | POINT見出しのこげ茶リボン | 1% | 推定 | | `line` | `#7C99B4` | Q&A区切りの青い横線 | 1% | 画素の実測 | | `text-muted` | `#7D889B` | 注釈・補足のグレー | 1% | 画素の実測 | | `accent-1` | `#8CAAE2` | グラフ・図解の中間青 | 2% | 画素の実測 | | `cta` | `#EAECEB` | お気に入り登録ボタン面（白ガラス） | 1% | 画素の実測 | | `on-cta` | `#323433` | ボタン上の濃色文字 | 0% | 画素の実測 | | `primary-accessible` | `#4B74B9` | AA を満たす補正値（計算） | | 計算 | - 地は淡い青の水面テクスチャを基本にし、論点ごとに方眼地・濃い青地へ切り替える - 見出しはブランド青のピル型バーに白文字、またはガラスバーに濃色文字 - 本文は真っ黒でなくチャコールで、寒色の地に落ち着きを出す - セクション番号のリボンだけこげ茶を使い、アクセントを最小限にする - 暖色は香りの静物写真のみに限定する - 末尾の会員誘導ブロックだけライトグレー地にして本編と区切る - `heading-blue-pill` は文字 `#F4FDFE` × 背景 `#5A7FBF` のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4B74B9`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ピル型ガラスバー内の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.3 | 0.04em | | `headline-lg` | 青バーのセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.06em | | `headline-md` | POINT内の小見出し・リード | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.05em | | `body-md` | 本文・回答文 | ゴシック | Noto Sans JP | 700 | 14px | 1.75 | 0.04em | | `note` | 注釈・調査出典 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.02em | | `accent` | Q/A番号・数値・POINT英字 | 欧文サンセリフ | Montserrat | 600 | 34px | 1.1 | 0.0em | | `label-button` | 悩み・効果のピルタグ | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.2 | 0.08em | - 本文も太めのゴシックで、淡い地でも読める濃さにする - 数値は欧文で大きく、%や単位は小さく添える - Q/A番号は白い立体風のエンボス欧文で左に置く - 成分名の頭文字はイタリックの欧文セリフで図形の頂点に配置 - 見出しは2行に改行し中央揃え - 注釈は★や※で始め、本文直下に小さく置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。Q&A は番号列と本文列の 2 列 - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - ガラスパネルは左右 7〜8% の余白で中央に置く - 見出しバー→パネル→注釈の順で縦に積む - 特徴タグは 3+2 の千鳥配置 - STEP は左の縦線で番号円をつなぎ、右に説明と写真 - Q&A は区切り線で 1 問ずつ帯状に分ける ## Elevation & Depth - ガラスパネルは白い 1〜2px の縁と内側のハイライトで厚みを出す - ピル型バーの下に薄い青の影を落として浮かせる - 円形バッジは球体のような光沢グラデーション - ドロップシャドウは大きく柔らかく、濃い影は使わない ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 工程写真は角丸 16px の正方形寄りで、青い太枠のガラスフレームに入れる - **セクション境界**: 濃い青から明るい地へは V 字の斜めカット。POINT は下向き三角のリボンで区切る - 見出しは全て端が丸いピル型 - 成分の象徴として正五角形を繰り返す - 効果・処方は円形ガラスバッジで並べる - 直角の角は区切り線以外で使わない ## Components - **ガラスピル見出し**（`heading-glass-pill`）: 半透明で白縁のピル型バーに濃色太字の見出し - **青ピル見出し**（`heading-blue-pill`）: ブランド青のピル型バーに白文字 2 行 - **POINT リボン**（`point-ribbon`）: セクション上端の下向き台形リボンに英字ラベル - **すりガラスカード**（`glass-card`）: グラフや図解を収める半透明パネル - **数値リング**（`stat-ring`）: ドーナツグラフの中央に大きな%数値 - **悩み・効果タグ**（`tag-pill`）: 白いガラス風の小ピルに短い単語 - **処方バッジ**（`badge-circle`）: 球体光沢の円に2行の処方名、2×2で配置 - **STEP 番号円**（`step-number`）: 青い光沢円に STEP と大きな数字、縦線でつなぐ - **Q&A 行**（`faq-item`）: 左に白エンボスの Q/A 番号、右に本文、下に青い区切り線 - **登録ボタン**（`button-primary`）: 白いガラス調ピルに2行文言と右端の＋円アイコン ## Do's and Don'ts **Do** - 地には必ず水面ゆらぎか方眼のテクスチャを敷く - 情報は半透明ガラスパネルに入れて重ねる - 根拠はグラフ・図解・調査出典つきで示す - 見出しはピル型で統一する - 数値は欧文で大きく強調する **Don't** - 赤やオレンジなどの暖色を UI に使わない - 不透明でフラットな四角いボックスにしない - 細い明朝体で見出しを組まない - 濃い影やハードなボーダーを付けない - テクスチャのない真っ白な地を長く続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節性の悩みと商品を一目で伝える）: 水面地に大見出しのガラスピル、ボトル写真、右に悩みタグ 3 つ 2. **課題提起（データ）**（悩みの普遍性を数値で示す）: 濃い青地に青ピル見出し、ガラスカード内に数値リング 2 つと出典 3. **原因の解説**（悩みのメカニズムを図解する）: 折れ線グラフカードと線画イラストで原因を説明 4. **解決の提案**（商品コンセプトを提示）: V字カット後に青い円の提案バッジ、五角形2つを＋で結び、効果タグを千鳥配置 5. **特長（POINT1〜4）**（成分・技術・処方の根拠を示す）: こげ茶リボンで区切り、ガラスピル見出し＋図解カード＋本文と注釈 6. **香り**（使用感の情緒的価値を伝える）: ガラスピル見出し、中央揃え本文、花と果実の切り抜き写真 7. **使い方（STEP）**（推奨の使い方を手順で示す）: 大きな見出しと TRY 円、縦線でつないだ STEP 円と角丸写真 3 枚 8. **よくある質問**（購入前の疑問を解消）: 英字見出しに下線、エンボス番号の Q/A を区切り線で並べる 9. **会員登録誘導**（お気に入り登録で再訪を促す）: ライトグレー地に線画アイコン 3 つと白いピル型ボタン ## Imagery - 商品は正面から撮った物撮りで、淡いブルーの光に溶け込むように配置 - 背景は水面のコースティクス（光のゆらぎ）を淡い青で全面に敷く - 成分・分子は半透明のガラス球や五角形の3DCGで描く - 原因の説明はモノトーンの太い線画イラスト - 使い方は後ろ姿・手元の髪のクローズアップ写真で顔は写さない - アイコンは細線のアウトラインで単色 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 600〜750px のカラムに SP 構成をそのまま収め、左右は水面テクスチャで埋める - 数値リングや処方バッジは PC で横一列に並べてもよい - Q&A は PC で番号列を広めに取り本文幅を 600px 程度に抑える - STEP は 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-2dbf7b98`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kao-haircare/answer-13/?fbclid=PAaWdyZASOa61leHRuA2FlbQEwAGFkaWQBqzQuugIbb3NydGMGYXBwX2lkDzU2NzA2NzM0MzM1MjQyNwABpz57KBPt7M1gg1YArEJG3ZRwU1P8yLtjNYfEVeJu9aJIJlcEkkVkcbRVKJvT_aem_sQ1QTS5DdWxCZbH4iJd9Zw - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。