DESIGN.md — 水色×桃色の虹彩グラデ アニメゲーム特設 LP（Pastel Iridescent Anime Stage LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、クール・先進的
• キーワード: パステル虹彩グラデ・舞う花びら・細い欧文ディスプレイ・明朝の物語文・舞台・幕開け・章立て
• 地の質感: 光がにじむ柔らかいグラデーションとボケ玉。斜めの細いストライプ線を少し重ねる
• 形: 四角い面が基本。楕円の細線フレーム、ピル型の線枠、花型のラインアイコンをアクセントにする
• 温度感: 明るく暖かい春の光。中盤だけ夜の舞台のような青紫で落ち着かせる

Colors

• 地は空色→白→ピンク→桃色へ縦に流れるグラデーションでつなぎ、ベタ塗りの境界は作らない
• ブランドのピンクはロゴ・英字見出し・締めの一文だけに使う
• 物語文は白っぽい地に墨色の明朝で書き、読みやすさを保つ
• 章セクションだけ紺→青紫のグラデにし、文字とアイコンは白にする
• 黄・水色・ピンクの花びらを点で散らし、色を少しずつ足す
• 濃い赤はセクション境界の細い帯だけにとどめる

Typography

• 英字は細めのジオメトリック体で大きく組み、行間を詰める
• 日本語の物語文は明朝にし、短い行で改行して余白を多くとる
• 英字の大見出しは画面幅より大きくして、端で切れる見せ方を許す
• キャッチはロゴの左右に縦書きで置く
• 小さな英文リードは中央揃えの3行程度にして装飾として使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。本文は左揃え、ロゴまわりは中央揃え
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの頭に『作品名 / セクション名 / Scroll down ↓』の細いパンくず行を置く
• 大見出しの下に細い横線を引き、セクションを始める
• 物語文は段落ごとに 1 行分の空きを入れる
• 章セクションは右上に章番号、中央にロゴ、下に花アイコンを 4×2 で並べる
• 花の装飾は画面の端に寄せ、本文に重ねない

Elevation & Depth

• 影は基本的に使わず、グラデーションと光のボケで奥行きを出す
• サムネイル画像は影なしのフラットな矩形で並べる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの横長矩形。キービジュアルは全幅で下端を白へフェードさせる
• セクション境界: グラデーションで溶かしてつなぐ。章の切り替わりは細い横線と色帯で示す
• 日付や番号は細線の楕円・円に入れて横に連ねる
• ロゴの周りに細線の楕円フレームを斜めに重ねる
• アイコンは花をかたどった白い線画にする

Components

• セクションのパンくず（breadcrumb-label）: 『作品名 / セクション名 / Scroll down ↓』を細い欧文で 1 行に並べ、上下を細線で挟む
• 日付のピル連結（date-pill-group）: 細線の楕円に 2 桁の数字を入れ、3 つ重ねて横に並べる
• 英字のセクション名（section-title-outline）: 極細の英字を画面幅いっぱいに置き、下辺を横線で切る
• 章番号（chapter-number）: 小さな CHAPTER ラベルの下に極細の大きい数字を右寄せで置く
• 花アイコン群（flower-icon-grid）: 白い線画の花アイコン 8 種を 4×2 で並べる
• 締めのピンク一文（climax-copy）: 物語の最後に置くピンクの太字ゴシック 3 行
• 楕円の線枠バッジ（oval-badge）: 斜めの細線楕円の中に団体名やスローガンを小さく入れる
• 過去章サムネ列（thumbnail-row）: 章ビジュアルの横長サムネを 3 枚横に並べる

Do's and Don'ts

Do - 地は必ずパステルの多色グラデにし、花びらを散らす - 英字は細いジオメトリック体で大胆なサイズにする - 物語文は明朝で短く改行し、余白を十分にとる - 暗い章セクションは 1 か所だけにして、メリハリをつける - 細線・楕円・小さな英文リードで、ファッション誌のような装飾をする

Don't - 太い角丸ボタンや強い影など、販促のような部品を入れない - 原色の大きなベタ面を使わない - 本文に丸ゴシックやポップ体を使わない - 花の装飾を本文の上に重ねて読みにくくしない - ピンクを本文に多用しない

Page Structure

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

1. ファーストビュー（作品の世界観と周年タイトルを伝える）: 空色の地にピンクのロゴを中央に置き、左右に縦書きのキャッチを置く。下半分に全幅のキャラクターイラストを置く
2. 情報帯（日付や団体名を装飾的に示す）: 細い英文テキストと楕円の日付ピルを横 1 列に並べた白い帯
3. イントロダクション（あらすじ）（物語の背景を読ませる）: パンくずと極細の英字見出しを置き、続けて明朝の長文を短い行で並べる。グラデの地に花びらを散らす
4. クライマックスの一文（期待感を高めて締める）: ピンクの太字ゴシック 3 行を置き、下へ桃色のグラデを濃くしていく
5. 章ビジュアル（最新章のタイトルを印象づける）: 紺から青紫へのグラデにボケ玉と斜線を重ねる。セリフ、章番号、白いロゴ、英文リード、花アイコンの順に置く
6. ムービー・タイトル（周年メッセージと過去章の振り返り）: 白〜淡いピンクの地に巨大な黒い英字ロゴと楕円バッジを置く。側面に縦書きの英字を置き、下にサムネを並べる
7. ループ（ファーストビュー再掲）（冒頭へ戻る余韻をつくる）: 情報帯とファーストビューをもう一度置き、イラストの下端を白へフェードさせて終える

Imagery

• 水彩のような柔らかいアニメ調キャラ集合イラスト。パステルの光を逆光ぎみに当てる
• ひまわり・桜・水仙などの花を水彩タッチで描き、画面の端に置く
• 花びらはピンク・黄・青紫の小片にして、回転させて散らす
• 暗いセクションは大きなボケ玉と斜めの細線ストライプで夜の舞台を表す
• 風船・旗飾り・劇場のアーチなど、お祭りの舞台小物を描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長の全幅にし、ロゴを上部中央に小さめに置く
• PC のあらすじは縦書きの明朝で中央に組む
• PC は左右の端に巨大な縦書き英字を置き、画面からはみ出させる
• PC の章セクションはビジュアルを中央に、章番号とセリフを右の縦帯に置く
• サムネと説明文は 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 行書くと起動時に読み込まれる。