--- version: alpha name: Pop Comic Pink & Blue Anime Promo LP description: ショッキングピンクとロイヤルブルーの面を斜めに切り替え、黄色の極太見出しと網点・集中線で漫画的な勢いを出したアニメ作品の告知 LP。巨大な英字ロゴを帯状に流す演出と、キャラクターの切り抜きで画面を賑やかにする。 colors: primary: '#FE5195' secondary: '#014DBD' dark-section: '#013D98' accent-1: '#FEFC02' tint-1: '#FFFDA2' cta: '#014CBC' on-cta: '#FFFFFF' surface: '#FEFEFE' text: '#062E74' on-dark: '#EAF5FB' marker: '#FE579A' line: '#013D98' primary-accessible: '#E8015C' marker-accessible: '#DC0159' typography: display: fontFamily: Rubik fontSize: 72px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 42px fontWeight: 400 lineHeight: 1.1 headline-sm: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.5 body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 label-button: fontFamily: Teko fontSize: 20px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.03em rounded: sm: 4px md: 16px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-sns-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px heading-bilingual: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 100px news-circle-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 280px label-pill: backgroundColor: '{colors.line}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-more: backgroundColor: '{colors.line}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px logo-marquee: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.display}' height: 120px back-to-top-burst: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 340px text-marker: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 22px --- # DESIGN.md — ピンク×青×黄のコミック調アニメ告知 LP（Pop Comic Pink & Blue Anime Promo LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: コミック・網点・ハニカム地紋・斜め切り替え・極太英字・三原色ポップ - **地の質感**: ピンク地にハニカム柄、青地に細かい網点。黄色の網点円や集中線でアメコミ風の印刷質感を出す。 - **形**: 斜めのセクション境界、ギザギザの爆発型、ピル型ボタン、スカラップ縁の円形カード。 - **温度感**: 高彩度でホット。明るく騒がしい。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE5195` | ショッキングピンクの主背景 | 38% | 画素の主要色に補正 | | `secondary` | `#014DBD` | ロイヤルブルーのセクション背景 | 20% | 画素の実測 | | `dark-section` | `#013D98` | 濃紺のイントロ背景 | 10% | 画素の主要色に補正 | | `accent-1` | `#FEFC02` | 見出し・役職名の黄色 | 5% | 画素の実測 | | `tint-1` | `#FFFDA2` | 放送日帯やスターバーストの淡黄 | 4% | 画素の主要色に補正 | | `cta` | `#014CBC` | 公式SNSピルボタンの青 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 1% | 推定 | | `surface` | `#FEFEFE` | ニュース円形カードの白 | 3% | 画素の実測 | | `text` | `#062E74` | カード内の紺文字 | 1% | 画素の実測 | | `on-dark` | `#EAF5FB` | 青地上の白本文 | 3% | 画素の実測 | | `marker` | `#FE579A` | 本文強調のピンクマーカー | 0% | 画素の主要色に補正 | | `line` | `#013D98` | ラベルピルの濃紺 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#E8015C` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#DC0159` | AA を満たす補正値（計算） | | 計算 | - 地はピンクと青を交互に使い、境界は斜めにする。 - 見出しは黄色＋濃紺の立体影で統一する。 - 青地の本文は白、強調句はピンクのマーカー帯で塗る。 - 黄色は見出し・役職ラベル・網点装飾に限定する。 - ボタンは青ピルに白文字、矢印アイコンに黄とピンクを差す。 - 白は円形カードと英字ロゴ帯に使う。 - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 背景に流す巨大英字ロゴ帯 | 欧文サンセリフ | Rubik | 900 | 72px | 1.0 | 0.02em | | `headline-lg` | 英字セクション見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 42px | 1.1 | 0.0em | | `headline-sm` | 見出し上の日本語ラベル | ゴシック | Dela Gothic One | 400 | 24px | 1.3 | 0.02em | | `body-lg` | リード文・人名 | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.5 | 0.0em | | `body-md` | あらすじ本文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.7 | 0.0em | | `note` | 役職名・日付・コピーライト | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.0em | | `label-button` | ボタン・ナビの英字 | 欧文サンセリフ | Teko | 600 | 20px | 1.0 | 0.03em | - 見出しは日本語小＋英字大の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 ```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-f44c158d`（元 LP の URL から採番） - **元 LP**: https://giant-ojosama-anime.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。