DESIGN.md — グレージュ×黒の雑誌風ファッションインナーLP（Greige Editorial Fashion Innerwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、シンプル・ミニマル、クール・先進的
• キーワード: エディトリアル・グレージュ・ベロアの黒・細身セリフ・写真主役・余白
• 地の質感: マットな無地の面に柔らかい自然光の写真を重ねる。光沢やグラデーションは控える
• 形: 角丸なしの長方形の写真・細線枠・黒帯ラベル。小さなピル型の細線タグだけ角が丸い
• 温度感: やや暖かいニュートラル（ベージュ〜グレージュ）

Colors

• 地はベージュとグレージュを交互に使い、ポイント説明だけ白地にする
• 強い色は商品の黒だけ。ラベル帯にも同じ黒を使う
• トープは写真の後ろの額縁、比較の矢印、右端の縦帯などの装飾にだけ使う
• 写真上の文字は白か、半透明グレー帯に白文字で置く
• 原色や彩度の高い色は使わない
• 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

• 和文はすべて明朝で、字間を 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

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

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