DESIGN.md — パステル虹色の魔法学園アニメ公式 LP（Pastel Magical Anime Official Site）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気
• キーワード: パステル虹色・水彩ぼかし・きらめき・魔法学園・絵本モチーフ
• 地の質感: 水彩のにじみ、網点のハーフトーン、手描きの線画イラストを重ねた柔らかい紙の質感
• 形: 細い枠線のピル型ボタン、円形のアイコン、開いた本の枠、薄い影のついた紙カード
• 温度感: 明るく甘い、ふんわりと暖かい空気感

Colors

• 地は白を基本にする。セクションの裏にピンク・水色・紫の水彩ぼかしを薄く敷く
• 見出しの欧文はピンク→水色→紫のパステルグラデーションで塗る
• 本文はグレーにし、固有名詞などの強調だけをピンクか紫にする
• 日付や CV 表記などの補助情報は水色にする
• ページ下に向かうほど地色を白から淡い青紫へ移す
• 濃い色は本の表紙の赤とアイコンだけに絞る。全体の彩度は低く保つ
• button-more は文字 #C8B1DE × 背景 #FEFEFE のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#8F60BC、4.56:1）を使う。
• lang-tabs は文字 #B07CE8 × 背景 #FEF3FD のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#924ADF、4.56:1）を使う。

Typography

• セクション見出しは英大文字の細い書体にし、中央に大きく置く
• 和文は細めの丸ゴシックで統一し、柔らかさを出す
• あらすじは中央揃えで、短い行を積み重ねて詩のように組む
• 人名リストは小さい役職ラベルと大きめの名前の対比で組む
• 太字は締めのコピーとロゴだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャスト・スタッフ一覧は 2 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• すべてのセクションを中央揃えにする
• 見出しの周りにきらめき装飾と小さな丸を散らす
• モチーフのイラストを見出しの左右にはみ出させて配置する
• セクションの境界は背景の水彩やグラデーションで溶かし、区切り線は使わない

Elevation & Depth

• 基本はフラットにする
• 説明カードは白い紙に薄いドロップシャドウを付け、ふわっと浮かせる
• 動画サムネイルは淡いピンクの細枠で囲む

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: キャラクターのアイコンは円形に切り抜き、パステルの縁取りを付ける。立ち絵は透過で切り抜く
• セクション境界: 水彩のにじみ、ハーフトーンの網点、グラデーションでなめらかにつなぐ
• ボタンは白地に細い紫枠のピル型にし、右に三角を付ける
• 角ばった太い枠線は使わない
• 装飾の星・十字のきらめきは線画で描く

Components

• more ピルボタン（button-more）: 白地に薄紫の細い枠線。小文字の欧文と右向き三角を中央に置く
• グラデーション欧文見出し（section-title）: 細い英大文字をピンク・水色・紫で塗り、周りにきらめきを散らす
• 言語切替タブ（lang-tabs）: ピル型のボタンを 3 つ並べる。選択中は淡いピンクで塗る
• 開いた本型キャラクターカード（character-book）: 赤い表紙と生成りのページ。左に立ち絵、右に名前・CV・紹介文を置く
• 円形キャラクター切替（character-icons）: 円形のアイコンを 3 つ並べる。選択中はピンクで縁取る
• キャスト・スタッフ一覧（credit-list）: 小さい役職ラベルと名前を 2 カラムで並べ、ピンクの吹き出しアイコンを添える
• ニュース行（news-item）: 水色の日付の下に下線付きのタイトルを置く
• 紙カード説明ブロック（paper-card）: 白い紙に影を付け、動物のイラストを縁に腰掛けさせる
• キャンペーンバナー（banner-card）: 横長の画像バナーを縦に並べる。左上に赤いラベルを付ける

Do's and Don'ts

Do - パステルのピンク・水色・紫を中心にする - 見出しのまわりにきらめきや小さな丸を散らす - 作品世界の小物イラストを余白に添える - 本文は中央揃えで短い行に区切る - ボタンは細枠のピル型で控えめにする

Don't - 黒や濃紺のベタ面を使わない - 太いゴシックで見出しを組まない - 原色の CTA ボタンを置かない - 直線の区切り線で境界を硬く分けない - 写真素材を使わない（イラストで統一する）

Page Structure

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

1. ファーストビュー（キービジュアルで作品の世界観を伝える）: 全幅のイラストに縦書きのキャッチを重ねる。下部は白へフェードさせ、虹色のロゴと放送情報を中央に置く
2. 動画（予告映像へ誘導する）: 欧文の見出しを置き、細枠のサムネイルの中央に再生アイコンを重ねる。下に more ボタン
3. ニュース（最新情報を伝える）: ピンクの網点の円形背景に、日付とタイトルの行を 3 件並べる。左右に小物イラストを置く
4. 作品紹介（あらすじで興味を引く）: 言語切替タブの下に、中央揃えの詩的な本文を置く。強調語は色文字にし、紫の太字コピーで締める
5. キャラクター（登場人物を紹介する）: 円形のアイコンで切り替える。開いた本の左に立ち絵、右に紹介文を置く。背景に水彩のにじみ
6. キャスト（声優を一覧で見せる）: 2 カラムで役名と名前を並べ、吹き出しアイコンを付ける
7. スタッフ（制作陣を見せる）: 役職ラベルと名前を 2 カラムで並べ、一部は中央 1 行にする
8. 企画説明（企画の背景を説明する）: 影付きの白い紙カードに中央揃えの本文を置き、動物のイラストを添える
9. リンク・バナー（SNS とキャンペーンへ誘導する）: SNS アイコンを横一列に並べ、その下にバナーを縦に並べる。地は青紫のグラデーション
10. フッター（権利表記）: 背景に風景イラストを置き、ラベンダーの帯に白の小さな文字を載せる

Imagery

• 柔らかい線と淡い彩色のアニメ調キャラクターイラストを使う
• 杖・本・ペンなど魔法の小物を斜めに配置する
• フクロウ・カエルなどの動物を線画風に描き、余白に添える
• 星や十字のきらめきをピンク・黄色・水色の線画で散らす
• 水彩のにじみとハーフトーンの網点を背景テクスチャにする
• 最下部はパステル調の街並みの風景画で締める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長にし、ロゴを右側に重ねる
• PC はバナーを FV 直下に 2 列で並べる
• PC は本文幅を約 60% に絞り、中央に寄せる
• 本型カードは PC で見開きを横長に広げる
• スタッフ一覧は PC でも 2 カラムを保ち、余白を広げる

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