DESIGN.md — 青・赤・黄のトリコロール音楽映画 LP（Tricolor Marching Band Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: トリコロール・音符モチーフ・かすれ欧文見出し・セクション色替え・映画スチル・祝祭感
• 地の質感: 見出しにインクかすれ・版ズレ風の質感。地はフラットな単色塗りで、写真は全幅で大胆に使う。
• 形: 音符・トロンボーン・指揮棒のシルエットを大きく斜めに配置。人物写真は角丸スクエアと正円で切り抜く。
• 温度感: 暖かく明るい。黄と赤で陽気さを、濃い青と黒で品位を出す。

Colors

• セクションごとに地色を白→黄→黒→青→ミント→赤と大きく切り替える。
• 黄・ミント地の本文と見出しは濃い青、キャッチは赤で書く。
• 英字の章見出しは1文字ごとに青と赤を塗り分ける（青地では黄と赤）。
• 黒地では星と引用文をゴールド黄にし、白は少なめにする。
• 赤は購入ボタン・タブ枠・音符・締めのフッター面に限る。
• 音符は地色に応じて白・赤・青を使い分ける。

Typography

• 英字の章見出しは縦長のコンデンス体を大きく使い、下に小さな日本語ラベルを添える。
• 本文は小さめの太ゴシックにして密度を出す。
• リードは中央揃えで、数行ごとに改行して見せる。
• 人物名の欧文表記は字間を広めにし、ゴールドで添える。
• レビューの引用は大小をつけ、左右に交互に配置する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。星評価は 2 列、場面写真は 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 各章の頭は全幅の写真に白い音符を散らし、英字見出しを重ねる。
• 写真の下に単色地の本文ブロックを置く流れを繰り返す。
• 本文は左右16px程度の余白で詰めて組む。
• 場面写真は3枚を隙間なく横に並べた帯にする。
• 上へ戻るボタンを右下に固定する。

Elevation & Depth

• 影はほぼ使わず、フラットな面で構成する。
• 購入ウィジェットは白カードに薄いグレーの枠線を付ける。
• 上へ戻るボタンは黒い円で、地からわずかに浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は角丸の大きいスクエア、場面写真は正円。章の頭の写真は全幅の長方形。
• セクション境界: 直線で地色を切り替える。境界に音符や楽器の小物を重ねてまたがせる。
• 楽器や指揮棒のシルエットは斜めに大きく置き、画面外へはみ出させる。
• 正円の写真3つは高さを少しずつずらして並べる。
• タブとラベルは角の立った四角に枠線を付ける。

Components

• トリコロール英字見出し（section-title-tricolor）: かすれ質感の縦長欧文を1文字ずつ青と赤で塗り分け、下に日本語の小ラベルを置く
• チケット購入ボタン（button-primary）: 赤一色の角丸ボタン。ロゴ風の白文字と小さな手続き文を2段で組む
• サブリンクボタン（button-sub）: グレー面の角丸ボタン。黒文字で外部紹介ページへ誘導する
• 動画切替タブ（video-tab）: 赤枠に赤文字の四角タブ。再生秒数を小さく添え、選択中は赤い面に白文字
• 星評価ブロック（review-stars）: 黒地にゴールドの星を並べ、下に細い線と欧文セリフの媒体名を置く。2列×3段
• 人物プロフィール（profile-card）: 中央に角丸の写真、役職、和名、ゴールドの欧文名、白の本文を縦に積む
• コメント署名ラベル（comment-name-label）: 青い帯の上にダッシュ付きの白文字で氏名と肩書きを書く
• 小見出し枠ラベル（outline-label）: 白い細枠で囲んだ短い小見出し。青地の中で区切りに使う
• 上へ戻るボタン（scroll-top）: 黒い円に白い山形矢印。右端に固定する

Do's and Don'ts

Do - 地色は章ごとに黄・黒・青・ミント・赤とはっきり切り替える。 - 英字の章見出しは赤青で塗り分け、かすれ質感を付ける。 - 音符や楽器のシルエットを各セクションの角に散らす。 - 本文は濃い青の太ゴシックで、詰め気味に組む。 - 人物写真は角丸スクエアか正円で切り抜く。 - 黒地の評価欄はゴールドと欧文セリフで品よくまとめる。

Don't - グラデーションや強いドロップシャドウを使わない。 - パステルや彩度の低い色を主役にしない。 - 見出しをクセのない細いゴシックだけで済ませない。 - 装飾の音符を等間隔に整列させない。 - 赤をすべての強調に使わず、キャッチと CTA に絞る。 - 写真を小さく枠に収めず、章頭では全幅で見せる。

Page Structure

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

1. ファーストビュー（作品の世界観と受賞・動員実績を一目で伝える）: 全幅のメインビジュアルに筆致のタイトル、色付き欧文の散らし文字、円形の実績バッジを重ねる
2. 作品概要・公開情報（あらすじの要点、クレジット、公開日を伝える）: 白地に赤帯・青帯の白抜きコピー、太字の赤青キャッチ、枠付きの選定表示、小さなクレジット、セリフ体の大きな日付
3. チケット購入（前売券の購入へ誘導する）: 枠線付きの白カードに枚数選択、合計金額、赤の購入ボタン、グレーのサブボタンを置く
4. 予告動画・音楽（映像と音楽で作品を体験させる）: 全幅の動画、赤枠タブの切替、濃紺の音楽プレーヤー埋め込み
5. イントロダクション（作品の評判と見どころを伝える）: 全幅写真に白い音符と英字見出し。黄地に赤の中央揃えリードと青の本文、白いトロンボーンのシルエット
6. ストーリー（物語の導入を伝える）: 場面写真3枚の帯、全幅写真に見出し、黄地に青のリード、本文、正円の場面写真3つ
7. レビュー（海外メディアの評価で信頼を得る）: 黒地にゴールドの星評価を2列で並べ、大小の引用文を左右に振る。下にオーケストラの全幅写真
8. プロフィール（監督・キャストを紹介する）: 濃い青地に角丸の人物写真、白の名前、ゴールドの欧文名、白本文。赤い楽器を大きく斜めに置く
9. 著名人コメント（共感と期待を高める）: ミント地に青文字のコメントを積み、青帯の署名ラベルを付ける
10. エンディング・フッター（余韻を残してタイトルを再提示する）: 全幅の笑顔の写真から赤地へ。青い楽器シルエット、英字タイトル、白いロゴ、SNSアイコン

Imagery

• 人物が笑い合う明るい自然光のスチルを全幅で使う。
• 楽団や演奏シーンの集合写真で音楽の広がりを見せる。
• 音符・トロンボーン・指揮棒は単色のベタ塗りシルエットで描く。
• 英字見出しには擦れたインク・版ズレの質感を付ける。
• 小さな切り抜き写真（人物や犬、車など）を見出し脇に添えて遊びを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横一列のグローバルナビを固定する。
• PC の FV では購入ウィジェットを横長1行にまとめる。
• PC のレビューは星評価と引用を左右2カラムに並べる。
• PC のプロフィールは写真を左、本文を右に置き、キャストは2カラムにする。
• PC のコメントは2カラムのグリッドにする。
• 音符や楽器の装飾は 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 行書くと起動時に読み込まれる。