DESIGN.md — ココア茶×ピンク文字のレトロ部屋着ルックブックLP（Cocoa Brown Retro Room Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、レトロ、やさしい・柔らかい、上品・高級
• キーワード: ココアブラウン・テディベア・レトロな室内・円形切り抜き・波形の境界・ルックブック
• 地の質感: ほぼ単色の茶の面。中央に向けてわずかに明るい放射グラデーションや柔らかい影を重ね、紙ではなくフィルム写真のような温度感
• 形: 正円・楕円の写真フレーム、ゆるい波形のセクション境界、片側だけ大きく角丸の写真カード、ピル型ボタン
• 温度感: 暖かい。赤み寄りの茶とピンクで夜のティータイムのような甘さ

Colors

• 地はほぼ全面を濃いココアブラウンにし、白背景は使わない
• 茶は3段階の明度で切り替え、波形境界ごとに一段明るく／暗くする
• 人名・セリフ見出し・価格はくすみピンクに統一
• 筆記体ロゴと小さな英字コピーは金茶で、ピンクと役割を分ける
• 唯一のボタンは生成り面にピンク文字で、茶の地から浮かせる
• 写真は暖色・赤茶寄りに色調を揃え、寒色を混ぜない
• title-serif-pink は文字 #E67A7C × 背景 #673301 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• circle-photo は文字 #BD904C × 背景 #753D01 のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• wave-photo-band は文字 #E67A7C × 背景 #673301 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• price-list は文字 #E67A7C × 背景 #7B430B のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• button-primary は文字 #CA7E7E × 背景 #FEECE1 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#B44A4A、4.55:1）を使う。

Typography

• 見出しはほぼ欧文のみ。日本語はリード文だけに限定
• 英字は大文字中心で字間を広く取る
• 人名は写真の境界線上に左寄せまたは右寄せで重ねる
• リード文・価格リストは中央揃え
• 小さな英字コピーは円形写真の縁に沿って弧状に配置してよい
• 太字の強調や下線は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真は全幅または左右どちらかに寄せて非対称配置
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 90px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真は全幅〜90%幅で縦に連続させ、テキストは最小限
• 円形写真は左右に寄せて互い違いに置き、一部をはみ出させる
• 人物ごとに写真＋名前のブロックを繰り返す
• 写真間の茶の余白にクマのイラストをランダムに散らす
• 価格リストは人名ごとにまとめ、約60pxずつ間隔を取る

Elevation & Depth

• 円形写真の下に大きくぼかした暗い茶の影を落とし、浮いて見せる
• 背景の円形グラデーションで写真の後ろをほのかに明るくする
• カードやボタンに硬いドロップシャドウは使わない

Shapes

• 角丸: 小 8px ／ 中 24px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 正円・横長楕円・上下が波形の全幅・片側角だけ大きく丸めた矩形を混在させる
• セクション境界: ゆるいS字の波形カーブで茶の明度を切り替える
• 直線の水平区切りは避け、カーブで繋ぐ
• 楕円写真には細いピンクの縁線を付ける
• 矩形写真は画面端に接して片側だけ余白を残す
• ボタンは完全なピル型

Components

• 楕円ヒーロー写真（hero-oval-photo）: 全員集合の写真を横長楕円で切り抜き、細いピンク縁を付ける
• ピンクのセリフタイトル（title-serif-pink）: 2行の高コントラストセリフ欧文＋小さな筆記体と大文字のサブ行
• 円形写真カード（circle-photo）: 正円に切り抜いた人物写真。縁に沿って金茶の英字を弧状に添える
• 波形全幅写真（wave-photo-band）: 上下を波形で切り抜いた全幅写真。境界に人名を重ねる
• 人名ラベル（name-label）: 大文字セリフのピンク文字を波形境界上に左右どちらかへ寄せて置く
• クマ柄散らし（bear-scatter）: 小さなテディベアと筆記体ロゴを淡い茶でランダムに背景へ散布
• 着用アイテム価格リスト（price-list）: 人名見出しの下にアイテム名と価格を中央揃えで並べる
• 全商品を見るボタン（button-primary）: 生成りのピル型にピンクのコンデンスセリフ文字

Do's and Don'ts

Do - 地は濃い茶で統一し、明度差のある茶を波形でつなぐ - 写真は円・楕円・波形に切り抜き、配置を左右に揺らす - 英字コピーは大文字で字間を広く、短い一文にする - クマなどのモチーフイラストを余白に小さく散らす - CTAはページ末尾に1つだけ置き、生成り色で目立たせる

Don't - 白や寒色の背景セクションを挟まない - 日本語の太いゴシック見出しを多用しない - 原色の赤・オレンジのCTAや価格強調を使わない - 写真を四角いグリッドに機械的に並べない - 装飾イラストを大きくしすぎて写真と競わせない

Page Structure

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

1. ファーストビュー（コレクションの世界観とモデルを一目で伝える）: 茶地の中央に全員集合の楕円写真、その下にピンクのセリフタイトル
2. コンセプト文（コレクションの雰囲気を短い詩的な文で説明）: 中央揃えのピンクベージュ日本語を短い段落で4つ
3. ムービー（動きで世界観を補強）: 全幅の動画枠、右下に小さな音声ONの表示
4. ブランドロゴとタグライン（ブランド印象の挿入）: 金茶の筆記体ロゴと字間広めの英字3行を中央に
5. モデル別ルック（各モデルの着用ルックを順に見せる）: 角丸矩形・円・波形写真を交互に、人名ラベルと英字セリフ、クマ散らしを添えて繰り返す
6. 締めのビジュアル（物語の余韻で終える）: 弧状のピンク英字の下に全員の楕円写真
7. 着用アイテム一覧（モデル別に着用商品と価格を提示）: 人名見出し＋アイテム名・価格をピンク文字で中央揃え
8. CTA（商品一覧ページへ誘導）: 生成りのピル型ボタンを1つ中央に
9. クレジット（制作スタッフ表記）: 小さな大文字ピンク文字を中央揃えで列挙、背景にクマ散らし

Imagery

• レトロな木の家具・ブラウン管・ラジオがある室内でのスタジオ撮影
• 赤茶のカーペット、茶のソファなど暖色の小物で色調を統一
• モデルはもこもこニットやクマ柄パジャマ、ぬいぐるみやカップケーキを持つ
• フィルム風の柔らかく少し暗めの色調、彩度控えめ
• クマのイラストは小さな水彩・色鉛筆風で淡い茶
• 遊び心のある姿勢（覗き込む・寝転ぶ・隠れる）でストーリー性を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に450px前後のSP幅カラムを置き、左右を茶の地やクマ柄で埋める
• PCで広げる場合は円形写真を2つ横並びにし、非対称の配置を維持
• 全幅波形写真はPCでも横幅いっぱいにし、高さは抑える
• タイトルは最大72px程度まで拡大し、字間比率は維持

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