--- version: alpha name: Pastel Pop Schoolgirl Anime Site description: ピンク・ラベンダー・イエロー・ミントのパステル色をセクションごとに切り替えるアニメ作品の公式サイト。方眼の地紋、波線、星、ハート、ドット柄などの小物を散らして学園ものらしい元気さを出す。見出しは筆記体風の欧文ロゴ、本文は青紫の丸みのあるゴシック。フッターだけ濃紺で、ネオン風に締める。 colors: primary: '#E584AF' background: '#FFFEFF' background-alt: '#FDE4F3' tint-1: '#FEE2F2' secondary: '#FFF762' accent-1: '#9AF0B4' tint-2: '#F6D5E7' text: '#6A7BD8' cta: '#5B6FE0' on-cta: '#FFFFFF' line: '#7F86E6' dark-section: '#2B2934' on-dark: '#D4D0DA' marker: '#FFFB8D' text-accessible: '#5C6ED4' cta-accessible: '#576BDF' line-accessible: '#616AE0' primary-accessible: '#D5367C' typography: display: fontFamily: Pacifico fontSize: 48px fontWeight: 400 lineHeight: 1.1 headline-md: fontFamily: Dancing Script fontSize: 28px fontWeight: 400 lineHeight: 1.2 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 700 lineHeight: 2.3 letterSpacing: 0.03em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.25em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.08em label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 6px md: 12px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px nav-chip: backgroundColor: '{colors.line}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 26px heart-menu: backgroundColor: '{colors.line}' textColor: '{colors.marker}' height: 48px section-title-script: textColor: '{colors.primary}' typography: '{typography.display}' height: 60px info-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 18px news-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 84px role-label: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.note}' height: 16px subhead-dotted: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 64px name-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px marquee-band: backgroundColor: '{colors.tint-1}' textColor: '{colors.line}' typography: '{typography.accent}' height: 56px --- # DESIGN.md — パステル×方眼のポップなアニメ公式 LP（Pastel Pop Schoolgirl Anime Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感 - **キーワード**: パステル・方眼ノート・ステッカー感・筆記体見出し・学園ラブコメ・ネオン - **地の質感**: 淡い方眼グリッドとドット、波線などの手描き風ステッカーを重ねたノート風の質感 - **形**: 角丸カード、ピル型ボタン、スカラップ（波縁）の境界、ゆるいブロブ形の色面 - **温度感**: 明るく甘い暖色寄り。青紫の文字でバランスを取る ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E584AF` | ブランドのピンク（見出し・ラベル帯） | 4% | 画素の主要色に補正 | | `background` | `#FFFEFF` | カード・本文の白い地 | 35% | 画素の実測 | | `background-alt` | `#FDE4F3` | ファーストビューの淡いピンクの地 | 8% | 画素の主要色に補正 | | `tint-1` | `#FEE2F2` | Introduction の方眼の地 | 7% | 画素の実測 | | `secondary` | `#FFF762` | スタッフ欄の黄色い地とラベル | 7% | 画素の主要色に補正 | | `accent-1` | `#9AF0B4` | コミックス欄のミントの地 | 6% | 画素の主要色に補正 | | `tint-2` | `#F6D5E7` | ニュース欄のラベンダーの地 | 5% | 画素の主要色に補正 | | `text` | `#6A7BD8` | 本文・リストの青紫の文字 | 2% | 推定 | | `cta` | `#5B6FE0` | MORE・購入ボタンの塗り | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白い文字 | 0% | 画素の主要色に補正 | | `line` | `#7F86E6` | 外枠とナビボタンの青紫の線 | 0% | 推定 | | `dark-section` | `#2B2934` | フッターの濃紺 | 9% | 画素の主要色に補正 | | `on-dark` | `#D4D0DA` | フッターの文字 | 0% | 画素の主要色に補正 | | `marker` | `#FFFB8D` | 見出し下の黄色い波線マーカー | 0% | 画素の主要色に補正 | | `text-accessible` | `#5C6ED4` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#576BDF` | AA を満たす補正値（計算） | | 計算 | | `line-accessible` | `#616AE0` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D5367C` | AA を満たす補正値（計算） | | 計算 | - セクションごとに地の色を変える。順番はピンク→淡い方眼→ラベンダー→イエロー→ミント→濃紺フッター - 本文やリストの文字は黒にせず、青紫（text）で統一する - 主ボタンは青紫のピル型にして、どのパステル地でも目立たせる - ピンクは放送情報の帯、日付、小見出しのアクセントに使う - スタッフの役職ラベルは黄色の帯に小さな青紫の文字を乗せる - フッターだけ濃紺にして、ネオン風のピンク・黄・水色の星で装飾する - `page` は文字 `#6A7BD8` × 背景 `#FFFEFF` のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#5C6ED4`、4.5:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#5B6FE0` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#576BDF`、4.59:1）を使う。 - `nav-chip` は文字 `#FFFFFF` × 背景 `#7F86E6` のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `line-accessible`（`#616AE0`、4.52:1）を使う。 - `heart-menu` は文字 `#FFFB8D` × 背景 `#7F86E6` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `line-accessible`（`#616AE0`、4.6:1）を使う。 - `info-band` は文字 `#FFFFFF` × 背景 `#E584AF` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D5367C`、4.52:1）を使う。 - `news-card` は文字 `#6A7BD8` × 背景 `#FFFEFF` のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#5C6ED4`、4.5:1）を使う。 - `role-label` は文字 `#6A7BD8` × 背景 `#FFF762` のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#5C6ED4`、4.59:1）を使う。 - `subhead-dotted` は文字 `#E584AF` × 背景 `#FFFEFF` のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D5367C`、4.56:1）を使う。 - `name-pill` は文字 `#FFFFFF` × 背景 `#E584AF` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D5367C`、4.52:1）を使う。 - `marquee-band` は文字 `#7F86E6` × 背景 `#FEE2F2` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `line-accessible`（`#616AE0`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの筆記体ロゴ | 欧文スクリプト | Pacifico | 400 | 48px | 1.1 | 0.0em | | `headline-md` | カード内の小見出し（細い筆記体） | 欧文スクリプト | Dancing Script | 400 | 28px | 1.2 | 0.0em | | `headline-sm` | 放送日や巻数訴求の太字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.4 | 0.02em | | `body-md` | イントロダクションの中央揃え本文 | 丸ゴシック | Zen Maru Gothic | 700 | 13px | 2.3 | 0.03em | | `body-lg` | スタッフ・キャスト名 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.6 | 0.25em | | `note` | 役職ラベル、日付、注記 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.08em | | `accent` | 英字の流れるテキスト帯 | 欧文サンセリフ | Dela Gothic One | 400 | 28px | 1.0 | 0.08em | | `label-button` | ボタンとナビの英字 | 欧文サンセリフ | Montserrat | 800 | 13px | 1.0 | 0.15em | - 見出しは英語の筆記体に、白い縁取りと影を付けてステッカー風にする - 見出しの文字色はピンクか黄で、地の色と反対の色にする - 本文は中央揃えにし、行間を 2 倍以上空ける - 人名は字間を広くとり、ゆったり並べる - 日本語は丸みのあるゴシックで統一し、明朝は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。コミックスの書影は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 画面全体を青紫の細い線で枠囲みし、アプリ画面のように見せる - 白いカードは左右に約 7% の余白をとって配置する - スタッフ欄は役職ラベルと名前を 1 組にして縦に積み、組の間を約 24px 空ける - ニュースは横長の白いカードを 4 件並べ、下に MORE ボタンを置く - キャラクターやマスコットの絵をカードの角に重ねて置く ## Elevation & Depth - カードには影を付けず、白い面と地の色の差だけで区切る - キービジュアルの枠は青紫の線とずらした影で二重にする - 見出しロゴには白縁と小さめの影を付けて浮かせる - フッターのアイコンにはネオン風の発光を付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: キャラクター画像は波形やぼかし枠で切り抜く。書影は角丸 4px の長方形 - **セクション境界**: スカラップ（波縁）レース、またはゆるい波形・ブロブ形の色面で切り替える - ボタンとタグはピル型にする - 大きな白いカードは上側の角を大きく丸める - 星・ハート・花・波線のパーツを境界のあたりに散らす ## Components - **主ボタン**（`button-primary`）: 青紫のピル型ボタン。白い英字か日本語に右向きの矢印を添える - **ナビボタン**（`nav-chip`）: 薄紫の塗りに青紫の枠線と白文字を乗せた角丸ボタン。言語切替や TOP 用 - **ハート型メニュー**（`heart-menu`）: 右上に置くハート形のハンバーガーボタン - **筆記体見出し**（`section-title-script`）: ステッカー風の欧文筆記体ロゴ。下に黄色い波線マーカーを引く場合もある - **放送情報の帯**（`info-band`）: ピンクの帯に白文字で媒体を書き、その下にピンクの太字で時間を書く - **ニュースカード**（`news-card`）: 白い角丸カードに、ピンクの日付、ピル型タグ、青紫のタイトル、グレーの矢印を並べる - **役職ラベル**（`role-label`）: 黄色の帯に小さな文字を乗せ、その下に字間の広い名前を置く - **点線で挟む小見出し**（`subhead-dotted`）: ピンクの点線 2 本の間に、細い筆記体のピンク見出しを置く - **キャラ名ピル**（`name-pill`）: 本文中に入れるピンクや水色のピル。名前と矢印を入れる - **英字ループ帯**（`marquee-band`）: 水色の地に、白縁の英字が横に流れる帯 ## Do's and Don'ts **Do** - セクションごとにパステルの地の色を切り替える - 方眼グリッドとドット柄を地紋として薄く敷く - 星・ハート・波線の小物を左右の余白に散らす - 文字はすべて青紫系にして、甘くなりすぎないようにする - マスコットのイラストをカードの縁に乗せて遊びを出す **Don't** - 真っ黒の本文やビビッドな原色をパステルの地に使わない - 角張ったボタンや細い明朝体を使わない - 装飾のない白一色の背景を長く続けない - 濃紺はフッター以外で使わない - 影を重くしてリアルな立体感を出さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（言語切替とナビゲーション）: 左に言語チップ、中央に TOP などのボタン、右にハート型メニューを置く 2. **ファーストビュー**（作品のキービジュアルと放送情報を伝える）: SNS 投稿風の枠にキービジュアルを入れ、下にロゴ、放送日、ピンクの帯の放送枠情報、バナーを並べる 3. **作品紹介**（あらすじと受賞歴）: 方眼の地に筆記体見出しを置き、中央揃えの青紫の本文を続ける。キャラ名はピルにする。キャラ画像は波形で切り抜く 4. **動画**（PV やオープニング映像の視聴）: 濃色の帯の上で動画サムネイルを左右に送るカルーセルにし、矢印ボタンを付ける 5. **英字ループ帯**（区切りと装飾）: 水色の地に英字を流し、上下をレース状の縁で区切る 6. **ニュース**（最新情報）: ラベンダーの地に白いニュースカードを 4 件並べ、下に MORE ボタンを置く 7. **スタッフ・キャスト**（制作陣と声優の紹介）: 黄色の方眼の地に大きな白いカードを置く。点線の小見出しで区切り、役職ラベルと名前を並べる 8. **主題歌**（楽曲の情報）: スタッフと同じカード内で、ラベルの下に曲名とクレジットを書く 9. **原作コミックス**（原作の購入を促す）: ミントの地に花を散らし、書影を 2 列で並べて、下に購入ボタンを置く 10. **フッター**（SNS への誘導と関連バナー）: 濃紺の地にネオンの星、ロゴ、FOLLOW ボタン、バナー 3 枚、コピーライトを並べる ## Imagery - セル画風アニメのキャラクターを明るい光の中で描いた素材を使う - マスコットの動物は線が太めのゆるいイラストにし、余白に置く - 星・ハート・花・ジグザグ線は白縁付きのステッカー風パステルで描く - 背景はノートのような方眼に、ドットの菱形パターンを重ねる - キャラクターの顔のアップは波形の枠で切り抜く - 書影やバナーは原色多めの派手な色にして、パステルの地とのコントラストを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを 2 カラムにし、左にロゴと放送情報、右にキービジュアルを置く - PC の作品紹介は雲形の白い枠に本文を入れ、キャラ画像を左右に配置する - PC のスタッフ一覧は 3 列グリッドにする - PC のコミックスは 4 列×2 段にする - PC のフッターはバナーを横 3 枚に並べる - 青紫の外枠は SP と PC で共通にする ## 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-1ec4953c`（元 LP の URL から採番） - **元 LP**: https://sh-anime.shochiku.co.jp/seihantai_anime/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（2/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。