DESIGN.md — 黄×ピンクのシリーズ別色分けコスメ LP（Bold Grid Color-Coded Skincare Series LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ポップ・元気、クール・先進的、清潔・爽やか
• キーワード: グリッド罫線・シリーズ色分け・太い欧文見出し・液体のしずく写真・黒ピルボタン・＋マーク装飾
• 地の質感: ツヤのある液体やしずくの写真と、フラットな単色面・罫線の組み合わせ
• 形: スタジアム型の大きなカード、ピル型ボタン、直角の罫線グリッド
• 温度感: 明るくニュートラル。テーマ色の黄やピンクで温度を上げる

Colors

• 地はライトグレーで統一し、商品カードは白い面に黒の罫線で区切る
• シリーズごとにテーマ色を一つ決め、見出しの欧文・マーカー・カード面をすべてその色にそろえる
• 主ボタンはシリーズに関係なく黒地に白文字で固定する
• キャッチコピーには、テーマ色または白の帯をマーカーとして行ごとに敷く
• 写真はテーマ色と同じ色の液体写真にして、セクション全体の色をそろえる
• テーマ色を2色同じ面に混ぜない

Typography

• 見出しは欧文の太いサンセリフを大きく置き、和文は補助に回す
• 商品カードの欧文商品名は右揃えにし、テーマ色で2〜3行に折り返す
• 商品カードの商品情報（和文名・容量・価格）は右揃えにする
• セクションラベルは『英字ラベル | 番号付きのシリーズ名』の形で、シリーズ名だけテーマ色にする
• 効能を書いた語には上付きの＊番号を付けて注釈と対応させる
• 和文本文はゴシック体の中太で、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、左端に縦罫線のガターを持つグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• 画面の左端から約20pxの位置に縦罫線を通し、カード群をその内側に並べる
• セクションの区切りは横いっぱいの細い黒罫線にする
• セクションの前にグレー地の余白を大きくとり、ラベル見出しを置く
• 商品カードは左に商品写真、右に情報を置く2分割にする
• VIEW MORE ボタンはカードの右下に配置し、カードの罫線にまたがるように置く
• ＋マークをコピーの四隅に置いてトンボ風の枠を作る

Elevation & Depth

• 影は基本的に使わず、罫線とベタ塗りで階層を表す
• 立体感は商品写真の光沢や液体の表現にまかせる

Shapes

• 角丸: 小 0px ／ 中 24px ／ 大 180px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで白地に置く。キービジュアルは全幅の四角で使う
• セクション境界: 直線の細い黒罫線
• ラインナップのカードは縦長のスタジアム型（両端が半円）にする
• カテゴリのタグは白地に黒枠のピル型にする
• グリッドとカードは角丸なしの直角にする
• 円形の黒アイコンボタンにシェブロンを入れる

Components

• VIEW MORE ピルボタン（button-primary）: 黒地のピル型ボタン。左に欧文ラベル、右端に＞を置く
• シリーズのスタジアム型カード（series-capsule-card）: テーマ色で塗った縦長のカプセル型に黒の細い枠を付ける。欧文の大見出し、商品写真、チェック付きの効能3つ、MORE DETAIL の丸ボタンを順に並べ、横にスライドさせる
• 商品グリッドカード（product-card）: 白い面を罫線で区切る。左に切り抜きの商品写真、右上に品番、テーマ色の欧文商品名、タグ、商品名と価格を置く
• マーカー帯のコピー（marker-copy）: 和文コピーの各行の背後に、テーマ色または白のベタ帯を敷く。四隅に＋印を置く
• カテゴリのピルタグ（category-tag）: 白地に黒の細枠を付けたピル型。化粧水などの種別を書く
• セクションラベル（section-label）: 太い欧文ラベル。下に罫線を引き、縦線で区切った後ろにテーマ色のシリーズ名を続ける
• チェック付きの効能リスト（check-list）: 丸いチェックアイコンと短い効能を縦に3つ並べる
• 縦長のメニューボタン（menu-button）: 右上に置く白地・黒枠のカプセル型ボタン。中に矢印と縦書きの MENU を入れる

Do's and Don'ts

Do - シリーズごとにテーマ色を1色決め、見出し・帯・写真の色をそろえる - 細い黒罫線のグリッドで全体を区切り、エディトリアル調に見せる - 欧文見出しは太く大きく、行間を詰めて組む - 主ボタンは黒いピル型に統一する - 商品は白地に切り抜いて置き、品番を添える

Don't - ドロップシャドウやグラデーションのボタンを使わない - 明朝体や手書き風の書体を混ぜない - テーマ色を背景の地に大面積で敷き詰めない - 商品カードに角丸を付けない - ボタンの色をシリーズごとに変えない

Page Structure

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

1. ヘッダー／ファーストビュー（ブランドを印象づけ、新商品を告知する）: 大きな欧文ロゴと縦長のメニューボタンを置く。下に液体の写真を全幅で敷き、新商品は紫のカプセル型バッジで告知する
2. コンセプト（シリーズの考え方を伝える）: 黄色の液体写真を全幅で背景にする。白帯のマーカーを敷いたコピーと短い本文を左に、ボトルを右下に置く
3. ラインナップ（シリーズを一覧で比較させる）: 方眼の背景に、テーマ色のスタジアム型カードを横スライドで並べ、ドットのページャーを付ける
4. シリーズ紹介（シリーズ1）（シリーズの訴求を伝える）: テーマ色の写真に白い欧文で番号とシリーズ名を重ね、テーマ色のマーカー帯でコピーを入れる
5. 商品一覧（シリーズ1）（各商品の詳細ページへ誘導する）: 罫線グリッドの白カードを縦に積み、各カードに VIEW MORE を付ける
6. シリーズ紹介・商品一覧（他シリーズ）（同じ型で別シリーズを見せる）: テーマ色をピンクや紫に替えて、同じ構成を繰り返す
7. ニュース（新しい情報を伝える）: サムネイル付きのカードを横に並べ、黒ボタンで一覧へ誘導する
8. 注釈・フッター（注釈と導線をまとめる）: 注釈を小さな文字でまとめる。白地に大きな欧文ロゴを置き、テキストリンクを並べる

Imagery

• 透明感のある色付きの液体やしずく、泡を大きく写した光沢のあるビジュアルを使う
• ボトルは斜めに置き、写真の主役にする
• 商品は白地に切り抜き、影をほとんど付けない
• 写真の色はシリーズのテーマ色に合わせて単色系でそろえる
• 装飾は＋マーク・チェックアイコン・シェブロンなど、線の細い幾何学的なものに限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左端の縦ガターに、セクションラベルを縦書きで置く
• PC のラインナップは横長のカプセル型カードを縦に4つ並べ、カードの中を横並びにする
• PC の商品カードは2列のグリッドにする
• PC のキービジュアルは横長にトリミングし、シリーズ名は左に置く
• SP は1カラムでカードを縦に積み、ラインナップは横スライドにする

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