DESIGN.md — グレージュ×ミッドナイト紺の冬ルックブック LP（Winter Holiday Lookbook Fashion LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、シンプル・ミニマル、やさしい・柔らかい
• キーワード: ルックブック・ホリデー・きらめき・クラシカル室内・細い欧文イタリック・余白
• 地の質感: 生成り地に金や白の粒子が散るラメ調テクスチャ。紺地には雪のようなボケ粒子を散らす。
• 形: 角丸なしの長方形写真のみ。境界線は使わず、地色の切り替えでブロックを分ける。
• 温度感: 生成りとシャンパンゴールドの暖かさに、夜の紺で冷たさを添えた冬らしい中間温度。

Colors

• 外側は白、内側の中央カラムは生成りのきらめき地と紺地を交互に置く。
• グレージュはヒーローのブランド面だけに使う。
• 文字は黒にせず、ベージュグレーか生成り白にして柔らかくする。
• ゴールドは写真の小物や紙吹雪で添える程度にし、面の色には使わない。
• ボタンの塗りや強い彩度の色は使わない。
• hero-split は文字 #C3B9AD × 背景 #FFFFFE のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#847360、4.56:1）を使う。
• glitter-series-block は文字 #7D6752 × 背景 #DDD4CA のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#6C5947、4.54:1）を使う。
• credit-list は文字 #8C8176 × 背景 #FFFFFF のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#7E746A、4.57:1）を使う。

Typography

• 見出しはすべて細い欧文で、斜体にする。
• 日本語は小さく、行間を広く取って中央に揃える。
• 価格は「アイテム名 金額yen」の形で大文字の英字で書き、写真の左下か右下に置く。
• 太字は使わない。強調は大きさと余白で表す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に約 28% 幅の細いカラムを置く
• 本文ブロックの幅: 画面幅の約 100%
• 余白: セクション間 0px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は地のブロックの上に置き、幅の 80〜100% で中央・左寄せ・右寄せを交互に変える。
• シリーズごとに地色をはっきり切り替え、セクションの間はすき間なく続ける。
• 写真同士の間は 24〜48px あける。
• テキストは見出し・短い英文・価格の 3 つだけにする。

Elevation & Depth

• 影は使わない。
• 奥行きはきらめくテクスチャと写真の重ね置きで出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの縦長長方形（3:4〜4:5）。一部は横長にする
• セクション境界: 直線で地色を切り替える（線は引かない）
• 写真は角を立てたまま使う。
• 写真を少しずらして重ね、雑誌のような流れを作る。

Components

• 3 分割ヒーロー（hero-split）: PC は左に写真、中央に白地のコピー、右にグレージュのロゴ面。SP は写真→コピー→ロゴの順に縦に積む。
• シリーズ見出し（series-heading）: 細いイタリックのシリーズ名の下に、小さい英単語を添える。左寄せか中央揃え。
• 紺地のシリーズブロック（dark-series-block）: 雪のような粒子を散らした紺地に写真と白文字の価格を置く。
• きらめき生成りブロック（glitter-series-block）: ラメ調の生成り地に、写真をずらしながら並べる。
• 価格キャプション（price-caption）: 写真の下に、商品名と価格を 1〜2 行の小さい大文字で書く。
• 英文イタリックのコピー（italic-quote）: 写真の間に、2〜3 行の淡い色の英文を中央揃えで挟む。
• 一覧リンク（view-all-link）: 末尾に、淡い花のイラストと重ねたイタリック文字だけのリンクを置く。ボタンの枠は付けない。
• スタッフクレジット（credit-list）: 撮影スタッフを小さい大文字で中央にそろえて並べる。

Do's and Don'ts

Do - 写真を主役にして、文字は最小限にする。 - 生成りのきらめき地と紺地を、シリーズごとに交互に置く。 - 見出しは細い欧文イタリックで、淡い色にする。 - 価格は写真のそばに小さく書く。 - 写真の配置を左右に振って、ルックブックらしいリズムを作る。

Don't - 太いゴシックや原色のボタンを置かない。 - 角丸や影の付いたカードを使わない。 - 長い日本語の説明文を並べない。 - 純黒の文字や純黒の面を使わない。 - バッジや吹き出しのような販促の装飾を入れない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（コレクションの世界観とコラボを伝える）: クラシカルな室内のモデル写真、白地の細い欧文タイトルと短い日本語の紹介文、グレージュのロゴ面を組み合わせる。
2. シリーズ1（ニット）（主力アイテムを見せる）: きらめく生成り地にシリーズ見出しを置き、縦長写真 2 枚と価格を並べる。
3. ムードカット（ホリデーの空気をつくる）: ゴールドの紙吹雪の写真に、コレクション名を半透明の文字で重ねる。
4. コンセプト英文（コラボの背景をにおわせる）: 淡い色の英文イタリックを中央に置き、その下に写真と価格を続ける。
5. 紺地アイテム群（夜の雰囲気で別のアイテムを見せる）: 粒子を散らした紺地に、写真と白文字の価格を交互に置く。
6. シリーズ2（サテン）（パジャマのシリーズを見せる）: 生成りのきらめき地に、ずらした写真を重ね、テーブルの小物の写真と英文コピーを挟む。
7. シリーズ3（カットソー）（カジュアルなシリーズを見せる）: 紺地に白のイタリック見出しを置き、室内の写真と英文の締めコピーを並べる。
8. 一覧導線・クレジット（商品一覧へ誘導して締める）: 白地に花のイラストと重ねたイタリックのリンク、小さいスタッフクレジットを置く。

Imagery

• クラシカルな洋館風の室内（モールディングの壁、猫脚の椅子、ランプ、キャンドル）で撮ったモデル写真。
• 暖かいタングステン光の中で、彩度を抑えたフィルム調に仕上げる。
• グラス・燭台・ゴールドの星や紙吹雪といったホリデーの小物写真を挟む。
• 背景には金や白のラメ粒子や、雪のようなボケを散らしたテクスチャを敷く。
• モデルは無表情に近いファッション誌風のポーズにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は画面中央に細いカラムを置き、その外は白にする。SP ではカラムを画面幅いっぱいに広げる。
• PC のヒーローは横に 3 分割する。SP では縦に積む。
• SP では写真の幅を 85〜100% にし、左右へのずらしを小さくする。
• 見出しは SP で 30〜34px にする。

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 行書くと起動時に読み込まれる。