DESIGN.md — 方眼地×漫画効果線のキャラコラボ化粧品LP（Manga Grid Character Collab Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ポップ・元気、かわいい、シンプル・ミニマル
• キーワード: 方眼紙・漫画効果線・黒枠ピル・パステルグラデ・ステッカー風キャラ・モノトーン+差し色
• 地の質感: 薄いグレーの方眼グリッドを全面に敷き、手描きの黒い稲妻・爆発線・星を余白に散らしている
• 形: 黒1〜2pxの細線枠、ピル型ボタン、角丸の情報カード、白フチのステッカー切り抜き
• 温度感: 明るくニュートラル。黒と白が中心で、差し色の黄・緑・水色が温度を加える

Colors

• 地は白×薄グレーの方眼で統一し、面の色は増やさない
• 文字・枠線・効果線はすべてほぼ黒の1色にする
• 商品ごとにテーマ色（黄・オレンジ黄・緑・水色）を決め、成分円とグラデーション帯で色分けする
• グラデーションは黄から各テーマ色への横方向グラデに限る
• 外部ECボタンは白地に黒枠で、色はブランドロゴの色だけにする
• セクションは薄グレーの帯で区切る

Typography

• 見出しはすべて極太ゴシックで黒にする
• FV見出しは助詞を小さくして、文字の大小でリズムをつける
• 英字見出しと日本語の小見出しを2段に重ねる
• キャラ名は欧文太字で大きく、下に日本語を小さく添える
• 注釈は※付きの極小サイズで右寄せまたは中央に置く
• 本文は中央揃えで短く改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 3 カラム、詳細は画像と補足の 2 カラム、外部ECボタンは 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 余白に効果線を散らすが、本文の上には重ねない
• 悩み別ブロックは「帯見出し→キャラ名→効能帯→商品画像→成分カード→CTA群」を繰り返す
• 主CTAは全幅、サブECボタンは2列グリッドにする
• セクション間は全幅のグレー帯で区切る
• 中央揃えを基本にする

Elevation & Depth

• 影は使わずフラットにする
• 立体感は黒い細枠線で出す
• キャラはステッカー風の白フチで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: キャラは白フチ付きのステッカー切り抜き。商品は角型のまま置き、写真は角丸の枠に入れる
• セクション境界: 全幅の薄グレー帯（直線）
• ボタンはすべて黒枠のピル型で、右端に丸い再生アイコンを付ける
• 成分は円を2つ並べて×でつなぎ、円の背面に色の円をずらして重ねる
• 効能ラベルは角丸小の黒枠矩形にする
• カードは黒1.5px枠の角丸12pxにする

Components

• 公式ストアCTA（button-primary）: 黄から商品のテーマ色へ流れるグラデのピル型。黒枠で、ロゴ＋ストア名を置き、右端に▶丸アイコンを付ける
• 外部ECボタン（button-ec）: 白地に黒枠のピル型。中央にECロゴ、右に▶丸アイコンを置き、2列に並べる
• 悩み別帯見出し（band-concern）: 全幅のグレー帯。見出しの両側に▼▼▼を付けて中央に置く
• 効能グラデ帯（band-benefit）: 黒枠の長方形に、黄からテーマ色への横グラデを敷き、効能名を中央に置く
• 黄色丸バッジ（badge-round）: FV右上に置く黄色の正円。黒文字で選べる種類数を強調する
• 成分カード（card-ingredient）: 黒枠の白カード。成分円2つを×でつなぎ、両側にキャラアイコンを置き、下に太字の説明と注釈を入れる
• 斜線括り吹き出しラベル（label-callout）: 黒枠の矩形。＼／で囲んだ小文字の前置きと、太字の訴求を2段で入れる
• 点線下線キャプション（caption-dotted）: 補足画像の下に置く太字キャプション。黒の点線で下線を引く
• 告知カード（card-event）: 黒枠の角丸カード。日付を▶▶▶でつないで大きく見せ、下に会場情報と写真を入れる

Do's and Don'ts

Do - 方眼の地と黒い漫画効果線を、全セクションの余白に散らす - 商品ごとのテーマ色を、成分円・効能帯・CTAグラデで一貫させる - ボタンは黒枠のピル型に▶アイコンを付けて統一する - キャラはステッカー風の白フチで、見出しの両脇に添える - 注釈の※は本文中に小さく入れ、ブロック下にまとめる

Don't - 濃いベタ塗りの背景セクションは作らない - ドロップシャドウや立体的なボタンは使わない - テーマ色以外の派手な色を足さない - 効果線を文字の上に重ねて可読性を落とさない - 明朝体や細い書体は混ぜない

Page Structure

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

1. ファーストビュー（コラボ商品であることと悩み別に選べることを伝える）: 極太の黒い大見出しに英字サブを添え、右上に黄色丸バッジを置く。下にキャラ集合のステッカーを入れ、周囲に効果線を散らす
2. ラインナップ（3種の比較と購入導線）: 3カラムで「商品パッケージ→マスク図→キャラ名→効能ラベル→EC縦ボタン列」と並べる
3. 商品情報（悩み別×3）（各商品の詳細と成分を訴求する）: グレー帯見出し→キャラ名→グラデ効能帯の順に置き、続けて商品画像と補足2点の2カラムを入れる
4. 成分訴求（配合成分の価値を説明する）: 黒枠カードに成分円2つを×でつないで入れ、太字の説明文を添える
5. 購入CTA（各商品の購入へ誘導する）: 全幅のグラデ主CTAを置き、下に2列の白いECボタンを並べる
6. イベント告知（発表会などの話題を伝える）: キャラを両脇に置いた見出しの下に、日付を大きく見せた告知カードと写真を入れる
7. ブランドメッセージ（ブランドの想いを伝える）: 中央揃えの短文を積み、テーマ文に黄色マーカーを引く。周囲にキャラと効果線を散らす
8. 取扱店舗（販売チャネルと発売日を案内する）: 英字＋日本語の見出しの下に太字の案内文を置き、キャラ後ろ姿の並びとコピーライトで締める

Imagery

• キャラは太い輪郭線のフラットイラストにし、白フチのステッカーとして切り抜く
• 効果線は黒ベタの手描き風。稲妻・爆発フキダシ・四芒星・黒丸を使う
• 商品パッケージは正面から撮った白背景の切り抜きにする
• マスクの形は細い線画のアイコンで、中にキャラを小さく描く
• 写真を入れる場合は明るい屋外の建物写真を、枠の中に収める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため、ここからは推奨。PCでは本文ブロックを最大幅720px程度で中央に置き、方眼の地は全幅に敷く
• PCではラインナップの3カラムを保ちつつ、余白を広げる
• 商品詳細は画像と補足を横並びにし、成分カードを右側に並べてもよい
• ECボタンはPCで4列の横並びにする
• 効果線の装飾は左右の余白に多めに配置する

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