--- version: alpha name: Greige Editorial Fashion Innerwear LP description: グレージュとベージュの地に黒いベロア服の写真を大きく重ね、細い欧文セリフと明朝で雑誌の誌面のように見せるファッション LP。黒帯ラベル、細線の枠、縦書きの欧文透かしで落ち着いた大人のモード感を出す。 colors: primary: '#262221' on-primary: '#EDEBEA' background: '#EDE7D9' background-alt: '#E3E0DB' surface: '#FFFFFF' secondary: '#A29584' accent-1: '#858483' dark-section: '#5F5852' text: '#221E1D' text-body: '#3A3436' text-muted: '#958E7D' line: '#BDB2A2' accent-2: '#827E7D' accent-1-accessible: '#6B6A6A' secondary-accessible: '#756858' typography: display: fontFamily: Cormorant Garamond fontSize: 48px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-sm: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em accent: fontFamily: Great Vibes fontSize: 44px fontWeight: 400 lineHeight: 1.0 note: fontFamily: Cormorant Garamond fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-black: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 28px heading-framed-en: textColor: '{colors.text-muted}' typography: '{typography.display}' height: 64px heading-point: textColor: '{colors.text}' typography: '{typography.accent}' height: 70px caption-overlay: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 48px tag-pill-outline: textColor: '{colors.text-muted}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 18px badge-outline-photo: textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 30px vertical-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 300px compare-arrow: backgroundColor: '{colors.secondary}' height: 80px day-number: textColor: '{colors.text-body}' typography: '{typography.display}' height: 60px --- # DESIGN.md — グレージュ×黒の雑誌風ファッションインナーLP（Greige Editorial Fashion Innerwear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、シンプル・ミニマル、クール・先進的 - **キーワード**: エディトリアル・グレージュ・ベロアの黒・細身セリフ・写真主役・余白 - **地の質感**: マットな無地の面に柔らかい自然光の写真を重ねる。光沢やグラデーションは控える - **形**: 角丸なしの長方形の写真・細線枠・黒帯ラベル。小さなピル型の細線タグだけ角が丸い - **温度感**: やや暖かいニュートラル（ベージュ〜グレージュ） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#262221` | 黒帯ラベル・商品を思わせる黒 | 6% | 画素の実測 | | `on-primary` | `#EDEBEA` | 黒帯ラベル上の白文字 | 0% | 画素の実測 | | `background` | `#EDE7D9` | 明るいベージュの基本の地 | 20% | 画素の実測 | | `background-alt` | `#E3E0DB` | グレージュのセクション地 | 13% | 画素の実測 | | `surface` | `#FFFFFF` | 説明エリアの白地 | 15% | 画素の実測 | | `secondary` | `#A29584` | 写真の後ろの額縁・矢印のトープ | 9% | 画素の実測 | | `accent-1` | `#858483` | 写真に重ねる半透明グレーのキャプション帯 | 2% | 画素の実測 | | `dark-section` | `#5F5852` | ファーストビュー下端の濃いグレー帯 | 3% | 画素の実測 | | `text` | `#221E1D` | 見出しの濃い墨色 | 2% | 画素の実測 | | `text-body` | `#3A3436` | 本文テキスト | 2% | 画素の主要色に補正 | | `text-muted` | `#958E7D` | 欧文見出し・透かしのくすみ茶 | 2% | 画素の実測 | | `line` | `#BDB2A2` | 見出し枠・区切りの細線 | 0% | 画素の主要色に補正 | | `accent-2` | `#827E7D` | 右端の縦グレー帯（装飾） | 2% | 画素の実測 | | `accent-1-accessible` | `#6B6A6A` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#756858` | AA を満たす補正値（計算） | | 計算 | - 地はベージュとグレージュを交互に使い、ポイント説明だけ白地にする - 強い色は商品の黒だけ。ラベル帯にも同じ黒を使う - トープは写真の後ろの額縁、比較の矢印、右端の縦帯などの装飾にだけ使う - 写真上の文字は白か、半透明グレー帯に白文字で置く - 原色や彩度の高い色は使わない - `caption-overlay` は文字 `#EDEBEA` × 背景 `#858483` のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#6B6A6A`、4.54:1）を使う。 - `vertical-label` は文字 `#EDEBEA` × 背景 `#A29584` のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#756858`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 欧文セリフ | Cormorant Garamond | 300 | 48px | 1.1 | 0.02em | | `headline-lg` | FV の縦書きコピー | 明朝 | Shippori Mincho | 500 | 34px | 1.2 | 0.08em | | `headline-md` | 和文の見出し（2段構成の下段） | 明朝 | Noto Serif JP | 500 | 22px | 1.4 | 0.12em | | `headline-sm` | 黒帯ラベル・小見出し | 明朝 | Noto Serif JP | 500 | 14px | 1.4 | 0.1em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.08em | | `accent` | 筆記体の飾り文字（Point・Fashion など） | 欧文スクリプト | Great Vibes | 400 | 44px | 1.0 | 0.0em | | `note` | 注釈・欧文の小さいキャプション | 欧文セリフ | Cormorant Garamond | 400 | 10px | 1.5 | 0.05em | | `label-button` | ピル型タグの文字 | 欧文セリフ | Cormorant Garamond | 400 | 11px | 1.2 | 0.05em | - 和文はすべて明朝で、字間を 0.08em 以上あけて上品に見せる - 見出しは細い欧文セリフを大きく置き、下に和文の補足を小さく添える - 筆記体と直立したセリフ数字を並べて「Point 01」のような見出しにする - 大きな欧文を縦向きに薄く透かして、写真の横に重ねる - 太字やゴシックは使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右 2 枚並びや大小の重ね配置を多用する - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は画面幅の 60〜95% で配置し、左右に少しずらして重ねる - メイン写真の後ろにトープの額縁を置き、写真を枠の内側に収める - 欧文の大見出しを細線の長方形で囲み、下に縦の細線をのばして次の要素へつなぐ - スタイリング例はジグザグに並べ、左右交互にキャプションを置く - セクション間はたっぷり 64〜96px あける ## Elevation & Depth - 影は基本的に使わない - 奥行きは写真と額縁の重なり、半透明の帯で出す - 比較写真にはごく薄い影（0 2px 6px rgba(0,0,0,.08)）を付けてもよい ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。円形の拡大写真をアクセントに 1〜2 か所だけ使う - **セクション境界**: 直線で地の色を切り替える。斜めや波は使わない - 写真・ラベル・枠はすべて角を立てる - ピル型の細線タグだけ角を完全に丸める - 線は 1px の細線にする ## Components - **黒帯ラベル**（`label-black`）: タイプ名や特徴を白い明朝で載せる黒い長方形の帯 - **細線枠の欧文見出し**（`heading-framed-en`）: 細線の長方形の中に細い欧文セリフを置き、下に縦線をのばす - **Point 番号見出し**（`heading-point`）: 筆記体の Point と大きなセリフ数字を組み合わせ、下に細線枠の写真を置く - **半透明キャプション帯**（`caption-overlay`）: 写真の端に重ねる半透明グレーの帯。欧文の短い説明を白で載せる - **細線ピルタグ**（`tag-pill-outline`）: スタイル名を入れる細線のピル型タグ - **写真上の白線バッジ**（`badge-outline-photo`）: 写真の上に白い細線の長方形を置き、白文字で補足を入れる - **縦書きラベル**（`vertical-label`）: 写真の右上に重ねる縦長のトープ帯と白い縦書き文字 - **ビフォーアフター矢印**（`compare-arrow`）: 左右 2 枚の写真の間に置くトープの三角矢印 - **コーデ日数ナンバー**（`day-number`）: 小さな型番の横に、大きな細いセリフ体の数字と day を並べる ## Do's and Don'ts **Do** - 写真を主役にし、文字は少なく小さく置く - 欧文セリフと和文明朝を必ずペアで使う - 黒・ベージュ・グレージュ・トープの 4 色の中で配色をまとめる - 写真を重ねたりずらしたりして雑誌のような配置にする - 細線と余白で区切る **Don't** - ゴシックや太字で強く訴求しない - 彩度の高い色やセール風の赤バッジを入れない - 角丸カードや強い影を使わない - 写真を小さく並べて詰め込まない - グラデーションボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観を一目で伝える）: モデルの全面写真に縦書きの明朝コピーを重ね、左下に小さい写真と黒帯ラベル、下端に濃いグレーの帯を置く 2. **コンセプト見出し**（商品の価値をひと言で示す）: グレージュ地に細い欧文の特大見出しと和文の補足を置き、両側に細線を添える 3. **タイプ紹介**（2 種類の型を見せる）: 縦書きの欧文透かしと大小の写真を重ね、黒帯ラベルと明朝の本文で説明する 4. **機能訴求**（内蔵パッドの魅力を伝える）: 全面写真に円形の飾り見出しと白枠のパッド写真を重ねる 5. **素材とアレンジ**（質感と着方の幅を見せる）: 欧文の大見出しの下に、トープの額縁で囲んだ写真と縦書きラベルを置く 6. **デザインバリエーション**（タイプごとの着こなしを比べる）: 細線枠の見出しと黒帯ラベルの下に、2 枚並びの写真を置く 7. **スタイルイメージ**（大人の着こなしで憧れを高める）: 左右にずらした写真に細い欧文コピーを添え、縦書きの欧文を透かした額縁写真を置く 8. **着痩せのポイント**（シルエット効果を証明する）: 白地に 2 段構成の明朝見出しを置き、ビフォーアフター写真の間にトープの矢印を入れる 9. **スタイリング例**（毎日の使い方を見せる）: 筆記体と欧文の見出しの下に、day1〜4 の写真をジグザグに並べ、ピルタグと半透明の帯を添える 10. **ディテールのポイント**（機能を細かく説明する）: Point01〜04 の筆記体見出し、細線枠のクローズアップ写真、明朝の本文を繰り返す ## Imagery - 自然光が入る柔らかい室内で、ベージュ壁を背景にモデルを撮る - 黒い服を主役にし、肌と背景は暖かいベージュ寄りの低コントラストに仕上げる - 街角の石壁や階段で撮った全身のスナップ写真をコーデ例に使う - 白背景の商品クローズアップで、手でパッドを触る様子を見せる - 飾りは細い曲線の矢印、細線の枠、薄い縦書きの欧文透かしにとどめる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 375〜480px 幅の SP レイアウトを置き、左右をベージュ地で埋める方法を推奨する - 全幅で組む場合は写真と文字を 2 カラムにし、写真の重ね配置を左右に広げる - 欧文の特大見出しは 72〜96px まで大きくする - スタイリング例は横 2〜4 列のグリッドにしてもよい ## 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-6eaf41e8`（元 LP の URL から採番） - **元 LP**: https://www.tu-hacci.co.jp/c/product/inner/bratop/90409?__fw_token=ChQKEAoOCOfcg46i_JUDFYH7BgoQAQ/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。