--- version: alpha name: Warm Amber Salon Haircare LP description: 白と大理石調の淡い地に、琥珀・オレンジ・深紅の製品色をのせたヘアケア通販 LP。見出しは明朝体で上品に組み、ランキング・受賞バッジ、悩みチェックリスト、6 シリーズ別の色分けセクションで情報を積み上げる訴求型の構成。 colors: primary: '#A8242A' secondary: '#C9611E' accent-1: '#E09D64' accent-2: '#214A2C' accent-3: '#5E8296' cta: '#B39B75' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FBF9F6' dark-section: '#313C33' on-dark: '#F8FBF8' text: '#222222' line: '#8A8A8A' marker: '#A8242A' secondary-accessible: '#BC5B1C' cta-accessible: '#8A724C' typography: display: fontFamily: Shippori Mincho fontSize: 42px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 96px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' reason-circle: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px award-badge: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 90px series-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 32px check-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 110px reason-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px sns-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 230px faq-item: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 48px link-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 200px button-primary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 100px --- # DESIGN.md — 琥珀色と深紅の明朝系サロンヘアケア LP（Warm Amber Salon Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、ナチュラル、情報量多め・訴求型、信頼・誠実 - **キーワード**: 琥珀色・明朝見出し・大理石調・シリーズ色分け・受賞バッジ・サロン品質 - **地の質感**: 白地と淡いグレーの大理石テクスチャ、柔らかな自然光の製品写真 - **形**: 角丸なしの四角いボックスと細い罫線が中心。円形の理由バッジと円形の成分写真をアクセントに使う - **温度感**: 暖色寄り。琥珀・オレンジ・深紅を緑と水色の差し色で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A8242A` | 深紅の帯見出し・強調文字 | 3% | 推定 | | `secondary` | `#C9611E` | シリーズのオレンジ帯ラベル | 2% | 推定 | | `accent-1` | `#E09D64` | シリーズの淡い琥珀・数字 | 3% | 画素の主要色に補正 | | `accent-2` | `#214A2C` | 理由番号ラベル・末尾 CTA 矢印 | 1% | 画素の実測 | | `accent-3` | `#5E8296` | 天然水セクションの青灰ボックス | 1% | 推定 | | `cta` | `#B39B75` | FAQ 見出し帯・check コーナー | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | 帯上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 36% | 画素の実測 | | `background-alt` | `#FBF9F6` | 大理石調の淡い地 | 12% | 画素の実測 | | `dark-section` | `#313C33` | 悩み提起の濃緑灰セクション | 4% | 画素の実測 | | `on-dark` | `#F8FBF8` | 濃色地上の文字 | 1% | 画素の実測 | | `text` | `#222222` | 見出し・本文の墨色 | 4% | 推定 | | `line` | `#8A8A8A` | 見出し下・ボックスの細罫線 | 1% | 推定 | | `marker` | `#A8242A` | 本文強調の深紅下線 | 1% | 推定 | | `secondary-accessible` | `#BC5B1C` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#8A724C` | AA を満たす補正値（計算） | | 計算 | - 地は白と大理石調の淡いベージュグレーを交互に使う - シリーズごとに深紅・オレンジ・琥珀・黄土で色を変え、見出し・帯・数字をその色にそろえる - 本文の強調は深紅の太字と下線にする - 悩み提起だけ濃緑灰の暗いセクションにして流れを区切る - 理由 3 つは緑・ピンク・水色と、写真のテーマに合わせて地色を変える - FAQ とリンクカードの角はくすんだ金茶色で統一する - `series-label` は文字 `#FFFFFF` × 背景 `#C9611E` のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#BC5B1C`、4.51:1）を使う。 - `faq-item` は文字 `#FFFFFF` × 背景 `#B39B75` のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8A724C`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクションの大見出し | 明朝 | Shippori Mincho | 600 | 42px | 1.35 | 0.05em | | `headline-lg` | シリーズ・理由の見出し | 明朝 | Noto Serif JP | 600 | 34px | 1.4 | 0.06em | | `headline-md` | 中見出し・リード | 明朝 | Noto Serif JP | 500 | 22px | 1.5 | 0.08em | | `headline-sm` | ボックス見出し・FAQ 質問 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `body-md` | 本文・回答 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.04em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | シリーズ番号の大きな透かし数字・価格 | 欧文セリフ | Playfair Display | 400 | 96px | 1.0 | 0.0em | | `label-button` | 帯ラベル・バッジ文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.06em | - 見出しは明朝で字間をやや広く取る - 見出しの一部だけを深紅やシリーズ色にして大きくする - 数字は欧文セリフで大きく、単位は小さくする - 本文は 13px 前後のゴシックで行間を広めに - シリーズ番号は淡い色で極大サイズにして透かし扱い - 注釈は※付きの小さいゴシックで灰色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ラインナップは 2 列、特長・成分は 3〜5 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - セクション間は縦の細線や下向き三角で区切る - 写真は全幅、テキストカードは左右に 20px 程度の余白を取る - シリーズ紹介は同じ型を 6 回繰り返す - 成分は丸写真を横一列に並べ、名前を下に置く - おすすめボックスは帯見出しとチェックリストの組み合わせ ## Elevation & Depth - 基本はフラットで、影はほぼ使わない - 白カードを写真背景にのせ、境目を地の色差で出す - リンクカードは薄い灰色の 1px 枠で区切る ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 製品は角のない四角、成分写真と理由バッジは正円で切り抜く - **セクション境界**: 直線の切り替えが基本。濃色セクションの上端は中央に下向き三角を入れる - ボックスとボタンは角丸なし - 理由番号ラベルだけは小さなピル型 - リンクカードの右下に斜めの三角コーナーを置く - 見出し枠は四隅に三角の飾りを入れる ## Components - **理由の円形バッジ**（`reason-circle`）: 白い円に金色の縁。小さな理由番号とキーワードを入れ、3 つ横に並べる - **ランキング月桂冠バッジ**（`award-badge`）: 金色の月桂冠と王冠で順位を囲み、中央を大きく、左右を小さく並べる - **シリーズ色帯ラベル**（`series-label`）: 製品写真の下に、シリーズ番号を白抜き文字で入れた横長の色帯 - **おすすめチェックリスト**（`check-box`）: 深紅の帯見出しと、細い深紅枠の白ボックス。チェック項目の強調部分に下線を引く - **理由番号タグ**（`reason-tag`）: 理由番号を入れたピル型の小ラベル。その下に枠線付きのサブ見出しを置く - **SNS 投稿カード**（`sns-card`）: 正方形の写真の下に、いいね等のアイコンと短い感想を置いた白カード。2 列で並べる - **FAQ アコーディオン**（`faq-item`）: 金茶色の帯に Q と質問を白文字、下の白枠に深紅の A と回答を置く - **商品リンクカード**（`link-card`）: 灰色の枠のカード。左上に深紅の送料無料タグ、右下に金茶色の三角 check コーナーを置く - **末尾 CTA バナー**（`button-primary`）: 白い横長カード。左に濃緑の送料無料タグ、右端に濃緑の矢印ボタンを置く ## Do's and Don'ts **Do** - 見出しは明朝にし、キーワードだけ色と大きさを変える - シリーズごとの色を帯・数字・見出しに一貫して使う - 製品写真は柑橘やハーブを添えて自然光で撮る - 数値訴求には必ず※注釈を添える - 同じシリーズ紹介の型を繰り返して比較しやすくする **Don't** - ボタンやカードを大きく角丸にしない - 原色の青や蛍光色を使わない - 見出しをすべてゴシックにしない - 影やグラデーションの強いボタンにしない - シリーズ色を別のシリーズで混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サロン品質の世界観と選ばれる理由を示す）: 黒い小帯のキャッチ、明朝の大見出し、製品写真と植物、順位メダル、理由の円バッジ 3 つ 2. **実績・受賞**（ランキングと受賞で信頼を得る）: 金色の月桂冠バッジを横に並べる。虹色光の背景に受賞製品とバッジを置く 3. **ラインナップ概要**（6 タイプから選べることと価格を示す）: 2 列のグリッドに製品写真とシリーズ色帯。最後に深紅の大きな価格 4. **ブランドストーリー**（品質の背景を伝える）: 大理石の地に明朝の見出しと、製品を並べたフラットレイ写真 5. **満足度・SNS の声**（利用者の評価で後押しする）: オレンジの大きな円に満足度の数値。SNS 投稿カードを 2×2 で並べる 6. **悩みの提起**（読み手の髪の悩みに気づかせる）: 悩む女性の写真から、濃緑灰の地に白枠のチェックリストへつなげる 7. **解決提案**（悩み別ケアの必要性を示す）: 深紅の下線見出し、女性の横顔写真、6 シリーズの小さなタイル 8. **3 つの理由**（製品の特長を詳しく説明する）: 理由ごとに背景写真の色を変え、番号タグ、明朝の大見出し、写真、白カードの本文で構成 9. **使用感の声**（体験イメージを伝える）: 人物写真の角に、オレンジ帯の短いコメントを重ねる 10. **シリーズ別紹介**（悩み別に商品を選ばせる）: 透かしの大きな番号、色帯の悩み、明朝の見出し、製品写真、丸写真の成分、おすすめリストを 6 回繰り返す 11. **商品リンク一覧**（購入形態を選ばせる）: 線見出しの区分ごとにリンクカードを 2 列で並べる 12. **よくある質問**（不安を解消する）: 金茶色の帯の Q と白枠の A を縦に積む 13. **最終 CTA**（購入ページへ送る）: 明朝の見出しの下に、濃緑の矢印付きバナーを 2 つ置く ## Imagery - 製品は琥珀色のボトルとチューブを、白〜ベージュの地に斜め上からの柔らかな光で撮る - 柑橘の断面・ラベンダー・ハーブを添えて天然素材を感じさせる - 人物は 30〜40 代の女性。明るい室内で髪に触れる自然な表情 - 成分は花や葉のアップを正円に切り抜く - 背景には大理石・泡・花畑・山の水辺など、テーマに合う風景を淡く敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、SP の 1 カラムを中央 750px 幅前後に置く方法を推奨 - PC ではラインナップと SNS カードを 3 列に広げる - 理由セクションは、写真と本文を左右 2 カラムにしてもよい - 背景の大理石や写真は全幅のまま、本文の幅だけ制限する - 透かしの番号と見出しの比率は 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-515a6db6`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/lacasta/rt-ae-sm/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。