--- version: alpha name: Creamy Beige Gold Hair Color LP description: クリーム色のなめらかな質感を背景にして、金茶色の手書き風番号と明朝体の見出しで上品にまとめたヘアカラー剤の LP。白いカードと余白を多めに取り、大人の女性向けの落ち着いた信頼感を出す。 colors: primary: '#8A6A3E' background: '#FFFFFF' background-alt: '#F9F5F2' tint-1: '#F5ECCF' tint-2: '#EEE9E3' secondary: '#DCC8B2' accent-1: '#C9A063' marker: '#FDF3DB' text: '#3A2E26' text-body: '#5A4C42' accent-2: '#827067' dark-section: '#6A6A6A' on-dark: '#FFFFFF' line: '#EBE6DD' accent-1-accessible: '#8D6831' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.15em accent: fontFamily: Great Vibes fontSize: 28px fontWeight: 400 lineHeight: 1.0 rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' fv-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 40px heading-slash: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px point-number: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 60px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 300px bubble-copy: backgroundColor: '{colors.marker}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 60px check-bar: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 32px color-chart: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' height: 260px shop-button: textColor: '{colors.text}' rounded: '{rounded.sm}' height: 48px step-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 80px --- # DESIGN.md — 生成りクリームと金茶の上品ヘアカラー LP（Creamy Beige Gold Hair Color LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型 - **キーワード**: クリーム質感・金茶グラデーション・明朝見出し・白カード・大人女性 - **地の質感**: 泡やクリームのなめらかな波を写した背景と、柔らかな光のにじみ - **形**: 角丸はほぼ使わない四角いカードと円形の切り抜き写真。斜線で挟んだ見出し - **温度感**: 暖色寄りの生成りとベージュで、温かく上品 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8A6A3E` | ブランドの金茶（帯・強調） | 4% | 推定 | | `background` | `#FFFFFF` | 基本の白地 | 24% | 画素の実測 | | `background-alt` | `#F9F5F2` | 生成りのセクション地 | 15% | 画素の実測 | | `tint-1` | `#F5ECCF` | クリーム黄の特長セクション地 | 7% | 画素の実測 | | `tint-2` | `#EEE9E3` | ベージュのメディア地 | 11% | 画素の実測 | | `secondary` | `#DCC8B2` | 淡い茶ベージュの写真まわり | 11% | 画素の主要色に補正 | | `accent-1` | `#C9A063` | 金色の手書き番号・強調文字 | 1% | 推定 | | `marker` | `#FDF3DB` | 強調語の黄色マーカー | 2% | 画素の実測 | | `text` | `#3A2E26` | 見出し文字 | 2% | 推定 | | `text-body` | `#5A4C42` | 本文文字 | 2% | 推定 | | `accent-2` | `#827067` | 色見本の茶系チップ | 2% | 画素の主要色に補正 | | `dark-section` | `#6A6A6A` | フッターのグレー地 | 4% | 画素の実測 | | `on-dark` | `#FFFFFF` | フッター上の文字 | 1% | 画素の主要色に補正 | | `line` | `#EBE6DD` | 細い区切り線・カード枠 | 1% | 画素の主要色に補正 | | `accent-1-accessible` | `#8D6831` | AA を満たす補正値（計算） | | 計算 | - 白・生成り・クリーム黄・ベージュの地色をセクションごとに切り替え、境界は色の差だけで分ける - 金茶は帯、番号、手書きの英字にだけ使い、広い面には使わない - 強調語は金色の文字か淡い黄色のマーカーで示し、赤などの強い色は使わない - 見出しは黒に近い焦げ茶にし、純黒は使わない - 濃いグレーはフッターだけに使う - `bubble-copy` は文字 `#C9A063` × 背景 `#FDF3DB` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8D6831`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し | 明朝 | Shippori Mincho | 500 | 40px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 600 | 22px | 1.5 | 0.1em | | `headline-md` | 特長ポイントの見出し | 明朝 | Noto Serif JP | 600 | 19px | 1.6 | 0.05em | | `headline-sm` | カードの小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em | | `note` | 注釈・英字の小見出し | 欧文サンセリフ | Montserrat | 400 | 10px | 1.6 | 0.15em | | `accent` | 手書き風の番号ラベル | 欧文スクリプト | Great Vibes | 400 | 28px | 1.0 | 0.0em | - 見出しは明朝体で字間を広めに取る - セクション見出しの上に、小さな英字ラベルを薄い文字色で置く - 番号は手書きの英字と大きな数字を重ね、両側に細い線を引く - 本文は中央揃えで短く改行する - 強調語は金色の文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 1 列（PC は 2 列） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクション見出しは中央に置き、上下の余白を大きく取る - 特長は写真と文章を左右交互に並べる（SP では縦に積む） - 補足の特長は白いカードを 2×2 に並べ、上に文章、下に写真を置く - 使い方は 4 ステップを線画アイコンと短い説明で 2×2 に並べる - メディア掲載とコラムは横スクロールのカード列にする ## Elevation & Depth - カードはほぼ影なしで、白い面を地色との差で浮かせる - FV の商品写真だけ、ごく薄い落ち影をつける - 通販サイトへのボタンは白地に薄い影をつける ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角い切り抜きが基本。髪や人物の写真は円形にし、白いふちを付ける - **セクション境界**: 直線。地色の切り替えだけで分ける - 見出しは左右の斜線で挟む - チェック項目は四角いベージュの帯にする - 円グラフ風のリングで数値を見せる - 角は鋭く保ち、ポップな丸みは避ける ## Components - **FV 下の金茶帯**（`fv-band`）: FV の下端に金茶の横帯を敷き、短い価値訴求を白い明朝体で載せる - **斜線見出し**（`heading-slash`）: 見出し語を左右の細い斜線で挟んで中央に置く - **ポイント番号**（`point-number`）: 金色の手書き英字に大きな数字を重ね、両側に細い線を引く - **白い特長カード**（`feature-card`）: 白いカードに、上は明朝の見出しと説明、下は写真を全幅で置く - **マーカー付きの短いコピー**（`bubble-copy`）: 円形の写真の周りに、金色の文字と黄色マーカーの短い訴求を散らす - **チェック帯**（`check-bar`）: ベージュの帯の左にチェックアイコンを置き、体験の特徴を 1 行で書く - **色見本チャート**（`color-chart`）: 茶系のチップを格子状に並べ、選んだ色の仕上がり写真と色名を横に出す - **通販サイトボタン**（`shop-button`）: 白地に薄い影をつけ、ロゴを中央に置いた横長ボタンを 3 つ並べる - **使い方ステップ**（`step-item`）: 線画のイラストアイコンの横に、STEP 番号・見出し・説明を置く ## Do's and Don'ts **Do** - 地色はクリーム・生成り・ベージュの近い色で切り替える - 見出しは明朝体にし、余白を大きく取る - 強調は金色とマーカーに絞る - 泡やクリームの質感写真を背景に使い、なめらかさを伝える - 人物写真は笑顔でナチュラルな光のものにする **Don't** - 原色の赤や青で強調しない - 太い角丸やポップなピル型ボタンを使わない - 純黒の文字や濃い背景を本文エリアに使わない - 装飾フォントを本文に使わない - カードに強い影をつけない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品とイメージモデルで印象を作る）: クリームの波の背景に明朝の大見出し、商品、笑顔の人物を置き、下端に金茶の帯を敷く 2. **ページ内ナビ**（各セクションへの導線）: 細い縦線で区切ったテキストリンクを横に並べる 3. **価値の要約**（特長を一目で伝える）: 円形の写真の周りに、マーカー付きの短いコピーを散らして配置する 4. **商品紹介と動画**（商品の外観と CM 動画を見せる）: 白地に商品写真と仕様を左右に並べ、その下に動画を中央に置く 5. **商品特長**（主要なポイントを詳しく説明する）: 手書き風の番号と明朝見出しを使い、写真と文章を交互に並べる 6. **満足度・お客様の声**（社会的な証明）: 大きな % のリングを中心に置き、口コミカードをその周りに配置する 7. **追加の特長**（補足のメリットを伝える）: 光がにじむ背景の上に白いカードを 2×2 で並べる 8. **悩みの提起**（共感を得て動画へ誘導する）: 斜線見出しの下に、動画カルーセルを置く 9. **カラーバリエーション**（色を選ばせる）: 白いパネルに色見本チャートと仕上がり写真を置く 10. **使い方**（手順を示し、不安を解消する）: 動画の下に、線画のアイコンで 4 ステップを並べる 11. **商品詳細**（セット内容と仕様を示す）: 円形に切り抜いた付属品の写真と、仕様のリストを並べる 12. **メディア掲載・コラム**（信頼性と回遊）: ベージュ地にメディア名と要約を並べ、コラムは横スクロールのカードにする 13. **購入導線**（購入につなげる）: 斜線見出しの下に通販サイトボタンを 3 つ並べ、SNS アイコンを添える 14. **フッター**（サイト内リンク）: 濃いグレー地に白文字のリンクを多段に並べる ## Imagery - 白い泡やクリームが波打つマクロ写真を背景に使う - 大人の女性の上品な笑顔を、柔らかい自然光で撮る - 白い手袋で泡を扱う手元を、ベージュ背景で写す - つやのある茶髪のアップを円形に切り抜く - 使い方の説明は細い線画のイラストにする - 背景に虹色の光のにじみを薄く重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 720px の本文幅、SP は画面幅の 90% にする - PC の 2×2 カードと左右交互のレイアウトは、SP では 1 列に積む - FV は SP では人物と商品を上、大見出しを下に置く - 色見本チャートは SP では横スクロールさせるか、チップを縮小する - 通販ボタンは 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-c86cc767`（元 LP の URL から採番） - **元 LP**: https://www.bigen.jp/awacream/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。