DESIGN.md — 青空×白雲のアニメコラボ日焼け止め LP（Blue Sky Anime Collaboration Sunscreen LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、力強い・インパクト
• キーワード: 青空・白い雲・虹色の光線・斜め帯・明朝の斜体・限定コラボ
• 地の質感: 水彩風の雲とレンズフレアが入った空のイラスト背景。面はフラットで影は控えめ。
• 形: 斜めに切ったセクション帯、六角形バッジ、白い角丸ピルのアコーディオン、角の小さい長方形ボタン。
• 温度感: 寒色中心で爽やか。白とクリーム色のタグで少し温度を足す。

Colors

• 地はページ全体を通して空の青のイラスト背景で固定する。
• 章の切り替えは濃紺の斜め帯で区切る。
• 商品カード・アコーディオン・SHOPは白い面で青から浮かせる。
• 主ボタンは濃紺に白文字、サブボタンは白地に濃紺文字と枠線。
• 特長タグは淡い青とクリームを交互に使う。
• 赤や黄の強い色はキャラクターや商品画像だけにまかせる。

Typography

• 英字見出しは細いセリフ体で、-10度前後に傾ける。
• 本文は明朝で行間を広くとり、詩のように短く改行する。
• 商品名と価格はゴシック太字で読みやすくする。
• 価格は縦線で区切り、税込表記を小さく添える。
• 英字見出しの下に日本語の短い説明を小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 640px 前後の 1 カラムで、背景を全幅に敷く
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品カードは中央に置き、左右に矢印のスライダーを付ける。
• 商品の下は 商品名→容量と価格→注釈→ボタン→説明→タグ の順に積む。
• タグは 2〜3 列の格子で並べる。
• アコーディオンは横幅いっぱいの白いピル型を縦に並べる。
• ストーリーは左にテキスト、右にキャラクターを置き重ねる。

Elevation & Depth

• カードとピルは影をごく薄く（0 2px 6px rgba(0,0,0,.08)）。
• 奥行きは影ではなく、背景イラストとの重なりで出す。
• 六角形バッジはカードの右上角に重ねる。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は白背景の長方形カードに切り抜き。キャラクターは背景なしで、枠からはみ出して重ねる。
• セクション境界: 濃紺帯や白パネルを斜めに切って区切る
• アコーディオンだけ完全なピル型にする。
• CTA は角丸 2px の長方形で、右端に › を付ける。
• 限定バッジは濃紺の六角形に白い枠線。
• タグは角丸 2px の淡色面に細い枠線。

Components

• 主CTAボタン（button-primary）: 濃紺の長方形に白い明朝文字と右矢印。発売日や購入先へ誘導する。
• サブボタン（button-secondary）: 白地に濃色文字、細い枠と右矢印。
• 商品スライダーカード（product-card）: 白い正方形の枠に商品画像、左右に白い矢印、下にページ送りの点。
• 限定六角形バッジ（badge-limited）: 濃紺の六角形に白い斜体の英字。カードの右上に重ねる。
• 特長タグ（feature-tag）: 淡い青またはクリームの小さな長方形に明朝の短い特長を書き、格子で並べる。
• アコーディオン（accordion-pill）: 白いピルの左にアイコン、中央に見出し、右に＋。
• 斜体英字見出し（heading-italic-en）: 細いセリフの英字を斜めに置き、下に日本語の補足を小さく添える。
• 発売日ラベル（launch-pill）: 白い細枠の角丸ラベルに、斜体の Limited と日付を縦線で区切って並べる。
• ページトップボタン（pagetop-circle）: 右下に固定する濃紺の円形ボタン。アイコンと小さな文字を入れる。

Do's and Don'ts

Do - 背景は青空と雲のイラストで全幅に統一する。 - 見出しは英字セリフの斜体にして、勢いを出す。 - 商品ごとに同じ順番の情報ブロックを繰り返す。 - 章の区切りには斜めの帯やパネルを使う。 - 白い面を使って、文字の読みやすさを確保する。

Don't - 暖色の面を広く使わない。 - 太いゴシックの見出しを多用しない。 - 濃い影や立体的なボタンは使わない。 - 背景の上に長い文章を詰め込まない。 - 大きな角丸のカードにしない。

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 全幅のキャラクターイラスト。左上に縦書きのロゴ、右下に斜めのキャッチを置く。
2. ストーリー（コラボの意味を情緒的に語る）: 空の背景に英字見出し、左に明朝の詩的な短文、右に旗を持つキャラクター。
3. 商品ラインナップ（限定品の全体像を見せる）: 濃紺の斜め帯に英字見出し、コラボロゴ、発売日ラベル、3 商品を並べる。
4. 商品詳細（繰り返し）（商品ごとの仕様と特長を伝える）: アイコン、白カードのスライダー、価格、CTA、特長タグ、アコーディオン 2 本を積む。
5. 販売店（購入先へ誘導する）: キャラクター集合絵の下に斜めの白パネル。オンラインと店舗のボタン、販売店一覧の小さな文字。
6. コンテンツ予告（期間限定の企画を予告する）: 空の背景に英字見出しと、濃青の正方形パネルに日付と準備中の表示。

Imagery

• 空は鮮やかなシアンブルーで、右側に水彩風の白い雲を大きく描く。
• 左上から差す虹色の斜めの光線とレンズフレアを重ねる。
• キャラクターは背景なしで、上下のセクションをまたいで配置する。
• 商品は白背景の正面写真に、小さなテクスチャ画像と短い説明を添える。
• 雪の結晶のような細い線のモチーフを白抜きで使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は全セクション 1 カラム。ストーリーは文章の後にキャラクターを置く。
• 商品ラインナップの 3 商品は SP では横スクロールか 3 列の縮小表示にする。
• 特長タグは SP では 2 列にする。
• PC は背景を固定し、中央約 640px の幅に内容を置く。
• 斜め帯の角度は SP では浅くし、文字にかからないようにする。

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