--- version: alpha name: Tricolor Marching Band Film LP description: フランス国旗を思わせる青・赤と、明るいクリーム黄、黒の地色をセクションごとに切り替える映画公式 LP。白い音符と楽器のシルエットを全体に散らし、かすれ質感の欧文コンデンス見出しを赤青で塗り分けて、軽やかで祝祭感のある音楽ドラマの雰囲気を出す。 colors: primary: '#004EA1' accent-1: '#E70014' background-alt: '#F4E58A' tint-1: '#DDF8F1' dark-section: '#000000' background: '#FEFEFE' marker: '#F7EC9C' cta: '#C01A18' on-cta: '#FDFCFB' text: '#120D0C' on-dark: '#FEFDF7' surface: '#EAEAEA' line: '#DF1322' typography: display: fontFamily: Bebas Neue fontSize: 44px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Playfair Display fontSize: 12px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em note: fontFamily: Playfair Display fontSize: 9px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-tricolor: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px button-sub: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px video-tab: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' height: 30px review-stars: backgroundColor: '{colors.dark-section}' textColor: '{colors.marker}' typography: '{typography.note}' height: 60px profile-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 420px comment-name-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 22px outline-label: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 26px scroll-top: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — 青・赤・黄のトリコロール音楽映画 LP（Tricolor Marching Band Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: トリコロール・音符モチーフ・かすれ欧文見出し・セクション色替え・映画スチル・祝祭感 - **地の質感**: 見出しにインクかすれ・版ズレ風の質感。地はフラットな単色塗りで、写真は全幅で大胆に使う。 - **形**: 音符・トロンボーン・指揮棒のシルエットを大きく斜めに配置。人物写真は角丸スクエアと正円で切り抜く。 - **温度感**: 暖かく明るい。黄と赤で陽気さを、濃い青と黒で品位を出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#004EA1` | プロフィール地・本文色の濃い青 | 20% | 画素の実測 | | `accent-1` | `#E70014` | 見出しの赤・音符・強調文字 | 6% | 画素の実測 | | `background-alt` | `#F4E58A` | イントロ・ストーリーのクリーム黄地 | 12% | 画素の実測 | | `tint-1` | `#DDF8F1` | コメント欄のミント地 | 11% | 画素の実測 | | `dark-section` | `#000000` | レビュー欄の黒地 | 9% | 画素の実測 | | `background` | `#FEFEFE` | FV下の基本白地 | 8% | 画素の実測 | | `marker` | `#F7EC9C` | 星評価・レビュー文字のゴールド黄 | 1% | 画素の実測 | | `cta` | `#C01A18` | 購入ボタンの赤 | 1% | 画素の主要色に補正 | | `on-cta` | `#FDFCFB` | 購入ボタン文字 | 0% | 画素の実測 | | `text` | `#120D0C` | 白地上の黒文字 | 2% | 画素の主要色に補正 | | `on-dark` | `#FEFDF7` | 青・黒地上の白文字 | 4% | 画素の主要色に補正 | | `surface` | `#EAEAEA` | サブボタンのグレー面 | 0% | 画素の実測 | | `line` | `#DF1322` | 動画タブ・枠線の赤線 | 0% | 画素の実測 | - セクションごとに地色を白→黄→黒→青→ミント→赤と大きく切り替える。 - 黄・ミント地の本文と見出しは濃い青、キャッチは赤で書く。 - 英字の章見出しは1文字ごとに青と赤を塗り分ける（青地では黄と赤）。 - 黒地では星と引用文をゴールド黄にし、白は少なめにする。 - 赤は購入ボタン・タブ枠・音符・締めのフッター面に限る。 - 音符は地色に応じて白・赤・青を使い分ける。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字の章見出し（かすれ質感） | 装飾・ディスプレイ | Bebas Neue | 700 | 44px | 1.0 | 0.08em | | `headline-sm` | 英字見出し下の日本語ラベル | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.05em | | `headline-lg` | 中央揃えのリードコピー | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.7 | 0.05em | | `body-md` | 本文・プロフィール・コメント | ゴシック | Zen Kaku Gothic New | 700 | 11px | 1.8 | 0.03em | | `headline-md` | 人物名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.08em | | `accent` | 人物名の欧文表記・公開日 | 欧文セリフ | Playfair Display | 500 | 12px | 1.3 | 0.1em | | `note` | 媒体名・クレジット・注記 | 欧文セリフ | Playfair Display | 600 | 9px | 1.4 | 0.02em | | `label-button` | 購入ボタン・タブ | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.03em | - 英字の章見出しは縦長のコンデンス体を大きく使い、下に小さな日本語ラベルを添える。 - 本文は小さめの太ゴシックにして密度を出す。 - リードは中央揃えで、数行ごとに改行して見せる。 - 人物名の欧文表記は字間を広めにし、ゴールドで添える。 - レビューの引用は大小をつけ、左右に交互に配置する。 - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-90f2d992`（元 LP の URL から採番） - **元 LP**: https://movies.shochiku.co.jp/enfanfare/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。