DESIGN.md — 赤×淡グレーの明朝系まつ毛美容液LP（Clinical Red and Soft Gray Cosmetic Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、情報量多め・訴求型、信頼・誠実
• キーワード: 朱赤・淡グレー・明朝見出し・チェックリスト・図解・縦書き
• 地の質感: 白い光が回り込んだスタジオ写真と、マットな淡グレーの面
• 形: 角丸は小さめ。円形のバッジ、細い赤線の枠、白いカードを使う
• 温度感: やや涼しいニュートラルに、赤の熱を差す

Colors

• 地は淡グレーを基本にし、セクションごとにグレージュ・白・グレーを交互に切り替える
• 赤は見出しのキーワード、チェックマーク、本文の強調、帯の面だけに使う
• 赤い面は商品の要約帯など、1〜2か所に限る
• 黒帯はSTEPや比較のラベルに使い、赤帯と対にする
• 図解とグラフはくすみピンクと深紅でまとめる

Typography

• 大見出しは明朝体にし、キーワードだけ赤くして一段大きくする
• 悩みの問いかけは縦書きの明朝で大きく組む
• 本文の強調は赤文字の太字にする。マーカーは使わない
• 注釈は※と番号で小さく下に添える
• 見出しはセンター揃え、本文は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円バッジは4つ横並びにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は横幅いっぱいか、片側に寄せたものを交互に配置する
• 白カードは写真に半分重ねて置く
• チェックリストは1項目につき2行（太字の見出しと補足）で組む
• セクション間は縦の点線でつなぐ
• ステップは、写真・黒帯ラベル・本文の順に積む

Elevation & Depth

• 白カードにはごく薄い影（0 2px 8px rgba(0,0,0,.06)）をつける
• 基本はフラットにし、面の色の差で階層を作る

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いままか、写真をページ幅いっぱいに裁ち落とす
• セクション境界: 直線で背景色を切り替え、縦の点線でつなぐ
• 特長バッジは白い線の正円にする
• 枠見出しは赤い細線の角枠で、見出しが上辺に食い込む形にする
• チェックボックスは赤地の小さな正方形に白いチェックを入れる

Components

• 特長円バッジ（feature-circle）: 赤帯の上に白線の正円を4つ並べ、短い特長を入れる
• 赤チェックリスト（check-list）: 赤いチェックの横に太字の見出し、その下に補足を置き、赤の下線で区切る
• 赤線枠見出しボックス（framed-heading-box）: 赤い細線の枠の上辺に見出しを乗せ、中にチェック項目を入れる
• 比較ラベル（compare-label）: ビフォーは黒帯、アフターは赤帯にして、写真の上に載せる
• STEPラベル帯（step-bar）: 写真の直下に黒帯を置き、白い欧文で番号を中央に入れる
• 重なり白カード（overlap-card）: 写真に重ねる白カード。欧文見出しの下に赤の強調入り本文を入れる
• フリー設計円（free-badge）: グレーの細線の円に、無添加の項目を2行で入れる
• 斜線つき見出し（slash-heading）: 短い呼びかけの両側を、斜め線で挟む
• アンケート評価表（survey-table）: グレーの行に項目名・赤い数値・5段階スケールを並べる

Do's and Don'ts

Do - 見出しのキーワードだけを赤い明朝体で強調する - グレー系の地は、セクションごとにトーンを少しずつ変える - 効果は図解・比較写真・グラフで裏づける - 注釈は番号で対応させ、小さく必ず添える - 写真は白い光の入った清潔なトーンでそろえる

Don't - 赤の面を多用しない - 丸ゴシックやポップな書体を使わない - 影の強いカードやグラデーションのボタンを使わない - 彩度の高い赤以外の色を足さない - 本文をセンター揃えで長く組まない

Page Structure

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

1. ファーストビュー（商品の価値をひと目で伝える）: 明るい背景に赤いボトルを並べ、太いゴシックのキャッチを赤と黒で組む
2. 要約帯（特長を凝縮して見せる）: 赤い面に白い斜体のコピーを置き、円バッジを4つ並べて注釈を添える
3. 悩みの提起（読み手に自分のことだと思わせる）: 人物写真に縦書きの明朝の問いかけを重ね、その下に赤チェックリストを6項目並べる
4. 解決の提示（商品の必要性を伝える）: 黒帯の導入句、赤い明朝の大見出し、テクスチャ写真、縦書きの説明で組む
5. 効果の比較（ビフォーアフターを見せる）: 黒帯ラベルと赤帯ラベルをつけた目元写真を、2枚横に並べる
6. 成分の図解（仕組みを理解させる）: 赤線枠のチェックリストで、毛の断面イラストを上下から挟む
7. テクスチャ・チップ（使用感を伝える）: 手元の写真に白カードを重ね、左右を交互に入れ替える
8. フリー設計（安心感を与える）: 明朝見出しの下に、線の円バッジを並べる
9. 使い方（簡単さを伝える）: 斜線見出しの下に、写真・黒帯STEP・本文を3回繰り返す
10. サイクル解説（続けて使う理由を示す）: 白地に肌の断面イラストと赤帯ラベルを置き、本文の一部を赤で強調する
11. 調査データ（共感と根拠を示す）: アンケートの評価表と、棒と折れ線を組み合わせたグラフを、くすみピンクと深紅で描く

Imagery

• 白背景のスタジオ撮影で、柔らかい拡散光と淡い虹色の光の映り込みを入れる
• 人物は目元のアップや、鏡を見る悩み顔などの自然な表情にする
• 手元のマクロ写真で、ジェルの透明感や塗布チップを見せる
• 図解は塗りのフラットなイラストで、肌のピンクと赤い線を使う
• グラフはくすみピンクの棒と深紅の折れ線に、赤い矢印を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も中央に縦長の1カラムを置き、幅は約740px にとどめる
• 左右の余白は淡グレーで埋める
• SP では見出しを24〜30px に抑え、縦書きの見出しは残す
• 円バッジは SP でも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 行書くと起動時に読み込まれる。