DESIGN.md — 青リンゴ緑×パステルのルームウェアコラボ LP（Pastel Color-Block Collaboration Roomwear Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、ナチュラル
• キーワード: パステル・ルックブック・カラーブロック・手描き線・キャラクター・おうち時間
• 地の質感: フラットな単色の面にモコモコ素材の写真を重ねる。影はつけない。
• 形: 四角い写真をずらして重ね、楕円写真や傾けたカード、波線を挟んで動きを出す
• 温度感: やや暖かく柔らかい。緑を軸に、季節感のある爽やかなパステル

Colors

• 地色はアイテムごとに切り替える。緑・紺・黄・淡ピンクの 4 色。
• 地色は写真の背景の壁の色に合わせる。
• 文字はグレーや黒を使わず、緑系か、地色に合うパステルの色で書く。
• 紺地の上の文字はミント白にする。
• CTA は生成りの地に緑の枠線と緑の文字。塗りつぶしの強い色は使わない。
• 冒頭とフッターはごく淡い黄緑か生成りにして、全体をつなぐ。
• page は文字 #8BB050 × 背景 #FFFCFA のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#637D39、4.54:1）を使う。
• button-outline-pill は文字 #78AB47 × 背景 #FEFCFB のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#587E34、4.61:1）を使う。
• credit-list は文字 #91B344 × 背景 #F0FDE3 のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#637A2E、4.56:1）を使う。

Typography

• 見出しは英字だけで作る。日本語はイントロにだけ使う。
• アイテム名は 1 文字ずつ高さを変え、写真の上で弾むように並べる。
• 本文は中央揃えにし、短い段落で行間を広くとる。
• 太字の黒文字は使わない。文字色は緑かパステルにする。
• 袋文字の見出しは写真の上に重ねて置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして互い違いに置く
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 全幅写真の次に、地色の上へ幅 75〜85% の写真を左右交互に置く。
• 写真の空いた側にイラストや英語コメントを置き、余白を埋める。
• 写真どうしを少し重ねたり、地色の外へはみ出させたりしてリズムを出す。
• アイテムが変わるたびに、地色の帯を全幅で切り替える。
• フッターは中央揃えで、ロゴ・写真・ボタン・クレジットを縦に並べる。

Elevation & Depth

• 影は基本的に使わない。
• 奥行きは写真の重なりと、背面に敷いた色板のずれで出す。
• グッズ写真は少し傾け、後ろに濃い緑の板をずらして敷く。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 基本は角丸なしの四角。コンセプト写真だけ縦長の楕円に切り抜き、少し傾けたカードも混ぜる
• セクション境界: 装飾なしの直線で、地色を全幅で切り替える
• 写真は角を立てた四角を基本にする。
• 楕円の切り抜きは、ページ全体で 1 か所のアクセントにとどめる。
• ボタンは細い枠線のピル型にする。
• 手描きの波線や吹き出し線を、写真の周りに添える。

Components

• 枠線ピルボタン（button-outline-pill）: 生成りの地に緑の細枠と緑の英字。幅はほぼ全幅
• 散らし英字見出し（scatter-heading）: アイテム名を 1 文字ずつ上下にずらし、写真の上に重ねる
• 手描き線付きコメント（doodle-caption）: 短い英語コメントに、手描きの雲形線や波線を添える
• キャラクターのステッカー（mascot-sticker）: 水彩風のクマのイラストを写真の角に重ねる。3 体並べて飾りにもする
• 楕円写真（oval-photo）: 縦長の楕円に切り抜いた集合写真。上にイラストを乗せる
• 傾けたグッズカード（tilted-card）: 写真を少し傾け、背面に濃い緑の板をずらして敷く。上に袋文字の見出しを重ねる
• ロゴの組み合わせ（logo-lockup）: 2 ブランドの英字を 3 段で中央に積む
• 出演者クレジット（credit-list）: 名前と SNS アイコンを横に並べ、それを縦に積む。すべて緑

Do's and Don'ts

Do - 地色は写真の背景の色に合わせ、アイテムごとに切り替える。 - 写真は左右交互にずらし、空いた余白にイラストや手描き線を置く。 - 英字の見出しやコメントは短くし、遊び心を出す。 - 文字は緑系かパステルの色だけで組む。 - CTA はページ末尾に、控えめな枠線ボタンで 1 つだけ置く。

Don't - 黒文字や原色の赤など、強いセール調の色を使わない。 - 写真に影や太い枠をつけない。 - 日本語の長い説明文を何段も入れない。 - すべての写真を同じ幅で等間隔に並べない。 - CTA ボタンを塗りつぶしの濃い色にしない。

Page Structure

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

1. ファーストビュー（世界観と出演者を一目で見せる）: 全幅の集合写真。文字は入れない
2. コンセプト紹介（コラボの趣旨を伝える）: 生成りの地に、ロゴの組み合わせと中央揃えの短い段落
3. 動画（動きで印象を強める）: 写真をスライスしたような帯状の動画を、枠の中に置く
4. アイテム紹介 1（主力ウェアを見せる）: 全幅写真＋散らし英字。続けて淡い緑の地にずらし写真とイラストを置く
5. コンセプト英文（オリジナルのアートワークを紹介する）: 淡い黄緑の地に英文リード、クマ 3 体、楕円写真
6. アイテム紹介 2（カーディガンを見せる）: 水色の写真に散らし英字。紺地にずらし写真とミント白のコメント
7. アイテム紹介 3（カットソーを見せる）: 黄色い壁の写真に水色の散らし英字。淡ピンクの地に波線付きの英文と写真
8. グッズ（雑貨の展開を伝える）: 英文リードと袋文字の見出し。傾けたカードと背面の色板
9. クロージング CTA（一覧ページへ送る）: ロゴの組み合わせ、集合写真、著作権表記、枠線ピルボタン
10. クレジット（出演者の SNS へ誘導する）: 袋文字の小見出しに続けて、名前と SNS アイコンのリスト

Imagery

• パステルの単色の壁とラグを背景にした、室内スタジオ写真にする。
• 家具や小物（ソファ・本・ミニ冷蔵庫・果物）は、衣装と同じ系統の色でそろえる。
• モデルは寝そべる・伸びをするなど、くつろいだ自然なポーズにする。
• キャラクターは輪郭の柔らかい水彩風で描き、ステッカーのように写真の端へ重ねる。
• 手描き風の細い波線・雲形・ループ線を、白か水色で添える。
• グッズは緑のラグの上に並べ、真上から撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 330px）の縦長カラムを固定し、左右は淡い黄緑の地にする。
• PC の左の余白にはロゴとキャラクター、右の余白には一覧ボタンを固定して表示する。
• PC のカラム内の構成は SP と同じにする。
• 広げる場合でも、カラム幅は 400px 前後に抑える。

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