DESIGN.md — 黒×ボルドーのハート装飾ルームウェア LP（Noir and Bordeaux Editorial Loungewear Lookbook LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、シンプル・ミニマル
• キーワード: ルックブック・黒とボルドー・アールデコ欧文・ハートモチーフ・エディトリアル・余白で魅せる
• 地の質感: フラットな単色と、左が濃く右が明るい横方向のボルドーグラデーション。紙面のような静かな質感。
• 形: 角丸なしの矩形写真。装飾はハート形とごく細い縦線だけ。
• 温度感: 暗くて温かい。赤みのある深い色で、大人っぽくロマンチック。

Colors

• 地は黒・ボルドーのグラデーション・白の 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

• 見出しは細い線のアールデコ調欧文だけで組み、太字は使わない。
• 見出しは「小さな番号 → 細い縦線 → 大きな名前 → アイテム名」の順に中央揃えで縦に積む。
• 価格は大文字の欧文と数字で小さく書き、単位は小文字の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。