DESIGN.md — マスタード×青×赤のパステル色面ルックブック LP（Pastel Color-Block Character Loungewear Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: 色面ブロック・ピル型切り抜き・曲線テキスト・白縁キャラクター・ルックブック・もこもこ素材
• 地の質感: フラットな単色の面。写真はもこもこニットの柔らかい質感で、スタジオのパステル背景で撮る
• 形: 縦長のピル型、アーチ型、片側だけ丸い変形の楕円。ボタンはピル型の白枠
• 温度感: 暖色（マスタード・赤）と寒色（青）を交互に並べる。全体はやや甘めで温かい

Colors

• 大きな単色面を 3〜5 シーンごとに切り替えて、章立てにする（マスタード→青→淡青→赤）
• 色面の上の文字は白だけにする。地色と同じ系統の色を文字に使わない
• 生成りの地では、文字にパステルの青・マスタード・赤を使う。黒文字は使わない
• 写真の背景は、色面と同じ系統のパステル色でそろえる
• キャラクターは青系かピンク系の単色トーンにし、白い太縁を付ける

Typography

• 書体は丸みのある極太の書体 1 種類だけにして、明朝体は使わない
• 英語コピーは擬音や感情を表す短い一言にして、写真の上か色面の左上・右上に置く
• 章見出しは円弧に沿って曲げ、両端にドットを付ける
• 価格表記は『カテゴリ_アイテム名 価格yen』の形式で白文字にし、写真の下端かピル型の外周に沿わせる
• 日本語のリード文は中央揃えにし、行間を広くとる（2 倍以上）
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か、幅 80% のピル型
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 0px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション間に余白を入れず、色面と写真を隙間なく縦に積む
• ピル型の写真は左右どちらかに寄せ、反対側の空きにキャラクターを重ねる
• 擬音コピーのあとに 300px 前後の色面の余白を取り、そこにキャラクターを 1 体置く
• 全幅写真の下端の中で、価格を左寄せか右寄せで重ねる
• カテゴリボタンは中央揃えで 2〜3 個ずつ折り返して並べる

Elevation & Depth

• 影はまったく使わない。フラットにする
• 奥行きは写真・キャラクター・色面の重なりだけで出す
• キャラクターには白い太縁（4〜6px）を付け、ステッカー風にする

Shapes

• 角丸: 小 999px ／ 中 160px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 縦長ピル型、上だけ丸いアーチ型、片側だけ大きく丸めた変形の楕円、全幅の矩形
• セクション境界: 直線で色を切り替える。カテゴリ部分だけは大きなアーチ型の色面で始める
• 写真の角は、完全な半円になるくらい大きく丸める
• ボタンは白い 2px の枠線と白文字のピル型にする
• 矩形の写真は全幅で使い、角丸を付けない

Components

• FV の 2×2 写真グリッド（hero-grid）: 正方形の写真を 4 枚並べ、中央にロゴの白い矩形パネルを重ねる
• カテゴリのピル型ボタン（category-pill）: マスタードのアーチ型の色面上に、白枠と白文字のピル型ボタンを置く
• 円弧の英字見出し（arch-heading）: 大文字の英字を円弧に沿って並べ、両端に丸いドットを付ける
• ピル型の写真フレーム（pill-photo）: 縦長のピル型に切り抜いた写真。外周に白いアイテム名と価格を沿わせる
• 擬音コピー（onomatopoeia-copy）: 感情を表す短い英語を、色面上に白の極太文字で置く
• 白縁のキャラクター（character-sticker）: 単色トーンのキャラクターに白い太縁を付け、写真の境目にはみ出させて重ねる
• 価格キャプション（price-caption）: 写真の下端に、アイテム名と価格を白文字で複数行重ねる
• 動画の音声切替（sound-toggle）: 動画ブロックの右下に、音符アイコンと ON/OFF の小さな白文字を置く

Do's and Don'ts

Do - 感情ごとに色面の色を決め、シーン単位で切り替える - 写真はピル型やアーチ型に切り抜き、左右に寄せてリズムを付ける - 白縁のキャラクターを写真や色面の境目にはみ出させて置く - 価格は英語表記にして、写真の上に白文字で添える - 写真はパステル背景のスタジオで撮り、色面の色と合わせる

Don't - 黒い文字や濃いグレーの文字を使わない - 影やグラデーション、立体的な装飾を使わない - 角の小さい四角いカードで商品を並べない - 長い日本語の説明文を何度も入れない - 原色の CTA ボタンを何度も差し込まない - 細い明朝体や硬いゴシック体を混ぜない

Page Structure

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

1. ファーストビュー（コラボの世界観と、主なアイテムを一目で伝える）: 2×2 の写真グリッドの中央に、ロゴの白いパネルを重ねる
2. コンセプト導入（4 つの感情をテーマにしたコンセプトを示す）: 赤い色面に白い中央揃えの 4 行。続けて生成り地に淡い青のリード文を置く
3. カテゴリナビ（対象別のアイテムへ誘導する）: マスタードのアーチ型の色面に円弧の見出しとピル型ボタンを置く
4. ムービー（感情の流れを動画で見せる）: 色面の中に、色の違う帯の動画を縦に並べる。擬音コピーと音声切替を添える
5. 感情別ルック（喜）（明るいアイテムを紹介する）: マスタードの地に、全幅写真・擬音コピー・ピル型写真・キャラクターを積む
6. 感情別ルック（怒）（メンズとキッズのアイテムを紹介する）: コバルトブルーの地に、全幅写真とピル型写真を交互に並べる
7. 感情別ルック（哀）（寝具や小物を紹介する）: 淡いブルーグレーの地に、変形の楕円写真と曲線の価格表記を置く
8. 感情別ルック（楽）（ペット用や雑貨を紹介する）: ベリーレッドの地に、ピル型写真とピンクのキャラクターを置く
9. スペシャルコレクション（目玉商品を特別に見せる）: 生成り地に、赤い円弧の見出し・アーチ型写真・短い告知文を置く
10. クレジット（全アイテムへの導線と制作スタッフを示す）: マスタードの円弧見出しの下に、マスタード文字のスタッフ一覧を中央揃えで並べる
11. 締めの商品とフッター（最後に雑貨を見せ、コピーライトを表示する）: 鮮やかな赤の地に、物撮り写真と白い小さなコピーライトを置く

Imagery

• 写真は無地のパステル背景のスタジオで撮る。モデルの表情は笑う・すねる・泣きまねなどを大げさにする
• もこもこのニットや起毛素材の質感が伝わるように、柔らかい自然光で撮る
• 犬や子どもを登場させ、家族の生活感を出す
• キャラクターのイラストは、青系かピンク系の 2〜3 色で描き、白い太縁を付ける
• 小道具（溶けたアイス・本・椅子など）は、ストーリーを感じさせるものをワンポイントで置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、中央に SP 幅（約 48%）のカラムを置き、SP と同じ縦の流れをそのまま見せる
• PC の左右の余白は、セクションに合わせて生成り・淡青・青・赤の帯に切り替える
• PC のカテゴリナビは左の余白に縦に置き、右の余白にピル型の一覧ボタンを置く
• FV は PC では 4 枚を横 1 列に並べ、下中央にロゴのパネルを置く

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