DESIGN.md — 深紅×金のインド祝祭風アニメ映画 LP（Festive Indian Crimson Anime Movie LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 深紅・金の装飾・インド祝祭・アニメビジュアル・ふりがな付き・黄色見出し
• 地の質感: 深紅の地に細かい布目のような質感。金の三角ガーランドと点線で区切る
• 形: 四角いボタンに金の枠。ナビはインドの寺院アーチ形の緑ボタン
• 温度感: 暖色中心で熱気がある。差し色に緑とクリーム

Colors

• 上半分は深紅を地色にし、金の線と三角ガーランドで区切る
• 物語パートは紫から下へローズにグラデーションさせる
• 強調セリフと締めの問いかけは黄色の太字
• ボタンは深紅に金枠。選択中だけ橙で塗る
• ナビは緑の地に黄色文字を使い、赤地と補色対比させる
• 本文は白で、暗い地の上だけに置く
• page は文字 #F0A010 × 背景 #A41214 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• ticket-button は文字 #FFFFFF × 背景 #FC5402 のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D14602、4.58:1）を使う。

Typography

• 子ども向けなので漢字にふりがなを振る
• 本文は中央揃えにし、短い行で改行する
• 見出しは金・黄色の文字に縁取りや影をつける
• ボタンの文字は太い装飾書体にする
• クレジットは小さくまとめ、中央揃えで並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。映像タブは 2 列、ナビは 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• キービジュアルは全幅で縦長に置く
• バナーは横幅 85% で縦に積む
• セクションの上下を金の三角ガーランドで挟む
• あらすじは場面写真と交互に配置する
• ナビボタンは 3 列のグリッドに並べる

Elevation & Depth

• ボタンに影はつけず、金枠で立体感を出す
• 場面写真は白フチを付け、少し傾けて影を落とす
• 見出し文字に光彩をつける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅で四角く切る。場面写真は白フチで傾ける
• セクション境界: 金の三角ガーランドと、寺院アーチ形の金縁切り抜き
• タブは直角の長方形に金の 2px 枠
• ナビはインドのアーチ形（両端が尖る）の緑バッジ
• 動画は金枠で角を少し丸める

Components

• 映像切替タブ（video-tab）: 深紅地に金枠、黄緑文字にふりがな。選択中は橙で塗る
• アーチ形ナビボタン（arch-nav-button）: 緑の地に金縁、両端が尖ったインド風の形。黄色文字
• 三角ガーランド区切り（garland-divider）: 金の直線の下に、三角形を等間隔に並べた帯
• 装飾見出し（ornament-heading）: 小さな文様ラインで上下を挟んだ金色の短い見出し
• 告知バナー（news-banner）: 写真と大きな文字を組み合わせた横長バナー。白枠付き
• SNSアイコン列（sns-icons）: 白いアイコンを 5 つ横に並べ、光彩をつける
• 強調セリフ（highlight-quote）: かぎ括弧付きのセリフを黄色の太字で大きく置く
• 前売券購入ボタン（ticket-button）: 赤と黄緑の横長ボタンを 2 つ並べる

Do's and Don'ts

Do - 深紅と金を基本に、インドの祝祭らしい装飾を重ねる - 漢字にふりがなを振り、子どもが読めるようにする - 見出しや強調には黄色・金を使う - 場面写真をたくさん使い、写真の間に文章を挟む - セクションの境目に金のガーランドを入れる

Don't - 白い地のシンプルな構成にしない - 細い明朝体を使わない - 寒色を大きな面に使わない - ボタンをピル型や角丸にしない - 長い本文を左揃えで詰めない

Page Structure

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

1. ファーストビュー（作品の世界観と公開日を伝える）: 全幅のキービジュアルに縦書きキャッチ、タイトルロゴと公開日を重ねる
2. SNS・告知バナー（最新情報へ誘導する）: 深紅地に白アイコン 5 つ、横長バナーを 3 つ縦に積む
3. クレジット・購入導線（スタッフ表記と前売券の案内）: 中央揃えの小さい文字。購入ボタンを 2 つ横に並べる
4. 映像（予告編を見せる）: ガーランドで挟み、金枠の動画とタブを 2 列で置く
5. キャッチコピー（物語のテーマを情緒的に伝える）: 全幅の場面画に、ピンクの縁取り文字で問いかけを重ねる
6. あらすじ（ストーリーを紹介する）: 紫のグラデーション地に白い本文を中央揃え。黄色のセリフと問いかけで区切る
7. 場面写真（作品の見どころを見せる）: 白フチの写真を傾けて重ね、アーチ形に切り抜いて背景画像へつなぐ
8. サイトナビ（各コンテンツへ誘導する）: 背景画像の上にタイトルロゴ、緑のアーチボタンを 3 列で置く
9. フッター（関連サイトと規約）: 深紅地にポリシーリンクと関連バナーを 3 列・2 列で並べる

Imagery

• 色の濃いアニメのセル画風キャラクターを大きく見せる
• インドの寺院・街並み・金の装飾を背景に使う
• 放射状の光や金の円形フレームで祝祭感を出す
• 場面写真に白フチを付け、ポラロイド風に傾けて重ねる
• 三角ガーランドや文様ラインを金色で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左右 2 分割にし、左にビジュアル、右にロゴ・SNS・バナーを置く
• PC の映像タブは 4 列 1 行にする
• PC のあらすじは縦書きの複数段組にする
• PC のナビは右下に 2 列で置き、背景画像を全幅にする
• PC のフッターのバナーは 1 行 5 列に並べる

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