DESIGN.md — 水色×ボルドーの量産系カラコン LP（Pastel Sky Blue Idol Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、上品・高級、力強い・インパクト、情報量多め・訴求型
• キーワード: くすみ水色・発光する白文字・縦書き明朝・スクリプト体のカラー名・瞳のどアップ・ハート
• 地の質感: 写真主体のグラフィック。白い文字にグロー、地にはドット・豹柄風のうっすらした地紋とキラキラ光を重ねる
• 形: 角丸 16px 前後の写真枠、ピル型のスペック帯、円形のレンズ画像、ハート型バッジ
• 温度感: クールな水色を基調に、カラー別にボルドーやローズの温かい色を差す

Colors

• 基本の地は水色 2 トーンにする。カラーごとのセクションだけ、そのレンズ色に合わせた地色（ボルドー・青紫・ローズ）に切り替える
• 見出しは白に水色やピンクのグローをかけて、写真の上でも読めるようにする
• スペック値はダークのピル帯に白文字で載せる。帯の色はセクション色に合わせて濃くしてもよい
• 装用比較の写真は、主役側の枠だけセクション色の濃い色で縁取って強調する
• 黒は純黒を避け、温かみのある #383032 系を使う
• lineup-card は文字 #EFF0F1 × 背景 #7AB0CC のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#387493、4.5:1）を使う。

Typography

• 大見出しは細めの明朝を縦書きにし、ひらがなを小さく漢字を大きくして字の大きさに緩急をつける
• カラー名は装飾的な欧文ロゴにし、右上にカタカナの読みを小さく添える
• 見出しは字間を 0.1em 以上あける
• 数値スペックは欧文サンセリフで字間を広くとる
• 見出しの白文字には外側グローを付ける
• 見出しの末尾に線画のハートを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップ・比較は 2 列、特長は 3 列、スペックは 4 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• カラーごとのセクションは同じ構成を繰り返す：ロゴ→人物写真＋縦書きコピー→瞳アップ＋レンズ円→スペック帯→説明文→装用比較の 2 枚
• 瞳アップ写真は人物写真の下端に重ね、レンズの円画像を右下にはみ出させる
• スペック帯は左に寄せたピル型で、レンズの円の下にもぐり込ませる
• 説明文は中央揃えで 2 行程度に収める
• 度数表は 8 列のダークのチップを並べたグリッドにする

Elevation & Depth

• 見出しの白文字に柔らかい外側グロー
• レンズの円画像に白縁と淡いドロップシャドウ
• カードには影を付けず、平面の角丸だけにする
• キラキラ光の装飾を写真の上に散らす

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物写真は大きな角丸の縦長枠、瞳のアップは角丸の横長、レンズは正円
• セクション境界: 直線で地色を切り替える（波形や斜めは使わない）
• スペック帯は必ずピル型にする
• ハート型のバッジで大きさの数値を強調する
• ラインナップのカードは角丸パネルの中に 2 列で並べる

Components

• スペック帯（spec-pill）: 直径・着色直径などの数値を白文字で載せる横長のピル帯
• ハートの数値バッジ（heart-badge）: 黒いハートの中に大きな数値をセリフ体で斜めに配置し、上に承認や最大級の文言を添える
• カラー名ロゴ見出し（color-logo）: 装飾英字に発光を付け、右上に小さいカタカナを添える
• ラインナップカード（lineup-card）: 上にキャッチ、中に瞳写真、左下にレンズの円と名前、下端にスペック帯
• 装用比較の 2 枚（compare-pair）: 裸眼と装用時の瞳写真を 2 列に並べ、装用側だけセクション色の太枠を付ける。下にラベル
• 特長カード（3 列）（feature-card）: 濃い水色のパネルに、明朝の見出しと 4 行程度の説明を入れる
• スペックアイコンカード（spec-icon-card）: ダークのカードに見出し・線画アイコン・小さな説明を縦に並べ、4 列で配置
• 度数表（power-chart）: 細い枠線の中にダークのチップを 8 列×3 行で並べる

Do's and Don'ts

Do - カラーごとのセクションは同じ構成で繰り返し、地色だけを変える - 瞳とレンズの写真を必ずセットで見せる - 白い明朝の見出しにグローを付け、写真に重ねる - ハートやキラキラを小さく添えて甘さを出す - 数値スペックはピル帯で整理する

Don't - 原色の赤や青のベタ塗りを使わない（くすみトーンを守る） - 太い角ゴシックを大見出しに使わない - カード同士に強い影を付けない - 瞳写真を四角いまま切り抜かない（角丸にする） - 装飾英字を本文に使わない

Page Structure

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

1. ファーストビュー（モデルとサイズ訴求で一目で惹きつける）: 水色地にモデルの全面写真。上にブランドロゴ、左にハートの数値バッジ、中央に発光する太い明朝のコピー、下にレンズの円を 4 つとスペック帯
2. 新色の紹介（新色の瞳を大きく見せる）: 網点のレンズ柄の背景に瞳のどアップ、装飾英字のカラー名、スペック帯、2 行の説明
3. ラインナップ（全カラーを比較させる）: 地紋のある水色地に、角丸パネルとハートバッジ。2×2 のカードを並べる
4. カラー別詳細（水色）（1 色ごとの世界観を伝える）: ロゴ→人物写真＋縦書きコピー→瞳とレンズ→帯→説明→装用比較
5. カラー別詳細（ボルドー）（フチありカラーの世界観を伝える）: ボルドー地で同じ構成。ピンクのグロー見出しを使う
6. デザインの解説（フチを重ねた構造を図で説明する）: 濃いボルドーのパネルに、円形レンズを 3 つ重ね、括弧の線で注記。比較写真 2 枚を添える
7. カラー別詳細（青紫・ローズ）（残りのカラーを紹介する）: 青紫地、ローズ地で同じ構成を繰り返す
8. サイズの訴求（大きさの強みを数値で押す）: 水色地に巨大なセリフ数字と明朝のコピー、目元写真の帯
9. 特長 3 点（発色・ドット・サイズの利点を示す）: 濃い水色のカードを 3 列に並べる
10. 度数・スペック（購入の判断材料を出す）: 度数のチップ表、ダークのアイコンカード 4 枚、ダークの仕様表
11. ブランドメッセージ・イメージモデル（共感と信頼を高める）: ロゴと中央揃えの文章。モデル写真に名前・SNS アイコン・紹介文を重ねる
12. フッター（締めのロゴ）: ダークグレーの帯にロゴマークを 1 つ

Imagery

• 地雷系・量産系メイクのモデルを正面から顔アップで撮る。肌は白く飛ばし気味、頬と唇はピンク
• 瞳のマクロ写真はまつげを強調し、ピンクがかった目元にする
• レンズ単体は真上から撮って正円に切り抜く
• 背景には網点のレンズ柄や豹柄風の地紋を薄く敷く
• パールや白いリボン、レースの手袋などガーリーな小物を使う
• 写真の上にキラキラの光を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の縦長構成を中央 480〜600px 幅で見せ、左右は地色で埋めるのを推奨
• PC ではラインナップと装用比較を 4 列に広げてもよい
• 縦書きコピーは PC でも縦書きを維持する
• 度数表は PC で 12 列程度まで広げてよい

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