DESIGN.md — グレージュと淡ブルーグレーの上品な下着 LP（Muted Greige Editorial Lingerie LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル
• キーワード: くすみカラー・雑誌風・明朝の縦書き・細い欧文見出し・自然光・余白
• 地の質感: マットで粉っぽい質感。グラデーションや光沢は使わず、淡い単色の面と写真の柔らかい光だけで見せる。
• 形: 四角い写真と白い縦長の帯が基本。丸は機能アイコンとお客様の顔写真の切り抜きだけに使う。V 字のシェブロンで区切る箇所が 1 つある。
• 温度感: やや寒色寄りのニュートラル。肌色とグレージュで温かみを足す。

Colors

• 地は白と淡いグレーを交互に使い、写真の前後で切り替えて区切る。
• 訴求の山場だけブルーグレーの帯を敷く。シェブロンで区切ってもよい。
• 強調には太字のオリーブかグレージュを使う。赤や原色は使わない。
• ラベル帯はグレージュの面に白文字で置く。
• 数字やデータはくすみパステルで色分けしてよい。ただし彩度は低く抑える。
• 文字は純黒にしない。茶みのあるチャコールを使う。

Typography

• 情緒的なコピーは明朝体で書く。縦書きを積極的に使う。
• セクションの大見出しは細い欧文の大文字にして、下に小さい和文の副題を添える。
• 本文はゴシック体で中央揃えにする。1 行を短く区切る。
• 強調は太字と色で表す。下線や派手な装飾は避ける。
• 字間は広めにとって、余白で上品さを出す。
• 円形に沿った欧文の小さな飾り文字を装飾として使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品のディテールは 3 列、カラー展開も 3 列にする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅か左右どちらかに寄せて、左右非対称に配置する。
• 写真同士を少し重ね、白い帯のテキストを写真にかぶせる。
• セクションの間には広い余白をとる。
• お客様の声は丸い写真とテキストを左右交互に並べる。
• 特長は写真、ラベル帯、2〜3 行の本文の順で縦に積む。

Elevation & Depth

• 影は基本的に使わない。
• 白い帯や写真は重ねるだけで立体感を出す。
• 丸アイコンは影を付けず白い塗りだけにする。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は基本を四角に切る。お客様の声の写真と機能アイコンは正円にする。
• セクション境界: 面の色の直線的な切り替えを基本にする。訴求の帯の上辺だけ V 字のシェブロンにする。
• 角丸は使わずシャープに見せる。
• 円は特別な要素だけに使う。
• 縦長の白い帯でコピーを囲む。
• 細い縦線を区切りに使う。

Components

• 縦書きコピー帯（vertical-copy-panel）: 写真にかぶせる白い縦長の帯。明朝体の縦書きを入れる。
• 評価バッジ（rating-badge）: 月桂樹で挟んだ大きな数字と小さな説明・注釈。
• 丸い機能アイコン（feature-circle）: ブルーグレー地に白い正円を 3 つ並べ、明朝の 2 行テキストを入れる。
• ラベル帯（label-band）: 写真の下端に重ねるグレージュの帯。白文字で特長名を入れる。
• お客様の声（voice-item）: 丸い写真、欧文の Voice 番号、強調色付きの感想文を左右交互に並べる。
• 欧文見出し（section-title-en）: 細い大文字の欧文に小さい和文の副題を添える。
• サイズ表（size-table）: 白い罫で区切ったくすみパステルのセルに、明朝の数字を白で入れる。
• 着け方ステップ（step-illust）: 線画イラストと欧文の番号、短い説明文を横に並べる。
• マーカー見出し（marker-heading）: ブルーグレーの帯の上に明朝の見出しを置き、下に白い太線を敷く。

Do's and Don'ts

Do - 写真は自然光で、低いコントラストで撮る。 - コピーは明朝体で、縦書きを混ぜる。 - 余白は広くとって、ゆったり見せる。 - 色はくすみカラーだけでまとめる。 - 欧文の見出しで雑誌らしさを出す。

Don't - 赤や黄色など彩度の高い色は使わない。 - 太いゴシックで煽るコピーにしない。 - 影・グラデーション・光沢は使わない。 - 角丸のポップなボタンは置かない。 - 情報を詰め込みすぎない。

Page Structure

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

1. ファーストビュー（世界観と商品の特徴を一目で伝える。）: 全幅のモデル写真に、明朝の大コピー、縦書きの帯、円形の欧文飾りを重ねる。
2. 実績と導入（信頼を示し、商品の概要を伝える。）: 月桂樹の評価バッジ、2 行の実績文、商品の寄り写真、明朝の見出しと本文を順に置く。
3. 共感（朝の悩みに寄り添う。）: 重ねた写真に縦書きの詩的なコピーを入れた白い帯をかぶせる。
4. 効果の訴求（主な効果を印象づける。）: シェブロン付きのブルーグレー帯にマーカー見出しを置き、写真と丸アイコン 3 つを続ける。
5. 着用シーン（コーディネートでの使いやすさを見せる。）: 淡いグレー地に縦書き帯付きの写真、ディテール写真 3 列、ずらして重ねたコーデ写真を置く。
6. カラー展開（色の選択肢を見せる。）: 欧文見出しの下に、白背景の切り抜き商品写真を 3 列並べ、欧文のカラー名を添える。
7. ブランド（世界観をまとめて伝える。）: 評価バッジ、字間を広くとった明朝コピー、静物写真、欧文ロゴ、細い縦線を置く。
8. お客様の声（社会的証明を示す。）: 丸い写真と感想を左右交互に 3 件並べ、強調部分はオリーブの太字にする。
9. 機能詳細（仕組みを説明する。）: 「×」で 2 語を対比した見出しを置き、写真、ラベル帯、本文の組を 3 つ続ける。
10. サイズ表（サイズ選びを助ける。）: 欧文見出しの下にくすみパステルの表と注釈を置く。
11. 着け方（正しい着用方法を伝える。）: 線画イラストと番号付きの説明を 4 ステップ並べる。
12. カラー別ビジュアル（色ごとの魅力を伝える。）: 大きなモデル写真の左下に欧文のカラー名を白で重ねる。
13. 注意事項（購入前の不安を解消する。）: ブルーグレー地に欧文の大見出し、商品写真、中央揃えの説明文を置く。

Imagery

• 白壁や窓辺で自然光を受けた、やや明るく低コントラストのモデル写真。
• ベージュやグレーの服、ブークレ素材のソファなど、くすんだ小物を合わせる。
• 指で押す、裏返すなど、素材感を見せる寄りのディテール写真。
• 白背景の切り抜き商品写真を 3 色並べる。
• 着け方は淡い紫の水彩を差した細い線画イラストで描く。
• 円弧に沿う欧文の飾り文字や、筆で掠れたテクスチャを薄く添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px 程度の SP 幅カラムを置き、左右を淡いグレーで埋めるのが自然。
• 全幅で見せる場合は、写真とテキストを左右 2 カラムにする。
• 欧文見出しは 48〜64px に拡大する。
• 丸アイコンとカラー展開は 3 列のまま余白を広げる。
• 縦書きの帯は PC でも維持して、雑誌風の印象を保つ。

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