--- version: alpha name: Soft Silk Beige Feminine Warmth LP description: 生成り・くすみピンク・グレージュの淡い地色に、明朝体の見出しと金茶の細線で上品にまとめた女性向けシルク製品LP。購入ボタンだけを朱赤で強く目立たせ、ランキング帯は赤×金の豪華な画像で権威を示す。 colors: primary: '#F1DAD4' background: '#FFFFFF' background-alt: '#F4F4EB' surface: '#F1ECE4' cta: '#E25D52' on-cta: '#FFFFFF' text: '#382E2B' text-body: '#5A5452' accent-1: '#B8665C' secondary: '#A08A5A' accent-2: '#725E23' dark-section: '#382E2B' line: '#C8B7AC' cta-accessible: '#DB382B' secondary-accessible: '#86734B' accent-1-accessible: '#B45E53' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em headline-lg: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 36px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 0px md: 4px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 58px price-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.display}' height: 340px badge-discount: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px numbered-list: backgroundColor: '{colors.primary}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 48px point-header: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.accent}' height: 120px circle-label: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px heading-underline: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px faq-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 130px rating-score: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 160px --- # DESIGN.md — くすみピンクと生成りの上品なシルク雑貨LP（Soft Silk Beige Feminine Warmth LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型 - **キーワード**: くすみピンク・生成り・明朝見出し・金茶の細線・温活・朱赤CTA - **地の質感**: マットで柔らかい無地面。斜めの切り替えで淡い2トーンを作る - **形**: 角丸はほぼなし。円形バッジと細い枠線フレームを多用 - **温度感**: 暖色寄りのやさしい中間トーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F1DAD4` | ブランドのくすみピンク面 | 12% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 19% | 画素の実測 | | `background-alt` | `#F4F4EB` | 価格・購入エリアの生成り地 | 12% | 画素の実測 | | `surface` | `#F1ECE4` | 提案・素材セクションのグレージュ地 | 8% | 画素の実測 | | `cta` | `#E25D52` | 購入ボタンの朱赤 | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#382E2B` | 見出し・価格の濃いグレー | 3% | 画素の主要色に補正 | | `text-body` | `#5A5452` | 本文 | 3% | 推定 | | `accent-1` | `#B8665C` | 強調語の朱色テキスト | 1% | 画素の実測 | | `secondary` | `#A08A5A` | 金茶の細線・円バッジ線・POINT数字 | 1% | 推定 | | `accent-2` | `#725E23` | 送料無料のオリーブ茶バッジ | 0% | 画素の実測 | | `dark-section` | `#382E2B` | 製法紹介の暗い写真帯 | 6% | 画素の主要色に補正 | | `line` | `#C8B7AC` | 価格ブロックの区切り線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#DB382B` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#86734B` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#B45E53` | AA を満たす補正値（計算） | | 計算 | - 地は白・生成り・くすみピンク・グレージュを交互に置き、セクションを色面で区切る - 朱赤は購入ボタンと割引バッジ・本文中の強調語だけに使う - 金茶は細線・円形バッジの線・POINT番号など装飾ラインに限定する - 見出しは黒ではなく柔らかい濃グレーにする - ランキング実績だけは赤カーテン×金の豪華な画像で別格扱いにする - 暗色帯は製法・工場紹介の1か所だけに使う - `button-primary` は文字 `#FFFFFF` × 背景 `#E25D52` のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DB382B`、4.55:1）を使う。 - `badge-discount` は文字 `#FFFFFF` × 背景 `#E25D52` のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DB382B`、4.55:1）を使う。 - `point-header` は文字 `#A08A5A` × 背景 `#FFFFFF` のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#86734B`、4.6:1）を使う。 - `circle-label` は文字 `#A08A5A` × 背景 `#FFFFFF` のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#86734B`、4.6:1）を使う。 - `rating-score` は文字 `#B8665C` × 背景 `#FFFFFF` のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B45E53`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品名・価格数字 | 明朝 | Shippori Mincho | 500 | 44px | 1.2 | 0.04em | | `headline-lg` | セクション大見出し | 明朝 | Noto Serif JP | 500 | 28px | 1.4 | 0.08em | | `headline-md` | 商品セット名・中見出し | 明朝 | Noto Serif JP | 500 | 22px | 1.5 | 0.06em | | `headline-sm` | おすすめリスト・ポイント見出し | ゴシック | Zen Kaku Gothic New | 500 | 18px | 1.6 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 注釈・集計日 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | POINT・MEDIAなどの欧文ラベル | 欧文セリフ | Playfair Display | 400 | 36px | 1.1 | 0.04em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 500 | 15px | 1.4 | 0.06em | - 見出しは明朝、本文と箇条書きはゴシックにする - 見出しは字間を広げて静かな印象にする - 価格の数字は大きな明朝にし、円と税込表記は小さく添える - 強調したい語だけ朱色にし、太字は控えめにする - POINT番号は細い欧文セリフで大きく、ラベルは小さく重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と見出しは左右半分の 2 カラムも使う - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - セクション色面は左右に約12pxの余白を残して置く - ポイント紹介は写真と見出しを左右交互に配置し、下に色面の本文ブロックを敷く - 価格ブロックは線で区切って色見本・価格・ボタンを縦に積む - 利用シーンは写真をずらして重ね、円形ラベルを散らす - 見出しの下には金茶の細い下線を引く ## Elevation & Depth - 影はほぼ使わずフラットにする - SNS風カードだけ白枠と薄い影で投稿風に見せる - 写真の奥に金茶の細枠をずらして重ね、奥行きを出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形が基本。素材の寄り写真やラベルは正円で切り抜く - **セクション境界**: 直線の色面切り替え。くすみピンク面には斜めの2トーン分割を入れる - ボタンは角丸なしの横長長方形にする - 特長ラベルは金茶の細線の正円にする - 割引・送料無料は塗りの正円バッジにする - 見出しは細い枠線で囲む形も使う ## Components - **購入ボタン**（`button-primary`）: 幅いっぱいの朱赤の角なしボタン。中央に白文字、右端に細い矢印を置く - **価格ブロック**（`price-block`）: セット名・色見本の丸・区切り線・大きな明朝の価格を縦に積む - **割引・送料無料バッジ**（`badge-discount`）: 朱赤とオリーブ茶の正円を並べ、白い明朝で短い文字を入れる - **番号付きおすすめリスト**（`numbered-list`）: 金茶の細線の円に斜体の数字、横にゴシックの悩み文。一部を朱色で強調 - **POINT見出し**（`point-header`）: 小さなPOINTの文字に大きな細い欧文数字を重ね、明朝の見出しを添える - **円形特長ラベル**（`circle-label`）: 白またはベージュ地に金茶の細線の正円。短い特長語を2行で入れる - **下線付き見出し**（`heading-underline`）: 中央揃えの明朝見出しの下に金茶の細い線を引く - **Q&Aカード**（`faq-card`）: ベージュ地の上に白カード。朱色の質問と細線、その下にグレーの回答文 - **評価スコア**（`rating-score`）: 大きな朱色の明朝で評価点を出し、その下に星を並べる ## Do's and Don'ts **Do** - 淡い暖色の地色を交互に使い、セクションを色面で区切る - 見出しは明朝にして字間を広めにとる - 装飾は金茶の細線と正円でそろえる - 購入ボタンだけを朱赤にして迷わせない - モデル写真は柔らかい自然光で、淡い色の部屋で撮る **Don't** - 原色やビビッドな色を広い面に使わない - ボタンをピル型や立体的なグラデーションにしない - 太い黒の見出しや極太ゴシックを使わない - 朱赤を装飾や背景に広く使い、CTAの存在感を弱めない - 強い影や光沢で、マットな質感を壊さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と使用シーンを一目で伝える）: 上部に明朝の小コピーと大きな商品名、カラーの丸を並べ、下に寝姿のモデル写真。円形の産地バッジを置く 2. **受賞実績**（権威付け）: 赤カーテン×金の受賞画像と、金の月桂樹エンブレムを2つ＋3つ並べた帯 3. **こんな方におすすめ**（悩みへの共感）: 斜め2トーンのピンク地に、番号の円付きの悩みを5つ並べる 4. **レビュー実績**（社会的証明）: 白地にレビュー件数と大きな朱色の評価点、星を置く 5. **SNSでも話題**（共感と流行感）: 投稿風の白枠カードを3枚並べ、ぼかしたピンク円の吹き出しを添える 6. **メディア掲載**（信頼性）: 欧文見出しに明朝の大見出し、雑誌名と紹介文を2列にし、表紙写真を並べる 7. **関連商品バナーと価格・CTA**（早めの購入導線）: 生成り地にセット別の価格ブロックと朱赤ボタンを2つ並べる 8. **問題提起**（冷えの悪影響を伝える）: グレー写真に白の明朝コピーを重ね、本文の一部を朱色で強調する 9. **提案**（続けやすいケアを提案する）: ベージュ地に金茶の枠線をまたいで、商品写真をずらしてコラージュする 10. **特長ポイント**（機能の訴求）: POINT番号つきで写真と見出しを左右交互に置き、ピンクの斜め分割面に本文を入れる 11. **利用シーン・着用イメージ**（使い方を広げる）: 写真のコラージュに円形ラベルを散らし、着用写真には細線の引き出しで角度名を添える 12. **素材・製法**（品質の裏付け）: 円形ラベル、生成りの素材写真帯、暗い工場写真に白文字の帯を順に置く 13. **お客様の声・ギフト・カラー**（後押しと選択）: 枠見出しでレビューへ導き、リボン装飾のギフト案内、2×2のカラー写真に丸い生地見本を重ねる 14. **よくある質問と最終CTA**（不安を解消して購入へ）: ベージュ地に白いQ&Aカードを積み、最後に価格ブロックと朱赤ボタンを再び置く ## Imagery - 20〜30代の女性モデルが目を閉じて寝る、またはくつろぐ自然光の写真 - 白い寝具や生成りのニットで画面を淡くまとめる - 素材は手で触れる寄り写真を正円で切り抜く - 製法パートは暗めの機械写真に白文字を重ねる - 装飾は金茶の細線・月桂樹・リボンなど控えめなものだけ - カラー見本は生地の質感がわかる正円で並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 750px 前後の 1 カラムを置き、SP と同じ構成のままにする - 左右の余白は白または淡いベージュで埋める - 左右交互のポイントは PC で写真の幅を少し広げる - 価格ブロックのボタン幅は最大 600px 程度に抑える ## 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-4325c38a`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/mishii-list/silk-mask/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。