--- version: alpha name: Muted Greige Editorial Lingerie LP description: 白と淡いブルーグレーを地にして、グレージュとくすみオリーブで差し色を入れた、雑誌風の女性向けインナー LP。明朝体の縦書きコピー、細い欧文の大見出し、自然光で撮った大きなモデル写真で、静かで上品な朝の空気をつくる。 colors: primary: '#BBB6AE' background: '#FFFFFF' background-alt: '#F1F2F6' secondary: '#BFCDD6' text: '#3E3534' text-body: '#5A5452' accent-1: '#A69A6E' accent-2: '#BBB6AE' accent-3: '#BCA2A5' tint-1: '#E5B7B9' tint-2: '#CBBBA1' surface: '#FDFEFE' line: '#927E72' marker: '#FDFEFE' typography: display: fontFamily: Shippori Mincho fontSize: 46px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Cormorant Garamond fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.12em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Josefin Sans fontSize: 15px fontWeight: 300 lineHeight: 1.3 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px 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}' vertical-copy-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 240px rating-badge: textColor: '{colors.accent-2}' typography: '{typography.display}' height: 80px feature-circle: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 92px label-band: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 28px voice-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 130px section-title-en: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px size-table: backgroundColor: '{colors.accent-3}' typography: '{typography.headline-sm}' height: 260px step-illust: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 110px marker-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 110px --- # DESIGN.md — グレージュと淡ブルーグレーの上品な下着 LP（Muted Greige Editorial Lingerie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル - **キーワード**: くすみカラー・雑誌風・明朝の縦書き・細い欧文見出し・自然光・余白 - **地の質感**: マットで粉っぽい質感。グラデーションや光沢は使わず、淡い単色の面と写真の柔らかい光だけで見せる。 - **形**: 四角い写真と白い縦長の帯が基本。丸は機能アイコンとお客様の顔写真の切り抜きだけに使う。V 字のシェブロンで区切る箇所が 1 つある。 - **温度感**: やや寒色寄りのニュートラル。肌色とグレージュで温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BBB6AE` | ブランドを代表するグレージュ（ラベル帯・強調） | 3% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#F1F2F6` | 淡いグレーの地（特長・着用シーン） | 25% | 画素の実測 | | `secondary` | `#BFCDD6` | ブルーグレーの帯（訴求見出し・注意事項） | 6% | 画素の実測 | | `text` | `#3E3534` | 見出しの濃い茶系チャコール | 2% | 画素の主要色に補正 | | `text-body` | `#5A5452` | 本文のグレー | 2% | 推定 | | `accent-1` | `#A69A6E` | お客様の声の強調文字（くすみオリーブ） | 0% | 推定 | | `accent-2` | `#BBB6AE` | 評価の月桂樹と数字のゴールドベージュ | 0% | 画素の主要色に補正 | | `accent-3` | `#BCA2A5` | サイズ表の見出しセル（くすみモーブ） | 2% | 画素の実測 | | `tint-1` | `#E5B7B9` | サイズ表のくすみピンク | 1% | 画素の実測 | | `tint-2` | `#CBBBA1` | サイズ表のベージュ | 1% | 画素の実測 | | `surface` | `#FDFEFE` | 縦書きコピーをのせる白い帯 | 1% | 画素の実測 | | `line` | `#927E72` | 細い縦線・区切り線 | 0% | 画素の主要色に補正 | | `marker` | `#FDFEFE` | 見出し下の白いマーカー線 | 0% | 画素の実測 | - 地は白と淡いグレーを交互に使い、写真の前後で切り替えて区切る。 - 訴求の山場だけブルーグレーの帯を敷く。シェブロンで区切ってもよい。 - 強調には太字のオリーブかグレージュを使う。赤や原色は使わない。 - ラベル帯はグレージュの面に白文字で置く。 - 数字やデータはくすみパステルで色分けしてよい。ただし彩度は低く抑える。 - 文字は純黒にしない。茶みのあるチャコールを使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの写真に重ねる大コピー | 明朝 | Shippori Mincho | 400 | 46px | 1.2 | 0.05em | | `headline-lg` | 欧文のセクション見出し（細く字間広め） | 欧文セリフ | Cormorant Garamond | 400 | 30px | 1.2 | 0.08em | | `headline-md` | 和文の見出し・訴求コピー | 明朝 | Noto Serif JP | 500 | 22px | 1.6 | 0.12em | | `headline-sm` | 縦書きコピー・小見出し | 明朝 | Noto Serif JP | 500 | 18px | 1.8 | 0.15em | | `body-md` | 本文・お客様の声 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `note` | 注釈・使い方の説明 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em | | `accent` | ロゴ風の欧文・カラー名・Voice 番号 | 欧文サンセリフ | Josefin Sans | 300 | 15px | 1.3 | 0.1em | | `label-button` | グレージュのラベル帯の文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.1em | - 情緒的なコピーは明朝体で書く。縦書きを積極的に使う。 - セクションの大見出しは細い欧文の大文字にして、下に小さい和文の副題を添える。 - 本文はゴシック体で中央揃えにする。1 行を短く区切る。 - 強調は太字と色で表す。下線や派手な装飾は避ける。 - 字間は広めにとって、余白で上品さを出す。 - 円形に沿った欧文の小さな飾り文字を装飾として使う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品のディテールは 3 列、カラー展開も 3 列にする。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は全幅か左右どちらかに寄せて、左右非対称に配置する。 - 写真同士を少し重ね、白い帯のテキストを写真にかぶせる。 - セクションの間には広い余白をとる。 - お客様の声は丸い写真とテキストを左右交互に並べる。 - 特長は写真、ラベル帯、2〜3 行の本文の順で縦に積む。 ## Elevation & Depth - 影は基本的に使わない。 - 白い帯や写真は重ねるだけで立体感を出す。 - 丸アイコンは影を付けず白い塗りだけにする。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は基本を四角に切る。お客様の声の写真と機能アイコンは正円にする。 - **セクション境界**: 面の色の直線的な切り替えを基本にする。訴求の帯の上辺だけ V 字のシェブロンにする。 - 角丸は使わずシャープに見せる。 - 円は特別な要素だけに使う。 - 縦長の白い帯でコピーを囲む。 - 細い縦線を区切りに使う。 ## Components - **縦書きコピー帯**（`vertical-copy-panel`）: 写真にかぶせる白い縦長の帯。明朝体の縦書きを入れる。 - **評価バッジ**（`rating-badge`）: 月桂樹で挟んだ大きな数字と小さな説明・注釈。 - **丸い機能アイコン**（`feature-circle`）: ブルーグレー地に白い正円を 3 つ並べ、明朝の 2 行テキストを入れる。 - **ラベル帯**（`label-band`）: 写真の下端に重ねるグレージュの帯。白文字で特長名を入れる。 - **お客様の声**（`voice-item`）: 丸い写真、欧文の Voice 番号、強調色付きの感想文を左右交互に並べる。 - **欧文見出し**（`section-title-en`）: 細い大文字の欧文に小さい和文の副題を添える。 - **サイズ表**（`size-table`）: 白い罫で区切ったくすみパステルのセルに、明朝の数字を白で入れる。 - **着け方ステップ**（`step-illust`）: 線画イラストと欧文の番号、短い説明文を横に並べる。 - **マーカー見出し**（`marker-heading`）: ブルーグレーの帯の上に明朝の見出しを置き、下に白い太線を敷く。 ## Do's and Don'ts **Do** - 写真は自然光で、低いコントラストで撮る。 - コピーは明朝体で、縦書きを混ぜる。 - 余白は広くとって、ゆったり見せる。 - 色はくすみカラーだけでまとめる。 - 欧文の見出しで雑誌らしさを出す。 **Don't** - 赤や黄色など彩度の高い色は使わない。 - 太いゴシックで煽るコピーにしない。 - 影・グラデーション・光沢は使わない。 - 角丸のポップなボタンは置かない。 - 情報を詰め込みすぎない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品の特徴を一目で伝える。）: 全幅のモデル写真に、明朝の大コピー、縦書きの帯、円形の欧文飾りを重ねる。 2. **実績と導入**（信頼を示し、商品の概要を伝える。）: 月桂樹の評価バッジ、2 行の実績文、商品の寄り写真、明朝の見出しと本文を順に置く。 3. **共感**（朝の悩みに寄り添う。）: 重ねた写真に縦書きの詩的なコピーを入れた白い帯をかぶせる。 4. **効果の訴求**（主な効果を印象づける。）: シェブロン付きのブルーグレー帯にマーカー見出しを置き、写真と丸アイコン 3 つを続ける。 5. **着用シーン**（コーディネートでの使いやすさを見せる。）: 淡いグレー地に縦書き帯付きの写真、ディテール写真 3 列、ずらして重ねたコーデ写真を置く。 6. **カラー展開**（色の選択肢を見せる。）: 欧文見出しの下に、白背景の切り抜き商品写真を 3 列並べ、欧文のカラー名を添える。 7. **ブランド**（世界観をまとめて伝える。）: 評価バッジ、字間を広くとった明朝コピー、静物写真、欧文ロゴ、細い縦線を置く。 8. **お客様の声**（社会的証明を示す。）: 丸い写真と感想を左右交互に 3 件並べ、強調部分はオリーブの太字にする。 9. **機能詳細**（仕組みを説明する。）: 「×」で 2 語を対比した見出しを置き、写真、ラベル帯、本文の組を 3 つ続ける。 10. **サイズ表**（サイズ選びを助ける。）: 欧文見出しの下にくすみパステルの表と注釈を置く。 11. **着け方**（正しい着用方法を伝える。）: 線画イラストと番号付きの説明を 4 ステップ並べる。 12. **カラー別ビジュアル**（色ごとの魅力を伝える。）: 大きなモデル写真の左下に欧文のカラー名を白で重ねる。 13. **注意事項**（購入前の不安を解消する。）: ブルーグレー地に欧文の大見出し、商品写真、中央揃えの説明文を置く。 ## Imagery - 白壁や窓辺で自然光を受けた、やや明るく低コントラストのモデル写真。 - ベージュやグレーの服、ブークレ素材のソファなど、くすんだ小物を合わせる。 - 指で押す、裏返すなど、素材感を見せる寄りのディテール写真。 - 白背景の切り抜き商品写真を 3 色並べる。 - 着け方は淡い紫の水彩を差した細い線画イラストで描く。 - 円弧に沿う欧文の飾り文字や、筆で掠れたテクスチャを薄く添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 480〜600px 程度の SP 幅カラムを置き、左右を淡いグレーで埋めるのが自然。 - 全幅で見せる場合は、写真とテキストを左右 2 カラムにする。 - 欧文見出しは 48〜64px に拡大する。 - 丸アイコンとカラー展開は 3 列のまま余白を広げる。 - 縦書きの帯は PC でも維持して、雑誌風の印象を保つ。 ## 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-c0d4ef3a`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/c/product/u363a?utm_source=official_hp_260225_u363a&utm_medium=official_hp&utm_campaign=official_hp/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。