--- version: alpha name: Silky Brown Mincho Haircare LP description: シルクのような光沢背景に、こげ茶の明朝体を重ねたヘアケア LP。水滴のついた商品写真と縦書きコピーで高級感を出す。シリーズごとにテーマ色（黄・ピンク・グレージュ・水色）を切り替え、茶色の帯に金色ボタンを載せた購入 CTA を何度も置いている。 colors: primary: '#583311' background: '#FFFFFE' background-alt: '#EAE6DD' cta: '#E6D49A' on-cta: '#56351D' dark-section: '#56351D' on-dark: '#FFFFFF' accent-1: '#FEBA3A' accent-2: '#F38D9D' accent-3: '#9CC3C8' secondary: '#9E8E7E' tint-1: '#F6F2E6' text-muted: '#7A6E64' line: '#99715A' typography: display: fontFamily: Shippori Mincho fontSize: 52px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Barlow Condensed fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.02em headline-sm: fontFamily: Montserrat fontSize: 20px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.1em accent: fontFamily: Playfair Display fontSize: 90px fontWeight: 500 lineHeight: 1.0 body-lg: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.12em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' cta-purchase-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 100px button-gold: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px series-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 70px benefit-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 70px fragrance-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.md}' height: 230px big-percent: textColor: '{colors.primary}' typography: '{typography.accent}' height: 110px vertical-marker-copy: backgroundColor: '{colors.accent-2}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 450px step-number: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 60px satin-label: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 56px --- # DESIGN.md — ブラウン×シルク光沢の上品ヘアケアLP（Silky Brown Mincho Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、清潔・爽やか - **キーワード**: シルク光沢・こげ茶明朝・水滴の商品写真・縦書きコピー・シリーズ色分け・大きな数字 - **地の質感**: サテン布のような白〜ベージュのグラデーション背景。水滴のついたガラス質の商品写真を使う - **形**: 角丸カード、円形の効能バッジ、香りのピラミッド図、細い線で結ぶ番号付きのステップ - **温度感**: 暖色寄りのニュートラル。茶とベージュを基調に、パステルのシリーズ色を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#583311` | 見出し文字とCTA帯のこげ茶 | 7% | 画素の実測 | | `background` | `#FFFFFE` | 基本の白地 | 21% | 画素の実測 | | `background-alt` | `#EAE6DD` | シルク調の淡いグレージュ地 | 12% | 画素の実測 | | `cta` | `#E6D49A` | 購入ボタン内の金色 | 2% | 推定 | | `on-cta` | `#56351D` | 金ボタン上の茶文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#56351D` | CTA帯・ステップ強調カードの茶面 | 5% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 茶面の上の白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#FEBA3A` | シリーズ色・黄（ダメージ補修） | 3% | 画素の実測 | | `accent-2` | `#F38D9D` | シリーズ色・ピンク（保湿）と縦書きマーカー | 3% | 画素の実測 | | `accent-3` | `#9CC3C8` | シリーズ色・くすみ水色（ツヤ） | 2% | 推定 | | `secondary` | `#9E8E7E` | シリーズ色・グレージュ（ボリューム） | 3% | 画素の実測 | | `tint-1` | `#F6F2E6` | 円形バッジの淡いアイボリー | 1% | 画素の実測 | | `text-muted` | `#7A6E64` | 注釈文字 | 0% | 推定 | | `line` | `#99715A` | 見出し下線・ステップの細線 | 0% | 画素の主要色に補正 | - 地は白と淡いシルク調グレージュを交互に使い、茶系の写真帯で区切る - 見出しはすべてこげ茶。黒は使わない - シリーズごとに黄・ピンク・グレージュ・水色を割り当て、英字ロゴ・下線・効能バッジ・香りカードをその色で揃える - 縦書きコピーの背後にはシリーズ色の細い縦帯マーカーを敷く - 購入 CTA は茶色の帯の中に金色グラデのボタンを入れる形で統一する - 数字の強調は茶か白の大きな明朝で表す。強い彩度の赤は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品カテゴリ名 | 明朝 | Shippori Mincho | 800 | 52px | 1.2 | 0.02em | | `headline-lg` | セクション見出し・縦書きコピー | 明朝 | Shippori Mincho | 700 | 30px | 1.4 | 0.08em | | `headline-md` | シリーズの英字ロゴ見出し | 欧文サンセリフ | Barlow Condensed | 600 | 40px | 1.1 | 0.02em | | `headline-sm` | 英字のセクションラベル | 欧文サンセリフ | Montserrat | 600 | 20px | 1.3 | 0.1em | | `accent` | 大きな%数字 | 欧文セリフ | Playfair Display | 500 | 90px | 1.0 | 0.0em | | `body-lg` | キャッチ下の説明文 | 明朝 | Noto Serif JP | 600 | 16px | 1.9 | 0.05em | | `body-md` | 手順の説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | 購入ボタン文字 | 明朝 | Noto Serif JP | 500 | 20px | 1.2 | 0.12em | - 和文の見出しは太めの明朝で書き、字間を少し広げる - シリーズ名は詰まった太い欧文サンセリフにし、横に手書き風の小さな用途ラベルを斜めに添える - 数字は巨大な欧文セリフで書き、「%」と「配合」を右に小さく積む - 縦書きコピーで情緒を出す（1画面に1〜2行まで） - 注釈は9px程度の小さな灰色で、ブロック直下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品写真を右に、テキストを左に重ねる非対称配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真帯は全幅、テキストブロックは左右6%の余白をとる - 各シリーズは見出し→効能バッジ3つ→配合数字→香りカード→CTA の順で固定する - 香りカードは左60%に置き、右側の商品写真と重ねる - ラインナップは円形のシリーズ名と横スクロールの商品カードで構成する - ステップは左の縦線で番号をつなぎ、重要な手順だけ茶色のカードに入れる ## Elevation & Depth - 影はほぼ使わない。購入ボタンにだけごく薄い影をつける - 英字ラベルはサテン光沢の帯の上に載せ、浮いているように見せる - 商品は透明な台座に載せ、映り込みで奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は角丸の矩形か全幅の帯で見せ、商品は切り抜き写真にする - **セクション境界**: 直線で切り替える。一部はグラデーションでフェードさせる - 効能バッジは直径約70pxの正円 - 香りの構成は三角形のピラミッド図を3段で表す - Q&Aの成分説明は白線の円形ラベルで示す - シリーズ名の入れ物は大きな正円にする ## Components - **購入CTA帯**（`cta-purchase-band`）: 茶色の角丸帯の上段にカートアイコンと案内文、下段に金色グラデのボタン - **金色購入ボタン**（`button-gold`）: 金色グラデ、茶色の明朝文字、右端に矢印 - **シリーズ見出し**（`series-heading`）: シリーズ色の太い英字に手書き風の用途ラベル、下にシリーズ色の線とカナ名 - **効能丸バッジ**（`benefit-badge`）: シリーズ色の淡い正円に茶色の明朝で2〜4文字を入れ、3つ並べる - **香りピラミッドカード**（`fragrance-card`）: シリーズ色の淡い角丸カードの中に、TOP/MIDDLE/LASTの3段三角形と果実の写真 - **配合数字**（`big-percent`）: 巨大な数字の横に%と配合を積み、肩に注釈番号をつける - **縦書きマーカーコピー**（`vertical-marker-copy`）: 明朝の縦書きコピーの背後にシリーズ色の細い縦帯を敷く - **番号つきステップ**（`step-number`）: 細い線の円に番号を入れ、縦線でつなぐ。英大文字の手順名をつける - **サテン英字ラベル**（`satin-label`）: シルク光沢の横帯の中央に茶色の英字見出しを置く ## Do's and Don'ts **Do** - 見出しは常にこげ茶の明朝で書く - シリーズ色は見出し・バッジ・香りカードの3か所で揃える - 各シリーズの最後に購入CTA帯を置く - 注釈はブロック直下に小さく必ず添える - 背景には光沢のある布か水滴の質感を入れる **Don't** - 純黒の文字やビビッドな赤のボタンを使わない - 丸ゴシックのポップな見出しにしない - ピル型の派手なボタンにしない - シリーズ色を混ぜて1ブロックに使わない - 強いドロップシャドウをつけない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品カテゴリと配合数値を一目で伝える）: 白い光沢背景に配合バッジと大きな茶明朝。水滴のついた4本の商品と斜めの茶色帯コピーを置く 2. **コンセプト**（使用シーンと価値を情緒的に伝える）: 角丸の人物写真の右に縦書きマーカーコピー、下に3行の説明 3. **配合訴求**（成分の配合率を強調する）: 茶系の人物写真の上に縦書きと巨大な%数字 4. **処方の秘密**（独自処方を説明する）: 明朝の問いかけ見出しと、金色の泡写真の角丸カード 5. **Q&A解説**（2層式の理由を説明する）: 暗い写真の上に大きなQとAの文字、白線の円ラベルで層を指し示す 6. **特長（シリーズ別）**（4シリーズの効能と香りを比べる）: サテン英字ラベルの後に、シリーズ見出し・バッジ・数字・香りカード・CTAを繰り返す 7. **新シリーズ紹介**（追加シリーズを目立たせる）: 全幅の暗い写真に白の明朝と下線、続けて黒髪の写真と縦書きコピー 8. **使い方**（3ステップの手順を示す）: 番号の円を縦線でつなぎ、重要な手順を茶色カードと吹き出しの円で強調する 9. **応用的な使い方**（別の使用シーンを提案する）: 横顔の写真にピンクの下線見出しと赤系の大きな円の説明 10. **ラインナップ**（全商品と価格を見せて購入へ導く）: シリーズ色の大きな円の横に、商品・価格・小さな購入ボタンを横スクロールで並べる 11. **ブランドメッセージ**（世界観で締めくくる）: 光沢背景に詩的な明朝の文章、ロゴ、商品の集合写真 ## Imagery - 商品は透明ボトルを水滴付きで白背景に撮り、アクリルの台座に載せる - 人物はウェットな黒髪を後ろか横から撮り、暖色の自然光を当てる - 背景素材はサテン布のドレープか光の筋 - 香りの説明にはレモン・洋梨など果実の切り抜き写真を添える - 成分のイメージは金色の泡のマクロ写真で表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約40%幅の SP 版をそのまま置く - 左右はシルク光沢の固定背景で埋める - PC の左上にロゴと縦並びのアンカーナビを置く - 背景に大きな薄い英字を流して装飾にする - 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-7b0bcba1`（元 LP の URL から採番） - **元 LP**: https://lp.myboostars.com/025/?utm_source=Insta&utm_medium=banner&utm_campaign=myBoostars_image_cv&utm_content=2605_mist&utm_id=120246664672840568&utm_term=120246664672910568&fbclid=PAaWdyZAR5YgZleHRuA2FlbQEwAGFkaWQBqzO0ktgsGHNydGMGYXBwX2lkDzU2NzA2NzM0MzM1 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。