--- version: alpha name: Soft Dusty Mauve Roomwear LP description: オフホワイトの地に、くすみピンクのモーヴとグレージュを重ねた柔らかなファッション雑貨 LP。細い欧文セリフと明朝の見出しを使い、アーチ型の写真、円のバッジ、斜めにずらした写真レイアウトで、ゆったりした雑誌のような雰囲気を出している。 colors: primary: '#DACACB' background: '#F8F6F7' background-alt: '#F9F3F3' surface: '#FFFFFF' tint-1: '#ACAAA6' dark-section: '#AAA6A0' on-dark: '#EEEDEA' text: '#484647' text-body: '#615F60' accent-1: '#AD9698' text-muted: '#7A7272' line: '#FDFDFD' tint-1-accessible: '#6D6A66' dark-section-accessible: '#6F6A63' text-muted-accessible: '#777070' typography: display: fontFamily: Cormorant Garamond fontSize: 56px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Cormorant Garamond fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Cinzel fontSize: 13px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 4px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-point-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px pill-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 22px arch-photo: rounded: '{rounded.lg}' height: 340px problem-circle: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px callout-zoom: textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 90px point-label-script: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 20px color-swatch-row: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 180px inset-thumb: backgroundColor: '{colors.surface}' height: 140px --- # DESIGN.md — くすみモーヴと生成りのルームソックス LP（Soft Dusty Mauve Roomwear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: やさしい・柔らかい、上品・高級、ナチュラル、シンプル・ミニマル - **キーワード**: くすみモーヴ・生成り・細い欧文セリフ・アーチ写真・余白多め・ルームウェア - **地の質感**: マットで粉っぽい淡色の面。グラデーションはごく薄く、光沢はない - **形**: アーチ、円、大きく角を丸めた写真、斜めに重ねた矩形 - **温度感**: 暖かみのある淡いニュートラル ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DACACB` | ブランドのくすみモーヴ（円バッジ・装飾面） | 6% | 画素の実測 | | `background` | `#F8F6F7` | ページの基本地色 | 40% | 画素の実測 | | `background-alt` | `#F9F3F3` | セクションを切り替える淡いピンクベージュの地 | 15% | 画素の実測 | | `surface` | `#FFFFFF` | 写真まわりの白い面 | 5% | 画素の実測 | | `tint-1` | `#ACAAA6` | グレージュの帯・ピル型ラベル | 4% | 画素の実測 | | `dark-section` | `#AAA6A0` | 悩みセクションのグレー地 | 4% | 画素の主要色に補正 | | `on-dark` | `#EEEDEA` | グレー地の上の白文字 | 1% | 画素の実測 | | `text` | `#484647` | 見出しの濃いグレー文字 | 2% | 画素の実測 | | `text-body` | `#615F60` | 本文のグレー文字 | 1% | 画素の実測 | | `accent-1` | `#AD9698` | 見出しの強調語に使うモーヴ文字 | 1% | 画素の実測 | | `text-muted` | `#7A7272` | 欧文の英字見出し | 1% | 推定 | | `line` | `#FDFDFD` | 円の枠線と引き出し線 | 1% | 画素の主要色に補正 | | `tint-1-accessible` | `#6D6A66` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#6F6A63` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#777070` | AA を満たす補正値（計算） | | 計算 | - 地はオフホワイトを基本にし、淡いピンクベージュの地をセクションごとに交互に使う - モーヴは円バッジ、強調語、装飾の円・アーチに限って使う - 悩みのセクションだけはグレーの地に白文字を載せ、変化をつける - 彩度の高い色は使わない。例外はサーモ画像などの検証写真だけ - 文字は純黒ではなく、暖かいダークグレーにする - `pill-label` は文字 `#EEEDEA` × 背景 `#ACAAA6` のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#6D6A66`、4.59:1）を使う。 - `problem-circle` は文字 `#EEEDEA` × 背景 `#AAA6A0` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#6F6A63`、4.58:1）を使う。 - `color-swatch-row` は文字 `#7A7272` × 背景 `#F8F6F7` のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#777070`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大きな欧文ロゴ風タイトル | 欧文セリフ | Cormorant Garamond | 400 | 56px | 1.0 | 0.02em | | `headline-lg` | セクションの日本語大見出し | 明朝 | Shippori Mincho | 500 | 28px | 1.5 | 0.1em | | `headline-md` | 英字のセクション見出し（Color Variation など） | 欧文セリフ | Cormorant Garamond | 400 | 32px | 1.2 | 0.08em | | `headline-sm` | ポイントの小見出し | ゴシック | Zen Kaku Gothic New | 500 | 17px | 1.6 | 0.08em | | `body-md` | 写真下の説明文（中央揃え） | ゴシック | Noto Sans JP | 400 | 12px | 2.0 | 0.05em | | `accent` | Point01 などの手書き風・細い欧文ラベル | 欧文セリフ | Cinzel | 400 | 13px | 1.2 | 0.1em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | - 英字見出しは細いセリフ体で字間を広げる - 日本語の大見出しは明朝体で、強調語だけを大きくしてモーヴにする - 本文は小さめのゴシック体を中央揃えにし、行間を 2.0 程度に広く取る - 太字はほとんど使わず、ウェイトは 400〜500 に収める - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真を左右にずらして重ねる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は画面幅の 90% か、端までの全幅で配置する - 見出しと本文は中央揃えを基本にする - ポイント部は写真と文を左右交互にずらす - セクションの間は 60px 以上空ける ## Elevation & Depth - 影はほぼ使わずフラットにする - 写真の重なりと地色の差で奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: アーチ型、角丸の矩形、円で切り抜く。写真を斜めにずらして重ねる - **セクション境界**: 直線のほか、悩みのセクションの下には V 字の切り込みを入れる - アーチ型の写真は 1 つのセクションで 1 回まで - 円は特長の拡大図とバッジに使う - ラベルはピル型にする ## Components - **ポイント番号の円バッジ**（`badge-point-circle`）: モーヴの円の中に、小さな英字と大きなセリフ体の数字を白で入れる - **素材のピルラベル**（`pill-label`）: グレージュのピル 2 つを × でつないで並べる - **アーチ型の写真枠**（`arch-photo`）: 上辺を半円にした縦長の写真 - **悩みの円カード**（`problem-circle`）: グレーの地に、白い細枠の円を 3 つ散らして配置し、円の上辺に沿って英字ラベルを入れる - **円の拡大図と引き出し線**（`callout-zoom`）: 商品写真の上に円の拡大図を置き、細い白線で説明文につなぐ - **Point 英字ラベル**（`point-label-script`）: 見出しの上に、モーヴの細いセリフ体で Point と番号を添える - **カラー展開の一覧**（`color-swatch-row`）: 切り抜いた商品を 3 つ並べ、下に大文字のセリフ体で色名を書く - **白枠の差し込みサムネイル**（`inset-thumb`）: 全幅写真の角に、白い枠付きの寄り写真を重ねる ## Do's and Don'ts **Do** - 余白を広く取り、静かで上品な間を保つ - 英字見出しと和文説明の 2 段構成をそろえる - モーヴは少量のアクセントに留める - 写真は自然光の白っぽいトーンで統一する **Don't** - 原色や蛍光色のボタンを置かない - 太いゴシック体で大きく叫ぶ見出しにしない - 濃い影や光沢のある装飾を付けない - 文字を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と素材の特長を一目で伝える）: 全幅のモデル写真に、明朝体のコピーと大きな欧文セリフを重ねる。モーヴの円バッジと色見本を小さく添える 2. **ベネフィットの導入**（核となる価値を短く伝える）: 明朝体の 2 段見出しとピルラベル、アーチ写真、中央揃えの説明文で組む 3. **素材のポイント**（素材の 2 点を紹介する）: 角丸の写真と Point ラベルを左右交互に配置する 4. **イメージギャラリー**（質感を見せる）: モーヴの円装飾の上に写真をずらして重ね、縦書きの英字を添える 5. **カラー展開**（色の選択肢を示す）: 英字の大見出しの下に、切り抜いた商品 3 つと色名を並べる 6. **悩みの提起**（共感を生む）: グレー地に白線の円を 3 つ置き、下辺を V 字に切る 7. **効果の実証**（効果を視覚で証明する）: 比較画像を 2 枚、矢印でつないで並べ、下に説明文を置く 8. **こだわりポイント**（詳しい特長を 3 つ伝える）: 引き出し線付きの拡大図で全体を示したあと、番号の円バッジ・見出し・写真・説明文を 3 回繰り返す 9. **コーディネート提案**（使う場面を想起させる）: ピンクベージュの地に、着用写真を左右にずらして重ねる 10. **ギフト提案**（贈答の需要を取り込む）: 英字見出しの下に角丸のボックス写真を置き、説明文と注釈を添える 11. **お手入れ方法**（購入前の不安を解消する）: 英字見出しの下に写真と説明文を置く 12. **カラー別イメージ**（各色の魅力を見せる）: 全幅のモデル写真に、大きな英字の色名と白枠のサムネイルを重ねる ## Imagery - 白いソファ、レースのカーテン、自然光が入る明るい室内で撮る - モデルはリラックスした座りポーズにし、ニットやボア素材を合わせる - 手元や足元の寄りで、素材の毛並みを見せる - 全体を低コントラスト・淡いトーンに仕上げる - 装飾はモーヴの円やアーチなど、幾何学的な形だけにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため推奨として記載する - PC では本文幅を 1000px 前後で中央にまとめる - ポイント部は写真と文の 2 カラムにする - カラー展開は横 3 列のまま余白を広げる - 全幅写真は高さを制限してトリミングする ## 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-6a6bedf0`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/c/product/l67set/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。