DESIGN.md — ピンク×青×黄のコミック調アニメ告知 LP（Pop Comic Pink & Blue Anime Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: コミック・網点・ハニカム地紋・斜め切り替え・極太英字・三原色ポップ
• 地の質感: ピンク地にハニカム柄、青地に細かい網点。黄色の網点円や集中線でアメコミ風の印刷質感を出す。
• 形: 斜めのセクション境界、ギザギザの爆発型、ピル型ボタン、スカラップ縁の円形カード。
• 温度感: 高彩度でホット。明るく騒がしい。

Colors

• 地はピンクと青を交互に使い、境界は斜めにする。
• 見出しは黄色＋濃紺の立体影で統一する。
• 青地の本文は白、強調句はピンクのマーカー帯で塗る。
• 黄色は見出し・役職ラベル・網点装飾に限定する。
• ボタンは青ピルに白文字、矢印アイコンに黄とピンクを差す。
• 白は円形カードと英字ロゴ帯に使う。
• logo-marquee は文字 #FEFEFE × 背景 #FE5195 のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E8015C、4.54:1）を使う。
• text-marker は文字 #EAF5FB × 背景 #FE579A のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#DC0159、4.52:1）を使う。

Typography

• 見出しは日本語小＋英字大の2段組にする。
• 英字見出しは黄色に濃紺の押し出し影をつける。
• 本文も太字を基本にし細字は使わない。
• ナビ・ボタンは縦長コンデンス英字を使う。
• 巨大英字は画面からはみ出させて流す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、スタッフ一覧のみ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• キャラクター画像はセクション境界にまたがせる。
• 英字ロゴ帯でセクションを区切る。
• スタッフは役職ラベル→名前の縦並びを繰り返す。
• 左右余白は16px前後。

Elevation & Depth

• 影はぼかさず、濃紺のベタ影で立体感を出す。
• 画像には黄色や白の太い枠をつける。
• カードの浮き上がりはスカラップ縁と網点で表現する。

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: キャラは輪郭で切り抜き、背景画像は傾けた矩形に枠をつける。
• セクション境界: 斜め直線・稲妻線・ビル街シルエットで切り替える
• ラベルはピル型にする。
• ニュースは円形でスカラップ縁。
• トップへ戻るボタンはギザギザ爆発型。
• SNSボタンは網点入りの円。

Components

• 公式SNSピルボタン（button-sns-pill）: 青いピルに濃紺の縁取り。矢印記号と英字ラベル、SNSロゴを並べる。
• 2段見出し（heading-bilingual）: 上に日本語小見出し、下に黄色の極太英字＋濃紺影。
• 円形ニュースカード（news-circle-card）: 白い円にスカラップ縁。日付・見出しとキャラを入れ、左右矢印で切り替える。
• 区分ラベル（label-pill）: 濃紺のピルに白い英字でスタッフ区分を示す。
• MOREボタン（button-more）: 濃紺の小さなピルに斜め矢印の飾りをつける。
• 英字ロゴ帯（logo-marquee）: 白い巨大英字と紺の英文コピーを横に流す帯。
• 爆発型トップへ戻る（back-to-top-burst）: 黄色の集中線入りギザギザ円に青い矢印。
• ピンクマーカー強調（text-marker）: 本文の一部をピンクの帯で塗る。

Do's and Don'ts

Do - ピンクと青を斜めに交互配置する。 - 地紋に網点やハニカムを敷く。 - キャラはセクションからはみ出させる。 - 見出しは黄色の極太英字と影で強くする。 - 星形キラや破片を散らして動きを出す。

Don't - 淡いパステルや低彩度を主色にしない。 - 細い明朝体や細字ゴシックを使わない。 - ぼかした柔らかい影を使わない。 - 整った水平区切りだけで並べない。 - 余白だけの静かな面を広く残さない。

Page Structure

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

1. ファーストビュー（作品の世界観と放送時期を伝える）: 傾けたキービジュアルに黄色枠、下に立体ロゴと放送日帯。右上に吹き出し型メニュー。
2. 公式SNS導線（フォローを促す）: ピンク地中央に青いピルボタン。
3. 英字ロゴ帯（区切りと賑わい）: 白い巨大英字と紺の英文コピーを横長に配置。
4. 最新情報（ニュース告知）: 大きな黄色英字を四隅に置き、中央に円形カードのスライダーとMORE。
5. イントロダクション（あらすじ紹介）: 網点円とキャラの顔を境界に重ね、濃紺地に2段見出しと太字本文、マーカー強調。
6. 場面ビジュアル（世界観の補強）: 傾けた背景画像と小道具の切り抜きを斜め境界上に重ねる。
7. スタッフ&キャスト（制作陣と声優紹介）: 青地にピルラベルで区分し、黄色の役職と白の名前を並べる。稲妻線で装飾。
8. 街並みフッター帯（締めの演出）: 青いビル街シルエットに黄色の人物と英字ロゴ帯。
9. トップへ戻る・バナー・シェア（回遊と拡散）: 爆発型ボタン、原作バナー、円形SNSボタンを縦に並べる。
10. フッター（ナビと権利表記）: 白い英字ナビを2列、ロゴ、SNSピル、コピーライト。

Imagery

• 太い線と鮮やかなセル塗りのアニメ絵を使う。
• キャラは見上げや迫るアングルで迫力を出す。
• 黄色・白の網点円や四芒星キラを背景に散らす。
• 小道具の切り抜きを傾けて浮かせる。
• 集中線や稲妻線、破片でコミック的な動きを出す。
• ビル街は青と黄の網点シルエットで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は KV を左寄せで大きく、ロゴを右に重ねる。
• PC のニュースは円形カードを 3 枚横並びにする。
• PC のイントロは画像左・本文右の 2 カラム。
• PC のスタッフは 3 列グリッド。
• PC はトップへ戻るを右下固定、公式SNSを左上に縦書き配置。

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