紺×赤×黄の斜めコラージュ音楽フェス LP

Navy Red Diagonal Music Festival LP

濃紺をベースに、赤の斜め帯と黄色のCTAで勢いを出す野外音楽フェスの告知LP。FVは写真を斜めに切ったコラージュ。以降は白地と紺地のセクションを交互に置き、英字の極太見出しと出演者グリッドで情報を整理する。

エンタメ・ゲーム・アプリ力強い・インパクトポップ・元気情報量多め・訴求型SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。

COLORS

配色

TYPOGRAPHY

書体

displayセクション英字見出し欧文サンセリフ / Oswald 700 / 28px / 行間 1.1
あなたの LP を、もっと伝わる形に。Aa 123
headline-mdABOUTのリード文ゴシック / Noto Sans JP 700 / 15px / 行間 1.6
あなたの LP を、もっと伝わる形に。Aa 123
headline-smニュースの題・カテゴリ英字ゴシック / Noto Sans JP 700 / 12px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
body-md本文ゴシック / Noto Sans JP 400 / 8px / 行間 1.8
あなたの LP を、もっと伝わる形に。Aa 123
note見出し下の日本語ラベル・注釈・日付ゴシック / Noto Sans JP 400 / 7px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
accent出演者名ゴシック / Noto Sans JP 700 / 7px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
label-buttonCTAの文字ゴシック / Noto Sans JP 700 / 10px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ファーストビュー開催日・会場・ロゴを強く印象づける濃紺地の斜めコラージュ写真に、赤帯の英字、白抜きロゴ、日付を重ねる
  2. お知らせ最新情報を伝える白地に英字見出しを置き、日付・題・本文の行を線で区切って並べる
  3. イベント概要コンセプトを説明して購入へ誘導する紺地に大きな白い紋章、太字のリード、本文、黄色CTAの順に置く
  4. 会場写真帯当日の熱気を見せる横長写真を全幅で横に連ねる
  5. 出演者出演者で集客するカテゴリ別の小見出しの下に2列グリッドで並べ、該当する人にバッジをつける
  6. 追加予告今後の追加出演を期待させる中央に太字英字の一文と注釈を置く
  7. 協賛信頼性を示す細線で区切った下に英字見出しを置き、ロゴを中央に並べる
  8. 後援公的な支援を示す英字見出しの下に後援団体名を太字で置く
COMPONENTS

部品

DO

守ること

  • 濃紺・赤・黄の3色で統一する
  • 見出しは英字と日本語ラベルの2段にする
  • 白地と紺地を交互に置く
  • 写真は人の熱気が伝わるカットを使う
DON'T

避けること

  • 角丸やパステル色を入れない
  • 赤をボタンや本文に使わない
  • FV以外に斜めの要素を増やさない
  • グラデーションや強い影を使わない
DESIGN.MD

design.md 全文

読みやすい形で表示する

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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う(CSS 変数に展開してよい)
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP(375px)で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

SOURCE

出典と注意

似た LP の design.md