--- version: alpha name: Muted Beige Editorial Lingerie Fashion LP description: 生成り白の地に、ベージュ壁のモデル写真を大きく重ねて組んだファッション誌風の LP。明朝の細い見出し、欧文スクリプト、くすんだローズ色の AFTER ラベルを少しずつ使い、補正インナーを着こなしアイテムとして上品に見せている。 colors: background: '#FFFFFF' background-alt: '#FBFAF6' primary: '#7E7570' secondary: '#867A81' accent-1: '#8B5B5C' accent-2: '#5C5C5C' tint-1: '#E9E2D5' tint-2: '#B39D73' text: '#4E4849' text-muted: '#837F80' line: '#969291' on-primary: '#F3EEEA' surface: '#E6E3DE' secondary-accessible: '#73696F' primary-accessible: '#736B66' text-muted-accessible: '#797576' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.15em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Great Vibes fontSize: 48px fontWeight: 400 lineHeight: 1.0 note: fontFamily: Cormorant Garamond fontSize: 13px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em label-button: fontFamily: Cormorant Garamond fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 0px md: 0px lg: 999px 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}' label-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px label-outline-callout: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px badge-before: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 22px badge-after: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 22px heading-marker: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px brand-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 95px point-heading: textColor: '{colors.text}' typography: '{typography.accent}' height: 70px color-swatch-grid: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 200px caption-box-overlay: textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 80px --- # DESIGN.md — グレージュと生成りの大人インナー LP（Muted Beige Editorial Lingerie Fashion LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、ナチュラル、シンプル・ミニマル、やさしい・柔らかい - **キーワード**: エディトリアル・グレージュ・明朝×スクリプト・写真の重ね配置・余白多め - **地の質感**: マットで粉っぽいベージュ壁の自然光写真。紙のような生成り地に、うっすら影のグラデーションをかける - **形**: 角のない四角い写真が中心。ピル型ラベルと細い引き出し線をアクセントにする - **温度感**: 暖かめのニュートラル。彩度を落としたベージュ・ブラウン・グレー ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページの地（白） | 22% | 画素の実測 | | `background-alt` | `#FBFAF6` | 生成りの比較セクションの地 | 12% | 画素の実測 | | `primary` | `#7E7570` | ブランドを表すグレージュの帯 | 2% | 画素の実測 | | `secondary` | `#867A81` | ピル型ラベルのくすみモーブ | 1% | 画素の実測 | | `accent-1` | `#8B5B5C` | AFTER ラベルのくすみローズ | 0% | 画素の実測 | | `accent-2` | `#5C5C5C` | BEFORE ラベルのチャコール | 0% | 画素の実測 | | `tint-1` | `#E9E2D5` | 見出し下のベージュマーカー | 1% | 画素の実測 | | `tint-2` | `#B39D73` | 写真背景のベージュ壁 | 20% | 画素の実測 | | `text` | `#4E4849` | 見出し・本文の濃いブラウングレー | 2% | 画素の実測 | | `text-muted` | `#837F80` | 色名ラベル・欧文キャプション | 0% | 画素の実測 | | `line` | `#969291` | 縦の区切り線・引き出し線 | 0% | 画素の実測 | | `on-primary` | `#F3EEEA` | グレージュ帯の上の白文字 | 0% | 画素の実測 | | `surface` | `#E6E3DE` | コーデ写真枠の淡いグレー地 | 7% | 画素の実測 | | `secondary-accessible` | `#73696F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#736B66` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#797576` | AA を満たす補正値（計算） | | 計算 | - 地は白と生成りを交互に使い、比較・解説のセクションだけ生成りにする - 彩度の高い色は使わず、ベージュ・ブラウン・グレーの写真を主役にする - くすみローズは AFTER ラベルと点線の丸だけに使う - 見出しの強調は太字にせず、淡いベージュのマーカー帯を敷いて表す - グレージュの帯は欧文ロゴ風の区切りにだけ使う - 文字は純黒を避け、濃いブラウングレーにする - `label-pill` は文字 `#F3EEEA` × 背景 `#867A81` のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#73696F`、4.58:1）を使う。 - `brand-band` は文字 `#F3EEEA` × 背景 `#7E7570` のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#736B66`、4.53:1）を使う。 - `color-swatch-grid` は文字 `#837F80` × 背景 `#FFFFFF` のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#797576`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大きな白い明朝コピー | 明朝 | Shippori Mincho | 400 | 44px | 1.3 | 0.08em | | `headline-lg` | 縦書きのキャッチ・セクションの大見出し | 明朝 | Shippori Mincho | 400 | 24px | 1.6 | 0.15em | | `headline-md` | マーカー付きの機能見出し | 明朝 | Noto Serif JP | 500 | 22px | 1.4 | 0.1em | | `headline-sm` | 見出しの上に添える小見出し | 明朝 | Noto Serif JP | 400 | 13px | 1.5 | 0.1em | | `body-md` | 説明の本文 | 明朝 | Noto Serif JP | 400 | 13px | 1.8 | 0.05em | | `accent` | Point・Tips などの欧文スクリプト | 欧文スクリプト | Great Vibes | 400 | 48px | 1.0 | 0.0em | | `note` | 色名・欧文の小キャプション | 欧文セリフ | Cormorant Garamond | 500 | 13px | 1.3 | 0.1em | | `label-button` | ピル型ラベル・BEFORE/AFTER | 欧文セリフ | Cormorant Garamond | 500 | 13px | 1.2 | 0.08em | - 和文はすべて明朝で、太字は使わない - 字間は広め（0.08〜0.15em）にして誌面のように見せる - キャッチは写真の横に縦書きで置く - 欧文の大文字セリフで色名・セクション名を書く - スクリプト体は大きく、数字のセリフと組み合わせる - 本文は短く 2〜3 行の中央揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右に寄せて互い違いに配置する - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 大きな写真を左右どちらかに寄せ、反対側に縦書きコピーか小さな写真を重ねる - セクション間は白い余白と、中央の細い縦線でつなぐ - BEFORE/AFTER は 2 枚を横に並べて比べる - カラー展開は 3 列のグリッドで、商品だけを切り抜いて見せる - コーデ写真は大きさを変え、ずらしてコラージュする ## Elevation & Depth - 影はほぼ使わず、平面で構成する - コーデのコラージュは淡いグレーのグラデーション地に、細い白枠で写真を浮かせる - テキストボックスは半透明の暗い面に細い白線の枠をつける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。縦長の写真を画面端まで寄せて裁ち落とす - **セクション境界**: 直線で切り替え、中央に細い縦線を入れる - 写真は常に四角いままにする - ラベルだけをピル型にする - 注目させたい箇所は点線の丸で囲む - 引き出し線は細い直線と小さな丸い点で作る ## Components - **タイプ名ピルラベル**（`label-pill`）: くすみモーブの塗りに白い欧文セリフを置く小さなピル - **引き出し線付きアウトラインラベル**（`label-outline-callout`）: 細線のピル枠と、そこから伸びる直線の引き出し線 - **BEFORE ラベル**（`badge-before`）: 写真の左上に重ねるチャコールの角形ラベル - **AFTER ラベル**（`badge-after`）: 写真の左上に重ねるくすみローズの角形ラベル - **マーカー見出し**（`heading-marker`）: 小見出しの下に明朝の大見出しを置き、下半分にベージュの帯を敷く - **欧文ロゴ帯**（`brand-band`）: グレージュの長方形に、大文字欧文とスクリプトを中央揃えで組む - **Point 番号見出し**（`point-heading`）: 大きなスクリプトに、セリフ体の 2 桁番号を並べる - **カラー展開グリッド**（`color-swatch-grid`）: 切り抜いた商品を 3 列に並べ、下に大文字セリフの色名を置く - **写真上キャプション枠**（`caption-box-overlay`）: 半透明の暗い面に白い細枠をつけ、2 行の明朝を入れる ## Do's and Don'ts **Do** - 写真を主役にして、テキストは最小限にする - 和文は明朝、欧文はセリフ体とスクリプト体の組み合わせに統一する - 余白は大きく取り、写真を互い違いに配置する - 比較は BEFORE/AFTER を左右 2 枚で並べて見せる - 色名は大きな欧文で書き、小さな和文のタイプ名を添える **Don't** - 鮮やかな赤や黄色のセール風の装飾を使わない - 太いゴシック体や影付きの文字を使わない - 写真を丸く切り抜いたり、ぼかし枠をつけたりしない - ボタンやバッジを大きくして目立たせない - 文字を詰めすぎず、1 ブロックを 3 行以内にする ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品の新しさを一目で伝える）: 全面のモデル写真に白い明朝の大コピーと欧文ロゴを重ね、袖タイプ・色見本・サイズ帯と背面の小写真を添える 2. **コンセプト**（商品が提案する価値観を示す）: 白地に明朝の 2 行コピーを置き、縦長の写真の横に縦書きのコピーを並べる 3. **機能の導入**（内蔵カップの特長をつなぐ）: 短い文と、端に寄せたディテール写真を置き、中央の縦線で次のセクションへつなぐ 4. **ビフォーアフター**（シルエットの変化を見せる）: 生成り地にマーカー見出しを置き、2 枚の比較写真と 2 行の説明を並べる 5. **タイプ紹介**（2 種類の袖デザインを紹介する）: 大写真と小写真を互い違いに重ね、引き出し線付きのピルでタイプ名を示す 6. **カラーバリエーション**（色とタイプの選択肢を示す）: 大文字セリフの見出しの下に、タイプ別のピルと 3 列の商品切り抜きを並べる 7. **デザイン訴求**（おしゃれ着として見せる）: 全幅の写真に縦書きコピーと写真上のキャプション枠を重ね、欧文ロゴ帯で区切る 8. **着こなし提案**（1 枚でコーデが完成することを伝える）: 明朝の 2 行コピーをずらして置き、大写真と 2 枚組の写真を並べる 9. **悩み解消の比較**（段差や胸元の見え方の悩みを解決する）: マーカー見出しと BEFORE/AFTER の組を 2 セット並べ、気になる箇所を点線の丸で示す 10. **スタイリング集**（着回しの幅を見せる）: スクリプトのタイトルの下に、グレーのグラデーション地で白枠の写真をコラージュし、欧文の小さな注釈を添える 11. **機能ポイント**（構造の工夫を説明する）: Point 番号見出し、細枠の接写写真、左揃えの明朝の本文を続ける 12. **カラー別ビジュアル**（色ごとの印象を見せて締めくくる）: 全幅のモデル写真に、大文字セリフの色名と小さな和文のタイプ名を重ねる ## Imagery - ベージュの壁と自然光で、スタジオ風の柔らかい人物写真を撮る - モデルは無表情に近い目線で、肩から腰までの構図を基本にする - 着こなしはグレー・ブラウン・ストライプ・チェックなど、くすんだ色の秋冬服にする - 比較写真は白背景のトルソーで、黒いトップスを横から撮る - ディテールは指先で内側をめくる接写で見せる - コーデ写真は白い壁と床の全身カットにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、SP の画像を中央の幅 480〜600px のカラムに収める構成を推奨する - PC では左右の余白を生成りにして、誌面のような印象を保つ - コラージュや互い違いの配置は、PC でも横に広げすぎない - カラー展開は PC では 6 列にしてもよい ## 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-28909119`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/c/product/90407tg/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。