DESIGN.md — パステル×方眼のポップなアニメ公式 LP（Pastel Pop Schoolgirl Anime Site）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: パステル・方眼ノート・ステッカー感・筆記体見出し・学園ラブコメ・ネオン
• 地の質感: 淡い方眼グリッドとドット、波線などの手描き風ステッカーを重ねたノート風の質感
• 形: 角丸カード、ピル型ボタン、スカラップ（波縁）の境界、ゆるいブロブ形の色面
• 温度感: 明るく甘い暖色寄り。青紫の文字でバランスを取る

Colors

• セクションごとに地の色を変える。順番はピンク→淡い方眼→ラベンダー→イエロー→ミント→濃紺フッター
• 本文やリストの文字は黒にせず、青紫（text）で統一する
• 主ボタンは青紫のピル型にして、どのパステル地でも目立たせる
• ピンクは放送情報の帯、日付、小見出しのアクセントに使う
• スタッフの役職ラベルは黄色の帯に小さな青紫の文字を乗せる
• フッターだけ濃紺にして、ネオン風のピンク・黄・水色の星で装飾する
• page は文字 #6A7BD8 × 背景 #FFFEFF のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#5C6ED4、4.5:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #5B6FE0 のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#576BDF、4.59:1）を使う。
• nav-chip は文字 #FFFFFF × 背景 #7F86E6 のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#616AE0、4.52:1）を使う。
• heart-menu は文字 #FFFB8D × 背景 #7F86E6 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#616AE0、4.6:1）を使う。
• info-band は文字 #FFFFFF × 背景 #E584AF のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D5367C、4.52:1）を使う。
• news-card は文字 #6A7BD8 × 背景 #FFFEFF のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#5C6ED4、4.5:1）を使う。
• role-label は文字 #6A7BD8 × 背景 #FFF762 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#5C6ED4、4.59:1）を使う。
• subhead-dotted は文字 #E584AF × 背景 #FFFEFF のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D5367C、4.56:1）を使う。
• name-pill は文字 #FFFFFF × 背景 #E584AF のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D5367C、4.52:1）を使う。
• marquee-band は文字 #7F86E6 × 背景 #FEE2F2 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#616AE0、4.52:1）を使う。

Typography

• 見出しは英語の筆記体に、白い縁取りと影を付けてステッカー風にする
• 見出しの文字色はピンクか黄で、地の色と反対の色にする
• 本文は中央揃えにし、行間を 2 倍以上空ける
• 人名は字間を広くとり、ゆったり並べる
• 日本語は丸みのあるゴシックで統一し、明朝は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コミックスの書影は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 画面全体を青紫の細い線で枠囲みし、アプリ画面のように見せる
• 白いカードは左右に約 7% の余白をとって配置する
• スタッフ欄は役職ラベルと名前を 1 組にして縦に積み、組の間を約 24px 空ける
• ニュースは横長の白いカードを 4 件並べ、下に MORE ボタンを置く
• キャラクターやマスコットの絵をカードの角に重ねて置く

Elevation & Depth

• カードには影を付けず、白い面と地の色の差だけで区切る
• キービジュアルの枠は青紫の線とずらした影で二重にする
• 見出しロゴには白縁と小さめの影を付けて浮かせる
• フッターのアイコンにはネオン風の発光を付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: キャラクター画像は波形やぼかし枠で切り抜く。書影は角丸 4px の長方形
• セクション境界: スカラップ（波縁）レース、またはゆるい波形・ブロブ形の色面で切り替える
• ボタンとタグはピル型にする
• 大きな白いカードは上側の角を大きく丸める
• 星・ハート・花・波線のパーツを境界のあたりに散らす

Components

• 主ボタン（button-primary）: 青紫のピル型ボタン。白い英字か日本語に右向きの矢印を添える
• ナビボタン（nav-chip）: 薄紫の塗りに青紫の枠線と白文字を乗せた角丸ボタン。言語切替や TOP 用
• ハート型メニュー（heart-menu）: 右上に置くハート形のハンバーガーボタン
• 筆記体見出し（section-title-script）: ステッカー風の欧文筆記体ロゴ。下に黄色い波線マーカーを引く場合もある
• 放送情報の帯（info-band）: ピンクの帯に白文字で媒体を書き、その下にピンクの太字で時間を書く
• ニュースカード（news-card）: 白い角丸カードに、ピンクの日付、ピル型タグ、青紫のタイトル、グレーの矢印を並べる
• 役職ラベル（role-label）: 黄色の帯に小さな文字を乗せ、その下に字間の広い名前を置く
• 点線で挟む小見出し（subhead-dotted）: ピンクの点線 2 本の間に、細い筆記体のピンク見出しを置く
• キャラ名ピル（name-pill）: 本文中に入れるピンクや水色のピル。名前と矢印を入れる
• 英字ループ帯（marquee-band）: 水色の地に、白縁の英字が横に流れる帯

Do's and Don'ts

Do - セクションごとにパステルの地の色を切り替える - 方眼グリッドとドット柄を地紋として薄く敷く - 星・ハート・波線の小物を左右の余白に散らす - 文字はすべて青紫系にして、甘くなりすぎないようにする - マスコットのイラストをカードの縁に乗せて遊びを出す

Don't - 真っ黒の本文やビビッドな原色をパステルの地に使わない - 角張ったボタンや細い明朝体を使わない - 装飾のない白一色の背景を長く続けない - 濃紺はフッター以外で使わない - 影を重くしてリアルな立体感を出さない

Page Structure

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

1. ヘッダー（言語切替とナビゲーション）: 左に言語チップ、中央に TOP などのボタン、右にハート型メニューを置く
2. ファーストビュー（作品のキービジュアルと放送情報を伝える）: SNS 投稿風の枠にキービジュアルを入れ、下にロゴ、放送日、ピンクの帯の放送枠情報、バナーを並べる
3. 作品紹介（あらすじと受賞歴）: 方眼の地に筆記体見出しを置き、中央揃えの青紫の本文を続ける。キャラ名はピルにする。キャラ画像は波形で切り抜く
4. 動画（PV やオープニング映像の視聴）: 濃色の帯の上で動画サムネイルを左右に送るカルーセルにし、矢印ボタンを付ける
5. 英字ループ帯（区切りと装飾）: 水色の地に英字を流し、上下をレース状の縁で区切る
6. ニュース（最新情報）: ラベンダーの地に白いニュースカードを 4 件並べ、下に MORE ボタンを置く
7. スタッフ・キャスト（制作陣と声優の紹介）: 黄色の方眼の地に大きな白いカードを置く。点線の小見出しで区切り、役職ラベルと名前を並べる
8. 主題歌（楽曲の情報）: スタッフと同じカード内で、ラベルの下に曲名とクレジットを書く
9. 原作コミックス（原作の購入を促す）: ミントの地に花を散らし、書影を 2 列で並べて、下に購入ボタンを置く
10. フッター（SNS への誘導と関連バナー）: 濃紺の地にネオンの星、ロゴ、FOLLOW ボタン、バナー 3 枚、コピーライトを並べる

Imagery

• セル画風アニメのキャラクターを明るい光の中で描いた素材を使う
• マスコットの動物は線が太めのゆるいイラストにし、余白に置く
• 星・ハート・花・ジグザグ線は白縁付きのステッカー風パステルで描く
• 背景はノートのような方眼に、ドットの菱形パターンを重ねる
• キャラクターの顔のアップは波形の枠で切り抜く
• 書影やバナーは原色多めの派手な色にして、パステルの地とのコントラストを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを 2 カラムにし、左にロゴと放送情報、右にキービジュアルを置く
• PC の作品紹介は雲形の白い枠に本文を入れ、キャラ画像を左右に配置する
• PC のスタッフ一覧は 3 列グリッドにする
• PC のコミックスは 4 列×2 段にする
• PC のフッターはバナーを横 3 枚に並べる
• 青紫の外枠は SP と 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 行書くと起動時に読み込まれる。