DESIGN.md — 青紫×ピンクのレトロポップなアニメ告知LP（Retro Pop Gag Anime Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、レトロ、力強い・インパクト、かわいい
• キーワード: 方眼紙柄・星の散らし・太い縁取り英字・網点ハーフトーン・キャラステッカー・80年代レトロ
• 地の質感: 白地に薄紫の方眼グリッドと黄色い星。黒地のセクションには網点とスポットライトの光。
• 形: ずらして重ねたカード、角丸のニュースカード、ピル型の枠線ボタン、上辺が大きな角丸のフッター。
• 温度感: 明るく賑やかで、温度は高め。寒色の青に暖色のピンクと黄色をぶつけて元気に見せる。

Colors

• 地は白と薄紫の方眼紙柄に、黄色の星を規則的に散らす
• 情報の面（ニュースカード・フッター）は primary の青一色で塗り、文字は白にする
• 英字見出しは紫からマゼンタへのグラデーションにし、白と紺の太い縁取りを付ける
• 黄色は日付ラベルと星だけに使う
• 作品紹介は黒地に網点・スポットライトを置き、白縁の付いた紺文字かピンク文字で読ませる
• キービジュアルの背後にはシアンとマゼンタの面をずらして重ね、版ズレ風に見せる
• button-outline は文字 #2CD4E8 × 背景 #FDFDFE のコントラスト比が 1.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0F7F8D、4.65:1）を使う。

Typography

• 見出しは極太の欧文ディスプレイ書体にし、2重の縁取りと影を付ける
• 英字見出しの下に、カタカナや漢字の和訳を字間を広くして小さく添える
• 本文は太字ゴシックで中央揃えにする
• 黒地の本文は白い縁取りを付けて、柄の上でも読めるようにする
• 日付は太い欧文の数字を黄色のラベルの上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はファーストビューだけ左ロゴ・右ビジュアルの 2 分割
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• ページ全体を青い細枠で囲む
• 見出しは左寄せで、セクション境界にはみ出させる
• ニュースは日付ラベルをカードの左上に重ねる
• 余白にはキャラのステッカーを左右交互に置く
• 動画エリアは画面幅いっぱいに置き、紫の網点を重ねる

Elevation & Depth

• キービジュアルの背後にシアンとマゼンタの面を、オフセットで重ねる
• ステッカーは白いフチと薄い影で浮かせる
• ボタンは白い面に紺の縁取りとシアンのずれ影を付ける
• カードに影は付けず、平面で見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: キービジュアルは角丸の長方形を少し傾けて重ねる。キャラの顔は斜めの平行四辺形の帯に並べる。
• セクション境界: 黒地の紹介セクションは角を大きく丸めて食い込ませる。フッターは上辺が大きな角丸の青い面。
• ニュースカードの右上に白いダッシュの飾りを置く
• ボタンはピル型の枠線にし、右下に短い線の飾りを付ける
• 波線やくるんとした線を余白に散らす

Components

• 縁取り英字見出し（display-heading）: 紫〜マゼンタのグラデーション英字に白と紺の縁取りを付け、下に和文ルビを添える
• ニュースカード（news-card）: 青い角丸カードに白の本文を入れ、左上に黄色の日付ラベルを重ねる
• 日付ラベル（date-label）: 黄色の面に紺の太い欧文日付を入れ、紺で縁取る
• PLAY・MORE ボタン（button-outline）: ピル型の白い面にシアンの太い縁を付け、シアンの欧文ラベルに紺の縁取りを入れる
• SNS ボタン（sns-button）: 青いフッターに白いピル型ボタンを縦に並べ、紺の文字とアイコンを入れる
• キャラステッカー（character-sticker）: 白いフチを付けたデフォルメキャラを余白に斜めに配置する
• 顔の短冊（face-strip）: 斜めの平行四辺形の枠に、キャラの顔のアップを5〜6本並べる

Do's and Don'ts

Do - 方眼紙柄と星を全ページの地として繰り返す - 見出しは必ず極太の英字＋和文ルビの組で作る - 青・マゼンタ・シアン・黄色を高い彩度のまま使う - 余白にはステッカーや波線を置いてにぎやかにする - 黒地のセクションには網点とスポットライトを入れる

Don't - くすんだ色や中間色のパステルだけでまとめない - 細い明朝体や控えめなタイポグラフィを使わない - 見出しを縁取りなしの平らな文字にしない - カードに大きなぼかし影を付けない - 地を無地の白だけにしない

Page Structure

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

1. ファーストビュー（作品名と放送情報を示し、キービジュアルで世界観を見せる）: 左上にロゴ、右上に放送情報を置き、その下にキービジュアルを傾けて重ねる。背後にシアンとマゼンタの面を敷く
2. キャラ紹介の帯（主要キャラを一目で見せる）: 斜めの短冊に顔を並べ、横にステッカーを添える
3. 動画（PV を再生してもらう）: 全幅の紫網点のサムネイルを置き、下にピル型の PLAY ボタンを置く
4. ニュース（最新情報を伝える）: 青いカードを3件縦に並べ、それぞれに黄色の日付ラベルを付ける。最後に MORE ボタンを置く
5. 作品紹介（作品の背景と見どころを伝える）: 黒地に網点、光、シルエットを敷く。ピンクのキャッチの下に、中央揃えの縁取り本文を置く
6. 欧文ロゴの飾り（区切りと余韻をつくる）: 黄色の欧文タイトルとステッカーを方眼地に配置する
7. フッター（公式SNSへ誘導し、権利表記を載せる）: 上辺が角丸の青い面に、ロゴ、白いピル型のSNSボタン、シェアアイコン、権利表記を中央揃えで縦に並べる

Imagery

• 太い主線と鮮やかなベタ塗りの80年代風アニメ絵を使う
• デフォルメのミニキャラを白フチ付きのステッカー風に切り抜く
• 網点ハーフトーンとレンズフレア風の光の玉を飾りに入れる
• マゼンタやシアンの波線、くるんとした線を手描き風に散らす
• 黄色い五芒星を等間隔に並べて地の柄にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではファーストビューをロゴ・放送情報・顔の短冊の左列と、キービジュアルの右列の2分割にする
• PC のニュースカードは横長の1行にし、本文の幅を中央の約70%に収める
• PC の紹介セクションは黒地を全幅にし、シルエットの円を中央に大きく置く
• PC のフッターはロゴを左、SNSボタンを右に横並びにする
• 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 行書くと起動時に読み込まれる。