DESIGN.md — ミント×ベージュの淡色インナー季節特集 LP（Pastel Mint Seasonal Lingerie Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、ナチュラル
• キーワード: 淡色グラデーション・雑誌風コラージュ・欧文セリフ×筆記体・季節のシーン提案・余白多め
• 地の質感: 霞がかったボケ・光の柔らかいグラデーション地。面は半透明の白で軽く浮かせる
• 形: 片側だけ大きく角丸にした写真、細い白枠のフレーム、吊り下げタグ型の章ナビ、波形の境界
• 温度感: やや涼しい（ミント・水色）から章の最後で暖かいベージュへ移る

Colors

• 章ごとに地色を切替：ミント→水色→ベージュ。
• 見出し・ボタン色は章の地色に合わせて緑・ティール・茶に変える。
• 地は必ず淡いグラデーションで、純白や濃色ベタの面は作らない。
• 商品カードは地より少し明るい半透明の白で浮かせる。
• 本文はグレー系にして、黒の強いコントラストは避ける。
• 最後のまとめはグレイッシュな白地にティール見出し。
• button-check は文字 #F9FAF7 × 背景 #53806C のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#507B68、4.58:1）を使う。
• scene-tag-nav は文字 #547867 × 背景 #EEF4EB のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#537666、4.52:1）を使う。

Typography

• 見出しは細身の欧文セリフに筆記体を斜めに重ねる。
• 章番号は大きな筆記体を薄い白で背景に置く。
• 日本語は細いゴシックで中央揃えにし、行間は広めにする。
• 日本語の見出しは使わず、英字で見出しを立てる。
• 写真の脇に英字を縦書きで配置する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードだけ写真と情報の 2 分割
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 章は 章アイコン→見出し→リード→全幅写真→コラージュ→商品カード の順に組む。
• 全幅写真は片側の上角だけを大きく丸める。
• コラージュは写真 2〜3 枚を左右にずらし、部分的に重ねる。
• 背面に色帯ブロックを敷いて奥行きを出す。
• リード文は中央に寄せ、短い改行で区切る。

Elevation & Depth

• 影はほぼ使わず、半透明の白い面と白枠で浮かせる。
• Tips 写真は太めの白枠で囲み、ポラロイド風に見せる。
• 装飾は奥から 背景グラデ→色帯→写真→英字 の順に重ねる。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 60px。ボタンはピル型。
• 写真の切り抜き: 全幅写真とコラージュ写真は、右上など片側の角だけを大きく丸める。商品写真は角丸なしの矩形。比較写真はアーチ型
• セクション境界: ゆるい波形カーブで地色を切り替え、境界に章アイコンを白抜きで置く
• 章ナビは紐で吊るした多角形のタグ型にする。
• カードは角丸なしの矩形にする。
• ボタンは完全なピル型にする。

Components

• CHECK ボタン（button-check）: 商品カード右下に置く小さなピル型ボタン。章色で塗り、細い英字を載せる
• 吊り下げタグ型の章ナビ（scene-tag-nav）: 細い紐に半透明のタグを 3 枚吊るす。中身は番号・短線・英字の章名・日本語タグ
• 章見出し（chapter-heading）: 背景に大きな番号の筆記体、その上に筆記体サブ語と大きな欧文セリフを重ねる
• 商品カード（product-card）: 左に縦長の商品写真、右に商品名・品番・価格・サイズ・カラーチップ・ボタンを並べる
• カラーチップ（color-chips）: 細長い長方形の色見本を 1〜2 段で横に並べる
• Tips フレーム（tips-frame）: 白枠付きの写真に筆記体の Tips を斜めに重ね、下に一行キャプションを付ける
• 章アイコン（chapter-icon）: 地色の境界に置く白抜きの線アイコン（ピン・ハート・カップなど）
• 帯見出し（band-heading）: くすみ色の帯の上に、両脇に線を添えた白文字の見出しを置く

Do's and Don'ts

Do - 章ごとに地色と見出し色をセットで変える。 - 見出しは欧文セリフに筆記体を重ねて作る。 - 写真は片側の角を大きく丸め、ずらして重ねる。 - 余白を広く取り、リード文は中央揃えにする。 - 商品カードには価格・サイズ・カラーチップを規則的に並べる。

Don't - 原色や高彩度の CTA 色は使わない。 - 影の強いカードや太い枠線は付けない。 - 日本語の太字の大見出しは置かない。 - 背景を真っ白なベタ一色にしない。 - テキストを詰め込みすぎない。

Page Structure

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

1. ファーストビュー（季節感とブランドの世界観を伝える）: モデル写真を全面に敷き、大きな欧文セリフ＋筆記体のコピーを重ねる。右端に縦書きの短い日本語コピーを置く
2. コンセプト文（特集の狙いを語る）: ミントのグラデ地に中央揃えのリード文を 3 段落。下に細い縦線を引いて次へ誘導する
3. シーン目次（3 つの利用シーンを提示する）: 欧文見出しの下に、吊り下げタグ 3 枚を章ナビとして並べる
4. シーン1 章（旅行向け商品を提案する）: ミント地に、章アイコン・章見出し・リード・角丸の全幅写真・コラージュ・Tips を順に置く
5. シーン1 商品一覧（購入へ導く）: 商品カードを縦に 3 枚並べ、グリーンの CHECK ボタンを付ける
6. シーン2 章（運動向け商品を提案する）: 水色地のコラージュに縦書きの筆記体を添え、ティールの商品カードを置く
7. バリエーション比較（選べるタイプを見せる）: 帯見出しの下に、アーチ型の写真を 2 枚並べてキャプションを付ける
8. シーン3 章（日常向け商品を提案する）: ベージュ地に茶色の見出しを置き、コラージュ・Tips・ブラウンボタンの商品カードを続ける
9. 締めCTA（全商品一覧へ誘導する）: 白っぽい地に 2 行の欧文メッセージ。商品を色違いで並べた写真の下に、ピル型ボタンを中央に置く

Imagery

• 自然光の明るい室内で撮る。白いソファやカーテンを背景にした柔らかいモデル写真。
• 全体を低コントラスト・淡いトーンにレタッチする。
• 背景にはボケた光の玉や霞を入れたグラデーションを使う。
• ディテール写真（手で丸める・ポケットなど）を Tips として添える。
• 色違いの商品を吊るして並べたフラットな物撮りを使う。
• 線画アイコンは白抜きのシンプルな一筆線で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 375〜480px 幅の SP 版を置き、左右は淡いグラデ背景で埋めることを推奨する。
• PC でコンテンツを広げる場合は、商品カードを横に 2〜3 列並べる。
• PC ではコラージュの重なりを横方向に広げる。
• 見出しの欧文は PC で 1.5 倍程度に拡大する。

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