DESIGN.md — パステルグラデと波形フレームのルームウェアコラボLP（Pastel Gradient Idol Collab Roomwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、シンプル・ミニマル
• キーワード: パステルグラデーション・サテンの光沢感・アーチ型フレーム・波形バッジ・細い欧文セリフ・ハートの線画
• 地の質感: 霧がかったようなマットなグラデーション地。ベタ塗りは少なく、淡い色が上下でゆっくり移り変わる。
• 形: アーチ・カプセル・楕円の写真枠、花形（波形の円）のバッジ、波線の区切り。角ばった要素は写真の四角だけ。
• 温度感: ややクールなパステル。水色とミントが中心で、ピンクがやわらかさを足す。

Colors

• 地はベタ塗りでなく、水色→ラベンダー→ピンク→ミントの縦グラデーションでつなぐ。
• 中盤の写真セクションは淡い水色の単色地で落ち着かせる。
• 大見出しはレモンイエローの細いセリフ体でグラデ地や写真の上に重ねる。
• 人名など小見出しはグレーブラウン、本文はグラデ地上で白にする。
• 濃色・原色は使わず、彩度の高い色は写真の中だけに留める。
• ボタンやバッジはミント・ピンク・ラベンダーのオーロラグラデにする。

Typography

• 見出しはすべて英字の細字。太字の見出しは使わない。
• 日本語は本文のみ、小さめで中央揃え、行間を広く取る。
• 大見出しは写真に重ねたり縦に流したりして、装飾として扱う。
• 人名は写真の端に重ね、2行に分けて組むことも可。
• 文字量は最小限にして、写真が主役のバランスを守る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして互い違いに置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面端に寄せたり裁ち落としたりして、左右交互にずらす。
• セクション間は大きな余白を取り、ゆったりスクロールさせる。
• メッセージ欄は人名＋本文3行のブロックを縦に並べて中央揃え。
• FVは集合写真をカプセル枠で上部に、英字を上下に配置。
• 写真の周りにハートの線画を散らして余白を埋める。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• 写真枠の外周に半透明の白い太いフチを付けて浮かせる。
• 重なりは写真と英字の重ねで奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 24px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 上部が半円のアーチ型、カプセル型、縦長楕円、四角を混在させる。商品は花形（波形の円）マスクで切り抜く。
• セクション境界: 波線（細線）とスカラップ状の波形の面で区切る。写真コラージュは波打つ縁で切り取る。
• 角が尖った四角のボタンやカードは作らない。
• 見出しバッジとボタンは12山程度の花形にする。
• 楕円の写真枠には一回り大きな半透明の白い輪を重ねる。
• 写真の四角は角丸なしで、裁ち落としで見せる。

Components

• 花形の見出しバッジ（badge-scallop-heading）: 白っぽい花形の面に細い英字と小さな三角マークを入れたセクション見出し。
• 花形グラデーションボタン（button-scallop-cta）: ミント・ピンク・ラベンダーのオーロラグラデの花形に白い細字の英字ラベル。一覧への導線。
• アーチ型写真フレーム（photo-arch-frame）: 上辺が半円の縦長写真。個人カットを左右互い違いに重ねて並べる。
• 楕円写真＋白リング（photo-oval-ring）: 縦長楕円の写真に半透明の白い輪を重ね、人名の英字を縁に重ねる。
• 波線区切り（divider-wave-line）: 白い細い波線を横幅いっぱいに引く。
• 花形商品チップ（product-scallop-chip）: パステルグラデの花形に商品の切り抜き写真を載せ、斜めに散らして並べる。
• コメントブロック（message-block）: 細字英字の人名と、白い中央揃え本文3行のセット。
• ハート線画の装飾（heart-outline-deco）: 白い細線のハートを大小散らして写真まわりに添える。

Do's and Don'ts

Do - 地は必ず淡いパステルのグラデーションにし、色をゆっくり移り変わらせる。 - 見出しは細い欧文だけで作り、レモンイエローかグレーで載せる。 - 写真はアーチ・楕円・四角を混ぜ、左右にずらしてリズムを作る。 - ハートの線画と波線で余白にかわいさを足す。 - 余白を広く取り、1画面に置く要素を少なくする。

Don't - 濃い色や原色のベタ面を使わない。 - 太いゴシックの日本語見出しや大きな訴求コピーを置かない。 - ドロップシャドウの強いカードを作らない。 - 価格表や長い説明文で情報を詰め込まない。 - 角丸なしの四角いボタンを使わない。

Page Structure

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

1. ファーストビュー（コラボの世界観と集合ビジュアルを見せる）: 青からピンクへのグラデ地。上下にレモンイエローの細い英字、中央にカプセル枠の集合写真とハート型ロゴを置く。
2. メンバー紹介コラージュ（一人ひとりの個人カットを見せる）: アーチ型の個人写真を左右互い違いに5枚並べ、大きな英字タイトルを縦に流して重ねる。
3. メッセージ（着用者のコメントで親近感を出す）: 花形バッジの見出しと波線区切り。ミントのグラデ地に人名と白い本文を中央揃えで縦に並べる。
4. 集合ビジュアル（シリーズ全体の着こなしを見せる）: 画面幅いっぱいの横長写真を裁ち落としで1枚置く。
5. ユニットカット（別ラインのアイテムを着用で見せる）: 水色の単色地に楕円写真＋白リング、人名を縁に重ね、四角写真をずらして続ける。
6. アイテム一覧チップ（商品ラインナップを軽く見せる）: 花形グラデのチップに商品切り抜きを載せ、2段で横に流すか斜めに散らす。
7. ギャラリー（オフショット感のある複数カットを見せる）: 四角写真を左右にずらして配置し、ハート線画を添える。
8. フォトコラージュ（多数のカットで華やかさを出す）: 写真を斜めに敷き詰め、上下を波打つ形で切り抜く。
9. クロージングビジュアル（コレクションの表紙として締める）: グラデ地に少し傾けた雑誌表紙風の写真。黄色の英字タイトル・年号・人名リストを重ねる。
10. CTA・フッター（商品一覧へ誘導する）: ミントのスカラップ波で白地に切り替え、花形グラデボタンとコピーライトを中央に置く。

Imagery

• 白い室内スタジオで、サテンやニットのパステル服を着たモデルを撮る。
• 光はやわらかく均一に当て、明るい白とびぎみの肌に仕上げる。
• 服の色はピンク・ミント・水色・ラベンダー・シルバーグレーでそろえる。
• 寄り添う・肩を組むなど、仲の良さが伝わるポーズにする。
• 商品は白背景で切り抜き、花形のパステルグラデに載せる。
• 装飾は白い細線のハートと波線だけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもグラデ地と縦スクロールの流れは同じで、要素は中央の狭めの幅に収める。
• PCのFVは英字を写真の左右に横並びで重ねる。
• メンバー紹介はPCで横一列に高さをずらして並べる。
• メッセージはPCで3＋2列のグリッドにする。
• ギャラリー写真は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 行書くと起動時に読み込まれる。