DESIGN.md — 青緑×深紅のアニメコラボ化粧品 LP（Anime Collaboration Teal and Crimson Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ポップ・元気、上品・高級、クール・先進的
• キーワード: 2色分割・六角形フレーム・デフォルメキャラ・斜線ストライプ・円モチーフ・明朝の成分説明
• 地の質感: フラットなベタ塗りに、うすい六角形パターンと黒い太線を重ねる。後半はマットなグレー地
• 形: 六角形・八角形の金縁バッジ、斜線ストライプの帯、大きな正円
• 温度感: 前半は鮮やかで力強い。後半はくすんだグレーと赤で落ち着いた温度

Colors

• 青緑と深紅は 2 種のバリエーションを表す。1 対のペアとして上下・左右に割って使う
• 見出し帯・バッジ枠・区切りの点には金ベージュを使う
• 前半の商品紹介は白地。成分説明はグレー地のパネルに切り替える
• 成分見出しと本文の強調は深紅の明朝で書く
• 購入ボタンだけは黒ベタにして、商品の世界観から切り離す
• バリエーションごとの紹介カードは、枠線と強調ラベルをその色で塗り分ける

Typography

• キャラクター周りの前半はゴシック太字で中央揃えにする
• 成分・機能を説明する後半は明朝に切り替えて上品にする
• 英字のバリエーション名は細長いサンセリフを大きく金色で置く
• 色の名前は対応する色で塗り分ける
• 注釈は 9〜10px で ※ 付きにし、右寄せか本文の下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は商品カードを 2 列、購入エリアを左右 2 分割にする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• コンセプト文は余白を広く取り、中央揃えで短く改行する
• バリエーション紹介はパッケージ画像と説明カードを交互に並べる
• 成分セクションはグレーのパネルを左右 5% 内側に置く
• 大きな円は画面端からはみ出させて背景に重ねる
• 購入エリアは商品画像→商品名→内訳→価格→ボタンの順に縦に積む

Elevation & Depth

• 基本はフラットで、影を付けない
• パッケージ画像の背後に薄いグレーの板をずらして置き、奥行きを出す
• FV の金枠キャッチには黒い太線のオフセットを付けて立体感を出す

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は正円に切り抜く。キャラは透過で配置する
• セクション境界: グレーの斜線ストライプの帯。2 本の線がつながる縦線と金色の点
• 見出しの帯や枠は角を落とした八角形にする
• バッジは六角形か正円にする
• ボタンとカードは角丸なしの四角にする
• 大きな円を重ねて背景をリズムよく見せる

Components

• 八角形キャッチ枠（hex-catch-frame）: 金ベージュの面に青緑の細い二重線を入れ、黒いオフセット影を付けた角落ちの枠
• 斜線ストライプ区切り（stripe-divider）: グレーの斜線を全幅で並べた帯
• 金帯見出し（heading-band）: 左右の角を斜めに落とした金ベージュの帯に、黒太字を 2 行で置く
• バリエーション紹介カード（variant-card）: 色付きの細い枠に大きな英字見出し、反転ラベル、ミニキャラ、詳細リンク（丸矢印付き）を入れる
• 深緑コンセプトボックス（dark-concept-box）: 深緑の面に白い明朝本文を入れ、注釈は右寄せにする
• 円形訴求バッジ（circle-badge）: 赤い正円に白い明朝で無添加項目を入れ、2×2 に並べる
• 六角形ミニバッジ（hex-badge）: 商品画像に添える補足の吹き出し。赤または青緑の六角形に白文字
• 購入ボタン（button-primary）: 全幅の黒ベタ四角に白文字を中央寄せ

Do's and Don'ts

Do - 2 色のペアは常にセットで、対になるように配置する - 金ベージュは枠・帯・点などのアクセントに絞って使う - 機能説明は明朝とグレー地にして、前半との世界観を切り替える - キャラは透過のミニキャラで添えて、親しみを出す - コピーライト表記は画像の右下に小さく置く

Don't - 角丸のピル型ボタンやグラデーションのボタンを使わない - 青緑と深紅以外の鮮やかな色を足さない - 成分説明にポップなゴシック太字を使わない - 影の強いカード UI を使わない - 白地に文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 上を青緑、下を深紅に塗り分け、キャラ立ち絵 4 体を置く。中央に八角形のキャッチ枠を重ねる
2. コンセプト（情緒的な共感をつくる）: 白地に短い詩的な文を中央揃えで置き、下にキャラを 1 体添える。上下を斜線ストライプで区切る
3. 限定パッケージ紹介（セット内容を伝える）: ロゴ入りの枠見出しと金帯見出しの後に、色名を塗り分けた説明文を入れる
4. バリエーション詳細（2 種の違いを示す）: パッケージ画像と色枠の紹介カードを 2 組、交互に置く
5. シリーズ説明（ベース商品の価値を説明する）: 縦線と金色の点でつないだ見出しの後に、グレーのパネル内に深緑のボックスを置く
6. 成分特長（浸透成分を訴求する）: 水滴写真を円に切り抜き、赤い円と重ねる。下に明朝の見出しと本文を置く
7. シート特長（シートの厚みを訴求する）: 大きな円の中にマスク写真を置き、断面の拡大を円で示す。赤い明朝で説明する
8. 低刺激処方（安心感を出す）: 金の大円の上に赤い円バッジを 2×2 で並べる
9. 購入（商品情報と購入導線）: 商品画像に六角形バッジと矢印を添え、商品名・内訳・価格・黒ボタンを順に置く
10. 注意事項（販売上の注意）: 白地に小さな左揃えのテキスト

Imagery

• キャラは黒い主線のデフォルメ等身で描き、透過で配置する
• 立ち絵の背景は単色の縦長パネルにし、薄いシルエットと縦書きの英字名を重ねる
• 背景に薄い六角形のハニカムパターンを敷く
• 成分写真は青い水滴などのクローズアップを正円に切り抜く
• グレー地には巨大な英字の一部やくすんだ円を、淡い色で装飾として敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は左右に青緑と深紅を分け、中央に六角形の枠を置く
• PC のコンセプト文は左揃えにし、キャラを右に並べる
• PC のパッケージとカードは 2 列で並べ、下を線でつなぐ
• PC の成分セクションは文と円写真を左右に分ける
• PC の購入エリアは左に画像、右に情報とボタンを置く

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