DESIGN.md — 方眼紙×メンバーカラーのアパレル雑貨 LP（Pastel Lab Notebook Staff Collab Goods LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、やさしい・柔らかい、シンプル・ミニマル、親しみ・手作り感
• キーワード: 方眼紙・ラボ・実験・メンバーカラー・パステル・スタッフプロデュース・モノトーンボタン
• 地の質感: 白地に薄いグレーの方眼グリッド。カラー区間は無地のパステル面
• 形: 円形のプロフィール写真、細枠の四角い見出しボックス、点線の区切り線、角丸なしの黒ボタン
• 温度感: やや暖かいニュートラル。淡いパステルで柔らかく見せる

Colors

• メインの地は白っぽい方眼紙柄にし、イントロ・メンバー紹介・告知の区間で使う
• メンバーごとに淡いテーマ色の無地を地にして区間を切り替える
• メンバー名や『〇〇 produce items』の名前部分は、そのメンバーのテーマ色の濃いめトーンで書く
• ボタンはすべて黒地に白文字で統一し、色を足さない
• 水色はロゴと告知の強調にだけ使う
• 説明カードは白地にして、パステル地から浮かせる

Typography

• 本文は小さめで中央揃えにし、短い行で改行する
• 英字見出しは細めのサンセリフで書き、四角い枠に入れる
• 強調は太さではなく色で付ける（メンバー色・水色）
• 商品名と価格は1行に並べ、価格の前に全角スペース程度を空ける
• 全体を中央揃えで組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品写真は横スクロールのスライダー
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• メンバーごとに『プロフィール → produce items 見出し → 商品の繰り返し』で組む
• 商品 1 点は『写真スライダー → ドット → 白カード → 商品名と価格 → BUY』の順に縦に積む
• 商品と商品の間は 100px 前後と大きく空ける
• メンバー紹介の円形写真はジグザグに配置する
• 見出しの上下は点線で挟む

Elevation & Depth

• 影はほぼ使わず、フラットに見せる
• 浮かせたい要素は白地と細い枠線で区別する
• 円形写真には細いグレーの縁を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: プロフィールは正円。商品写真は角丸なしの縦長の長方形で、スライダーの右端を見切らせる
• セクション境界: 区間の境目は直線で地色を切り替える。見出しの両脇に短い横線を引く
• ボタンは角丸ほぼなしの黒い長方形にする
• 名札は円形写真の左下に重ねる小さな四角ラベルにし、メンバー色で塗る
• 見出しボックスは細い黒枠の長方形にする

Components

• BUY ボタン（button-buy）: 商品の下に置く横長の黒ボタン。幅は 180px 程度
• SNS リンクボタン（button-sns）: アイコン付きの小さな黒ボタンを 2 つ横に並べる
• 英字見出しボックス（section-title-box）: 白地に細い黒枠の長方形。英字見出しの右に実験器具アイコンを添える
• 円形プロフィール＋名札（member-avatar）: 正円の写真の左下に、メンバー色の名札を重ねる
• メンバーカラー見出し（member-color-head）: 点線で上下を挟み、member color のラベル、鉛筆アイコン、色名を横に並べる
• 商品説明カード（item-desc-card）: 白い長方形に、2 行のキャッチを中央揃えで入れる
• スライダードット（slider-dots）: 写真の下に小さな丸を 3 つ並べる。現在位置は黒、他はグレー
• イントロ枠（intro-frame）: 白地に細枠の文章ボックス。四隅に実験器具アイコンをはみ出させて置く

Do's and Don'ts

Do - 方眼紙柄と実験器具の線画アイコンで『ラボ』の世界観を出す - メンバーごとにテーマ色を決め、地・名札・見出し文字で一貫して使う - 商品ブロックは同じ型で繰り返す - 余白を大きく取り、1 画面に 1 商品が収まるくらいのゆとりを持たせる - ボタンは黒一色で統一する

Don't - 彩度の高い原色を広い面に使わない - ボタンをカラフルなピル型やグラデーションにしない - 影や立体的な装飾を入れない - 本文を大きく太くしすぎない - メンバー色を別のメンバーの区間に混ぜない

Page Structure

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

1. ファーストビュー（企画の顔を見せる）: 方眼紙の地に手書き風のロゴを置き、その下にメンバー集合写真を横長で載せる
2. 企画紹介（企画の背景を伝える）: 細枠の白ボックスに短い文章を中央揃えで入れ、周りにアイコンを散らす
3. メンバー紹介（プロデューサーの人柄を見せる）: 英字見出しボックスの下に、名札付きの円形写真 3 枚をジグザグに置く
4. メンバー別商品（1人目）（1人目がプロデュースした商品を売る）: ラベンダー地にプロフィールとカラー見出しを置き、続けて商品ブロックを繰り返す
5. メンバー別商品（2人目）（2人目がプロデュースした商品を売る）: ダスティピンク地で同じ型を繰り返す
6. メンバー別商品（3人目）（3人目がプロデュースした商品を売る）: クリーム地で同じ型を繰り返し、見出し文字はイエローにする
7. 販売情報（発売日と販売場所を伝える）: 方眼紙の地に英字見出しボックスを置き、ラベルは水色の小見出し、詳細は中央揃えの本文で書く
8. 次回予告（次の展開への期待を高める）: 水色の太字 2 行の下に、黒い服のシルエットとカラフルな『？』を散らす
9. クロージング・フッター（ブランドの印象を残す）: 切り抜いた集合写真とロゴを置き、最後に黒帯のフッターを敷く

Imagery

• グレージュ系の無地の背景で、笑顔のスタッフを自然光で撮る
• 商品は人が着用・手持ちしている写真で見せ、寄りと引きを混ぜる
• 締めには背景を切り抜いた集合写真を使う
• 実験器具（フラスコ・顕微鏡・クリップボード）は、黒線＋水色の差し色のフラットな線画にする
• 予告には黒一色の服のシルエットと、パステル色の『？』を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央のカラムを 480px 前後に絞り、スマホと同じ縦の流れで組む
• PC では方眼紙やパステルの地を画面幅いっぱいまで広げる
• SP では商品写真を 1.3 枚ほど見せるスライダーにする
• SP ではメンバー紹介の円形写真を 160px 程度にし、ジグザグ配置を保つ
• 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 行書くと起動時に読み込まれる。