DESIGN.md — マゼンタ×白のレトロカセット風リップ LP（Retro Cassette Pink Lip Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、レトロ
• キーワード: カセット・音楽プレーヤー UI・ポラロイド・破れ紙コラージュ・手書き文字・マゼンタ見出し・透け感リップ
• 地の質感: ツヤのある写真と、紙・ポラロイドのアナログ感を重ねる。破れ紙の縁でセクションをつなぐ
• 形: 角丸の UI カード、白枠のポラロイド、細いピンク罫の写真枠、ハートのバッジ
• 温度感: 暖かめ。ピンクと藤色のパステルに、濃いマゼンタと黒で締める

Colors

• 地は白が基本。人物ビジュアルや商品紹介の帯だけピンク・藤色・グレーのパステルを敷く
• 小見出しとブランド名だけマゼンタ。大見出しの英字は黒で太く
• カラー見本は商品色そのものをベタ面にして白文字を載せる
• 写真枠とハッシュタグの線はピンク系の細罫にそろえる
• UI 部品はクリーム地＋黒線＋藤色ヘッダーにする

Typography

• 英字の大見出しは極太セリフにして、雑誌っぽさを出す
• 日本語の見出しは太字ゴシックで中央ぞろえ
• 本文は小さめにし、短い行で中央ぞろえ
• ポラロイドや商品の注記は手書き体にし、少し斜めに置く
• ビジュアルのタイトルは白の大きなセリフ英字を写真に重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅、カラー比較は写真と色帯の 2 分割
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは英字見出し→マゼンタの小見出し→写真→説明文の順で縦に積む
• 写真には左右 40px ほどの余白を取り、細いピンク罫で囲む
• 人物ビジュアルは全幅にし、ポラロイドをはみ出させて重ねる
• コーデ紹介は写真・商品切り抜き・矢印・手書きメモを自由に配置するコラージュにする
• セクション間には白地を広めに取る

Elevation & Depth

• ポラロイドには薄いドロップシャドウを付けて浮かせる
• プレーヤーカードは影なしで、黒の細線で囲む
• 破れ紙の縁に軽い影を付けて紙の重なりを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は四角い全幅か、ピンク細罫の四角枠。ポラロイドは白い太枠で少し傾ける。商品は切り抜きにする
• セクション境界: 直線の切り替えが基本。コラージュ部分は破れ紙のギザギザ縁でつなぐ
• ハッシュタグはピル型の細罫タグにする
• NEW や復活などのバッジはハート形のピンク地に白文字
• プレーヤー UI は角丸 12〜16px のカードにする

Components

• 音楽プレーヤー風カード（player-card）: 藤色のヘッダーとクリーム地の角丸カード。曲名・シークバー・再生ボタンで商品を紹介する
• FV のシークバー帯（player-bar）: FV の写真下部に重ねる白い半透明の角丸バー。曲名と再生アイコンを入れる
• ポラロイド写真（polaroid）: 白い太枠で写真を囲み、下の余白に手書きメモを入れる。傾けて重ねる
• ポイント見出し（point-heading）: 極太セリフの英字に番号を添え、その下にマゼンタの日本語小見出しを置く
• ハッシュタグタグ（hashtag-chip）: ピンク細罫のピル型。# 付きの特長を 4 つ横に並べる
• カラー比較行（color-swatch-row）: 左にリップ写真、右に商品色のベタ帯を置き、英字のカラー名とパーソナルカラーを載せる
• ハートバッジ（heart-badge）: NEW や復活を示すハート形のピンクバッジ
• Tip 注記（tip-label）: マゼンタの太いセリフで Tip と書き、縦線で区切って補足文を添える

Do's and Don'ts

Do - 音楽・カセット・ポラロイドのモチーフで世界観を統一する - マゼンタは見出しやバッジに絞って使う - 人物写真は大きく使い、手書き文字を添える - 質感は唇のアップや塗布面の写真で見せる - カラーごとに背景色を変えたコラージュでスタイリングを見せる

Don't - ネオンや原色の青・緑をメインに使わない - 角ばった硬い表組みや情報過多のテキスト塊を置かない - ポラロイドや手書きを整然と並べすぎない - 本文を左ぞろえの長文にしない - 重い黒背景のセクションを入れない

Page Structure

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

1. ファーストビュー（起用人物と世界観を一目で伝える）: 全幅の人物写真の下部に、プレーヤー風のシークバーとマゼンタの英字ロゴを重ねる
2. コレクション紹介（シリーズのコンセプトを伝える）: パステルのグラデーション地にプレーヤー UI カードを置き、中に商品の集合写真と再生ボタンを入れる
3. 人物ビジュアル（着用イメージで憧れを喚起する）: 全幅の写真にポラロイドを重ね、手書きのメモを添える。これを 3 回繰り返す
4. 商品紹介（商品の概要と特長タグを示す）: ピンクの地に太字見出しと 2 行のリード文、ハッシュタグのピル、商品の並び写真と筆記体ロゴを置く
5. 特長ポイント（質感・色・保湿を 4 つの観点で説明する）: 番号付きの英字見出し、マゼンタの小見出し、ピンク枠の写真、中央ぞろえの短文を縦に繰り返す
6. カラー比較（色展開と似合う肌タイプを示す）: リップ写真と色帯の 2 分割行を 3 段重ね、ハートのバッジを付ける
7. スタイリング提案（色ごとのメイク例と使用アイテムを見せる）: 色ごとに背景を変え、破れ紙・ポラロイド・切り抜き商品・矢印・手書き注記でコラージュする
8. 使い方（操作方法とコツを伝える）: 英字見出しに下線、2 枚並べた手元写真、唇のアップ、Tip 注記の順に置く
9. 商品一覧（購入前に全色を確認させる）: ピンク枠の中に、淡いピンク地で全色の商品を斜めに並べた写真を置く

Imagery

• 人物は明るい自然光で撮り、ピンク系ニットなどパステルの服を着せる。ウインクなど親しみのある表情にする
• 唇やテクスチャーはツヤを強調した接写にする
• 小物にはカセットテープ・ラジカセ・レコードを使い、パステルの物撮りにする
• 白枠のポラロイドに手書きの英語やハングルのメモと笑顔マークを添える
• 破れ紙の縁、手描きの矢印、波線などのアナログ装飾を入れる
• 商品は切り抜いてコラージュに配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として書く。中央に最大 750px ほどのカラムを置き、左右は白かパステル地にする
• PC ではカラー比較の写真と色帯を大きくし、2 分割はそのまま保つ
• ポイント写真は PC では 2 カラムで並べてもよい
• コラージュの重なりは比率を保ったまま拡大する

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