--- version: alpha name: Dusty Greige Editorial Swimwear LP description: くすみグレージュと白を地に、ボルドーで実績や強調を締める雑誌風の女性向け水着 LP。細い明朝と欧文セリフ、筆記体の装飾英字、余白の多い写真レイアウトで上品さを出す。 colors: primary: '#734246' background: '#FFFFFF' background-alt: '#F5F5F3' secondary: '#B3C4C5' surface: '#E9E5E1' accent-1: '#A48E8A' accent-2: '#C6BAB1' accent-3: '#A39C77' marker: '#8E5A5A' tint-1: '#BCA2A3' tint-2: '#9FA5A5' text: '#38393B' text-body: '#464544' on-dark: '#EBE8E4' line: '#828282' tint-2-accessible: '#636969' accent-2-accessible: '#776557' tint-1-accessible: '#845F61' typography: display: fontFamily: Cormorant Garamond fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Great Vibes fontSize: 28px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 4px lg: 200px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' pill-label: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-link: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px award-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 720px photo-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 480px number-corner: backgroundColor: '{colors.tint-2}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 70px before-after: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 200px size-chip: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 52px size-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 320px color-chip: textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 70px --- # DESIGN.md — グレージュ×ボルドーの大人水着 LP（Dusty Greige Editorial Swimwear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: くすみカラー・雑誌風・細明朝・筆記体英字・余白・大人かわいい - **地の質感**: マットな紙のようなフラット面に、淡いグラデーションと柔らかな自然光の写真を重ねる - **形**: 角ばった写真枠が基本。アーチ型の背景、カプセル型の写真、丸い円形クロップをアクセントに使う - **温度感**: やや暖かい中間色。ベージュ・グレージュに淡いブルーグレーを差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#734246` | ボルドー（実績セクション地・強調） | 6% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 35% | 画素の実測 | | `background-alt` | `#F5F5F3` | オフホワイトの淡い地 | 12% | 画素の実測 | | `secondary` | `#B3C4C5` | ブルーグレー（帯・アーチ背景） | 4% | 画素の実測 | | `surface` | `#E9E5E1` | 写真カードのグレージュ台紙 | 5% | 画素の実測 | | `accent-1` | `#A48E8A` | サイズ選択の濃いモーブ | 1% | 画素の実測 | | `accent-2` | `#C6BAB1` | サイズ選択の淡いトープ | 2% | 画素の実測 | | `accent-3` | `#A39C77` | 強調見出しのゴールドベージュ | 0% | 画素の実測 | | `marker` | `#8E5A5A` | 強調語のローズブラウン文字 | 0% | 推定 | | `tint-1` | `#BCA2A3` | サイズ表の見出しモーブピンク | 1% | 画素の実測 | | `tint-2` | `#9FA5A5` | 番号三角のグレー | 0% | 画素の実測 | | `text` | `#38393B` | 見出し文字（濃いチャコール） | 2% | 画素の実測 | | `text-body` | `#464544` | 本文・説明文のグレー | 1% | 画素の実測 | | `on-dark` | `#EBE8E4` | ボルドー地上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#828282` | ピルラベルと枠線のグレー | 0% | 画素の実測 | | `tint-2-accessible` | `#636969` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#776557` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#845F61` | AA を満たす補正値（計算） | | 計算 | - 地は白とオフホワイトを交互に使い、写真の間をつなぐ - ボルドーは実績セクションの全面地と強調語にだけ使う - ブルーグレーは帯やアーチ背景など雰囲気づくりに限定 - 強調語は見出し内の数文字だけローズブラウンに変える - サイズ・カラー選択はくすみトーンの段階色で表す - 原色や彩度の高い色は使わない - `number-corner` は文字 `#EBE8E4` × 背景 `#9FA5A5` のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-2-accessible`（`#636969`、4.58:1）を使う。 - `size-chip` は文字 `#EBE8E4` × 背景 `#C6BAB1` のコントラスト比が 1.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#776557`、4.54:1）を使う。 - `size-table` は文字 `#EBE8E4` × 背景 `#BCA2A3` のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#845F61`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション英字見出し | 欧文セリフ | Cormorant Garamond | 400 | 30px | 1.2 | 0.05em | | `headline-lg` | FV・大見出しの和文 | 明朝 | Shippori Mincho | 500 | 30px | 1.4 | 0.08em | | `headline-md` | 特長の見出し | 明朝 | Shippori Mincho | 500 | 24px | 1.5 | 0.1em | | `headline-sm` | 小見出し・ポイント名 | 明朝 | Noto Serif JP | 400 | 18px | 1.5 | 0.08em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.03em | | `accent` | 装飾の筆記体英字 | 欧文スクリプト | Great Vibes | 400 | 28px | 1.2 | 0.0em | | `label-button` | ピルラベル・リンクボタン | 明朝 | Noto Serif JP | 400 | 13px | 1.4 | 0.1em | - 和文見出しは細めの明朝で字間を広く取る - 英字見出しは大文字の細いセリフ体 - 筆記体英字は見出しの頭文字や背景に重ねて装飾として使う - 助詞を小さくして強調語を目立たせる - 本文はゴシックで短く中央揃え - 数字は大きなセリフ体で見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は 2 列グリッドや大小の組み合わせ - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は全幅か、左右に 6% ほど余白を残して配置 - 見出しは中央揃えで上下に広い余白を取る - 特長は番号付きの写真カード＋見出し＋説明を繰り返す - 比較は 2 列で BEFORE と AFTER を並べる - 縦書きの英字を写真の横に置き、雑誌風にする ## Elevation & Depth - 基本はフラット - 写真カードの台紙にだけ淡いドロップシャドウ - 細い枠線で写真をフレーム化する ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 200px。ボタンはピル型。 - **写真の切り抜き**: 主に角ばった矩形。円形クロップ、カプセル型、アーチ型を差し色的に使う - **セクション境界**: 直線で色面を切り替え、アーチ型の背景や細い縦線で区切る - ラベルとリンクボタンは細枠のピル型 - 番号は写真の左上に置くグレーの三角 - カラーは半円ドームのチップで見せる - 実績の枠は細い金線のアーチ ## Components - **細枠ピルラベル**（`pill-label`）: 白地に細いグレー枠のピル。セクション名や選択項目のラベル - **関連シリーズへのリンクボタン**（`button-link`）: 白地の横長ピルボタン。末尾に「>」を付ける - **実績ブロック**（`award-block`）: ボルドーの全面地に、月桂樹を添えた大きな数字と受賞バッジを並べる - **台紙付き写真カード**（`photo-card`）: グレージュの台紙に写真と明朝 2 行の説明を載せ、淡い影を付ける - **三角の番号**（`number-corner`）: 写真の左上にグレーの三角を置き、細いセリフ数字を斜めに入れる - **比較ラベル付き 2 列写真**（`before-after`）: 左はグレーの BEFORE、右はボルドーの AFTER のラベル帯を付ける - **サイズ選択チップ**（`size-chip`）: くすみ色の四角と丸を並べ、選択中を手描き風の丸で囲む - **サイズ表**（`size-table`）: モーブピンクの見出しセルとくすみ段階色のセルを白い線で区切るグリッド - **カラー見本ドーム**（`color-chip`）: 半円のドーム形の色見本の下に欧文の色名を置く ## Do's and Don'ts **Do** - 見出しは細い明朝と欧文セリフを組み合わせる - 筆記体英字をアクセントとして写真や見出しに重ねる - 写真同士の間に白い余白をたっぷり取る - 強調はボルドーかローズブラウンの文字色だけで行う - カラーやサイズはくすみトーンでそろえる **Don't** - 太いゴシックや原色の CTA を置かない - 角丸の大きいポップなカードを多用しない - 背景に柄やテクスチャを敷き詰めない - 文字を詰め込みすぎない - 影を濃くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と特長を一目で伝える）: 全幅のモデル写真に白い明朝のコピー、欧文の小見出し、丸い効果バッジ、カラーチップを重ねる 2. **コンセプト導入**（新商品であることを伝える）: ブルーグレーの帯に筆記体の英字、ピルラベル、明朝の大見出し。キーワードはゴールドの大きな文字 3. **デザイン紹介**（後ろ姿のデザインを見せる）: 英字見出しを重ねた台紙付き写真カードに、明朝 2 行の説明 4. **実績**（販売数とレビューで信頼を作る）: ボルドー地に金線のアーチ、月桂樹付きの大きな数字、受賞バッジを並べる 5. **セット内容**（セットの構成を伝える）: 細い枠の中に物撮り写真、英字の説明、注釈 6. **イメージギャラリー**（着用イメージで憧れを作る）: 縦書きの英字と大小の写真、カプセル型の写真を雑誌風に組む 7. **カラーバリエーション**（選べる色を見せる）: 英字見出し、ピルラベル、商品の切り抜き写真、ドーム型の色見本 8. **機能訴求（比較）**（着用効果を証明する）: アーチ背景の写真コラージュの後に、BEFORE と AFTER の 2 列比較とポイント解説 9. **関連シリーズ**（合わせ買いを促す）: 3 列と 2 列の写真グリッドとピル型のリンクボタン 10. **構造の解説**（盛れる理由を説明する）: 円形クロップの写真 2 つと、括弧で囲んだ強調コピー 11. **特長の番号リスト**（機能を順に伝える）: 三角の番号付き写真と明朝見出し、ゴシック本文を 5 回くり返す 12. **サイズガイド**（サイズの不安をなくす）: くすみ段階色のグリッド表と注釈 13. **組み合わせ一覧**（コーディネートを選ばせる）: 2 列の写真グリッド。左下に白い欧文で組み合わせ名を入れる ## Imagery - ベージュの壁と白い床の室内で、柔らかな自然光で撮る - モデルは物憂げな表情とリラックスしたポーズ - 麦わら帽子・かごバッグ・ドライフラワーなどの小物を添える - 物撮りはリネンの上にフラットレイで置く - ディテールは生地の質感がわかる接写 - 全体を低彩度・少し暖かいトーンに補正する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では中央に 480〜600px 幅の列を置く想定 - 左右の余白はオフホワイトか淡いグレージュで埋める - ギャラリーは PC で 3〜4 列に広げてもよい - 見出しサイズは 1.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-d4cc66a0`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/c/product/t22a?utm_source=official_pickup_260408_t22a&utm_medium=official_pickup&utm_campaign=official_pickup/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。