--- version: alpha name: Pop Manga Pink Anime Official Site description: 明るいグレーの紙質地にビビッドピンクを主役に置いたテレビアニメ公式サイトの型。セクション見出しは極太のひらがな装飾ロゴに手書きの英字を添え、見出しごとに色を変える。網点・集中線の爆発形・クレヨンの擦れを散らして漫画らしい勢いを出す。本文は白カードに収めて読みやすくする。 colors: primary: '#FF4971' secondary: '#FF5F84' background: '#F5F6F5' surface: '#FEFEFE' text: '#222222' text-muted: '#939393' cta: '#FD4B74' on-cta: '#FFFBFB' accent-1: '#FDEB23' accent-2: '#C772F3' accent-3: '#43C5FE' tint-1: '#B2ED1D' line: '#FF5F84' tint-2: '#FEFDFE' cta-accessible: '#E70337' primary-accessible: '#EC0034' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.1 accent: fontFamily: Permanent Marker fontSize: 14px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Nunito fontSize: 14px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading-logo: textColor: '{colors.accent-3}' typography: '{typography.display}' height: 90px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 120px button-comment: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px link-more: textColor: '{colors.primary}' typography: '{typography.label-button}' height: 40px highlight-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 28px character-select: backgroundColor: '{colors.background}' rounded: '{rounded.full}' height: 96px comment-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 740px credit-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 840px pink-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 260px --- # DESIGN.md — ビビッドピンク×漫画効果のアニメ公式 LP（Pop Manga Pink Anime Official Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型 - **キーワード**: ビビッドピンク・網点・爆発形の吹き出し・極太ひらがなロゴ・手書き英字・白カード - **地の質感**: 薄いグレーの紙のノイズ地。ピンク面には細かいドット柄と淡いキャラクター線画を透かして敷く - **形**: 角丸カードとピル型ボタン、尖った爆発形の装飾、円形のキャラアイコン - **温度感**: 暖色寄りでハイテンション。差し色にイエロー・ライム・水色・紫を使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF4971` | ブランドピンク（帯・ボタン・日付ラベル） | 8% | 画素の実測 | | `secondary` | `#FF5F84` | 紹介セクションの明るいピンク地 | 8% | 画素の主要色に補正 | | `background` | `#F5F6F5` | 紙質の薄グレー地 | 40% | 画素の実測 | | `surface` | `#FEFEFE` | お知らせ・コメント・スタッフのカード面 | 30% | 画素の実測 | | `text` | `#222222` | 見出し・名前・本文の文字 | 3% | 推定 | | `text-muted` | `#939393` | 注釈・小見出し英字 | 0% | 画素の実測 | | `cta` | `#FD4B74` | COMMENT ボタン・もっと見るリンク | 1% | 画素の実測 | | `on-cta` | `#FFFBFB` | ピンク面の上の白文字 | 1% | 画素の実測 | | `accent-1` | `#FDEB23` | 見出しのイエロー・強調テキスト | 1% | 画素の実測 | | `accent-2` | `#C772F3` | キャラクター名の紫 | 1% | 画素の実測 | | `accent-3` | `#43C5FE` | 見出しの水色 | 1% | 画素の実測 | | `tint-1` | `#B2ED1D` | 見出しのライムグリーン | 1% | 画素の実測 | | `line` | `#FF5F84` | カードのピンク枠線 | 0% | 画素の主要色に補正 | | `tint-2` | `#FEFDFE` | スタッフ欄のピンクのドット地 | 3% | 画素の実測 | | `cta-accessible` | `#E70337` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#EC0034` | AA を満たす補正値（計算） | | 計算 | - 地は薄グレーの紙質を基本にし、紹介とコミックの帯だけをピンクの全幅面にする - ピンクはボタン・日付ラベル・枠線・小見出しラベルに絞って使い、統一感を出す - セクション見出しはピンク・水色・イエロー・紫・ライムを順番に変えて、黒い縁取りと影を付ける - ピンク面に置く強調語は白いボックスにピンク文字で反転させる - キャラクター名はそのキャラのイメージカラー（例: 紫）で表示する - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出し（極太ひらがなロゴ） | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.1 | 0.0em | | `accent` | 見出し下の手書き風英字 | 欧文スクリプト | Permanent Marker | 400 | 14px | 1.2 | 0.1em | | `headline-lg` | 放送日の告知・キャラクター名 | ゴシック | Zen Kaku Gothic New | 900 | 36px | 1.3 | 0.05em | | `headline-md` | ピンク地のキャッチ文 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.6 | 0.08em | | `headline-sm` | スタッフ名・キャスト名 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `body-md` | お知らせ本文・紹介文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.08em | | `note` | 役職ラベル・注釈 | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.05em | | `label-button` | 英字ボタン・日付・ラベル | 欧文サンセリフ | Nunito | 800 | 14px | 1.0 | 0.05em | - 見出しはひらがなを丸みのある極太ロゴにし、白い縁取りと黒い影を付ける - 見出しの直下には手書き風の英字を小さく添える - 本文は字間を広めにとり、行間は 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-5ea83072`（元 LP の URL から採番） - **元 LP**: https://badgirl-anime.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。