--- version: alpha name: Warm Beige Silky Night Haircare LP description: 生成り・ベージュ・モカブラウンのグラデーションに金色のアクセントを重ねた、静かで上品なヘアケア雑貨 LP。細い明朝と字間の広いゴシックで眠りの柔らかさを出し、オレンジ下線で訴求語を強調する。 colors: primary: '#AA8A61' background: '#F2ECD9' background-alt: '#F2EBD9' surface: '#FFFFFF' dark-section: '#9D896B' secondary: '#7B6C42' accent-1: '#D4A848' accent-2: '#E08A2A' accent-3: '#9A3A2E' text: '#483B2D' text-muted: '#8F816A' on-dark: '#FBF7E7' tint-1: '#E1D3B4' line: '#C9B799' primary-accessible: '#876C49' accent-1-accessible: '#8D6B21' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.15em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em accent: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.12em headline-sm: fontFamily: Klee One fontSize: 26px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' brand-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 76px circle-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px worry-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 44px point-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 72px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 360px label-gold: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px cloud-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px step-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 560px spec-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px --- # DESIGN.md — ベージュ×金の上品なナイトヘアケア LP（Warm Beige Silky Night Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型 - **キーワード**: 生成りとモカ・金の光・眠り・夜・シルクの艶・細い明朝・柔らかな光彩 - **地の質感**: 布の揺らぎや光の粒子、ひび割れた土壁風テクスチャ、薄い金の煌めきを背景に重ねる - **形**: 正円バッジ、アーチ窓、雲形吹き出し、ピル型リスト、角丸控えめのカード - **温度感**: 暖色寄り。電球色の室内光のような温かさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AA8A61` | ブランドのモカベージュ（帯・見出し地） | 7% | 画素の主要色に補正 | | `background` | `#F2ECD9` | 生成りの基本背景 | 25% | 画素の実測 | | `background-alt` | `#F2EBD9` | 淡いクリームの切替背景 | 12% | 画素の実測 | | `surface` | `#FFFFFF` | カード・白面 | 9% | 画素の実測 | | `dark-section` | `#9D896B` | 悩み・声セクションのくすみブラウン地 | 12% | 画素の実測 | | `secondary` | `#7B6C42` | 濃いモカの帯・ボタン | 7% | 画素の実測 | | `accent-1` | `#D4A848` | 金色バッジ・円 | 3% | 推定 | | `accent-2` | `#E08A2A` | 強調文字・下線のオレンジ | 1% | 推定 | | `accent-3` | `#9A3A2E` | 悩みリストの赤茶強調 | 1% | 推定 | | `text` | `#483B2D` | 見出し・本文のダークブラウン | 4% | 画素の主要色に補正 | | `text-muted` | `#8F816A` | 注釈・英字サブ | 1% | 画素の主要色に補正 | | `on-dark` | `#FBF7E7` | 暗色地上の白文字 | 2% | 画素の実測 | | `tint-1` | `#E1D3B4` | セクション地のベージュ | 9% | 画素の主要色に補正 | | `line` | `#C9B799` | 点線・区切り線 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#876C49` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#8D6B21` | AA を満たす補正値（計算） | | 計算 | - 地は生成り〜クリームを基本に、悩み・お客様の声はくすみブラウン地に切り替える - ブランド帯はモカの横グラデーションに白文字 - 金色は円バッジ・成分訴求・『さらに』ラベルに限定 - 本文の強調はオレンジ太字＋同色下線 - 悩みの強調語は赤茶の太字 - 写真は暖色の光でベージュに馴染ませ、彩度の高い色は成分アイコン等に限る - `brand-band` は文字 `#FBF7E7` × 背景 `#AA8A61` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#876C49`、4.58:1）を使う。 - `circle-badge` は文字 `#FBF7E7` × 背景 `#D4A848` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8D6B21`、4.59:1）を使う。 - `point-band` は文字 `#FBF7E7` × 背景 `#AA8A61` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#876C49`、4.58:1）を使う。 - `label-gold` は文字 `#FBF7E7` × 背景 `#D4A848` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8D6B21`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・大見出しのキャッチ | 明朝 | Shippori Mincho | 500 | 44px | 1.3 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 400 | 30px | 1.4 | 0.15em | | `headline-md` | サブ見出し・ポイント名 | ゴシック | Zen Kaku Gothic New | 500 | 22px | 1.4 | 0.12em | | `accent` | 英字見出し・セクションラベル | 欧文セリフ | Cormorant Garamond | 600 | 40px | 1.1 | 0.12em | | `headline-sm` | 声カードの手書き見出し | 手書き・筆 | Klee One | 600 | 26px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.08em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | | `label-button` | ラベル・タグ | ゴシック | Noto Sans JP | 500 | 15px | 1.3 | 0.1em | - 見出しは字間を広め（0.1em以上）にとり、細めのウェイトで静かに見せる - 最重要語だけ文字サイズを倍近くに上げ、助詞は小さくする - 英字の補助見出しはセリフ体の大文字で字間を広く - 写真上の縦書きコピーは明朝で引用符を添える - 本文の強調は太字＋下線で1文に1〜2箇所 - 注釈は※付きで小さく右寄せ - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ポイント比較・ビフォーアフター・手順は 2 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は全幅で配置し、上下をグラデーションで背景に溶かす - セクション間は下向きの山形やグラデーションでつなぐ - カードは左右に余白をとり中央寄せ - 見出しは中央揃え、本文は左揃え - 番号付きポイントは全幅の帯を3段に積む ## Elevation & Depth - カードは影なし、または非常に淡いぼかし影 - 円バッジは半透明の白縁とグロー - 吹き出し・雲形は淡い影で浮かせる - 写真の上に光の粒子を重ねて奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 全幅写真のフェード、アーチ窓、角丸の楕円、正円 - **セクション境界**: 下向きV字の切り込みとグラデーションの溶け込み - 悩みリストは白いピル型 - 特長は正円バッジで2〜3個並べる - 商品写真はアーチ型フレームに収める - 細い金線で円弧と放射線の装飾を描く ## Components - **ブランド帯**（`brand-band`）: モカのグラデーション帯に白の字間広めの商品名と英字サブ - **円形特長バッジ**（`circle-badge`）: 半透明やベージュ・金の正円に2〜4文字の特長と注釈 - **悩みピルリスト**（`worry-pill`）: ブラウン地に白のピル。左にチェック、強調語は赤茶 - **番号付きポイント帯**（`point-band`）: 大きなセリフ数字＋小見出し＋太字見出し。3段で色を濃くしていく - **お客様の声カード**（`voice-card`）: 生成りカードに手書き見出し、線画イラスト、星評価、点線区切り、下線強調の本文 - **金ラベル**（`label-gold`）: 金地の小さな長方形ラベルで『さらに』や成分名を示す - **雲形吹き出し**（`cloud-bubble`）: 白い雲形・楕円の吹き出しで心の声や次への誘導 - **使い方ステップ**（`step-grid`）: 白い角丸パネルを十字線で4分割。STEP番号と線画イラスト - **商品仕様表**（`spec-table`）: 項目名と値を縦線で分けた罫線少なめの表 ## Do's and Don'ts **Do** - 生成り・ベージュ・モカの3段階で地を切り替える - 見出しの字間を広くとり、静かな印象を保つ - 写真は暖色の柔らかい光で撮り、背景にフェードさせる - 金色は小面積の光るアクセントに留める - 訴求語はオレンジの下線で本文中に示す - 注釈を必ず※で添える **Don't** - 原色や寒色の大面積を使わない - 太く詰まったゴシック見出しを多用しない - 強い影や立体ボタンを使わない - 写真を白枠の四角でただ並べない - 黒ベタの背景を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（眠りながらケアできる世界観を伝える）: 眠る女性の全幅写真に白い大見出しと円形特長バッジ3つ 2. **商品紹介**（商品と差別化ポイントを示す）: ブランド帯の下に商品パッケージ写真、手書き風コピー、金の菱形バッジ 3. **素材の背景説明**（従来素材の良さと進化を対比）: モカ地に白文字、特性タグを白四角で並べ、V字で次へ 4. **グレードアップ訴求**（新素材の価値を示す）: 大きな英字セリフ見出しと円バッジ2つの掛け算 5. **技術・成分説明**（機能の根拠を示す）: 布の揺らぎ背景、成分の雫写真、縦書きコピーの髪写真 6. **社員モニターの声**（身近な体験で共感）: 白カードに星評価と年代タグ 7. **悩みの提起**（読者の悩みを言語化）: ひび割れ土壁風のブラウン地に白ピルの悩み5つ、症状を暗色円で配置 8. **解決提案**（睡眠時間をケア時間にする提案）: 線画の悩む人物と吹き出し、ベッド写真、月形の数値バッジ 9. **専門家コメント**（権威付け）: 白カードに肩書・英字名・写真・下線強調の本文 10. **効果データ**（数値で効果を示す）: 大きな数字とビフォーアフター写真2列 11. **選ばれるポイント**（特長を3つに整理）: 金線のアーチ装飾、番号帯3段、各POINTの写真と本文 12. **利用シーン**（日中にも使える価値）: アーチ窓写真に雲形吹き出し 13. **お客様の声**（購入者の評価で後押し）: ブラウン地に手書き見出しの生成りカードを縦に並べる 14. **使い方・商品仕様**（手軽さと詳細を伝える）: 4分割ステップパネルと、商品写真グリッド、仕様表 ## Imagery - 電球色の柔らかい室内光で、リネンやベッドの上の女性を撮る - 髪のツヤを逆光で見せ、写真の下端を背景色にフェード - 布のドレープと光の粒子を背景素材に使う - 線画は細いブラウンの単線で、女性の横顔や手順を描く - 月と星の小さな金線モチーフを添える - 成分は金色の透明な雫やカプセルで表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 450〜600px）のカラムを置き、左右を生成り地で埋める - 全幅写真はカラム幅内に収め、背景に同系色のぼかしを敷く - 声カードや悩みリストは PC で 2 列にしてもよい - 見出しサイズは 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-51633521`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/ibiki-kenkyujyo/az-1039/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。