--- version: alpha name: Dusty Rose Elegant Lingerie LP description: くすみローズ、ベージュ、生成りグレーの淡い地に、細い明朝体と細身の欧文を合わせた女性向けランジェリー LP。写真が主役。アーチ型や楕円の切り抜き、極細の罫線、筆記体の欧文を重ねて上品で柔らかい雰囲気を作る。実績セクションだけ深いワインレッドを使って締める。 colors: primary: '#A46C6B' dark-section: '#744349' on-dark: '#EFE0DC' accent-1: '#BEA48E' background: '#FFFFFF' background-alt: '#E6E3DE' tint-1: '#EDDEE1' tint-2: '#A3937C' surface: '#F9F8F6' text: '#3F302C' text-body: '#5A4E4A' text-muted: '#999999' line: '#C8BCAE' secondary: '#B58B79' primary-accessible: '#8B5756' text-muted-accessible: '#717171' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.12em headline-md: fontFamily: Cormorant Garamond fontSize: 22px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.12em headline-sm: fontFamily: Josefin Sans fontSize: 18px fontWeight: 300 lineHeight: 1.3 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Great Vibes fontSize: 32px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Cormorant Garamond fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 2px md: 8px lg: 200px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-line-center: textColor: '{colors.text-muted}' typography: '{typography.headline-md}' height: 40px heading-frame: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 72px label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 28px feature-circle: textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 110px award-laurel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 140px point-number: textColor: '{colors.secondary}' typography: '{typography.display}' height: 60px before-after: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 260px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 120px vertical-copy-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' height: 480px --- # DESIGN.md — くすみローズ×明朝の上品ランジェリー LP（Dusty Rose Elegant Lingerie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: くすみローズ・細明朝・アーチ切り抜き・極細罫線・筆記体の欧文・写真主役 - **地の質感**: 光がにじむ柔らかなグラデーションの地と、マットな単色面 - **形**: アーチ型、楕円、正円の線枠、細い横罫 - **温度感**: やや暖かいニュートラル（ベージュ・ローズ寄り） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A46C6B` | ブランドを代表するくすみローズ（ラベル・強調） | 4% | 画素の実測 | | `dark-section` | `#744349` | 実績セクションのワインレッド地 | 8% | 画素の実測 | | `on-dark` | `#EFE0DC` | 暗い地の上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#BEA48E` | ローレル・数字に使う金色 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 19% | 画素の実測 | | `background-alt` | `#E6E3DE` | ポイント解説の生成りグレー地 | 7% | 画素の実測 | | `tint-1` | `#EDDEE1` | 口コミ・アンケートの淡いローズ地 | 6% | 画素の実測 | | `tint-2` | `#A3937C` | 写真背景に合わせたベージュ | 7% | 画素の実測 | | `surface` | `#F9F8F6` | オフホワイトのカード・帯 | 7% | 画素の実測 | | `text` | `#3F302C` | 見出しの濃いブラウングレー | 2% | 画素の主要色に補正 | | `text-body` | `#5A4E4A` | 本文のグレー | 1% | 推定 | | `text-muted` | `#999999` | 欧文の飾り・注記の淡いグレー | 0% | 画素の実測 | | `line` | `#C8BCAE` | 極細の罫線・枠 | 0% | 画素の主要色に補正 | | `secondary` | `#B58B79` | 番号・グラフに使うモーブ | 1% | 画素の主要色に補正 | | `primary-accessible` | `#8B5756` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#717171` | AA を満たす補正値（計算） | | 計算 | - 地は白、生成りグレー、淡いローズを交互に敷き、写真の色となじませる - 強調はくすみローズのみ。原色や彩度の高い色は使わない - 実績セクションだけワインレッドの地に金色を合わせて引き締める - 文字は真っ黒にせず、ブラウングレーを使う - 罫線や枠は淡いグレーの 1px で控えめに - 見出し中のキーワードは淡いローズの帯や鉤括弧で軽く強調する - `label-band` は文字 `#EFE0DC` × 背景 `#A46C6B` のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8B5756`、4.55:1）を使う。 - `review-card` は文字 `#999999` × 背景 `#F9F8F6` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#717171`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチ、大見出し | 明朝 | Shippori Mincho | 500 | 44px | 1.3 | 0.1em | | `headline-lg` | セクションの和文見出し | 明朝 | Noto Serif JP | 400 | 24px | 1.6 | 0.12em | | `headline-md` | 欧文のセクション見出し（細身の大文字） | 欧文セリフ | Cormorant Garamond | 400 | 22px | 1.2 | 0.12em | | `headline-sm` | 商品名などの細身の欧文ロゴ風見出し | 欧文サンセリフ | Josefin Sans | 300 | 18px | 1.3 | 0.08em | | `body-md` | 説明本文（中央揃え） | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.1em | | `note` | 調査の出典・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.03em | | `accent` | 写真に重ねる筆記体の欧文・手書き風の和文 | 欧文スクリプト | Great Vibes | 400 | 32px | 1.2 | 0.0em | | `label-button` | 写真上のラベル帯（BEFORE/AFTER など） | 欧文セリフ | Cormorant Garamond | 500 | 13px | 1.2 | 0.1em | - 和文は細い明朝を基本にし、太字はほぼ使わない - 字間は 0.1em 前後と広めにとり、ゆとりを出す - 欧文見出しは細身のセリフ体かサンセリフの大文字で、和文見出しと組み合わせる - FV やビジュアルのコピーは縦書きを使う - 写真の上に筆記体の欧文を半透明の白で重ねる - 数値は大きなセリフ数字にし、単位は小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較写真とギャラリーは 2〜4 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は全幅か左右に小さな余白を残して配置し、ページの大半を占める - テキストは中央揃えの短い行で、写真の間に挟む - 見出しの両側に細い横罫を伸ばす型を繰り返す - 比較は左右 2 列で、ラベル帯と破線のガイドを使う - ポイント解説は大きな番号＋写真＋中央揃えの本文の順に並べる ## Elevation & Depth - 影はほぼ使わず、平面で構成する - 口コミのカードだけ白地にごく薄い影を付ける - 奥行きは写真の上に重ねた半透明の白帯で出す ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 200px。ボタンは角丸の長方形。 - **写真の切り抜き**: 上辺が丸いアーチ型、楕円、角丸の矩形。拡大図は正円の線枠で示す - **セクション境界**: 直線で地色を切り替える。境界にはグラデーションでにじむ光をのせる - ラベル帯は角丸なしの矩形にする - 特長は正円の細線枠に入れて縦に並べる - 四角い線枠を見出しに重ねる場合は、枠の一部を欠けさせる - 鋭い装飾や太い枠線は避ける ## Components - **両側に罫線を伸ばす見出し**（`heading-line-center`）: 中央の欧文大文字の左右に、画面端まで細い横罫を伸ばす - **線枠見出し**（`heading-frame`）: 細い矩形の線枠に和文見出しを入れ、下辺に小さな筆記体の欧文を重ねる - **ラベル帯**（`label-band`）: 写真の左上にローズ地の矩形帯を置き、白い欧文ラベルを入れる - **特長の円バッジ**（`feature-circle`）: 写真の上に白い細線の正円を置き、中に明朝の短い 2 行を入れる - **月桂樹の実績表示**（`award-laurel`）: ワインレッドの地に金色のローレルで大きな数字を挟み、下に受賞メダルを 3 つ並べる - **ポイント番号**（`point-number`）: モーブ色の大きな細身セリフ数字を、写真の左上に重ねる - **比較写真**（`before-after`）: 2 列の写真に BEFORE/AFTER のラベル帯を付け、ローズの破線で高さを比べる - **SNS 口コミカード**（`review-card`）: 白い枠付きの写真タイルを 4 列 2 段で並べ、下に小さなアイコンを付ける - **縦書きコピーパネル**（`vertical-copy-panel`）: 写真の右側に半透明の白い縦長パネルを置き、縦書きの明朝コピーを入れる ## Do's and Don'ts **Do** - 写真を大きく見せ、文字は少なく短くする - 明朝と細身の欧文を組み合わせ、字間を広めにとる - アーチ型や楕円の切り抜きで柔らかさを出す - 地色は淡いトーンを交互に切り替えてリズムを作る - 数値の実績は暗い地の 1 か所にまとめる **Don't** - 太いゴシック体や原色の大きなボタンを使わない - 純黒の文字や強い影を使わない - 装飾的なアイコンやイラストを多用しない - 色数を増やさない。ローズ以外の強調色は入れない - 写真を小さく詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の魅力を一言で伝える）: モデル写真をアーチ型に切り抜き、右に縦書きの明朝キャッチを置く。下に評価バッジ、商品名、カラーの見本を添える 2. **コンセプト**（共感を生むストーリーを伝える）: 全面写真に筆記体の和文タイトルと、中央揃えの白文字の詩的なコピーを重ねる 3. **アンケート結果**（理想像をデータで示す）: 線枠見出しの下にローズのドーナツグラフと大きな数字を置き、出典を小さく添える 4. **商品イメージと宣言**（商品で理想が叶うことを示す）: 商品の置き撮りに縦の欧文を添える。白地に 2 行の明朝見出しを置き、続いて縦書きパネル付きのモデル写真を見せる 5. **比較と特長**（効果を視覚的に証明する）: BEFORE/AFTER の 2 列写真を置き、ベージュの写真上に円バッジ 3 つと大きなコピーを重ねる 6. **実績**（信頼を与える）: ワインレッドの地にアーチ線、細身の欧文タイトル、金色ローレル付きの数値、受賞メダル 3 つを並べる 7. **口コミ**（多くの人に支持されていることを示す）: 淡いローズの地に SNS 風の写真カードを 4 列 2 段で並べる 8. **カラー展開・ショーツ**（ラインナップを紹介する）: 欧文見出しの下に 3 色の商品を並べ、ラベル帯付きの写真で補足する 9. **構造の秘密**（機能を図解する）: 楕円の写真に正円の拡大枠と引き出し線を付け、ローズのラベルで解説する 10. **ポイント解説**（機能を 3 つに分けて詳しく伝える）: 生成りグレーの地に大きな番号、写真、中央揃えの本文を順に繰り返す 11. **クロージングビジュアル**（余韻を残して商品を印象づける）: 光がにじむ地に細身の欧文の商品名を置き、2 列の写真と小さな欧文キャプションで締める ## Imagery - 自然光の室内でモデルを撮影し、ベージュや白の壁を背景にした柔らかなトーンにする - 肌色を明るく、全体を低めの彩度に整える - 商品の置き撮りは淡いグレーの布の上で、小物を少し添える - 画面の端にカーテン越しのような光のにじみを入れる - 装飾は筆記体の欧文、細線の円、破線のガイド程度に抑える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、SP の 1 カラムを中央に最大 480〜600px 幅で置く案を推奨する - PC では左右に淡いベージュのグラデーションの余白を敷く - 比較写真や口コミカードは 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-0e61e74a`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/c/product/u376a?utm_source=official_hp_251104_u376a&utm_medium=official_hp&utm_campaign=official_hp/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。