DESIGN.md — 深紫×水色のアニメコラボ楽器 LP（Violet Night Anime Collab Instrument LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト、クール・先進的
• キーワード: 深紫グラデーション・水色の唐草装飾・明朝見出し・アニメ場面写・楽器製品写真・白×紫の交互構成
• 地の質感: 紫セクションは紫・藍・マゼンタが滲む光のにじみ。白セクションはフラットで、薄い水色の飾り罫・唐草が背景に透ける。
• 形: 四角い写真グリッド、角丸小のボタン、斜めカットの告知バナー、細線の飾り罫。
• 温度感: 夜のライブハウスのような冷たい紫と、清楚な白・水色の対比。

Colors

• 白地セクションと深紫グラデのセクションを交互に置く。
• 白地には水色の唐草・飾り文字を薄く重ねる。
• 主ボタンは紫→藍の横グラデ、暗地では白枠の透明ボタン。
• 水色は告知帯や装飾のみ、本文には使わない。
• 黄は SNS ハッシュタグ帯など極小面積の差し色。
• 黒ラベル＋水色帯で期間などの日付を強調。

Typography

• 見出しは明朝、本文は細めのゴシックで字間を広く。
• 本文は中央揃えが基本、製品説明は左揃え。
• 日付は欧文セリフの大数字＋小さい曜日英字。
• キャラ名は明朝の和名＋欧文セリフのローマ字を下に。
• 本文サイズは小さめで行間を広く取る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真グリッドは余白なしで全幅に敷き詰める。
• セクションは上下 60〜70px の余白。
• ボタンは幅 85〜90% の横長。
• バナー群は 2 列で 8px 間隔。
• キャラ立ち絵は余白に重ねて大胆に配置。

Elevation & Depth

• 影はほぼ使わず、フラットに重ねる。
• 奥行きは紫背景の光のにじみで表現。
• キャラ・資料画像は重ね置きで立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。キャラは切り抜きで背景にはみ出させる。
• セクション境界: 直線で切り替え。告知バナーは斜めカットの帯を使う。
• ボタンは角丸 4〜6px の長方形。
• 飾り罫は細線の唐草で対称に。
• ラベルは角なしの矩形帯。

Components

• 紫グラデ主ボタン（button-primary）: 紫→藍の横グラデ、白文字、右端に＋か＞。
• 暗地の白枠ボタン（button-outline-dark）: 透明地に白 1px 枠、白文字＋＞。
• 応募期間帯（period-badge）: 左が黒地に白明朝ラベル、右が水色地に大きなセリフ数字の日付。
• コラボ表記帯（collab-header）: 深紫地に作品ロゴ×ブランドロゴを白で並べ、下に小さな応援文。
• 唐草付き見出し（ornament-heading）: 白地の明朝見出しの背後に水色の大きな筆記体飾りを透かす。
• キャラプロフィール（character-profile）: 淡水色地に顔アップと立ち絵、明朝の名前＋ローマ字＋短い紹介。
• ハッシュタグ帯（hashtag-tape）: 斜めに貼った黄色テープに黒文字のタグ。
• 関連バナー群（banner-grid）: 暗紫地に横長バナーを 2 列で並べる。

Do's and Don'ts

Do - 白と深紫のセクションを交互に置く。 - 見出しは明朝で上品に、大きく。 - アニメ場面写と製品写真を同じ比重で並べる。 - 日付は大きなセリフ数字で目立たせる。 - 白地に水色の唐草装飾を薄く透かす。

Don't - ポップな丸ゴシックや原色の多用はしない。 - ボタンをピル型にしない。 - 写真に角丸や影を付けない。 - 本文に水色や黄を使わない。 - 紫セクションを単色ベタにしない（光のにじみを入れる）。

Page Structure

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

1. ファーストビュー（キャラの迫力で引き込む）: 演奏中キャラ 4 人の縦長カットを横に 4 分割で並べる。
2. コラボ表記（作品とブランドの関係を示す）: 深紫帯に両ロゴを×で並べ、応援文を小さく添える。
3. 作中使用モデル紹介（作中で製品が使われていることを示す）: 白地に唐草、明朝の大見出し＋場面写 2 列×3 段。
4. キャラクター紹介（演奏者キャラへの親近感）: 淡水色地に顔アップと立ち絵、名前とプロフィール。
5. 製品紹介（製品の特長とラインナップ）: 暗紫グラデ地に欧文見出し、製品写真、シリーズ説明、動画、白枠ボタン。
6. キャンペーン（SNS 参加型プレゼントへの誘導）: 白地に明朝見出し、応募期間帯、注意書き、紫グラデボタン。
7. キャンペーンビジュアル（告知の印象付け）: 水色地にキャラと製品を斜めカットで合成、黄テープと日付。
8. 関連企画（配布物や関連コンテンツへの回遊）: 深紫地にロゴ風見出し、立ち絵と冊子を重ね置き、バナー 2 列。
9. 作品紹介（作品の世界観を伝える）: 白地にロゴ、メインビジュアル、あらすじ中央揃え、紫ボタン。
10. フッター（権利表記）: 小さな中央揃えの注釈。

Imagery

• アニメの場面写はライブ中の暗い照明で、紫・赤の光が当たったカット。
• 製品は黒い筐体を真俯瞰〜斜めで白抜きか暗背景に置く。
• キャラ立ち絵は全身の切り抜きを背景に重ねる。
• 水色の筆記体・唐草を大きく薄く背景に敷く。
• 紫背景は紫・藍・マゼンタが流れる光のにじみ。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約 70% の中央寄せ。
• FV は 4 分割写真の中央にコラボ表記の紫パネルを入れる。
• 場面写グリッドは PC で 3 列×2 段。
• キャラ紹介と製品説明は PC で左右 2 カラム。
• 関連バナーは PC で 3 列。

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