DESIGN.md — 桜色×水色グラデのアニメ公式 LP（Pastel Pink Blue Gradient Anime Official Site）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級
• キーワード: パステルグラデーション・桜の花シルエット・光のボケ・細身の欧文見出し・ピンクと青の対・大きな余白
• 地の質感: ピンク・ラベンダー・水色が溶け合うぼかしグラデーション地に、薄い花の影と白い光の粒を重ねた透明感のある質感
• 形: 小〜中の角丸カード、白縁の半透明フレーム、円形の再生ボタン
• 温度感: ふんわり甘い暖色寄りに、水色でさわやかさを足した中間の温度

Colors

• 地は白〜淡ピンク〜水色のぼかしグラデーションで、セクションごとに色の帯を切り替えない
• ピンクと青を対で使う。ヒロイン側の語はピンク、相手側は青にする
• 欧文見出しは常にピンクの細い線。日本語ラベルは濃いグレーで小さく
• 主 CTA はピンク塗り＋白文字、もう一方の外部リンクは青塗り
• 本文はグレーブラウンで、真っ黒は使わない
• 数字実績はピンクの太字で大きくし、単位を小さく添える
• button-primary は文字 #FFFEFF × 背景 #FE63A2 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E8015F、4.54:1）を使う。
• button-sns は文字 #FFFEFF × 背景 #528CFD のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#226CFC、4.52:1）を使う。

Typography

• 見出しは細い欧文セリフ＋花アイコン＋小さな日本語ラベルの 2 段セットにする
• 縦長の区切りでは欧文見出しを縦書きに回転して左端に置く
• 本文は中央揃え・行間 2.0・字間広めで詩のように改行する
• 物語の鍵になる語だけ大きく色付けし、ふりがなを括弧で添える
• 人名は大きく、役職は小さく上に置いて差をはっきりさせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スタッフ一覧は 2 列、キャラアイコンは 5 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 110px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは左揃え、導入本文は中央揃え
• ニュースは横スクロールのカルーセルで次のカードを端から少し見せる
• 人名は 2 列グリッドで縦の間隔を広く取る
• フッターは白い角丸パネルにロゴとナビ 2 列をまとめる

Elevation & Depth

• カードとボタンは淡いピンク〜紫系のぼかし影
• 動画枠は白い細縁＋半透明の二重フレーム
• フッターパネルは白地に薄いアウトライン
• キャラ立ち絵には落ち影を付けない

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: キービジュアルは全幅、下端を白へフェード。キャラアイコンは角丸の正方形、書影は少し傾けて重ねる
• セクション境界: 直線の境目は作らず、グラデーションと花の影で自然につなげる
• 主ボタンは角丸小さめの長方形で白い細縁を付ける
• 問い合わせ・SNS ボタンは白のピル型・円形
• 再生ボタンは細い円の線に小さな点を添える

Components

• 欧文見出し＋花ラベル（section-heading）: ピンクの細い欧文大見出しの下に、花アイコン付きの小さな日本語ラベル
• 主 CTA ボタン（button-primary）: ピンク塗りに白文字。右端に白い丸と矢印、白い細縁と影
• SNS ボタン（button-sns）: 青またはピンクの塗りに細かいドット柄と花のシルエット。ロゴ付きの欧文文字
• ニュースカード（news-card）: 上に告知画像、下に花アイコン付きのピンクの日付とタイトル
• 動画サムネ枠（movie-frame）: 暗めの場面写真に半透明のヴェール、欧文と円形の再生ボタン
• キャラ切替アイコン（chara-thumb）: ピンク〜水色グラデ地の角丸正方形に顔のアップ
• クレジット項目（credit-item）: 小さな役職名と大きな人名の 2 段。コメントの吹き出しアイコンを添える
• 白ピルボタン（button-ghost）: 問い合わせ用の白いピルボタンと影

Do's and Don'ts

Do - 地全体を淡いピンクと水色のグラデーションでつなぐ - 見出しごとに花アイコンを小さく添える - 本文は中央揃えにして余白をたっぷり取る - ピンクと青を対で使う - ボタンには淡い色付きの影を付ける

Don't - 濃い原色や黒の面を背景に使わない - 太くて重いゴシックを見出しに使わない - セクションを色帯でくっきり区切らない - 本文を左揃えで詰めて組まない - 強調色を3色以上増やさない

Page Structure

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

1. ファーストビュー（作品の世界観と配信中の告知）: 全幅のキービジュアルに手書き風ロゴ。左端に縦書きの告知、右上に円形のメニュー
2. 動画（PV への誘導）: 角丸の白縁フレームに場面写真と円形再生ボタン
3. お知らせ（最新情報を伝える）: 欧文見出しと右側の More リンク、横スクロールの白カード
4. 導入・あらすじ（物語の設定を伝える）: 中央揃えのキャッチと詩のような本文。鍵語をピンクと青で色分け
5. 登場人物（キャラクター紹介）: 縦書き欧文見出し、立ち絵、名前・声優・紹介文、角丸アイコンで切り替え
6. スタッフ・キャスト（制作陣と声優の紹介）: Staff と Cast の小見出しの下に役職と人名を 2 列で並べる
7. 公式アカウント（SNS への誘導）: 青とピンクのボタンを縦に並べる
8. 原作紹介（原作の実績と試し読みへの誘導）: 書影を傾けて重ね、ピンクの大きな数字と主 CTA を置く
9. フッター（サイト内のナビゲーション）: 白い角丸パネルにロゴ、欧文ナビ 2 列、SNS の丸ボタン、問い合わせ、著作権表記

Imagery

• 明るい昼の光で彩度高めに塗ったアニメのキービジュアル
• キャラの立ち絵は白抜きで全身、影は付けない
• 背景に桜や小花の淡いシルエットを薄く散らす
• 白い光のボケと花びらを所々に浮かべる
• 動画サムネは半透明のラベンダーのヴェールで沈める
• ロゴは手書き風でピンクと水色の2色
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを中央の角丸枠に収め、左右はグラデーション地と装飾文字にする
• PC のニュースは 3 枚並べる
• PC の見出しは欧文と日本語ラベルを横並びにする
• PC の登場人物は立ち絵を左、紹介文とアイコンを右の 2 カラムにする
• PC のスタッフは 4 列、SNS ボタンは見出しの横に並べる
• PC のフッターはロゴを左、ナビを右に横並びにする

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