DESIGN.md — 白×黒の淡青写真が映えるアイウエアコラボLP（Monochrome Editorial Eyewear Collaboration LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: クール・先進的、シンプル・ミニマル、清潔・爽やか
• キーワード: モノクロ・エディトリアル・傾いた写真・縦書き欧文ラベル・余白多め・淡い水色
• 地の質感: フラットな白地。カードにだけごく薄い影をつけ、写真はスタジオで撮った淡い水色背景のもの。
• 形: 写真は四角のまま 3〜5 度傾ける。ボタンは角丸小さめの長方形。補助ボタンとバッジはピル型。
• 温度感: クールで清潔。差し色は少なく、写真の色が主役。

Colors

• 地はほぼ白で統一し、黒は見出し・主ボタン・キャンペーン帯にだけ使う
• 色みは写真の淡い水色背景で出し、UI 側に有彩色を増やさない
• ノベルティのバッジだけラベンダーのピルにして区別する
• 終了告知などの注意書きは小さな赤文字に限る
• 商品カードは薄いグレーの地にごく薄い影をつける

Typography

• 大見出しは極太の欧文大文字で、その下に和文の小見出しを中央揃えで重ねる
• 写真の横に欧文ラベルを縦に回転させて置き、先頭に小さな黒丸をつける
• 和文は全てゴシック体にし、明朝は使わない
• 本文と注釈は中央揃えの短い行に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC はモデル写真を左右交互の 2 カラムに配置）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの上下は大きく空けて余白を多めにとる
• モデル写真ブロックは左右交互にずらして配置する
• 商品画像の下にバッジ・商品名・2つのボタン・注釈を縦に並べる
• バリエーションは横スクロールのカルーセルにし、ドットで位置を示す
• キャンペーンは左に目次、右に番号付きカードを並べる（SP では縦に積む）

Elevation & Depth

• 商品カード・キャンペーンカードはごく薄いぼかし影（0 2px 8px rgba(0,0,0,.06)）
• ピル型の補助ボタンも白地に薄い影をつける
• 主ボタンには影をつけない

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 淡い背景のポートレートを四角で切り、-4〜4度傾ける
• セクション境界: 直線。キャンペーンの区切りは黒の全幅帯で欧文を流す
• 主ボタンは角丸 3px の長方形にし、右端に矢印を置く
• 試着ボタンやキャンペーンへの誘導ボタンは白いピル型にする
• ノベルティバッジは小さいラベンダーのピル型

Components

• 詳しく見るボタン（button-primary）: 左に白い小丸、右に矢印を置いた黒ボタン
• WEB試着ボタン（button-outline）: 白地に黒の細い枠線と右矢印。主ボタンの横に並べる
• 誘導ピルボタン（pill-link）: 白地に影のついたピル型。末尾に▼を置いて関連情報へ誘導する
• 対象商品バッジ（badge-novelty）: 商品画像の上に置くラベンダーの小さなピル
• 縦書き欧文ラベル（vertical-label）: 写真の右に置く、90度回転させた「カテゴリ — 名前」形式のラベル
• モデル選択タブ（member-tabs）: 黒い角丸ボタンに名前と小さな補足を2段で入れて並べたナビ
• バリエーション商品カード（product-card）: 薄いグレーの地に商品画像と型番を置き、右下に斜め矢印をつけたカード
• 欧文の流れる帯（marquee-band）: 黒い全幅帯に白の極太欧文をハッシュタグ付きで繰り返す
• 番号付きキャンペーンカード（campaign-card）: 黒いヘッダーに見出しと番号を置き、本文の下にグレーのアコーディオン行を並べる

Do's and Don'ts

Do - 見出しは極太欧文と和文サブ見出しを組み合わせる - 写真は傾けて左右交互に配置し、エディトリアル感を出す - 主ボタンは黒、補助ボタンは白の枠線にして2つを並べる - 余白を大きくとり、1ブロックの情報量は少なくする

Don't - 鮮やかな色の面を広く使わない - グラデーションのボタンや強い影を使わない - 明朝体や手書き風の書体を混ぜない - 写真に枠や角丸をつけない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: キービジュアルを3回繰り返した横帯。淡いラベンダー地の上にあり、下に続くモデル写真グリッドへつなげる
2. モデル一覧（出演者の着用ルックを見せる）: 淡い水色背景の正方形写真を4枚と3枚の2段で並べる
3. キャンペーン誘導・ナビ（キャンペーン情報と商品へ誘導する）: ピル型ボタンと赤文字の注記の下に、カテゴリ別に黒いモデル名タブを並べる
4. 商品カテゴリ1（着用商品を紹介する）: 極太欧文見出しの下に、傾けた写真・縦ラベル・商品画像・2つのボタンを左右交互に配置する
5. カスタム訴求（カラーを組み合わせられることを訴求する）: フレームとレンズのアイコンを＋でつないだ線画の図解を置き、続けて写真ブロックを並べる
6. バリエーション（他の商品へ回遊させる）: 横スクロールの商品カードにドットインジケーターと注釈を添える
7. 商品カテゴリ2（別カテゴリの着用商品を紹介する）: 商品カテゴリ1と同じ型を繰り返し、最後に試着へのピル型誘導を置く
8. 動画（CM動画で世界観を補強する）: 中央に縦長の動画を埋め込む
9. キャンペーン（特典と参加条件を案内する）: 黒い流れる帯の下に、左に目次、右に番号付きカードとアコーディオンを置く
10. プロフィール（出演者を紹介する）: 白いカードにラベルと黒い罫線を引き、左に集合写真、右にロゴと紹介文を置く

Imagery

• 人物は淡い水色からラベンダーのスタジオ背景で、正面か斜めのバストアップを撮る
• 表情はクールに抑え、ニット・ジャケットなどきれいめの服を合わせる
• 商品は白地で真正面から撮った切り抜き写真にする
• 図解のアイコンは黒の細い線画にする
• キービジュアルには光の反射やプリズムのような虹色を少し入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCで交互に配置した写真ブロックは、SPでは写真→商品情報の順に縦に積む
• モデル名タブはSPで横スクロールにするか、2列で折り返す
• キャンペーンの左目次は、SPでは上部の横並びタブにする
• 大見出しはSPで32〜36px程度に縮める
• カルーセルはSPで1.5枚分見せて横にスワイプできると示す

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