DESIGN.md — 深紅×生成りの量産系カラコン LP（Dark Crimson Gothic Sweet Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ラグジュアリー・ダーク、上品・高級、レトロ
• キーワード: 深紅・ゴシックスイーツ・ハートと鍵・欧文セリフ・窓枠フレーム・キラキラ
• 地の質感: ベルベットのカーテン、ガラスの光沢、きらめきを足した写真。地の色は暗赤の単色か縦グラデーション。
• 形: 角丸カード、雲形の目元トリミング、ハート形の切り抜き、観音開きの窓枠。
• 温度感: 暖かく濃い。甘さと妖しさが半々。

Colors

• ページの地は深紅 #690001 を基本に、暗赤のグラデーションで奥行きを出す。
• 情報を読ませる箇所は生成りの角丸カードに載せ、文字はワイン色にする。
• 品番紹介はセクションごとに地色を変える（深紅・紫ワイン・紺・ベージュ・深緑）。
• 強調ラベルは赤地に白文字のピル。値段の数字は白の大きなセリフ体。
• ピンクはハートやきらめきなど小さな装飾だけに使う。
• 黒・純グレーの面は使わず、暗い色も赤みか青みを残す。

Typography

• 大見出しは欧文セリフを大きく置き、文字の間にきらめきの記号を挟む。
• 見出しの上に短い手書き風コピーを小さく添える。
• 英字の筆記体を写真の上や区切りに重ね、雰囲気を足す。
• スペックは縦棒で区切ったコンデンスサンセリフで 1 行にまとめる。
• 暗い地の白文字には弱い光彩をつけて浮かせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。品番一覧と特長カードは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅、カードは左右 4% 程度の余白を取る。
• 品番セクションは「全幅の写真→品番名→ポイント→比較写真 2 枚→窓枠写真」の順に固定する。
• 装着前後の比較は左右に 2 つ並べ、下に小さなキャプションをつける。
• 特長は 2×3 のグリッドで、点線で区切る。
• セクションの間にナイフやフォークなどの小物を斜めにはみ出させる。

Elevation & Depth

• カードは影なしの平面で、細い枠線で囲む。
• レンズの丸い画像に柔らかいドロップシャドウとハイライトのきらめきをつける。
• ロゴや大見出しにグロウ（光彩）を使う。
• 封蝋のモチーフでカードとセクションの境目を立体的に留める。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 目元は雲形、レンズは正円、モデル写真はハート形か観音開きの窓枠に入れる
• セクション境界: 直線で地色を切り替え、カードの下端は V 字のペナントにして封蝋で留める
• 比較写真は雲形のフレームに入れる。
• 番号はハートの中に置く。
• アイコンは赤い線の円で囲む。

Components

• 生成りの情報カード（card-cream）: 深紅の地に載せる角丸カード。上に小さな英字ラベルと欧文の大見出しを置く。
• 赤のピルラベル（badge-pill-red）: 特徴を短く示す赤地・白文字のピル。
• 品番名の見出し（heading-product）: 欧文セリフの大見出しにきらめきの記号を挟み、下にカナ名とスペックを並べ、細線で区切る。
• 雲形の比較写真（compare-cloud）: 装着前と装着後の目元を雲形フレームで 2 つ並べ、キャプションを中黒で挟む。
• 窓枠フォトフレーム（frame-window）: 上部がアーチの写真枠で、左右に扉ときらめきをつける。上中央に番号入りのハート、上の弧に英字を沿わせる。
• まとめ買い価格ブロック（price-block）: ハート形の光の上に白いセリフの大きな数字。通常価格を小さく、1 箱あたりの価格を最も大きく出す。
• 特長アイコン項目（feature-icon）: 赤い線の円に入れたアイコンと英字ラベル、右側に赤の見出し、下に本文を置く。
• 斜線で挟んだリード（heading-ribbon-copy）: 見出しの上に置く短いコピー。左右を斜線で挟む。

Do's and Don'ts

Do - 地の色は暗赤を基本にし、カードは生成りにする。 - スイーツ、ハート、鍵、カトラリー、封蝋のモチーフを各セクションに散らす。 - 品番ごとの構成を同じにして、地色だけを変える。 - 大見出しは欧文セリフにし、筆記体の英字を添える。 - レンズ画像にきらめきを足して透明感を出す。

Don't - 明るい白地を全面に広げない。 - 太い角ゴシックの大見出しを使わない。 - フラットなビビッドカラーやネオン色を足さない。 - 装飾のない四角い写真をただ並べない。 - 本文を暗い地に長く流さず、カードに載せる。

Page Structure

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

1. ファーストビュー（世界観とラインナップを一目で伝える）: ベルベット調の赤い背景にモデルとスイーツの写真。中央にロゴ、下にレンズ 5 色の円とスペック、筆記体の英字を置き、細い額縁で囲む。
2. コンセプト見出し（新ブランドのテーマを伝える）: 楕円の生成りプレートに大きな明朝と筆記体を組み、ハートや鍵、新登場のバッジを添える。
3. ラインナップ（全品番の装着した目元を比べさせる）: 生成りカードに目元写真を 2 カラムで並べ、欧文の品番名とカナを入れる。
4. 技術訴求 1（独自の発色技術を説明する）: 装飾的なロゴ風見出しと全幅の目元写真の帯。レンズの円を右に重ね、品番名を筆記体で入れる。
5. 仕組みの解説（レンズ構造を図で示す）: カードにレンズの拡大図を置き、吹き出しと矢印で示す。下に注意書きの赤いボックスを置く。
6. 技術訴求 2（別グループの色の魅力を伝える）: 技術訴求 1 と同じ形で 3 本の目元写真を並べる。
7. 価格訴求（まとめ買いでお得なことを示す）: 暗赤の地にハート形の光。白いセリフで大きな数字を見せ、パッケージ写真を添える。
8. 品番別紹介（×5）（各色の個性を深く見せる）: 全幅のモデル写真→品番名→ポイント→雲形の比較写真→番号入りの窓枠写真。地色は品番ごとに変える。
9. レンズの特長（機能面の安心感を出す）: 生成りカードにアイコン付きの項目を 2×3 で並べる。下端は V 字にして封蝋で留める。
10. イメージモデル紹介（起用モデルで親近感を出す）: ハート形の写真の周りに手書き風の名前と英字を添える。下に白文字のプロフィールとサインを置く。
11. 締め・フッター（世界観の余韻を残し、ブランドを想起させる）: 楕円の額縁に入れた商品写真と品番の一覧。深紅の帯に白抜きのロゴを置く。

Imagery

• 赤いベルベットのカーテン、ゼリー、チェリー、ケーキなどを置いたゴシック調の甘いセット撮影。
• モデルは色白の量産系メイクで、白いサテン手袋やリボンで甘さを出す。
• 目元のアップは均一なライティングで撮り、レンズの発色がわかるようにする。
• レンズ単体の正円画像には星形のきらめきを足す。
• 装飾の素材は、銀のカトラリー、封蝋、アンティークの鍵、ハート、ミラーボール。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため、PC では中央に 480〜600px 幅の SP レイアウトを置く。
• 左右の余白は深紅のベルベット調の背景で埋める。
• ラインナップと特長は PC で 3〜4 カラムに広げてもよい。
• 品番紹介は、写真と比較ブロックを左右 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 行書くと起動時に読み込まれる。