DESIGN.md — パステル×ドット絵の平成レトロコスメ LP（Pastel Pixel Retro Game Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、レトロ、ポップ・元気、やさしい・柔らかい
• キーワード: ドット絵・平成レトロ・携帯ゲーム機・パステル・グミ・ゼリー・吹き出し
• 地の質感: マットなパステル単色地に、ギザギザのピクセル枠と 8bit 風の装飾を重ねる。写真はツヤと透明感のある物撮り。
• 形: 角丸なしの四角とピクセル段差の角。吹き出しは角が階段状のドット枠。
• 温度感: 甘く明るい暖色寄りのパステル。空色セクションで抜け感を出す。

Colors

• 地はピンク・ラベンダー・空色のパステルをセクションごとに切り替える。
• 商品詳細は必ず淡い surface カードに入れ、細いピンクの枠線で囲む。
• 濃ピンクはバッジ・カテゴリ名など小面積だけに使う。
• 写真枠はローズブラウン・赤・紫などの濃色ピクセル線にし、右下にずらした淡い影線を付ける。
• 強調語は黒太字＋淡ピンクの下マーカー。
• ロゴ風英字見出しはピンク・黄・緑・青のレインボー配色＋黒縁。

Typography

• 見出しは中央揃えで 2 行構成。
• 吹き出しは上行を細め、下行を太字＋マーカーで強調。
• 色名は日本語＋英名を横並びにする。
• 色見本の上には色名を縦書きで重ねる。
• 本文は小さめで、文字量を抑える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。色見本カード内は 2 列グリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品ごとに吹き出し付き物撮り→詳細カードを繰り返す。
• カード内は見出し→横長の色見本→2×2 の目元＋質感写真の順。
• 人物写真は左右交互にずらし、少し重ねて縦に並べる。
• ドット装飾は余白の左右端に小さく散らす。

Elevation & Depth

• ぼかし影は使わない。
• 写真枠は右下に 6px ずらした淡色のベタ影でピクセル感を出す。
• 吹き出しは黒ドット線＋右下の灰色の段差影。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形。角を階段状に欠いたピクセル枠で囲む。
• セクション境界: 直線の色切り替え、またはチェッカー柄のドット帯。
• 角丸は使わず、角はピクセルの段差で表現する。
• 吹き出しのしっぽもドットの三角にする。
• ハート・星・グミ・雲はすべて 8bit ドット絵にする。

Components

• ドット吹き出し（pixel-speech-bubble）: 白地に黒のピクセル枠。2 行のキャッチを入れ、下行をマーカーで強調する。
• ハッシュタグ吹き出し（hashtag-bubble）: 淡ピンク地のピクセル吹き出しを 3 つ縦に並べ、#付きの特長を太字で入れる。
• 商品詳細カード（product-detail-card）: 淡い面＋細いピンク枠。見出し・色見本・2×2 の色写真グリッドをまとめる。
• 色見本ストライプ（swatch-strip）: 4 色の塗り見本を横に並べ、色名を縦書きで重ねる。
• 復活バッジ（badge-revival）: 写真右上に置く濃ピンク地・白文字の小さな四角ラベル。
• ピクセル写真枠（pixel-photo-frame）: 濃色の太線と段差の角、右下の淡いずらし影で人物写真を囲む。
• 帯見出し（ribbon-heading）: くすみローズ地の横長パネルに白文字 3 行。端にドットのグミキャラを置く。
• 黒縁付き見出し（outlined-title）: 白文字に黒の太い縁取り。英字はレインボー配色にする。

Do's and Don'ts

Do - ドット絵の装飾（ハート・星・雲・グミ）を余白に散らす。 - 商品ごとに吹き出し・物撮り・詳細カードの同じ型を繰り返す。 - 色見本と目元写真をセットで見せる。 - パステル地を 2〜3 色でセクションごとに切り替える。 - 写真枠は角を段差にしたピクセル枠にする。

Don't - 角丸やぼかし影を使わない。 - 濃い彩度の大きな面で地を塗らない。 - 明朝体や上品すぎる書体を使わない。 - ドット絵以外のリアルなアイコンを混ぜない。 - 長い本文を入れない。

Page Structure

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

1. ファーストビュー（起用モデルとコレクション名で世界観を伝える）: ピンク地に集合写真、黒縁見出しとドット風ロゴを中央に置く
2. ラインナップ紹介（アイテムの全体像を見せる）: 空色地にドットの草原と雲。物撮りに吹き出しで商品名を添える
3. コンセプト帯（配色コンセプトを短く伝える）: くすみローズの帯見出しに 3 行の白文字
4. 商品詳細（繰り返し）（各パレットの色と質感を伝える）: 吹き出し＋物撮り→色見本と 2×2 写真の淡色カード
5. 使い方のヒント（応用の使い方を提案する）: 欧文見出しと写真 3 枚の横並び、番号付きの説明
6. 特長まとめ（推しポイントを 3 つ示す）: 空色地にハッシュタグ吹き出しを縦に 3 つ、下に手持ち写真
7. モデルギャラリー（ファン向けに人物写真を見せる）: ピンク地にピクセル枠の写真を左右交互にずらして並べる
8. 使用アイテム（メイクに使った商品を示す）: ラベンダー地にモデル写真、商品切り抜きと商品名を 3 列で並べる
9. サイズ訴求（携帯しやすさを伝える）: 吹き出し＋写真 2 枚、注釈を添える
10. 使い方（塗り方を説明する）: 白地に欧文見出し、アップ写真と 1 行説明、締めの集合物撮り

Imagery

• 商品はパステルピンクのグラデ地で、ツヤのあるアクリル台に置いて撮る。
• ジェリービーンズやグミベアをカラフルに散らす。
• 目元アップは明るく均一な光で撮り、質感のクローズアップと並べる。
• 人物は単色パステル背景で、商品を手に持つ。
• 装飾は 8bit ドット絵（ハート・星のきらめき・雲・グミ・はしご・草原）にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないので推奨を書く。PC では中央 750px 幅の 1 カラムを保ち、左右はパステル地で埋める。
• 色写真グリッドは PC で 4 列にしてもよい。
• 人物ギャラリーは PC で 2〜3 列の千鳥配置にする。
• ドット装飾は左右の余白に増やして世界観を広げる。

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