--- version: alpha name: Navy Red Diagonal Music Festival LP description: 濃紺をベースに、赤の斜め帯と黄色のCTAで勢いを出す野外音楽フェスの告知LP。FVは写真を斜めに切ったコラージュ。以降は白地と紺地のセクションを交互に置き、英字の極太見出しと出演者グリッドで情報を整理する。 colors: primary: '#092A5F' dark-section: '#092A5F' accent-1: '#D01010' cta: '#FFC211' on-cta: '#091017' on-dark: '#FFFFFF' background: '#FFFFFF' text: '#071F4A' text-body: '#33415A' line: '#EBEFEC' marker: '#FFC20E' text-muted: '#707A86' typography: display: fontFamily: Oswald fontSize: 28px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 700 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 6px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 34px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 50px news-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 80px artist-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' height: 140px badge-substage: backgroundColor: '{colors.marker}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 10px header-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 38px fv-collage: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 540px --- # DESIGN.md — 紺×赤×黄の斜めコラージュ音楽フェス LP（Navy Red Diagonal Music Festival LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 濃紺・斜めカット・コラージュ・極太コンデンス英字・フェス・黄色CTA - **地の質感**: フラットな単色面に写真を重ねる。グラデーションや質感表現は使わない - **形**: FVは平行四辺形の斜め分割。そのほかは角丸なしの矩形で揃える - **温度感**: 濃紺が引き締め、赤と黄が熱量を足す高コントラストの配色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#092A5F` | ブランド濃紺・ヘッダー・ABOUT地 | | 画素の実測 | | `dark-section` | `#092A5F` | FVコラージュ背景の濃紺 | | 画素の実測 | | `accent-1` | `#D01010` | 斜め帯・FV英字の赤 | | 推定 | | `cta` | `#FFC211` | チケット購入ボタン | | 画素の実測 | | `on-cta` | `#091017` | CTA文字 | | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 紺地上の白文字 | | 画素の主要色に補正 | | `background` | `#FFFFFF` | 白地セクション | | 画素の実測 | | `text` | `#071F4A` | 見出し・ニュース題の紺文字 | | 画素の実測 | | `text-body` | `#33415A` | 本文 | | 推定 | | `line` | `#EBEFEC` | ニュース区切り線・セクション境界線 | | 画素の主要色に補正 | | `marker` | `#FFC20E` | サブステージバッジ | | 推定 | | `text-muted` | `#707A86` | 注釈・小見出し下ラベル | | 画素の実測 | - 地色は白と濃紺を交互にし、セクションの切り替わりを明確にする - 赤は斜め帯とFVの英字だけに使い、本文には使わない - 黄色は主CTAとサブステージバッジに限る - 白地の見出しと本文は紺系、紺地の文字は白にする - 写真が多いので装飾色はこの3色に抑える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション英字見出し | 欧文サンセリフ | Oswald | 700 | 28px | 1.1 | 0.05em | | `headline-md` | ABOUTのリード文 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `headline-sm` | ニュースの題・カテゴリ英字 | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 8px | 1.8 | 0.02em | | `note` | 見出し下の日本語ラベル・注釈・日付 | ゴシック | Noto Sans JP | 400 | 7px | 1.5 | 0.05em | | `accent` | 出演者名 | ゴシック | Noto Sans JP | 700 | 7px | 1.4 | 0.0em | | `label-button` | CTAの文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.05em | - セクション見出しは極太のコンデンス英字を中央に置き、下に下線付きの小さな日本語ラベルを添える - カテゴリ見出しは英字の太字を左揃えで小さめに置く - 本文は小さめの文字で行間を広めにとる - FVの英字はイタリック風に斜めに配置し、赤と白で使い分ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。出演者は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 70px、基本単位 8px、カード内 6px（375px 幅換算） - 見出しは中央、ニュースと本文は左揃え - ニュースは日付・題・本文の順に並べ、細い線で区切る - 出演者カードは写真の下に名前を中央揃えで置く - スポンサーロゴは中央寄せで大きさを変えて並べる ## Elevation & Depth - 影はほぼ使わない - CTAボタンにだけ右下へ黒いオフセット影をつける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: FVは平行四辺形の斜め切り抜き。出演者は横長矩形、帯写真は横長 - **セクション境界**: 直線で切り替える（色面の切り替え、または細い横線） - 角丸は使わない - 斜めの要素はFVだけに使う ## Components - **チケット購入CTA**（`button-primary`）: 黄色の横長矩形。中央に太字、右端に「>」を置き、黒いオフセット影をつける - **英字セクション見出し**（`section-heading`）: 極太英字の下に、下線付きの小さな日本語ラベルを置く - **ニュース行**（`news-item`）: 太字の日付、太字の題、本文の順に並べ、下に細い線を引く - **出演者カード**（`artist-card`）: 写真の下に太字の小さな名前を置く。2列で並べる - **サブステージバッジ**（`badge-substage`）: 写真の左上に重ねる黄色の小さなラベル - **固定ヘッダー**（`header-bar`）: 濃紺の帯。左に白抜きロゴ、右にハンバーガーメニューを置く - **斜めコラージュFV**（`fv-collage`）: 濃紺地に写真を斜めに分割して配置し、赤帯と白抜きロゴを重ねる ## Do's and Don'ts **Do** - 濃紺・赤・黄の3色で統一する - 見出しは英字と日本語ラベルの2段にする - 白地と紺地を交互に置く - 写真は人の熱気が伝わるカットを使う **Don't** - 角丸やパステル色を入れない - 赤をボタンや本文に使わない - FV以外に斜めの要素を増やさない - グラデーションや強い影を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（開催日・会場・ロゴを強く印象づける）: 濃紺地の斜めコラージュ写真に、赤帯の英字、白抜きロゴ、日付を重ねる 2. **お知らせ**（最新情報を伝える）: 白地に英字見出しを置き、日付・題・本文の行を線で区切って並べる 3. **イベント概要**（コンセプトを説明して購入へ誘導する）: 紺地に大きな白い紋章、太字のリード、本文、黄色CTAの順に置く 4. **会場写真帯**（当日の熱気を見せる）: 横長写真を全幅で横に連ねる 5. **出演者**（出演者で集客する）: カテゴリ別の小見出しの下に2列グリッドで並べ、該当する人にバッジをつける 6. **追加予告**（今後の追加出演を期待させる）: 中央に太字英字の一文と注釈を置く 7. **協賛**（信頼性を示す）: 細線で区切った下に英字見出しを置き、ロゴを中央に並べる 8. **後援**（公的な支援を示す）: 英字見出しの下に後援団体名を太字で置く ## Imagery - フェス会場の群衆、放水、ステージ照明をとらえた高彩度のライブ写真 - 斜めにカットした写真をパズル状に組む - ロゴや紋章は白抜きの一色イラストにする - 出演者写真はプロフィール写真を同じ比率の矩形にそろえる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはヘッダーにナビ項目とSNSアイコンを横に並べる - PCのお知らせは見出しを左、記事を右に置く2カラム - PCの概要は紋章を左、文章を右に置く2カラム - PCの出演者は4列グリッド - PCのスポンサーロゴは2行に詰めて並べる ## 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-b2254fdc`（元 LP の URL から採番） - **元 LP**: https://bobfes.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。