--- version: alpha name: Noir and Bordeaux Editorial Loungewear Lookbook LP description: 黒とボルドーのグラデーションを地に、細身のアールデコ調欧文とハートのモチーフを重ねたファッション誌風のルックブック型 LP。写真を大きく見せ、価格は小さな白文字のキャプションで添える。 colors: primary: '#72261E' secondary: '#3B130E' background: '#000000' background-alt: '#FFFFFF' text: '#792C22' on-dark: '#FFFFFF' accent-1: '#933223' accent-2: '#B5150F' tint-1: '#F4F1F2' line: '#F5F3F1' background-accessible: '#B3B3B3' accent-1-accessible: '#CD4631' typography: display: fontFamily: Poiret One fontSize: 56px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Poiret One fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.03em headline-sm: fontFamily: Poiret One fontSize: 16px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em accent: fontFamily: Pinyon Script fontSize: 40px fontWeight: 400 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.05em note: fontFamily: Jost fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 0px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' look-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 260px price-caption: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 24px offset-photo-block: backgroundColor: '{colors.secondary}' height: 480px heart-emblem: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' height: 230px vertical-label: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 400px item-grid: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 400px button-view-all: backgroundColor: '{colors.accent-1}' textColor: '{colors.background}' typography: '{typography.headline-md}' height: 120px staff-credit: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 300px --- # DESIGN.md — 黒×ボルドーのハート装飾ルームウェア LP（Noir and Bordeaux Editorial Loungewear Lookbook LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、シンプル・ミニマル - **キーワード**: ルックブック・黒とボルドー・アールデコ欧文・ハートモチーフ・エディトリアル・余白で魅せる - **地の質感**: フラットな単色と、左が濃く右が明るい横方向のボルドーグラデーション。紙面のような静かな質感。 - **形**: 角丸なしの矩形写真。装飾はハート形とごく細い縦線だけ。 - **温度感**: 暗くて温かい。赤みのある深い色で、大人っぽくロマンチック。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#72261E` | ボルドーのグラデーション帯（右側の明るい部分） | 18% | 画素の実測 | | `secondary` | `#3B130E` | ボルドーのグラデーション帯（左側の濃い部分） | 9% | 画素の実測 | | `background` | `#000000` | メインの地色（黒） | 30% | 画素の実測 | | `background-alt` | `#FFFFFF` | リード文の白い地 | 4% | 画素の実測 | | `text` | `#792C22` | 白地のリード文（えんじ色） | 1% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い地の上の見出しとキャプション | 2% | 画素の実測 | | `accent-1` | `#933223` | ハート形ロゴの赤茶 | 1% | 画素の実測 | | `accent-2` | `#B5150F` | 撮影小物の鮮やかな赤（ハート・椅子・床） | 6% | 推定 | | `tint-1` | `#F4F1F2` | 写真背景のライトグレー | 14% | 画素の実測 | | `line` | `#F5F3F1` | 見出しの間に入る細い縦線 | 0% | 画素の主要色に補正 | | `background-accessible` | `#B3B3B3` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CD4631` | AA を満たす補正値（計算） | | 計算 | - 地は黒・ボルドーのグラデーション・白の 3 種類だけ。セクションごとに順番に切り替える。 - ボルドーは左 #471D18 から右 #7A2A20 への横グラデーションで使う。 - 暗い地の文字はすべて白。白地の本文だけえんじ色にする。 - 強い赤は写真の小物とハートロゴに任せ、UI 部品には使わない。 - 写真の背景はライトグレーか赤にそろえ、ページの配色と響き合わせる。 - `page` は文字 `#792C22` × 背景 `#000000` のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#B3B3B3`、4.56:1）を使う。 - `heart-emblem` は文字 `#933223` × 背景 `#000000` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#B3B3B3`、4.52:1）を使う。 - `button-view-all` は文字 `#000000` × 背景 `#933223` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CD4631`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 各ルックの大きな商品名見出し | 装飾・ディスプレイ | Poiret One | 400 | 56px | 1.1 | 0.02em | | `headline-md` | 見出しの下に入るアイテム名 | 装飾・ディスプレイ | Poiret One | 400 | 26px | 1.2 | 0.03em | | `headline-sm` | ルック番号のような小さな見出し | 装飾・ディスプレイ | Poiret One | 400 | 16px | 1.2 | 0.1em | | `accent` | 縦書きの欧文ラベルや筆記体の添え文字 | 欧文スクリプト | Pinyon Script | 400 | 40px | 1.0 | 0.0em | | `body-md` | 白地の中央揃えリード文 | ゴシック | Noto Sans JP | 400 | 12px | 2.1 | 0.05em | | `note` | 商品名と価格のキャプション、スタッフクレジット | 欧文サンセリフ | Jost | 400 | 12px | 1.6 | 0.02em | - 見出しは細い線のアールデコ調欧文だけで組み、太字は使わない。 - 見出しは「小さな番号 → 細い縦線 → 大きな名前 → アイテム名」の順に中央揃えで縦に積む。 - 価格は大文字の欧文と数字で小さく書き、単位は小文字の yen にする。 - 日本語は白地のリード文にだけ使い、中央揃えで行間を広くとる。 - 大きな欧文を縦に回転させ、写真の端にかかるように置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は全幅か片側に寄せた約 85% 幅。アイテム一覧は 2 カラム。 - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 80px、基本単位 8px、カード内 0px（375px 幅換算） - 写真は画面の端から端まで、または左右どちらかに寄せて断ち落とし、反対側の地色を見せる。 - ボルドーの帯と写真を互い違いに重ね、雑誌のようなずれのあるレイアウトにする。 - 見出しの帯は高さ約 260px で中央揃え。 - 価格キャプションは写真の直下に置き、中央か右揃えにする。 - 2 カラムの一覧はすき間を約 6px にし、下にキャプションを置く。 ## Elevation & Depth - 影は使わない。奥行きは写真と地色の重なりだけでつくる。 - ハートの形をくり抜いて写真をのぞかせるビネットで奥行きを出す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。ファーストビューだけ、ハート形にくり抜いたシルエットで写真を見せる。 - **セクション境界**: 直線でまっすぐ切り替える。写真の下端にハート形の小物を重ねることもある。 - ボタンや枠に角丸を付けない。 - 装飾の形はハートに統一する。 - 線は見出しの間の縦線 1 本だけにする。 ## Components - **ルック見出し帯**（`look-heading`）: ボルドーのグラデーションか黒の帯に、小さな番号・縦線・大きな欧文名・アイテム名を中央に積む。 - **価格キャプション**（`price-caption`）: 写真の下に置く、白い大文字欧文の商品名と価格。 - **ずらし配置の写真ブロック**（`offset-photo-block`）: 約 85% 幅の写真を左右に寄せ、空いた側にボルドーの帯を見せる。 - **ハートのエンブレム**（`heart-emblem`）: 黒地の中央に置く赤茶色のハート。線画版と塗り版の 2 種類。 - **縦書き欧文ラベル**（`vertical-label`）: カテゴリ名を細い白の欧文で 90° 回転させ、写真の左端に重ねる。 - **2 カラムのアイテム一覧**（`item-grid`）: 黒地に正方形に近い写真を 2 列で並べ、それぞれの下に中央揃えの価格を置く。 - **ハート形の一覧ボタン**（`button-view-all`）: 赤茶色のハートの中に、細い欧文で「一覧を見る」と入れる主 CTA。 - **スタッフクレジット**（`staff-credit`）: 黒地に白の欧文で、役割と名前を 1 行ずつ中央揃えで並べる。 ## Do's and Don'ts **Do** - 写真を主役にして大きく見せ、文字は最小限にする。 - 黒・ボルドー・白の地を順番に切り替えて、ページにリズムをつくる。 - 見出しは細いアールデコ調の欧文で中央に積む。 - ハートのモチーフを繰り返し使い、ページ全体を統一する。 - モノクロ写真を 1 枚混ぜて、緩急をつける。 **Don't** - 太いゴシック体や、目立つ色ベタのボタンを使わない。 - 影・角丸・グラデーションのボタンを使わない。 - 黄色や青などの明るい色を UI に加えない。 - 本文を長く書かない。説明はリード文 1 か所に収める。 - セールのバッジや強い煽り文句を入れない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドとコラボの世界観を一目で伝える）: 黒地に赤いハートをくり抜き、その中にモデルの写真を入れる。上にロゴ、下に周年の欧文と筆記体を置く。 2. **リード文**（コレクションのテーマを説明する）: 白地に、えんじ色の小さな日本語を中央揃えで 3 段落置く。 3. **ルック 1 見出し**（1 つ目のスタイルの導入）: ボルドーのグラデーション帯に、番号・縦線・大きな欧文名を積む。 4. **ルック 1 写真と価格**（商品を見せる）: 全幅の写真、価格キャプション、ずらし配置の写真を交互に並べ、モノクロ写真と縦書きの筆記体を添える。 5. **ルック 2**（2 つ目のスタイル）: 黒の見出し帯の後に写真を置く。ハートの小物を前景に入れる。 6. **ブランドのエンブレム**（流れの区切りと世界観の強化）: 黒地の中央に線画のハートロゴを置き、上下に広い余白をとる。 7. **ルック 3・4**（スタイルの続き）: 赤い背景の写真と黒い帯を組み合わせ、最後は筆記体の一言で締める。 8. **ハートロゴの区切り**（メンズからレディースへの転換）: 黒い全面の中央に、塗りのハートロゴを置く。 9. **レディース**（女性向け商品を一覧で見せる）: 縦書きの欧文ラベルと全幅写真の後、2 カラムの一覧に価格を添える。 10. **雑貨**（小物を一覧で見せる）: 縦書きラベルと写真の後に 2 カラムの一覧を置き、空いたマスに仏文の引用を縦長に右揃えで入れる。 11. **CTA とクレジット**（一覧ページへ誘導し、制作スタッフを示す）: ハート形のボタンの下に、白い欧文のスタッフ一覧を中央揃えで置く。 ## Imagery - スタジオ撮影。背景はライトグレーか朱赤の単色にする。 - 小物は赤いハートのオブジェ、赤いリンゴ、リボン、白いソファ、赤い椅子。 - モデルは静かな表情で、くつろいだポーズをとる。 - 途中にモノクロのポートレートを 1 枚入れる。 - 物撮りは赤い面の上に黒・白の商品を置き、真上や斜め上から撮る。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも本文は約 380px の中央 1 カラムに保ち、SP と同じ縦の流れにする。 - PC のファーストビューは横長にし、左に別の写真、中央にロゴ、右にハート形のビネットを並べる。 - PC では写真・帯・見出しのサイズをカラム幅に合わせて比例させる。 - PC でも 2 カラムの一覧は崩さない。 ## 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-b980e9cb`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/250905_ROBUCHON/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。