DESIGN.md — ベージュ×ピンクのコラージュ風ルームウェア LP（Warm Beige Collage Loungewear Collaboration LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、ナチュラル、上品・高級、かわいい
• キーワード: ベージュ地・コラージュ・ドライフラワー・有機的シェイプ・くすみピンク・秋冬ルームウェア
• 地の質感: マットな単色ベージュ。紙のようなフラットな面にドライ植物の切り抜き素材と鉛筆調の線画を重ねる
• 形: 四角い写真の背後に不定形の丸いブロブを置く。写真は角丸なし、ボタンは小さい角丸かピル型
• 温度感: 暖色寄りで、秋らしく落ち着いた温かさ

Colors

• 地色はベージュ 1 色で通し、セクション境界でも色を切り替えない
• 写真の背後に置くブロブはマスタード・ピンクベージュ・トープの 3 色を順に使う
• 主 CTA はくすみピンクからオレンジへの横グラデーション、サブボタンは白地にピンク文字
• 本文は真っ黒にせず、グレーブラウンで柔らかく見せる
• 欧文の小見出しはピンクとオレンジの 2 色で語を塗り分ける
• 濃いキャメルは最下部の斜め区切りの帯だけに使う
• page は文字 #775E45 × 背景 #EAC9AA のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#6A543E、4.55:1）を使う。
• button-primary は文字 #FDFDFC × 背景 #D58E8F のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF5354、4.5:1）を使う。
• button-secondary は文字 #D58E8F × 背景 #FEFEFE のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF5354、4.55:1）を使う。
• badge-circle は文字 #FFF7E7 × 背景 #B6815E のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#976545、4.62:1）を使う。

Typography

• 人物名は写真の下端に半分ほどはみ出させ、白の極太欧文で重ねる
• 本文は中央揃えで短く改行し、字間を広めに取る
• コメントは「」形の細い角括弧を枠の左上と右下に付ける
• 欧文見出しは小さめにして字間を広げ、2 色で塗り分ける
• 和文見出しは太字の中央揃えで 2 行までに収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真を左右に少しずらして縦に並べる
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は幅 70〜75% にして、左右交互に少し寄せる
• 写真の背後にはブロブを、斜め後ろに植物素材を写真からはみ出させて置く
• 商品写真の下に商品名・価格を書き、ボタン 3 つを横に並べる
• 人物ブロックの間には線画イラストを挟んで間をつなぐ
• 告知カードは幅 90% の白地にして枠線で囲む

Elevation & Depth

• 影はほぼ使わない。重なりで奥行きを出す
• キャンペーン枠だけにごく薄い影を付ける
• 商品写真には 4px 程度の淡いベージュの縁取りを付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。メインビジュアルだけ上部をアーチ型に切り抜く
• セクション境界: 基本は区切らない。最下部だけ斜めに切った濃色の帯にする
• ブロブは楕円を崩した不定形にする
• 主 CTA は角丸 2px 程度の長方形
• LINE 誘導やキャンペーン内のボタンはピル型
• SNS アイコンは円形

Components

• グラデーション CTA（button-primary）: くすみピンクからオレンジへの横グラデーションに白文字と ▶ を付ける
• 白地サブボタン（button-secondary）: 白地にピンク文字と ▶ を付けた、商品詳細や在庫確認用のボタン
• 写真上の人物名（name-overlay）: 写真の下端にまたがる白の極太欧文
• 括弧付きコメント枠（comment-box）: 淡いベージュの面の対角に細い角括弧を付けたコメント枠
• キャンペーンバナー（campaign-card）: ピンクからオレンジのグラデ面。背景に大きな薄い欧文を敷き、白のピル型ボタンを置く
• 告知白カード（notice-card）: 白地をローズの細枠で囲む。見出し・本文・グラデーションの帯・下向き矢印の順に並べる
• 円形バッジ（badge-circle）: 写真の角に重ねる茶色の円形バッジ。性別記号などを白で入れる
• 過去号カード（backnumber-card）: 色付きの台紙の上にサムネイルと号数ラベルを載せ、2 枚を横に並べる

Do's and Don'ts

Do - 写真ごとにブロブとドライ植物を重ね、コラージュ感を出す - 写真の配置を左右交互に少しずらして単調さを避ける - 色はベージュ系の同系色でまとめ、強調はピンクのグラデーションだけにする - 人物ブロックの間に線画の動物イラストを置く - テキストは短く中央揃えにして余白を広く取る

Don't - 純黒や原色の鮮やかな色を使わない - 写真に角丸や強い影を付けない - セクションごとに背景色を切り替えない - ゴシックの太字見出しを多用しない - ボタンの形やグラデーションの方向をばらばらにしない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 上部をアーチ型に切った集合写真の周りにドライ植物を置き、下に欧文セリフのロゴ風見出しを重ねる
2. 導入文（企画の概要を伝える）: 中央揃えの 4 行程度の本文
3. 商品紹介（メイン商品と価格を見せて購入へ誘導する）: フラットレイの商品写真に円形バッジを付け、商品名と価格を書き、ボタン 3 つを横に並べる
4. キャンペーン告知（SNS 施策へ誘導する）: グラデーションのバナーに薄い大きな欧文を敷き、白のピル型ボタンを置く
5. メンバー別カット（1 人ずつの着用姿とコメントを見せる）: 写真・名前の重ね文字・括弧付きコメントを 1 組にして縦に繰り返す。間に線画を挟む
6. 着用アイテム CTA（着用商品の一覧へ送る）: 幅 75% のグラデーション CTA
7. 関連アイテム（小物を追加で提案する）: 2 色の欧文見出しの下に、商品写真とボタン 3 つの組を縦に並べる
8. ギャラリー（集合写真で余韻を出す）: ブロブと植物を添えた写真 2 枚を左右にずらして配置する
9. バックナンバー（過去の企画へ回遊させる）: 色付き台紙のカードを 2 枚横に並べる
10. 動画（動画コンテンツへ誘導する）: 16:9 のサムネイルを縦に 2 本並べる
11. プロフィール（出演者を紹介する）: 横長の集合写真の下に、2 色の欧文見出しと小さな本文を置き、一覧 CTA を付ける
12. キャンペーン詳細（応募条件を伝える）: 白い枠付きカードにグラデーションの帯と下向き矢印を入れる
13. フッター予告・SNS（次回の予告とフォローへの誘導）: 斜めに切った濃いキャメルの帯に、白の下線付き見出し・ピル型ボタン・円形の SNS アイコンを置く

Imagery

• 自然光の明るい室内で、ソファやベッドにくつろぐ人物を撮る
• 白・ラベンダー・ネイビーのパジャマを、ベージュの背景に映えるように撮る
• パンパスグラスやユーカリなどのドライ植物を切り抜き、写真の角からはみ出させて置く
• 猫・熊・犬を鉛筆調のモノクロ線画で描き、ゆるい手書き欧文を添える
• 商品は布の上に朝食小物と並べたフラットレイで撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の約 480px 幅の帯に SP の構成をそのまま収め、両側はベージュで埋める
• SP では写真を幅 75% にして、左右交互のずらしを 5% 程度に抑える
• SP では人物名を 36〜40px にして写真からはみ出させる
• ボタン 3 つの横並びは SP でも維持し、文字を 12px に下げる
• ブロブや植物素材は SP で縮小し、画面外へはみ出させる

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