DESIGN.md — 淡ピンク×墨黒のK-ビューティー系カラコンLP（Soft Pink Editorial Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい
• キーワード: 雑誌風エディトリアル・淡ピンクのグラデーション・墨黒のラベル帯・欧文セリフ＋スクリプト・目元の拡大写真・ハートと星の小さな装飾
• 地の質感: 白から淡ピンクへのやわらかいグラデーションとマットな地。写真はツヤ感のある肌で光を強調する。
• 形: 角丸の写真フレーム、ピル型のスペック表示、円形のレンズ写真、点線のアーチ。
• 温度感: ややあたたかい（ピンク・ベージュ寄り）。カラーによってはクールなミントやグレーにする

Colors

• 基本の地はオフホワイトピンク。背景は白から淡ピンクへのグラデーションで区切る
• カラーごとに紹介セクションの地色を変える（ミント・ピンク・グレー・ベージュ）
• 強調は墨黒の帯ラベルと黒いピル型の番号で行う。鮮やかな原色は使わない
• 細い罫線と点線は茶黒にして、硬い印象にしない
• フッターは墨黒にして白文字を中央に置く

Typography

• 大見出しは細めの欧文セリフ。直後に小さなカタカナ表記を添える
• 筆記体は装飾として重ねるだけにし、読ませる文字には使わない
• 日本語本文は中央揃えで短く改行し、字間を広めにとる
• スペック値は等幅フォントで小さく、縦棒で区切る
• 帯ラベルの文字は斜体の欧文セリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。一覧部分は 2〜3 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は全幅で大きく使い、その上に見出しを重ねる
• 目元の拡大写真とレンズの円形写真を斜めにずらして重ねる
• カラー紹介はジグザグ配置にし、写真の左右を交互に入れ替える
• 度数表などの一覧は 6 列のピル型グリッドで並べる
• セクションの冒頭には黒い帯ラベルを置く

Elevation & Depth

• レンズの円形写真には白いフチと淡い影を付けて浮かせる
• カード類は影なしで、細い線の枠だけにする
• 光のきらめき（星形のハイライト）で立体感を出す

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 目元は角丸の四角か大きな楕円で切り抜く。レンズは正円。モデル写真は全幅か角丸にする
• セクション境界: 点線のアーチ型の曲線と、グラデーションの色の切り替えで区切る
• スペックはピル型の枠線で並べる
• 番号は黒いピル型にする
• カードの見出し部分は上辺を角丸にした黒帯にし、両端にハートを置く
• 写真の背面に色付きの枠をずらして重ねる

Components

• 二段の帯ラベル（label-band）: 白帯と黒帯を少し傾けて上下に重ねる。文字は斜体の欧文
• スペックのピル（spec-pill）: 細い枠線のピル型に数値と小さな単位を並べる
• 番号バッジ（number-badge）: 黒いピル型に白い数字を入れ、横に特徴の英字を並べる
• レンズ解説（lens-point）: レンズの拡大円に番号と点線の引き出し線を付け、ABOUTラベルと説明を添える
• 装用前後の比較（before-after）: 左右の目元写真に BEFORE / AFTER のピルを付ける。上にハート付きのピンク帯を置く
• テイストの目盛り（cute-elegant-slider）: CUTE と ELEGANT を細線でつなぎ、星マークで位置を示す
• カラーカード（color-card）: 黒い見出し帯の下に目元写真と円形のレンズ写真、名前のピルを配置する
• カラーマップ（color-map）: 十字の軸の上にレンズの円をプロットし、名前のラベルを付ける

Do's and Don'ts

Do - 地は淡いピンクやグレージュにして、ツヤのある肌の写真を主役にする - 欧文セリフの大見出しに、小さなカタカナ表記を添える - 各カラーは同じ型（全幅写真→目元→レンズ解説→前後比較）で繰り返す - ハートや星などの小さな装飾を控えめに散らす - 強調は墨黒の帯でまとめる

Don't - 赤や青の原色ボタンを置かない - 太い角ゴシックの大見出しを使わない - 影の強いカードや立体的なボタンは使わない - 写真の上に長い本文を重ねない - 装飾を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（新色の発表と世界観の提示）: モデルの顔のアップ写真に帯ラベルと筆記体のロゴ風見出しを重ね、下に4色のレンズの円とスペックを並べる
2. コンセプト（新色の価値を一言で伝える）: 淡ピンクのグラデーション地に明朝の見出しとモデルの小さな写真を並べ、斜めにレンズを配置する
3. 新色の一覧（4色をまとめて紹介する）: 番号バッジ、欧文のカラー名、目元写真、レンズの円をジグザグに配置する
4. 定番ラインナップの早見表（既存色を一覧で見せる）: ピンクの見出しバーの下に、目元写真を3列グリッドで並べ、名前のピルを付ける
5. カラー別の詳細（1色ずつ魅力を深く見せる）: 色ごとの地に全幅のモデル写真を置き、レンズ解説、前後比較、短い説明文を続ける
6. 定番カラー紹介（既存色ごとの特徴を伝える）: モデル写真、レンズの円、目元写真を背面の色枠と重ね、左右を交互に入れ替える
7. カラーマップ（色の比較と選ぶ手助け）: 明るさ（明↔暗）と色温度（暖↔寒）の十字軸に、レンズをプロットする
8. カラー別カード一覧（全色をまとめて比較する）: 黒い見出し帯のカードを2列で並べ、new や Best のラベルを付ける
9. レンズスペック（機能性を伝える）: 黒帯付きのカードを2列にし、線画のアイコンと短い説明を入れる
10. 度数一覧（対応する度数を見せる）: 6列のピル型グリッドにし、背景に大きな透かし文字を置く
11. ブランドとモデル紹介（ブランドの思想とモデルを紹介する）: 淡ピンクの地に中央揃えの文章を置き、角丸の写真を円弧状の文字で囲む
12. フッター（承認番号などの法定表記）: 墨黒の地に白のロゴ風文字と小さな注記、最下部にピンクの帯を置く

Imagery

• 韓国系の透明感メイク。ツヤ肌のモデルをソフトな光で撮る
• 目元は超接写で、まつ毛とレンズの模様がはっきり見えるようにする
• レンズ単体は白地で正円に切り抜き、きらめきを加える
• カラーごとに背景の色を合わせる（ミント・ピンク・グレー・ベージュ）
• 写真の上に大きな筆記体の透かし文字を重ねる
• パッケージは石やテラゾーの上に置いて、静物として撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後のカラムを置き、SP のデザインを維持する
• カラムの左右は淡ピンクのグラデーションか、写真をぼかした背景で埋める
• 一覧のグリッドは PC で 3〜4 列に広げてもよい
• 文字サイズは SP の1.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 行書くと起動時に読み込まれる。