DESIGN.md — モーヴ×パステルのお菓子屋風イベントLP（Pastel Patisserie Character Festival LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: パステル・お菓子屋・スプリンクル・モーヴブラウン・キャラクター主役・冬
• 地の質感: 生成り地に雪の結晶と色とりどりのスプリンクルを薄く散らす。白カードには淡い影。
• 形: 角丸カード、ピル型ボタン、リボン型ラベル、溶けたチョコのような波形の境界。
• 温度感: 暖かめ。生成りとココア色の上にピンクとシアンで冬らしさを足す。

Colors

• 地は生成り、情報は白カードに載せる。
• 見出しの英字と濃色セクションはモーヴブラウンで統一する。
• ニュースは日付ごとにピンクとシアンを交互に塗る。
• ラベルはピンクのリボン型にして、白文字を載せる。
• テキストリンクはオレンジにして、矢印や外部リンクのアイコンを付ける。
• 区切り線はピンクと水色の斜線ストライプにする。
• label-ribbon は文字 #F7E9EC × 背景 #CC748A のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B4425F、4.59:1）を使う。
• news-band は文字 #F7E9EC × 背景 #EE8FB4 のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CA1F62、4.59:1）を使う。
• video-frame は文字 #FFFEFE × 背景 #B4838E のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#A16371、4.6:1）を使う。

Typography

• 見出しは太い丸みのある英字にして、すぐ下に日本語のリボンラベルを添える。
• 本文は丸ゴシックの小さめサイズにして、行間を広めに取る。
• 英字見出しはモーヴブラウン、本文はグレーがかったブラウンにする。
• ニュース帯の上の文字は白の太字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は見出し左・コンテンツ右の 2 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの先頭に英字見出しとリボンラベルを左寄せで置く。
• 情報は角丸の白カードにまとめる。
• ニュースは左上に傾いた日付付箋を重ねる。
• セクションの間はストライプの区切り線で分ける。
• 写真は横スクロールの角丸カードで並べる。

Elevation & Depth

• 白カードはごく淡いぼかし影を付ける。
• 日付付箋は少し傾けて影を付ける。
• ボタンには影を付けず、白いフチ取りで立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。人物アイコンは円形にする。
• セクション境界: 溶けたチョコのような波形と、斜線のストライプ
• ラベルは片側を矢羽根状に切ったリボン形にする。
• 動画枠は二重線のフレームにして、上部にリボン状の帯を載せる。
• ピルボタンの右端に白丸の矢印アイコンを入れる。

Components

• 矢印付きピルボタン（button-pill）: 濃いココア色の地に白い外枠を付け、右端に白丸の矢印を入れる。地には格子柄を薄く入れる。
• 英字見出し＋リボンラベル（section-heading）: 大きな英字見出しの下に、ピンクのリボン型で日本語訳を添える。
• カテゴリラベル（label-ribbon）: カード内の小見出しに使うピンク地の角丸ラベル。
• 日付付きニュース帯（news-band）: ピンクかシアンの角丸帯に雪の結晶の箇条書きを並べ、左上に黄色い日付付箋を重ねる。
• 白い情報カード（info-card）: 角丸の白カードに、ラベル・タイトル・期間・オレンジのリンクを縦に並べる。
• VIDEO 枠（video-frame）: 二重線の額縁にして上にリボン帯を載せ、中央に点線の円と再生アイコンを置く。
• 担当者プロフィール（profile-block）: 正方形のアイコン横に肩書きと名前を置き、その下にプロフィールとコメントを入れる。
• ストライプ区切り（stripe-divider）: ピンクと水色の斜線を細い帯にして横に引く。

Do's and Don'ts

Do - キャラクターイラストを大きく切り抜いて主役にする。 - 見出しは英字とリボンラベルのセットに統一する。 - 地にスプリンクルと雪の結晶を薄く散らす。 - 濃色セクションの境界は波形で溶かす。 - リンクはオレンジにして矢印を付ける。

Don't - 真っ黒や純粋なグレーの地は使わない。 - 角の立った四角いボタンは使わない。 - 原色を強く使わず、パステルの範囲に抑える。 - 明朝体などの硬い書体は使わない。 - 装飾を濃くしすぎて本文の邪魔にしない。

Page Structure

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

1. ファーストビュー（イベント名と開催日を知らせる）: お菓子屋さんの店内を背景にキャラクターを全面に描き、下部にロゴと日付バッジを置く。右上は看板型のメニュー。
2. ピックアップ（注目の企画へ誘導する）: バナー画像を 2 枚縦に並べ、その下に白カードで企画一覧をまとめる。
3. ニュース（更新情報を伝える）: 日付ごとに色を変えた帯に付箋を重ねる。下にもっと見るのリンクと SNS ボタンを置く。
4. イベント紹介（イベントの趣旨を説明する）: モーヴの濃色セクションにして、上端を波形にする。白い見出しと円形のリンク、動画枠、写真カルーセルを置く。
5. ビジュアル紹介（担当クリエイターを紹介する）: 大きなキャラクターの切り抜きの下に、プロフィールカードを置く。
6. テーマソング（楽曲と作家を紹介する）: 動画枠の下に曲名とプロフィールカードを置く。
7. 関連リンク（外部サイトへ誘導する）: イラスト背景の上に半透明の白パネルを重ね、バナーを縦に並べる。
8. フッター（シェアと主催情報）: モーヴ地に白い SNS アイコン、主催ロゴ、オレンジのリンクを置く。

Imagery

• パステル調のアニメ風キャラクターイラストを白背景で切り抜いて使う。
• 背景はケーキが並ぶショーケースとストライプの日よけのある店内を描く。
• 装飾は雪の結晶、音符、お菓子のモチーフにする。
• 写真は会場の様子を角丸カードに収める。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では見出しを左、カードを右に置く 2 カラムにする。
• PC のファーストビューは横長の店内背景にして、キャラクターを中央に置く。
• PC では濃色セクションの左に店内イラストを波形で見せる。
• 写真カルーセルは PC では 5 枚を横に並べる。
• 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 行書くと起動時に読み込まれる。