DESIGN.md — パステル虹色グラデのアパレル特集 LP（Pastel Gradient Editorial Fashion Collab LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、シンプル・ミニマル
• キーワード: パステルグラデーション・エディトリアル・写真の重なり・欧文セリフ・淡いトーン・季節感
• 地の質感: 水彩やタイダイのようにぼかしたグラデーション地。写真は彩度を抑えた淡いトーン
• 形: 角のない長方形の写真と、色の板を少しずらして重ねる。丸く切り抜いた写真を 1 点だけ入れる
• 温度感: やや暖かめのパステル（ピンク・ピーチ）に、ミントの寒色を少し混ぜる

Colors

• 地は単色にしない。ミント→ラベンダー→ピンク→ピーチと縦に変わるグラデーションにし、セクションごとに繰り返す
• 文字はすべてくすみブルー系の 1 色。黒は使わない
• 強い色や彩度の高い色は使わない。色は写真の中の柄だけにとどめる
• 写真の裏にローズやアプリコットの細長い色板を置き、地の色に奥行きを出す
• ファーストビューは水彩のようにぼかした虹色の地に、白いロゴだけを載せる
• CTA は白い面に、ピーチ→ピンクのグラデーション文字を載せる
• concept-text は文字 #578299 × 背景 #F5F3F8 のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4E7489、4.56:1）を使う。
• display-heading は文字 #90A9B4 × 背景 #FFECE5 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#54707D、4.61:1）を使う。
• price-list は文字 #578299 × 背景 #FFEEF4 のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4E7489、4.56:1）を使う。
• button-primary は文字 #E2AFBC × 背景 #FEFEFE のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#BF506C、4.55:1）を使う。
• credit は文字 #578299 × 背景 #E6F5F6 のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4E7489、4.56:1）を使う。

Typography

• 見出しと説明文は英語のセリフ体が中心。和文は冒頭のコンセプト文だけに使う
• 和文のコンセプト文は中央揃えにし、一文ずつ短く改行する
• 英文の説明は、写真の配置に合わせて左揃えか右揃えにする
• イタリックは英文コンセプトとルック番号に限って使う
• 文字サイズは小さめに抑え、写真を主役にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで、写真を左右にずらして重ねる自由配置
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 90px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真は画面端まで出したり、片側に寄せたりと幅を変えて並べ、リズムをつける
• 写真同士を少し重ね、裏に細長い色板を入れる
• テキストブロックの前後には、グラデーション地だけの大きな余白をとる
• 価格一覧は、ルック番号のラベル列と商品・価格の列からなる 2 列の表組みにする

Elevation & Depth

• 影はほぼ使わない
• CTA ボタンだけにピンクがかった柔らかい影（0 4px 12px 程度）をつける
• 奥行きは、写真・色板・半透明の写真を重ねる順番でつくる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形が基本。1 点だけ正円に切り抜き、別の写真に重ねる
• セクション境界: 直線で区切り、グラデーション地の色の切り替わりで境界を示す
• 写真には角丸をつけない
• 丸く切り抜く写真はページで 1 回だけ
• ボタンは白いピル型にする
• 同じ写真を薄く半透明にして横に添え、残像のように見せる

Components

• 水彩グラデのファーストビュー（hero-watercolor）: 上部に縦長の写真を置き、下半分は虹色をぼかした地に白いロゴを中央に載せる
• 中央揃えのコンセプト文（concept-text）: グラデーション地に、くすみブルーの小さな文字を短く改行して中央に組む
• 大きな英字セリフの見出し（display-heading）: 2 行の大きなセリフ体をグレイッシュブルーで中央に置き、セクションの区切りにする
• 重ね写真のコラージュ（photo-collage）: 大きさの違う長方形の写真を左右交互にずらして重ね、裏にパステルの色板を挟む
• 正円の切り抜き写真（circle-photo）: 長方形の写真の角に重ねて置く、丸く切り抜いた写真
• 英文キャプション（caption-en）: 写真の横や下に置く 5〜6 行の太めのセリフ体の英文
• ルック別の価格一覧（price-list）: 左にイタリックのルック番号、右に商品名と価格を並べた 3 段の表
• 白いピル型ボタン（button-primary）: 画面幅の 7 割ほどの白いピル型。グラデーション文字と淡い影をつける
• スタッフのクレジット（credit）: 小さな見出しの下に、制作スタッフ名を小さな文字で中央に組む

Do's and Don'ts

Do - 地は常にパステルのグラデーションにし、セクションごとに色の流れを繰り返す - 写真は淡く明るいトーンに揃え、グレージュの背景で撮る - 写真をずらして重ね、色板を挟んで雑誌のように構成する - 文字はくすみブルー 1 色にまとめる - 文字のない余白を広くとる

Don't - 黒文字や彩度の高い原色は使わない - 写真に角丸や太い枠線をつけない - 訴求のバッジや吹き出し、細かい情報の詰め込みは避ける - 写真を均等なグリッドにきっちり並べない - セクション見出しを和文の太いゴシックにしない

Page Structure

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

1. ファーストビュー（コラボの世界観とブランドロゴを示す）: 縦長のモデル写真と水彩グラデーションの地を組み合わせ、白いロゴを中央に置く
2. コンセプト（和文）（コレクションの背景とテーマを伝える）: グラデーション地に、短く改行した文を 2 段落、中央揃えで組む
3. コンセプト見出し・英文（テーマを印象的に打ち出す）: 大きな英字セリフの見出しの下に、イタリックの英文を中央に組む
4. ルック 1 のコラージュ（1 つ目のコーディネートを見せる）: 全身・部分・寄りの写真を重ねて配置し、正円の写真を 1 点添える
5. 素材の説明（ニットの質感やモチーフを説明する）: 右揃えの英文キャプションの後に、横長の写真を全幅で置く
6. ルック 2 のコラージュ（2 つ目のコーディネートを見せる）: 縦長の写真 3 枚を階段状にずらし、裏に色板を置く。下に左揃えの英文を添える
7. ポートレート（アクセサリーと表情で余韻をつくる）: 横顔の寄り写真の横に、同じ写真を半透明にして残像のように重ねる
8. ルック 3（3 つ目のコーディネートを見せる）: 横長の写真 2 枚を細い隙間をあけて縦に並べる
9. 価格一覧（アイテムと価格を示す）: 英字見出しの下に、ルック番号と商品・価格を 2 列の表で並べる
10. CTA（商品一覧ページへ誘導する）: 白いピル型ボタンを中央に置き、柔らかい影をつける
11. スタッフのクレジット（制作者を明記する）: ミントの地に、小さな文字で中央揃えに並べる

Imagery

• グレージュの無地背景のスタジオで、柔らかな逆光気味の光で撮った女性モデル
• 露出は明るめで、コントラストと彩度を下げたフィルム調の淡い色にする
• 花びらや紙吹雪が舞う演出で季節感を出す
• 全身・上半身・顔の寄り・服の柄のアップを混ぜ、テンポをつける
• 水彩やタイダイを思わせるパステルのぼかしを、背景の装飾に使う
• 同じ写真をピンクがかった半透明にして重ね、夢のような雰囲気にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では約 580px 幅の中央カラムに SP と同じレイアウトを置き、左右は薄いピンクの単色で埋める
• PC では一部の横長の写真と正円の写真だけがカラムの外にはみ出し、変化をつける
• 文字サイズと構成は SP とほぼ同じまま、拡大して表示する
• 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 行書くと起動時に読み込まれる。