DESIGN.md — ビビッドピンク×漫画効果のアニメ公式 LP（Pop Manga Pink Anime Official Site）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型
• キーワード: ビビッドピンク・網点・爆発形の吹き出し・極太ひらがなロゴ・手書き英字・白カード
• 地の質感: 薄いグレーの紙のノイズ地。ピンク面には細かいドット柄と淡いキャラクター線画を透かして敷く
• 形: 角丸カードとピル型ボタン、尖った爆発形の装飾、円形のキャラアイコン
• 温度感: 暖色寄りでハイテンション。差し色にイエロー・ライム・水色・紫を使う

Colors

• 地は薄グレーの紙質を基本にし、紹介とコミックの帯だけをピンクの全幅面にする
• ピンクはボタン・日付ラベル・枠線・小見出しラベルに絞って使い、統一感を出す
• セクション見出しはピンク・水色・イエロー・紫・ライムを順番に変えて、黒い縁取りと影を付ける
• ピンク面に置く強調語は白いボックスにピンク文字で反転させる
• キャラクター名はそのキャラのイメージカラー（例: 紫）で表示する
• button-comment は文字 #FFFBFB × 背景 #FD4B74 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E70337、4.58:1）を使う。
• highlight-box は文字 #FF4971 × 背景 #FEFEFE のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EC0034、4.51:1）を使う。
• pink-banner は文字 #FFFBFB × 背景 #FF4971 のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EC0034、4.6:1）を使う。

Typography

• 見出しはひらがなを丸みのある極太ロゴにし、白い縁取りと黒い影を付ける
• 見出しの直下には手書き風の英字を小さく添える
• 本文は字間を広めにとり、行間は 1.9 前後にする
• ラベル・日付・ボタンは丸みのある欧文の太字を使う
• 紹介文は中央揃えにし、短い行で区切って改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャラ選択のアイコンは 4 列、スタッフは 2 列、コミックは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しは中央に置き、背後に網点の円を敷く
• カードは画面左右に 16px の余白をとって配置する
• 全幅のピンク帯は上辺を斜めに切ったり爆発形を重ねたりして境界を作る
• スタッフ欄は役職ラベルの下に名前を置く 2 列グリッドにする
• セクション境界には色付きの × 印を並べたラインを使う

Elevation & Depth

• キービジュアルは枠をずらしたピンクの板の上に載せ、斜めに重ねて見せる
• コメントカードは右下にピンクのドット柄を落ち影のように敷く
• キャラ立ち絵には淡いグレーのドロップシャドウを付ける
• 通常のカードは影なしで、薄い枠線か白い面だけで区切る

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: キャラアイコンは円形に切り抜き、灰色の縁を付ける。キービジュアルと動画は角丸の長方形にする
• セクション境界: 爆発形の吹き出し、斜めの面、×印のライン
• COMMENT ボタンは左下にしっぽの付いた吹き出し形のピルにする
• 日付ラベルは右上の角だけを丸めたタブ形にする
• スタッフ・キャストカードの上辺中央に円形のラベルを食い込ませる
• カードの右端にリングノートのような小さな円を縦に並べる

Components

• 装飾ひらがな見出し（section-heading-logo）: 極太のひらがなロゴに手書きの英字を添え、背後に網点の円や爆発形を置く
• お知らせカード（news-card）: 白い角丸カードの左上にピンクの日付タブを付け、下に 2 行の見出しを置く
• 吹き出しピルボタン（button-comment）: ピンクのピルに白の英字を載せ、左下に吹き出しのしっぽを付ける
• 一覧へのリンク（link-more）: ピンクの英字に下線と右向き矢印を付けたテキストリンク
• 反転の強調語（highlight-box）: ピンク地の文章中で、人名などを白いボックスにピンク文字で載せる
• キャラ選択アイコン（character-select）: 円形のサムネイルを 4 列に並べる。選択中はキャラのイメージカラーで円を塗る
• コメントカード（comment-card）: ピンク枠の白カードの上辺にピンクのピル見出しと肩書きタグを載せ、ドット柄の影を付ける
• スタッフ・キャスト枠（credit-card）: ピンク枠の角丸カード。上辺中央に円形の英字ラベルを置き、点線の区切りと COMMENT ボタンを並べる
• ピンクの告知帯（pink-banner）: 全幅のピンク帯に白ピルのタグと白い太字の 3 行を中央揃えで置く

Do's and Don'ts

Do - 見出しごとに差し色を替え、紙の地に網点・爆発形・クレヨンの擦れを散らす - 情報は白カードに収め、読みやすさを保つ - ボタンとラベルはピンクのピル型に統一する - キャラクター画像は大きく、切り抜いて見せる - ピンク面には淡い線画とドット柄を透かして敷く

Don't - 本文に装飾ロゴ書体を使わない - くすんだ色や暗い地を広い面に使わない - カードに強いドロップシャドウを付けない - 装飾を本文の上に重ねて読みにくくしない - 角のとがった四角いボタンにしない

Page Structure

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

1. ヘッダー（ロゴの表示とメニューへの導線）: 左にカラフルなロゴ、右にピンク縁の円形ハンバーガーボタンを置く
2. ファーストビュー（作品の世界観と放送日の告知）: キービジュアルを角丸にしてずらしたピンク板に重ね、下に黄色地・黒縁の極太文字で日付を置く
3. 動画（PV やオープニング映像への誘導）: ピンク枠の角丸サムネイルに再生アイコンを重ね、下に横に流れる手書きの英字帯を置く
4. お知らせ（最新情報の一覧）: 日付タブ付きの白カードを 3 件縦に並べ、最後に下線付きの一覧リンクを置く
5. 作品紹介（あらすじと作品の魅力を伝える）: 全幅のピンク地に線画を透かし、中央揃えの白文字で書く。人名は白ボックスで強調し、最後に大きなキャッチを置く
6. キャラクター（登場人物の紹介）: 円形アイコンの選択欄と大きな立ち絵のスライダーを置き、名前はイメージカラー、下に CV と吹き出しボタンを並べる
7. コメント（原作者の言葉を伝える）: ピンクのピル見出しを載せた枠付き白カードに長文を入れる
8. スタッフ＆キャスト（制作陣と声優の一覧）: ドット地の上に、円形ラベル付きの枠カードを 2 つ置く。スタッフは 2 列のグリッドにする
9. 原作コミック（原作の単行本への誘導）: ピンクの帯に掲載誌の情報を書き、書影を 2×2 で並べる
10. フッター（関連バナー、シェア、権利表記）: ×印のラインの下にロゴ・関連バナー・円形の SNS アイコン・コピーライトを中央揃えで並べる

Imagery

• セル画調のアニメイラストを主役にし、キャラクターは切り抜いて大きく配置する
• 背景にはパステルのブロック塀やカラフルな巨大アルファベットを置く
• 網点のグラデーション円、集中線の爆発形、クレヨンの擦れを差し色で散らす
• 立ち絵の背後に同じキャラの淡いモノクロ版と筆の擦れを重ねる
• ピンク面には線画を低い不透明度で敷き詰める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左端に縦長のテキストメニューを固定し、キービジュアルの右に縦書きで放送日を置く
• PC のお知らせは横長のカードにし、日付をピンクの四角いブロックで左に置く
• PC のスタッフとキャストは 2 枚のカードを横に並べる
• PC のキャラクター欄は左に選択アイコンと情報、右に立ち絵を置く 2 カラムにする
• PC のコミック書影は 4 冊を横 1 列に並べる

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