--- version: alpha name: Ivory and Mocha Organic Haircare LP description: 生成りの地にモカブラウンを差し色にした、明朝見出し中心の静かで上品なヘアケア LP。月桂冠の実績表示、POINT 番号見出し、丸いおすすめバッジ、手描きの植物イラストで、オーガニックらしさと高級感を両立させている。 colors: primary: '#96715E' background: '#FEFBF4' background-alt: '#FDFBF3' surface: '#FEFEFE' text: '#333028' text-body: '#544946' accent-1: '#947F42' marker: '#E8B7AE' line: '#B8A99D' tint-1: '#FEF9F3' on-primary: '#FFFFFF' dark-section: '#1E2630' primary-accessible: '#916D5B' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Cormorant Garamond fontSize: 26px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em accent: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 3px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 12px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' laurel-badge: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 120px point-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px recommend-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 76px check-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 32px step-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 20px howto-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 30px product-name-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 20px --- # DESIGN.md — 生成り×モカブラウンの上品ヘアケア LP（Ivory and Mocha Organic Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、ナチュラル、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 生成り・モカブラウン・明朝体・月桂冠・ボタニカル線画・余白 - **地の質感**: マットで柔らかな紙のような生成り地。うっすらボタニカルの影を重ねる - **形**: 角は直線ベース。小さなカードに軽い影、バッジは正円、ラベルは小さめの角丸 - **温度感**: 暖色寄り（クリーム〜ベージュ〜ブラウン） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#96715E` | おすすめバッジ・step ラベルのモカブラウン | 4% | 画素の実測 | | `background` | `#FEFBF4` | ページ全体の生成り地 | 40% | 画素の実測 | | `background-alt` | `#FDFBF3` | 実績エリアのベージュ地 | 10% | 画素の実測 | | `surface` | `#FEFEFE` | 特長カード・手順カードの白 | 11% | 画素の実測 | | `text` | `#333028` | 見出しの濃いブラウングレー | 2% | 画素の実測 | | `text-body` | `#544946` | 本文テキスト | 2% | 画素の主要色に補正 | | `accent-1` | `#947F42` | 月桂冠・実績数字のゴールド | 2% | 画素の実測 | | `marker` | `#E8B7AE` | 見出しの強調語に引く淡いピンクマーカー | 0% | 推定 | | `line` | `#B8A99D` | 区切り線・カード縁 | 1% | 画素の主要色に補正 | | `tint-1` | `#FEF9F3` | 手順ヘッダー周辺の淡いグレージュ | 5% | 画素の実測 | | `on-primary` | `#FFFFFF` | ブラウン面上の白文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#1E2630` | 夜の香り写真帯の濃紺 | 3% | 推定 | | `primary-accessible` | `#916D5B` | AA を満たす補正値（計算） | | 計算 | - 地は生成り（#FEFBF4）を基本に、実績エリアだけ一段濃いベージュで帯を作る - モカブラウンはバッジ・ラベル・手順ヘッダーなど小面積の面にのみ使う - ゴールドは月桂冠と実績数字に限定し、他で使わない - 見出しは黒ではなく濃いブラウングレーで柔らかく - 強調語には淡いピンクの下半分マーカーを引く - 彩度の高い色は植物イラストの中だけに留める - `recommend-circle` は文字 `#FFFFFF` × 背景 `#96715E` のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#916D5B`、4.62:1）を使う。 - `step-label` は文字 `#FFFFFF` × 背景 `#96715E` のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#916D5B`、4.62:1）を使う。 - `product-name-label` は文字 `#FFFFFF` × 背景 `#96715E` のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#916D5B`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大キャッチ | 明朝 | Shippori Mincho | 700 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション見出し・POINT 見出し | 明朝 | Shippori Mincho | 500 | 24px | 1.5 | 0.12em | | `headline-md` | 英字セクション見出し（HOW TO USE 等） | 欧文セリフ | Cormorant Garamond | 500 | 26px | 1.3 | 0.05em | | `accent` | 実績数字（ゴールド） | 明朝 | Noto Serif JP | 500 | 34px | 1.2 | 0.05em | | `headline-sm` | 小見出し・カード見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.1em | | `body-md` | 本文・チェックリスト | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `note` | 注釈・集計期間 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `label-button` | step ラベル・商品名ラベル | ゴシック | Noto Sans JP | 400 | 12px | 1.2 | 0.1em | - 見出しは明朝で字間を広め（0.1em 前後）に取る - 本文・リストはゴシック細めで情緒を邪魔しない - 英字見出しはセリフ体、補助の英字はイタリック風小文字で添える - 数字は明朝で大きく、単位は一回り小さく - 太字は多用せず、大きさと字間で階層を作る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジ・手順・商品は 3 列、特長は画像左＋リスト右の 2 分割 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算） - セクション間は広めの余白で静かなリズムを作る - POINT 見出しは左に番号ブロック、縦線で区切り右に 2 行見出し - 写真は全幅で挟み、文字セクションと交互に配置 - 3 列要素は等幅・等間隔で中央揃え - 注釈は中央揃えで極小サイズにまとめる ## Elevation & Depth - 白カードにごく薄い影（0 2px 6px rgba(0,0,0,0.08)） - 商品ボトル画像に落ち影を付けて浮かせる - それ以外はフラットに保つ ## Shapes - **角丸**: 小 3px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物・シーン写真は全幅の長方形、商品は切り抜き - **セクション境界**: 直線で切り替え。手順カード上部は斜めカットのブラウン帯 - おすすめバッジは正円 - ラベルは角丸 3px 程度の小さな長方形 - カードは角丸ほぼなし〜6px - 斜め・波などの派手な区切りは避ける ## Components - **月桂冠実績表示**（`laurel-badge`）: ゴールドの月桂冠で数字と受賞を挟み、下に注釈を添える - **POINT 番号見出し**（`point-heading`）: 小さな POINT と大きな番号を下線付きで置き、縦線の右に明朝 2 行見出し - **おすすめ丸バッジ**（`recommend-circle`）: モカブラウンの正円にチェックアイコンと 2 行の白文字、3 つ並べる - **チェックリストカード**（`check-card`）: 白カードに☑付きの短い特長を 1 行ずつ縦に積む - **step ラベル**（`step-label`）: ブラウンの小ラベルに step 番号、右に工程名 - **使い方手順カード**（`howto-card`）: ブラウン帯ヘッダーに STEP 番号、線画イラストと説明文。矢印で 3 枚を繋ぐ - **マーカー強調見出し**（`marker-heading`）: 明朝見出しの強調語に淡いピンクの帯を敷き、上下に細線 - **商品名ラベル**（`product-name-label`）: 商品切り抜きの下にブラウンの横長ラベルで名称 ## Do's and Don'ts **Do** - 生成り地と広い余白で上品な静けさを保つ - 見出しは明朝＋広い字間で統一する - ブラウンは小さな面で繰り返しリズムを作る - 実績はゴールドの月桂冠で権威付けする - 手描き風の植物線画を余白の隅に添える **Don't** - 原色や蛍光色の CTA を置かない - 純黒の太字ゴシックで見出しを作らない - 角丸の大きいポップなボタンにしない - 背景に濃いグラデーションや柄を入れない - 情報を詰め込みすぎて余白を潰さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（髪を労わる世界観と商品を一目で伝える）: 明るい自然光の女性写真に左上の明朝キャッチ、手前に商品ボトル切り抜き 2. **実績**（販売数・受賞・評価で信頼を示す）: ベージュ地にゴールドの月桂冠 3 つ、モンステラの淡い影、下に極小注釈 3. **特長 1**（補修処方を訴求する）: POINT 見出し＋ヘアアイロンの全幅写真 4. **おすすめの対象**（ターゲットの悩みを自分ごと化）: 下線付き小見出しとブラウン丸バッジ 3 つ 5. **共感と解決**（悩みと願いを提示し解決策へ繋ぐ）: マーカー強調の明朝見出し、商品大写真＋チェックリストカード 5 段 6. **特長 2**（2 ステップの補修を説明）: 白カード 2 枚に商品切り抜き左、step ラベルとチェック項目右 7. **特長 3**（香りによる癒しを訴求）: 夜の暗い全幅写真、英字イタリックの副題、精油 3 種の水彩イラスト 8. **使い方**（正しい使用手順を示す）: 英字セリフ見出し、ブラウン帯ヘッダー付き 3 列カードと矢印 9. **ラインナップ**（シリーズ併用を促す）: 植物線画を添え、商品切り抜き 3 つにブラウンの名称ラベル ## Imagery - 人物写真は明るい自然光、ベージュ系の室内で柔らかいトーン - 商品は白背景切り抜きで落ち影付き - 香りは夜のキャンドルやディフューザーの暗く落ち着いた写真 - 植物は淡いモノクロ線画や水彩で余白の隅に配置 - 手順イラストは細い線画の女性、髪だけ淡い色付け - 背景にモンステラなど葉の淡いシルエットを薄く重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後のカラムに SP デザインを据え、左右は生成り地で埋める - FV は写真を横長にし、キャッチを左、人物を右に配置 - 3 列要素はそのまま、余白と文字サイズを 1.2 倍程度に拡大 - 特長の画像＋リストは PC でも左右 2 分割を維持 ## 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-09c04cbf`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/tsurunishi/90xb0bbzfwg76/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。