DESIGN.md — 黒×蛍光ライム×紫グラデのアクションアニメLP（Neon Lime Dark Action Anime LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的、ポップ・元気
• キーワード: ダーク・蛍光ライム・紫グラデ・ブラシストローク・ウィンドウUI・極太コンデンス
• 地の質感: 暗い地に、筆で擦ったような荒い境界とグランジ調の背景写真を重ねる
• 形: 四角いウィンドウ風カード、ピル型ボタン、斜めに流れる帯
• 温度感: 暗くて冷たい地に、ネオン色で熱量を足す

Colors

• 地は黒か濃紺。明るい色の面はイントロの紫→マゼンタの縦グラデ 1 か所だけにする
• 見出し・ロゴ・日付ラベル・再生アイコンは蛍光ライムで統一する
• 強調したい語はマゼンタ文字にし、白文字の行は黒い帯に乗せる
• ウィンドウ風カードの枠はライム・オレンジ・ブルーで色分けする
• ボタンはライトグレーのピル型にし、右端にライムの丸い矢印を付ける

Typography

• セクション見出しは英字の大文字だけで、極太のコンデンス書体を使う
• 日本語の見出しは白文字を黒い帯に乗せ、1 行ずつ帯を切る
• 本文は小さめにし、左揃えで短く改行する
• ボタンとナビは英字の大文字で、太いサンセリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コミックスの書影は横スクロール
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• FV はキービジュアル 1 枚を全幅で縦長に見せる
• ニュースは日付とラベルを左、タイトルを右に並べた 1 行ずつのリスト
• ウィンドウ風カードは少しずつずらして重ね、斜めの帯の上に散らす
• ボタンは中央か右下に置く

Elevation & Depth

• 影はほぼ使わず、ウィンドウ同士の重なりで奥行きを出す
• カードには 2〜3px の太い色付きの枠を付ける
• 背景写真は暗く落とし、その上に文字を直接置く

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: キービジュアルと動画は全幅の四角。書影は四角のまま並べる
• セクション境界: 筆で擦ったようなギザギザのブラシストローク境界
• カードは角丸なしの四角いウィンドウにし、上部にタイトルバーと丸い 3 つのボタンを付ける
• ウィンドウの見出しバーは端を斜めにカットする
• ボタンだけを完全なピル型にする

Components

• 矢印付きピル型ボタン（button-pill）: ライトグレーのピル型で、英字の大文字ラベルと右端にライムの丸い矢印を置く。暗い地では黒地に白枠のものも使う
• ハンバーガーメニュー（menu-button）: 右上に固定する、ライムの正方形に黒い 3 本線のボタン
• 英字見出し（section-title）: 極太コンデンスの大文字を中央に置く。ニュースだけはライムで左揃え
• ニュース行（news-item）: 日付とライムの小さなラベルの横にタイトルを置き、下に細い区切り線を引く
• 黒帯テキスト（highlight-band）: 紫グラデの上に白文字を黒い帯で乗せ、強調語だけマゼンタにする
• ウィンドウ風カード（window-card）: OS のウィンドウを模したカード。タイトルバー付きで、ライム・オレンジ・ブルーの枠と半透明〜グラデの中身
• 動画再生ボタン（play-button）: ライムの円の中に三角形を置き、下に英字ラベルを添える
• 斜めのロゴ帯（diagonal-band）: ブルー地にロゴを繰り返し並べたテープ状の帯を斜めに流す

Do's and Don'ts

Do - 見出しとアイコンのアクセントは蛍光ライムに絞る - セクションの境目はブラシストロークで荒く切る - カードはウィンドウ UI 風にして、少しずつずらして重ねる - 英字見出しは大文字の極太コンデンス書体にする

Don't - 白やパステルの明るい地を広く使わない - カードを大きな角丸や柔らかい影で作らない - ライムを本文の長い文章に使わない - 細い明朝体や丸ゴシックを使わない

Page Structure

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

1. ヘッダー（言語の切り替えとメニュー）: 黒地の左に縦並びの言語タブ、右にライムのメニューボタン
2. ファーストビュー（作品の世界観と告知日を伝える）: 全幅のキービジュアルに縦書きキャッチ・ライムの告知日・下部の巨大ロゴを重ねる
3. ニュース（最新情報を見せる）: 黒地にライムの見出しと 5 件のリスト。中央にピル型ボタン
4. 作品紹介（あらすじと制作の背景）: 紫→マゼンタの縦グラデ地に黒帯の見出しと本文。上下はブラシ境界
5. 動画（PV へ誘導する）: 全幅の静止画にライムの再生ボタン、右下にピル型ボタン
6. ファンクラブ（コミュニティへの参加を促す）: 斜めのロゴ帯の上に、説明・できること・参加手順のウィンドウカードを重ねる
7. 原作紹介（原作の購入へ誘導する）: 暗い廃墟の写真を背景に、中央の見出し・ボタン 2 つ・書影の横並び
8. フッター（公式 SNS とナビ）: ライムのロゴ、SNS アイコン、英字ナビ 2 列、最下部にコピーライト

Imagery

• 紫・赤・青のネオン光が入った、暗くドラマチックなアニメ調のキービジュアル
• 背景は夜の廃墟や荒れた街並みの写真を暗く落とし、グランジな質感にする
• インクが飛び散ったような、筆で擦ったような装飾
• ロゴを繰り返し並べたテープ状の斜めの帯
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を横長にし、キャッチを左、告知日を右に振り分ける
• PC の作品紹介は本文を 2 カラムにする
• PC のウィンドウカードは横に広げて散らす
• 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 行書くと起動時に読み込まれる。