DESIGN.md — パステル市松×Y2Kステッカーのカラコン LP（Pastel Y2K Checker Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、レトロ
• キーワード: パステル・市松模様・Y2Kステッカー・コラージュ・ガーリー・雑誌風
• 地の質感: フラットなパステル面。市松柄とステッカー風の小物で手触り感を足す
• 形: 黒い細線の角丸フレーム、ピル型スペックバッジ、斜めに切った見出し帯、ハートの形
• 温度感: やや暖かい。ラベンダーとピーチが中心で甘め

Colors

• 商品ごとにパステルの地色を 1 色決め、セクション全体の地色・市松の片側・スペックバッジの補色をその色系でそろえる
• 市松模様は地色＋白か、地色の濃淡で作る。ファーストビューだけ黒白にして目を引く
• 文字と線は黒 1 色。グラデーションや光沢は使わない
• スペックバッジは地色と別のパステル（ピンク・クリーム・ミント）にして、色の対比でかわいく見せる
• 共通情報のセクションはラベンダーに戻して全体をまとめる

Typography

• 英字見出しは太い幾何学サンセリフの大文字にし、その下に小さなカナのルビを添える
• 本文は字間を広めにした丸い手書き風の書体で、中央揃えの短い行にする
• 見出しは中央揃え。行あたり 20 字程度で改行する
• 数字・スペックは欧文書体にそろえる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップは 2 列×3 段のグリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品セクションは「フレーム写真→見出し帯→レンズ画像とスペック→目元アップ→説明 1 行→写真コラージュ」の順で繰り返す
• 目元アップの写真は画面幅いっぱいに置く
• コラージュは写真を左右にずらして重ね、余白にステッカーを置く
• スペックは左に色ラベル、中央に円形レンズ、右にピルを縦に 3 つ並べる

Elevation & Depth

• 影は使わずフラットにする
• 立体感は黒の細い輪郭線と、写真の重なりで出す
• 切り抜き写真の周りに 8px ほどの別のパステル色の縁を付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: メイン写真は黒い 1.5px 線の角丸フレーム。目元は全幅の長方形。モデルは切り抜きにパステルの縁を付ける
• セクション境界: 直線で地色を切り替え、各セクションの上部に市松模様の帯を敷く
• 見出し帯は両端を斜めにカットし、左にハートを重ねる
• 円形レンズの画像には白い縁を付ける
• ステッカー（虹・ハート惑星・星・雲・ドット絵ハート）を黒い細線のイラストとして散らす

Components

• 角丸フレームのメイン写真（photo-frame）: 市松の上に置く黒線の角丸写真枠。上部中央に小さなピルのタブを付け、周りにステッカーを散らす
• ハート付きの見出し帯（title-ribbon）: フレームの下端に重ねる両端斜めカットの帯。商品名は欧文の太字、下にカナを入れ、左にハートを置く
• スペックのピル（spec-pill）: 直径などの数値を入れる黒線のピル。縦に 3 つ並べる
• 色ラベルと引き出し線（color-legend）: 小さな四角の色チップと英字の色名。細い線でレンズ画像につなぐ
• ラインナップのカード（lineup-card）: 黒線の角丸の大枠の中に、目元写真のカードを 2 列で並べる。左下に円形レンズとカナの名前を重ねる
• 特長のアイコン行（feature-row）: 線画の手書き風アイコンを左に置き、右に小見出しと 2 行の説明を入れる
• カラーチャート表（color-chart）: 色系統を 4 列にし、縦軸に「くっきり〜ふんわり」の矢印を付ける。列ごとに淡い地色を敷き、レンズを配置する
• 度数チップ（power-chip）: 白い小さな角丸チップを 8 列で並べ、度数を太い数字で表示する

Do's and Don'ts

Do - 商品ごとにパステルの地色を変え、構成は毎回同じにする - 市松の帯とステッカーで各セクションの冒頭を華やかにする - 線と文字は黒の細い線でそろえる - 目元の全幅アップでレンズの発色を見せる - 説明は 1〜2 行の短い文で中央に置く

Don't - 彩度の高い原色や濃いグラデーションを使わない - ドロップシャドウや光沢でリッチに見せない - 明朝体や細い書体で高級に寄せない - 1 セクションに地色を何色も混ぜない - ステッカーで顔や瞳を隠さない

Page Structure

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

1. ファーストビュー（シリーズの世界観を伝える）: 黒白の市松の上に角丸フレームの顔写真を置き、縦書きのコピー、太い欧文ロゴ、吹き出しバッジを重ねる。下にレンズを 6 つ横に並べ、スペックを 1 行で入れる
2. ラインナップ（全カラーを一覧で見せる）: ピル見出しの付いた黒線の角丸枠の中に、目元写真を 2×3 で並べる
3. 商品紹介（色ごとに繰り返す）（各カラーの発色と雰囲気を見せる）: 色ごとの地色＋市松帯に、フレーム写真、見出し帯、レンズとスペック、目元アップ、1 行説明、ずらしコラージュを順に置く
4. 特長（機能のメリットを伝える）: ラベンダー地に、手書き風の線画アイコンと説明の行を 3 つ並べる
5. カラーチャート（色系統と発色の強さを比べられるようにする）: 4 列の表で、縦軸の矢印に沿ってレンズを配置する
6. 度数一覧（選べる度数を示す）: 白いチップをグリッドで並べ、注釈を添える
7. コンセプト（ブランドの思いを伝える）: 英字の大見出しの下に、字間の広い中央揃えの短い文を 7 行置く
8. 注意書きフッター（法令上の表示）: 淡いピンクの帯に小さな文字で中央揃えにする

Imagery

• 写真はメイクを強調した若い女性モデルのアップ。地色に合う衣装と背景で、やわらかい正面光で撮る
• 目元の極端なクローズアップで瞳の色を見せる
• モデルを切り抜き、パステルの太い縁を付けてコラージュする
• ステッカーは黒い細線で描いたパステルのフラットイラスト（虹と雲、ハートの惑星、8 方向の星、きらめき、波線、ドット絵ハート）
• レンズは真上から撮った円形の画像に白い縁を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の構成をそのまま中央 480〜600px の列に置き、左右に市松模様か地色を敷くのがおすすめ
• ラインナップは PC では 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 行書くと起動時に読み込まれる。