--- version: alpha name: Dusty Rose Elegant Lingerie LP description: 白とくすみピンクを地に、ローズブラウンを差し色にした補正下着のLP。明朝体の縦書き見出しと細い欧文セリフ、アーチや円形に切り抜いた写真で、雑誌のように静かで上品な印象に仕上げている。 colors: background: '#FFFFFF' background-alt: '#F5E9E9' primary: '#805857' secondary: '#6D6463' text: '#2D2527' text-muted: '#C6B8B8' accent-1: '#B5636A' dark-section: '#BBB3B0' tint-1: '#EEEBEA' line: '#9A8B87' on-primary: '#FFFFFF' typography: display: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Cormorant Garamond fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.2em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.02em note: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 200px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-number: textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 72px vertical-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 220px label-before: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 16px label-after: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 16px divider-line: backgroundColor: '{colors.line}' height: 50px arch-photo: textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 380px color-swatch: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 130px --- # DESIGN.md — くすみローズと明朝の上品ランジェリーLP（Dusty Rose Elegant Lingerie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: くすみピンク・明朝体・縦書き・アーチ型写真・細い欧文セリフ・余白多め - **地の質感**: 薄いピンク地に、シルクのような淡い流線模様を重ねる。面はマットでやわらかい。 - **形**: 四角い写真を基本に、アーチ・円・片側だけ大きく丸めた切り抜きを混ぜる。斜めの帯で区切りを入れる。 - **温度感**: ややあたたかい中間色。白とローズブラウンで甘くなりすぎないようにする。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | 基本の背景 | 30% | 画素の実測 | | `background-alt` | `#F5E9E9` | 特長セクションのくすみピンク地 | 25% | 画素の実測 | | `primary` | `#805857` | AFTERラベル・強調文字のローズブラウン | 3% | 画素の主要色に補正 | | `secondary` | `#6D6463` | BEFOREラベルのチャコールブラウン | 2% | 画素の実測 | | `text` | `#2D2527` | 見出し・本文の濃いグレー | 2% | 画素の主要色に補正 | | `text-muted` | `#C6B8B8` | 欧文ロゴ・装飾文字のくすみモーヴ | 1% | 画素の実測 | | `accent-1` | `#B5636A` | 強調語のローズ文字 | 0% | 推定 | | `dark-section` | `#BBB3B0` | ギャラリー帯のグレージュ地 | 8% | 画素の実測 | | `tint-1` | `#EEEBEA` | FVの斜め帯ピンク | 3% | 画素の実測 | | `line` | `#9A8B87` | 区切りの細い縦線・円枠 | 0% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | ラベル上の白文字 | 0% | 画素の主要色に補正 | - 地は白とくすみピンクの2色を交互に使う。 - 特長セクションは全部ピンク地にし、淡い流線模様を重ねる。 - BEFOREはチャコール、AFTERはローズブラウンのラベルで色を分ける。 - 本文中の強調は1文に1か所だけローズ色の文字にする。 - 原色や彩度の高い色は使わない。商品の色は写真で見せる。 - ギャラリー帯だけ、グレージュの写真背景で全体を少し暗くする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのコピー・特長の縦書き見出し | 明朝 | Shippori Mincho | 500 | 28px | 1.5 | 0.15em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 500 | 30px | 1.4 | 0.12em | | `headline-md` | 欧文のセクション名・カラー名 | 欧文セリフ | Cormorant Garamond | 400 | 26px | 1.2 | 0.1em | | `headline-sm` | 見出し上の小さなリード文 | 明朝 | Noto Serif JP | 400 | 16px | 1.6 | 0.2em | | `body-md` | 説明文（中央揃え） | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.05em | | `accent` | ブランド欧文ロゴ・番号 | 欧文セリフ | Cormorant Garamond | 300 | 40px | 1.1 | 0.02em | | `note` | BEFORE/AFTERラベル・小さな注記 | 欧文セリフ | Cormorant Garamond | 400 | 12px | 1.4 | 0.1em | - 和文はすべて明朝体にし、ゴシック体は使わない。 - 特長の見出しは縦書きにして、写真の横に置く。 - 欧文は細いセリフ体の大文字にし、字間を広く取る。 - 本文は中央揃えで、1行20〜25字程度で改行する。 - 太字は使わない。強調は色だけで行う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較写真のみ 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真を左右にずらして重ね、雑誌のような非対称の配置にする。 - セクションの間には細い縦線を1本入れる。 - 特長は番号＋縦書き見出し＋大きな写真＋BEFORE/AFTER＋説明文の順に並べる。 - カラーごとに写真の切り抜き方と欧文名の位置を変える。 ## Elevation & Depth - 基本は影を付けずフラットにする。 - 特長の写真にだけ、ごく薄い影（0 2px 8px rgba(0,0,0,.12)）を付ける。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 200px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角を基本に、アーチ型・円形・片側だけ大きく丸めた形を混ぜる。 - **セクション境界**: FVは斜めの帯で区切る。それ以外は細い縦線と余白で区切る。 - カードやラベルは角を丸めない。 - 曲線は写真の切り抜きだけに使う。 - 番号は細い線の円で囲み、円に沿って小さな欧文を入れる。 ## Components - **特長番号の円バッジ**（`point-number`）: 細線の円の中に大きな欧文セリフの2桁番号を入れ、円周に沿って小さな欧文を置く。 - **縦書き見出し**（`vertical-heading`）: 明朝体の2〜3行の縦書き。写真の左か右に置く。 - **BEFOREラベル**（`label-before`）: 比較写真の上に付ける細い帯ラベル。チャコール地に白の欧文。 - **AFTERラベル**（`label-after`）: ローズブラウン地に白の欧文。BEFOREと横に並べる。 - **縦線の区切り**（`divider-line`）: 中央に置く、長さ約50pxの細い縦線。 - **アーチ型ヒーロー写真**（`arch-photo`）: 上辺がアーチ形の大きな写真。中央に白の明朝コピーと小さな欧文を重ねる。 - **カラー一覧**（`color-swatch`）: 商品の切り抜き写真を4つ横に並べ、下に欧文のカラー名を添える。 ## Do's and Don'ts **Do** - 余白を広く取り、1画面に入れる情報を少なくする。 - 見出しは明朝体と細い欧文セリフ体を組み合わせる。 - BEFORE/AFTERは同じ大きさの写真を2カラムで並べる。 - 写真は自然光でやわらかいトーンにそろえる。 - 強調はローズ色の文字で、1か所だけにする。 **Don't** - 太いゴシック体や派手なポップ体を使わない。 - 赤・黄などの原色のバッジや、目立たせるための派手な装飾を置かない。 - ピル型の大きな彩度の高いボタンを置かない。 - 濃い影や光沢のある立体表現を使わない。 - 背景を濃い色で広く塗らない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と、どの角度から見てもきれいという価値を伝える）: モデル写真を全面に敷き、大きな欧文の数字と縦書きコピーを置く。商品写真を重ね、斜めのピンク帯で区切る。 2. **コンセプトとBEFORE/AFTER**（補正効果をひと目で見せる）: 小さなリードと明朝の大見出しを置き、比較写真を2枚並べて、説明文を中央揃えで添える。 3. **カラー一覧**（色の選択肢を示す）: 欧文の見出しと色数、商品写真4つと欧文のカラー名を横に並べる。 4. **イメージ写真**（着用したときの気分を伝える）: 写真をずらして重ね、片側を丸く切り抜く。大きな淡い欧文ロゴを添える。 5. **ブランドメッセージ**（楽なのにきれい、という価値をまとめて伝える）: アーチ型の写真に白い明朝のコピーと小さな欧文を重ねる。 6. **特長（3つ）**（機能を1つずつ説明する）: ピンク地に番号の円バッジ、縦書き見出し、写真、BEFORE/AFTER、説明文、部分写真の順に並べる。 7. **ギャラリー**（高級感を高める）: グレージュの商品写真を背景にして小さい写真を3枚重ね、縦向きの大きな欧文ロゴを置く。 8. **カラー別の紹介**（色ごとの印象を伝える）: 色ごとに写真の形（四角・円・重ね）と欧文名の位置を変えて紹介する。 ## Imagery - 白いカーテン越しの自然光で、明るくやわらかいトーンのモデル写真にする。 - 目を閉じる、髪に触れるなど、落ち着いた表情や仕草にする。 - 商品の平置き写真には、口紅・香水・ファー・洋書などの小物を添える。 - ニットやシアーシャツを合わせ、肌の露出をやわらげる。 - 背景には淡いシルクのような流線模様を薄く入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央の480〜600px幅に収め、左右は白かくすみピンクで埋める。 - PCに広げる場合は、特長を写真と縦書き見出しの2カラムにし、比較写真は横に並べたままにする。 - カラー別の紹介は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-4fa23513`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/c/product/b48a/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。