--- version: alpha name: Nude Tone Elegant Lingerie LP description: くすみローズ、グレージュ、淡いピンクベージュの地をセクションごとに切り替え、商品カテゴリを順番に紹介する女性向けインナーのLP。欧文セリフの大きな見出しと細い明朝体、角を片側だけ大きく丸めた写真、細い引き出し線で、雑誌のような上品さを出している。後半はパーソナルカラー診断チャートとおすすめカラーのカードで、肌になじむ色選びへ誘導する。 colors: primary: '#CFA096' secondary: '#9C8F87' background: '#F1E5E1' background-alt: '#C6AFA1' surface: '#FFFFFF' tint-1: '#F4EAE6' cta: '#E4B493' on-cta: '#FFF8EE' text: '#917679' text-body: '#6E605B' accent-1: '#8A4E58' dark-section: '#535355' accent-2: '#9CAACC' line: '#A9786E' cta-accessible: '#AB5F2B' text-accessible: '#8B6F72' typography: display: fontFamily: Cormorant Garamond fontSize: 38px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.04em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Cormorant Garamond fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Cormorant Garamond fontSize: 17px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em accent: fontFamily: Playfair Display fontSize: 11px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.04em label-button: fontFamily: Cormorant Garamond fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 0px md: 8px lg: 60px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-brush: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px section-number-heading: textColor: '{colors.on-cta}' typography: '{typography.display}' height: 110px feature-callout: textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 160px line-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px before-after: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 200px diagnosis-chart: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 700px color-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' height: 160px topics-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 36px --- # DESIGN.md — くすみローズ×肌色の上品インナー LP（Nude Tone Elegant Lingerie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: くすみカラー・肌色・欧文セリフ・雑誌風・余白・細線 - **地の質感**: マットな単色面に、サテン生地の写真の光沢を重ねる。面にグラデーションはほぼ使わない - **形**: 写真は四角形で、片側の角だけ大きく丸める。補助線は1px。ボタンは筆でなでたような肌色の塗り - **温度感**: 暖かく柔らかい中間色。彩度は低い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CFA096` | 商品セクションの地（くすみローズ） | 14% | 画素の実測 | | `secondary` | `#9C8F87` | 商品セクションの地（グレージュ） | 11% | 画素の実測 | | `background` | `#F1E5E1` | 淡いピンクベージュの基本の地 | 22% | 画素の主要色に補正 | | `background-alt` | `#C6AFA1` | モーヴベージュの地（カテゴリ2・診断） | 12% | 画素の実測 | | `surface` | `#FFFFFF` | カード・診断パネルの白 | 9% | 画素の実測 | | `tint-1` | `#F4EAE6` | 診断の質問ボックスの淡い面 | 3% | 画素の実測 | | `cta` | `#E4B493` | 筆塗り風ボタンの肌色 | 1% | 画素の実測 | | `on-cta` | `#FFF8EE` | ボタン文字・暗い地の上の文字 | 2% | 画素の実測 | | `text` | `#917679` | 淡い地の上の見出し（ブラウンローズ） | 1% | 画素の実測 | | `text-body` | `#6E605B` | 本文のグレーブラウン | 1% | 推定 | | `accent-1` | `#8A4E58` | 比較のAfterラベル（ボルドー） | 0% | 推定 | | `dark-section` | `#535355` | 比較のBeforeラベル（チャコール） | 0% | 画素の実測 | | `accent-2` | `#9CAACC` | 診断結果の円（ブルー系） | 0% | 画素の実測 | | `line` | `#A9786E` | 見出し横の線・引き出し線 | 0% | 推定 | | `cta-accessible` | `#AB5F2B` | AA を満たす補正値（計算） | | 計算 | | `text-accessible` | `#8B6F72` | AA を満たす補正値（計算） | | 計算 | - 商品カテゴリごとに地の色を変える。くすみローズ→モーヴベージュ→グレージュ→淡ピンクの順で、セクションの区切りを示す - 暗めの地の上の文字は白。淡い地の上の文字はブラウンローズにする - 原色は使わない。強調はボルドーか肌色のボタンだけに限る - 診断結果では、4季節をくすんだ紺・青・ピンク・緑の円で分ける - 白いカードは淡い地の上にだけ置き、影は付けない - `button-brush` は文字 `#FFF8EE` × 背景 `#E4B493` のコントラスト比が 1.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AB5F2B`、4.52:1）を使う。 - `diagnosis-chart` は文字 `#917679` × 背景 `#FFFFFF` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#8B6F72`、4.55:1）を使う。 - `topics-button` は文字 `#917679` × 背景 `#FFFFFF` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#8B6F72`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名や大見出しの欧文 | 欧文セリフ | Cormorant Garamond | 500 | 38px | 1.1 | 0.04em | | `headline-lg` | 和文のキャッチ見出し | 明朝 | Shippori Mincho | 500 | 26px | 1.5 | 0.12em | | `headline-md` | Variationなど小見出しの欧文 | 欧文セリフ | Cormorant Garamond | 500 | 24px | 1.2 | 0.05em | | `headline-sm` | 特長ラベルの欧文 | 欧文セリフ | Cormorant Garamond | 500 | 17px | 1.3 | 0.04em | | `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 400 | 12px | 2.0 | 0.06em | | `accent` | 円弧に沿わせた筆記体ラベル・縦書きの欧文 | 欧文セリフ | Playfair Display | 400 | 11px | 1.2 | 0.1em | | `note` | 注釈・着用カラーの表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.04em | | `label-button` | ボタンの欧文 | 欧文セリフ | Cormorant Garamond | 500 | 14px | 1.0 | 0.08em | - 見出しは欧文セリフで大きく組み、下に和文の小さなサブコピーを添える - 番号は欧文セリフで「01」のように2桁にし、上に円弧状の小さなラベルを置く - 本文は細めのゴシックで中央揃え。行間は約2.0と広くとる - 和文の大見出しは明朝体で字間を広げ、1字だけ大きくして強調する - 背景には商品名の巨大な欧文を薄い色で縦や斜めに置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右に互い違いで重ねる - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は画面端まで寄せ、左右交互に少し重ねてずらす - 特長は「写真＋欧文ラベル＋2〜3行の説明」とし、細い引き出し線で写真とつなぐ - セクションの上部は「番号・商品名・サブコピー」を中央に置く - 診断はフローチャートで組み、質問ボックスを細線でつないで4つの結果円へ導く - おすすめカラーのカードは左右交互に寄せ、画面端からずらして配置する ## Elevation & Depth - 影はほぼ使わない。平面の重ね合わせで奥行きを出す - 写真同士の重なりと、背景の色面の切り替えで層を作る - 白いカードも影なしで、地との色差だけで分ける ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 60px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角形で、片側上の角だけ大きく丸める。単品画像は切り抜き - **セクション境界**: 直線で色面を切り替える。診断パネルは上辺を大きな弧にする - 大きな角丸は写真の1か所だけに使う - ボタンは筆跡のような不定形の肌色の塗り - 線は1pxで、端に小さな点を付ける - 診断結果は正円で示す ## Components - **筆塗り風ボタン**（`button-brush`）: 肌色の筆跡のような塗りの上に、白い欧文セリフで詳細を見る導線を置く - **番号付き商品見出し**（`section-number-heading`）: 円弧ラベル、2桁番号、欧文の商品名、和文のサブコピーを縦に中央揃えで並べる - **引き出し線付き特長**（`feature-callout`）: 写真の横に欧文ラベルと短い説明を置き、細線で写真とつなぐ - **両側線の見出し**（`line-heading`）: 欧文見出しの左右に、端に点の付いた細線を引く。下に小さなサブコピーを添える - **比較パネル**（`before-after`）: 写真2枚を三角矢印でつなぎ、下にチャコールとボルドーのラベル帯を付ける - **診断フローチャート**（`diagnosis-chart`）: 白いパネルに淡い質問ボックスを置き、線でつないで4色の結果円へ導く - **おすすめカラーカード**（`color-card`）: 白いカードに、季節名の欧文、商品の切り抜き2点、着用写真2枚を並べる - **白枠ボタン**（`topics-button`）: ローズの地に置く白い長方形ボタン。文字は欧文 ## Do's and Don'ts **Do** - 地の色はくすんだ肌色系だけで切り替える - 欧文セリフと明朝体で上品さを出す - 写真は片側の角だけ大きく丸め、交互に重ねて配置する - 余白を広くとり、本文は中央揃えで短い行にする - 背景に大きな欧文を薄く置き、奥行きを出す **Don't** - 鮮やかな原色やビビッドなCTAは使わない - 太いゴシックで売り込み調の見出しにしない - 影やグラデーションの強いボタンは使わない - 写真全体を角丸にしない。丸めるのは1角だけ - 情報を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の価値を一目で伝える）: 着用写真に白い明朝体のキャッチを重ね、四隅に円弧状の欧文を配置する 2. **コンセプト紹介**（シリーズの考え方と商品の一覧を示す）: 淡い地に明朝体の見出しと中央揃えの文を置き、商品の切り抜き4点を横に並べる 3. **商品紹介1**（1つ目のカテゴリの特長を伝える）: ローズの地に番号見出し、交互に重ねた写真、引き出し線の特長、筆塗りボタンを置く 4. **商品紹介2**（2つ目のカテゴリの特長を伝える）: モーヴベージュの地で同じ型。背景に大きな欧文を斜めに置く 5. **商品紹介3**（3つ目のカテゴリの特長を伝える）: グレージュの地で同じ型にする 6. **商品紹介4・バリエーション**（種類と効果を示す）: 淡ピンクの地に2×2の種類グリッドを置き、比較パネルを続ける 7. **中間ビジュアル**（コンセプトをもう一度訴求する）: 写真の全面に白い明朝体の大きなコピーを重ねる 8. **パーソナルカラー診断**（自分に合う色を見つけてもらう）: 縦書きラベルと縦線から大見出しへつなぎ、白い弧型パネルにフローチャートを置く 9. **おすすめカラー**（診断結果ごとの商品を提案する）: 4季節の白いカードを左右交互に並べ、最後に注釈とボタンを置く 10. **トピックス**（関連記事へ誘導する）: ローズの地に大きな欧文見出しと白枠ボタンを置く ## Imagery - 自然光で撮ったソフトで低コントラストな写真。肌色やサテンの光沢を活かす - 手で商品を持つ、または上半身のみの着用カットで、顔は写さないか一部だけにする - 白い大理石や白布の上に商品を並べ、ドライフラワーなどの小物を添える - 単品は白背景の切り抜きで並べる - 診断には線画の女性イラストやアイコン、リップのイラストを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像はSP的な縦長の1カラム構成。SPでもそのまま流用する - PCでは中央に約980px幅のカラムを置き、左右に地の色を広げる - SPでは写真の重なりを浅くし、片側を画面端に寄せる - 背景の大きな欧文はSPで縮小または省略する - 診断チャートはSPでも2列の質問ボックスを保つ ## 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-d3db2d5a`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/f/contents/bloodinner - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。