--- version: alpha name: Pastel Ballet Elegant Lingerie LP description: 白とごく淡いグレーの地に、くすみブルー・モーブピンク・グレージュの3色で商品ラインを色分けする上品なランジェリーLP。細い明朝風の和文と、細身の欧文サンセリフ・筆記体を合わせ、余白を広く取って静かな高級感を出す。 colors: primary: '#8094AD' secondary: '#D0B3AF' accent-1: '#A5A1A0' background: '#FFFFFF' background-alt: '#E1E5ED' tint-1: '#FFF9F9' surface: '#FEFEFE' text: '#959DAA' text-body: '#707278' text-muted: '#C4B0AA' line: '#A9ACAF' cta: '#8294AC' on-cta: '#EDFAFF' dark-section: '#AEB3B9' cta-accessible: '#5F748F' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 300 lineHeight: 1.8 letterSpacing: 0.15em headline-lg: fontFamily: Jost fontSize: 28px fontWeight: 300 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Jost fontSize: 24px fontWeight: 300 lineHeight: 1.3 letterSpacing: 0.12em accent: fontFamily: Playfair Display fontSize: 30px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 2.6 letterSpacing: 0.12em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Jost fontSize: 9px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em label-button: fontFamily: Jost fontSize: 10px fontWeight: 400 lineHeight: 1.0 rounded: sm: 0px md: 8px lg: 60px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' chapter-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 50px dome-panel: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px recommend-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-lg}' height: 200px product-info: textColor: '{colors.text-body}' typography: '{typography.note}' height: 180px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 18px oval-frame: backgroundColor: '{colors.background}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 160px vertical-rule: textColor: '{colors.line}' height: 50px button-view-all: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 30px --- # DESIGN.md — くすみブルー×モーブの上品ランジェリーLP（Pastel Ballet Elegant Lingerie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: くすみパステル・バレエ・余白・細字・透け感・3ステップ色分け - **地の質感**: 白い羽やシフォンを思わせる淡いぼかし背景、薄く透ける装飾筆記体 - **形**: 大きな半円ドーム型のパネル、片側だけ大きく角丸にした写真、楕円フレーム - **温度感**: やや寒色寄りの冷たく澄んだ印象。ピンクの章だけ少し温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8094AD` | 1章目のくすみブルー（ドームパネル・ボタン） | 6% | 画素の実測 | | `secondary` | `#D0B3AF` | 2章目のモーブピンク（ドームパネル） | 6% | 画素の実測 | | `accent-1` | `#A5A1A0` | 3章目のウォームグレー（ドームパネル） | 6% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 25% | 画素の実測 | | `background-alt` | `#E1E5ED` | 淡いブルーグレーのぼかし地 | 22% | 画素の実測 | | `tint-1` | `#FFF9F9` | ピンク章の淡い地 | 8% | 画素の実測 | | `surface` | `#FEFEFE` | おすすめボックスの白カード | 5% | 画素の実測 | | `text` | `#959DAA` | 見出しのブルーグレー文字 | 1% | 画素の実測 | | `text-body` | `#707278` | 本文のグレー文字 | 2% | 推定 | | `text-muted` | `#C4B0AA` | 説明文の淡いピンク文字 | 1% | 画素の主要色に補正 | | `line` | `#A9ACAF` | ボックス枠・縦罫線 | 1% | 画素の実測 | | `cta` | `#8294AC` | 商品確認ボタン（章色） | 1% | 画素の実測 | | `on-cta` | `#EDFAFF` | ボタン文字 | 0% | 画素の実測 | | `dark-section` | `#AEB3B9` | 締めのグレー写真セクション | 7% | 画素の実測 | | `cta-accessible` | `#5F748F` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いブルーグレーのぼかしを交互に使う - 商品3種を ブルー／モーブ／グレー の章色で塗り分ける - 章内の見出し番号・ドーム・ボタン・説明文を同じ章色で統一する - 原色や彩度の高い色は使わない - 文字は黒を避け、グレーや章色の中間調にする - ボタンも章色の面に白文字にし、目立たせすぎない - `button-primary` は文字 `#EDFAFF` × 背景 `#8294AC` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#5F748F`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | コンセプト見出し | ゴシック | Zen Kaku Gothic New | 300 | 26px | 1.8 | 0.15em | | `headline-lg` | 章タイトル（欧文名＋和文） | 欧文サンセリフ | Jost | 300 | 28px | 1.3 | 0.08em | | `headline-md` | RECOMMEND などの欧文見出し | 欧文サンセリフ | Jost | 300 | 24px | 1.3 | 0.12em | | `accent` | 番号・装飾筆記体の大きな欧文 | 欧文スクリプト | Playfair Display | 400 | 30px | 1.1 | 0.02em | | `body-md` | 中央揃えの本文 | ゴシック | Zen Kaku Gothic New | 400 | 12px | 2.6 | 0.12em | | `body-lg` | おすすめのチェック項目 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 1.9 | 0.1em | | `note` | 品番・サイズ・価格 | 欧文サンセリフ | Jost | 400 | 9px | 1.8 | 0.02em | | `label-button` | check ボタン | 欧文サンセリフ | Jost | 400 | 10px | 1.0 | 0.0em | - 全体を細字（300〜400）で統一する - 字間を0.1em以上広げて余裕を出す - 本文は中央揃え・行間2.5前後で短く改行する - 欧文は細身の幾何学サンセリフ、装飾は筆記体の斜体 - 太字での強調はしない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品紹介だけ画像左・情報右の2分割 - **本文ブロックの幅**: 画面幅の約 75% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクション間は広い余白で区切る - 本文ブロックは中央に寄せ左右を大きく空ける - Product point は3枚の横スクロールカード - おすすめボックスは白カード内に細枠を入れ子にする - 写真は片端を画面端に付けて非対称に置く ## Elevation & Depth - 影はほぼ使わない - 白カードは淡い背景との色差だけで浮かせる - 透け文字や半透明の装飾で奥行きを出す ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 60px。ボタンは角丸の長方形。 - **写真の切り抜き**: モデル写真は左上だけ大きく角丸、商品は楕円の細枠フレーム - **セクション境界**: 上辺が大きな半円ドームになる章色パネル - ボタンは角丸なしの小さな長方形 - 番号は章色の正円バッジ - 枠線は1px の細線のみ ## Components - **章番号付き見出し**（`chapter-heading`）: 章色の円に番号、隣に欧文名と鉤括弧の和文を細字で並べる - **ドーム型ポイントパネル**（`dome-panel`）: 上辺が半円の章色面に白い欧文見出しと横スクロール写真3枚・白の短文 - **おすすめボックス**（`recommend-box`）: 白カード内に細枠、欧文見出し＋小さな和文、丸チェックの項目を3つ - **商品情報ブロック**（`product-info`）: 左に商品切り抜き、右に商品名・品番・サイズ・価格・色見本 - **check ボタン**（`button-primary`）: 章色の小さな長方形に白文字と細い矢印線、2つ横並び - **楕円フレーム**（`oval-frame`）: 商品3種を細線の楕円で囲み、下に章色の楕円ラベル - **縦の細罫線**（`vertical-rule`）: 見出しの上に置く短い1pxの縦線 - **一覧ボタン**（`button-view-all`）: 締め写真の上に置く淡いブルーの長方形ボタン ## Do's and Don'ts **Do** - 章ごとに色を決め、その章の要素すべてに使う - 余白を広く取り、本文は短く中央揃えにする - 細字と広い字間を保つ - 背景に羽・シフォン風の淡いぼかしを敷く - 欧文の筆記体を薄く大きく縦に流して装飾にする **Don't** - 太字や大きな赤文字の訴求は使わない - 鮮やかな色や黒ベタのボタンを置かない - 強い影やグラデーションボタンを使わない - 文字を詰めて情報を詰め込まない - 角丸ピル型ボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観提示）: モデル写真に角丸の白い枠、縦書きの短いコピー、下部に筆記体ロゴ 2. **コンセプト**（商品の考え方を伝える）: 縦罫線の下に2行の大見出し、中央揃えの短い本文 3. **3ステップ紹介**（3つのラインを一覧）: 番号筆記体と写真の3列、下に動詞1語のラベル 4. **商品ラインナップ**（3種の色の違いを見せる）: 欧文の一文の下に楕円フレームの商品3つ 5. **商品1の詳細**（1つ目の特長と購入導線）: ブルーの章見出し、角丸写真、ドーム型ポイント、本文、おすすめボックス、商品情報 6. **商品2の詳細**（2つ目の特長と購入導線）: 同じ構成をモーブピンクで繰り返す 7. **商品3の詳細**（3つ目の特長と購入導線）: 同じ構成をグレーで繰り返す 8. **締めのCTA**（世界観の余韻と一覧誘導）: 全面のモデル写真に白文字のコピー、一覧ボタン、ロゴ ## Imagery - 白〜淡いグレーのスタジオで撮った柔らかい自然光のモデル写真 - バレエを思わせるしなやかなポーズ、トウシューズなど - 商品は白背景の切り抜きや細部の接写 - 背景に羽毛・シフォン・リボンのぼかし素材 - 大きな筆記体の欧文を半透明で重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅に近いカラムを置き、左右は淡い背景で埋める - PC では商品紹介を写真と情報の2カラムに広げる - ポイントカードは PC で3枚を横並び表示にする - 余白比率は SP と同じく広めを保つ ## 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-6166fc18`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/f/feature/2510_balletstep/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。