DESIGN.md — 白×紙質グレーの芸能人コラボ眼鏡 LP（Monochrome Paper-Texture Celebrity Eyewear Collab LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: シンプル・ミニマル、上品・高級、クール・先進的
• キーワード: 人物ポートレート主役・紙テクスチャ・モノトーン・幾何学欧文・すりガラスボタン・余白多め
• 地の質感: ライトグレーの面に細かい紙の凹凸テクスチャを敷き、写真の下にはうっすら黒のグラデーションを重ねる
• 形: 直角の写真パネルが基本。カードは細い黒線で囲む小さめの角丸。チップと CTA はピル型
• 温度感: やや寒色寄りのニュートラル。写真の肌色と服の色で温かみを足す

Colors

• 地は白と紙テクスチャのグレーを交互に置き、セクションを切り替える
• 有彩色は写真に任せ、UI はほぼ白・黒・グレーにする
• 紫の強調色は日付などの要点 1 か所とイラストだけに使う
• 主 CTA は黒地に白文字のベタ塗り
• 写真の上の UI は白文字と半透明の白（すりガラス）で作る
• 動画セクションは暗い写真の背景に、グレーの枠を重ねる
• placeholder-media は文字 #FFFFFF × 背景 #B4B4B6 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#767679、4.53:1）を使う。

Typography

• 欧文は幾何学的なサンセリフで、大文字の太字を使う
• 和文の見出しは字間を 0.1em 以上取り、中央揃えにする
• 見出しの中で人名や商品名だけを大きくし、助詞は小さくする
• 日付は紫の太字にし、下線を引く
• 本文は短く 2〜3 行に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅で縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 人物写真は画面幅いっぱいに裁ち落としで置く
• キャンペーン枠は左右に 24px 程度の余白を取って中央に置く
• セクションの間は余白を大きく取り、密度を上げない
• テキストは中央揃えが基本
• 写真の下端にキャプションと絵文字チップ、右下にボタンを置く

Elevation & Depth

• 影はほぼ使わずフラットにする
• すりガラスボタンは背景をぼかし、半透明の白と白い細線で浮かせる
• プロフィール写真は少し回転させ、紙に貼ったように見せる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は四角に裁ち落とし。目元の横帯をずらすスライス演出を入れる。プロフィールは傾けた四角
• セクション境界: 直線で地の色を切り替えるだけ
• CTA と絵文字チップはピル型
• すりガラスボタンとカード枠は角丸 12px
• 仮置き枠は直角のグレー矩形

Components

• 黒ベタ CTA（button-primary）: ほぼ全幅で中央に置く黒いピルボタン。白い太字を載せる
• すりガラスのもっと見るボタン（button-glass）: 写真右下に置く半透明の角丸ボタン。白線で縁取り、右上に＋を付ける
• 絵文字チップ（emoji-chip）: 白線で縁取った半透明のピルに絵文字を 1 つずつ入れ、3 つ横に並べる
• 英字番号ラベル（label-campaign）: 小さい英字の下に短い黒線を引くキャンペーン番号
• 線囲みのキャンペーンカード（card-outline）: 白地に黒の 1px 枠と角丸。見出し・画像・日付を縦に並べる
• 仮置きメディア枠（placeholder-media）: グレー矩形の中央に白文字で公開予定を表示する
• 縦書き英字ラベル（vertical-label）: 動画枠の右に縦に置く白い英字
• 流れるロゴ帯（marquee-footer）: 黒い帯の中で、小さい英字と大きいロゴを横に流し続ける

Do's and Don'ts

Do - 人物写真を最大限大きく使い、UI は控えめにする - 白とグレーの紙テクスチャを交互に置いて区切る - 強調色は 1 色だけにし、要点に絞る - 写真上のボタンはすりガラス風で軽く見せる - 欧文はセクション名とロゴに使い、洗練された印象を作る

Don't - 原色やグラデーションのボタンは使わない - 濃い影や立体的な装飾を付けない - テキストを詰め込んだ訴求型にしない - 丸ゴシックや手書き風の和文を使わない - 写真に装飾フレームを付けない

Page Structure

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

1. ファーストビュー（コラボと人物を一目で伝える）: 淡いグレーの背景で撮ったポートレートを全幅に置き、下部に白い欧文ロゴと筆記体を重ねる
2. スペシャルムービー（動画で世界観を見せる）: 暗い植物の写真を背景に、縦長の動画枠を置く。右に縦書きのラベルとメニューボタンを添える
3. 商品ルック一覧（フレーム 3 種を着用写真で紹介する）: 英字の小見出しの下に全幅写真を 3 枚積む。それぞれに絵文字チップ・キャプション・すりガラスボタンを付ける
4. キャンペーン1（特典と開始日を伝え、詳細へ誘導する）: 紙テクスチャのグレー地に番号ラベル、大小を付けた見出し、封筒とカードのイラスト、紫の日付、黒い CTA を順に置く
5. キャンペーン2（次の企画を予告する）: 白地の線囲みカードに見出し・仮置き画像・予定日を中央揃えで並べる
6. プロフィール（人物を紹介する）: 紙テクスチャのパネルに大きな欧文の名前、傾けた写真、短い経歴を置く
7. フッター帯（ブランドの余韻を残す）: 黒い帯でロゴと英字を横に流し続ける

Imagery

• 人物は淡いグレーや生活感のある室内で撮り、柔らかい光の正面寄りバストアップにする
• 商品（眼鏡）が顔の中心に来る構図にする
• 写真の下部は黒のグラデーションでなじませ、白文字を載せる
• 目元に横帯のずれを入れ、グリッチ風の遊びを足す
• イラストは紫の太い線と淡い紫の面で描くフラットな線画
• 紙のような細かい凹凸テクスチャを背景に敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真ルックを 2 カラムのグリッドにし、キャンペーン1 をグリッドの 1 マスに入れる
• PC のキャンペーン2 カードは横長にし、左に文字、右に画像を置く
• PC のプロフィールは名前パネル・写真・経歴パネルを横 3 つに並べる
• PC のファーストビューは横長で、人物を中央に置き、ロゴを横 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 行書くと起動時に読み込まれる。