DESIGN.md — グレージュと生成りの大人インナー LP（Muted Beige Editorial Lingerie Fashion LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、ナチュラル、シンプル・ミニマル、やさしい・柔らかい
• キーワード: エディトリアル・グレージュ・明朝×スクリプト・写真の重ね配置・余白多め
• 地の質感: マットで粉っぽいベージュ壁の自然光写真。紙のような生成り地に、うっすら影のグラデーションをかける
• 形: 角のない四角い写真が中心。ピル型ラベルと細い引き出し線をアクセントにする
• 温度感: 暖かめのニュートラル。彩度を落としたベージュ・ブラウン・グレー

Colors

• 地は白と生成りを交互に使い、比較・解説のセクションだけ生成りにする
• 彩度の高い色は使わず、ベージュ・ブラウン・グレーの写真を主役にする
• くすみローズは AFTER ラベルと点線の丸だけに使う
• 見出しの強調は太字にせず、淡いベージュのマーカー帯を敷いて表す
• グレージュの帯は欧文ロゴ風の区切りにだけ使う
• 文字は純黒を避け、濃いブラウングレーにする
• label-pill は文字 #F3EEEA × 背景 #867A81 のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#73696F、4.58:1）を使う。
• brand-band は文字 #F3EEEA × 背景 #7E7570 のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#736B66、4.53:1）を使う。
• color-swatch-grid は文字 #837F80 × 背景 #FFFFFF のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#797576、4.55:1）を使う。

Typography

• 和文はすべて明朝で、太字は使わない
• 字間は広め（0.08〜0.15em）にして誌面のように見せる
• キャッチは写真の横に縦書きで置く
• 欧文の大文字セリフで色名・セクション名を書く
• スクリプト体は大きく、数字のセリフと組み合わせる
• 本文は短く 2〜3 行の中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に寄せて互い違いに配置する
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 大きな写真を左右どちらかに寄せ、反対側に縦書きコピーか小さな写真を重ねる
• セクション間は白い余白と、中央の細い縦線でつなぐ
• BEFORE/AFTER は 2 枚を横に並べて比べる
• カラー展開は 3 列のグリッドで、商品だけを切り抜いて見せる
• コーデ写真は大きさを変え、ずらしてコラージュする

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• コーデのコラージュは淡いグレーのグラデーション地に、細い白枠で写真を浮かせる
• テキストボックスは半透明の暗い面に細い白線の枠をつける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。縦長の写真を画面端まで寄せて裁ち落とす
• セクション境界: 直線で切り替え、中央に細い縦線を入れる
• 写真は常に四角いままにする
• ラベルだけをピル型にする
• 注目させたい箇所は点線の丸で囲む
• 引き出し線は細い直線と小さな丸い点で作る

Components

• タイプ名ピルラベル（label-pill）: くすみモーブの塗りに白い欧文セリフを置く小さなピル
• 引き出し線付きアウトラインラベル（label-outline-callout）: 細線のピル枠と、そこから伸びる直線の引き出し線
• BEFORE ラベル（badge-before）: 写真の左上に重ねるチャコールの角形ラベル
• AFTER ラベル（badge-after）: 写真の左上に重ねるくすみローズの角形ラベル
• マーカー見出し（heading-marker）: 小見出しの下に明朝の大見出しを置き、下半分にベージュの帯を敷く
• 欧文ロゴ帯（brand-band）: グレージュの長方形に、大文字欧文とスクリプトを中央揃えで組む
• Point 番号見出し（point-heading）: 大きなスクリプトに、セリフ体の 2 桁番号を並べる
• カラー展開グリッド（color-swatch-grid）: 切り抜いた商品を 3 列に並べ、下に大文字セリフの色名を置く
• 写真上キャプション枠（caption-box-overlay）: 半透明の暗い面に白い細枠をつけ、2 行の明朝を入れる

Do's and Don'ts

Do - 写真を主役にして、テキストは最小限にする - 和文は明朝、欧文はセリフ体とスクリプト体の組み合わせに統一する - 余白は大きく取り、写真を互い違いに配置する - 比較は BEFORE/AFTER を左右 2 枚で並べて見せる - 色名は大きな欧文で書き、小さな和文のタイプ名を添える

Don't - 鮮やかな赤や黄色のセール風の装飾を使わない - 太いゴシック体や影付きの文字を使わない - 写真を丸く切り抜いたり、ぼかし枠をつけたりしない - ボタンやバッジを大きくして目立たせない - 文字を詰めすぎず、1 ブロックを 3 行以内にする

Page Structure

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

1. ファーストビュー（世界観と商品の新しさを一目で伝える）: 全面のモデル写真に白い明朝の大コピーと欧文ロゴを重ね、袖タイプ・色見本・サイズ帯と背面の小写真を添える
2. コンセプト（商品が提案する価値観を示す）: 白地に明朝の 2 行コピーを置き、縦長の写真の横に縦書きのコピーを並べる
3. 機能の導入（内蔵カップの特長をつなぐ）: 短い文と、端に寄せたディテール写真を置き、中央の縦線で次のセクションへつなぐ
4. ビフォーアフター（シルエットの変化を見せる）: 生成り地にマーカー見出しを置き、2 枚の比較写真と 2 行の説明を並べる
5. タイプ紹介（2 種類の袖デザインを紹介する）: 大写真と小写真を互い違いに重ね、引き出し線付きのピルでタイプ名を示す
6. カラーバリエーション（色とタイプの選択肢を示す）: 大文字セリフの見出しの下に、タイプ別のピルと 3 列の商品切り抜きを並べる
7. デザイン訴求（おしゃれ着として見せる）: 全幅の写真に縦書きコピーと写真上のキャプション枠を重ね、欧文ロゴ帯で区切る
8. 着こなし提案（1 枚でコーデが完成することを伝える）: 明朝の 2 行コピーをずらして置き、大写真と 2 枚組の写真を並べる
9. 悩み解消の比較（段差や胸元の見え方の悩みを解決する）: マーカー見出しと BEFORE/AFTER の組を 2 セット並べ、気になる箇所を点線の丸で示す
10. スタイリング集（着回しの幅を見せる）: スクリプトのタイトルの下に、グレーのグラデーション地で白枠の写真をコラージュし、欧文の小さな注釈を添える
11. 機能ポイント（構造の工夫を説明する）: Point 番号見出し、細枠の接写写真、左揃えの明朝の本文を続ける
12. カラー別ビジュアル（色ごとの印象を見せて締めくくる）: 全幅のモデル写真に、大文字セリフの色名と小さな和文のタイプ名を重ねる

Imagery

• ベージュの壁と自然光で、スタジオ風の柔らかい人物写真を撮る
• モデルは無表情に近い目線で、肩から腰までの構図を基本にする
• 着こなしはグレー・ブラウン・ストライプ・チェックなど、くすんだ色の秋冬服にする
• 比較写真は白背景のトルソーで、黒いトップスを横から撮る
• ディテールは指先で内側をめくる接写で見せる
• コーデ写真は白い壁と床の全身カットにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の画像を中央の幅 480〜600px のカラムに収める構成を推奨する
• PC では左右の余白を生成りにして、誌面のような印象を保つ
• コラージュや互い違いの配置は、PC でも横に広げすぎない
• カラー展開は PC では 6 列にしてもよい

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