紺×赤×黄の斜めコラージュ音楽フェス LP
Navy Red Diagonal Music Festival LP
濃紺をベースに、赤の斜め帯と黄色のCTAで勢いを出す野外音楽フェスの告知LP。FVは写真を斜めに切ったコラージュ。以降は白地と紺地のセクションを交互に置き、英字の極太見出しと出演者グリッドで情報を整理する。
エンタメ・ゲーム・アプリ力強い・インパクトポップ・元気情報量多め・訴求型SPPC
Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。
COLORS
配色
- 地色は白と濃紺を交互にし、セクションの切り替わりを明確にする
- 赤は斜め帯とFVの英字だけに使い、本文には使わない
- 黄色は主CTAとサブステージバッジに限る
- 白地の見出しと本文は紺系、紺地の文字は白にする
- 写真が多いので装飾色はこの3色に抑える
TYPOGRAPHY
書体
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
- セクション見出しは極太のコンデンス英字を中央に置き、下に下線付きの小さな日本語ラベルを添える
- カテゴリ見出しは英字の太字を左揃えで小さめに置く
- 本文は小さめの文字で行間を広めにとる
- FVの英字はイタリック風に斜めに配置し、赤と白で使い分ける
PAGE STRUCTURE
セクション構成
- ファーストビュー開催日・会場・ロゴを強く印象づける濃紺地の斜めコラージュ写真に、赤帯の英字、白抜きロゴ、日付を重ねる
- お知らせ最新情報を伝える白地に英字見出しを置き、日付・題・本文の行を線で区切って並べる
- イベント概要コンセプトを説明して購入へ誘導する紺地に大きな白い紋章、太字のリード、本文、黄色CTAの順に置く
- 会場写真帯当日の熱気を見せる横長写真を全幅で横に連ねる
- 出演者出演者で集客するカテゴリ別の小見出しの下に2列グリッドで並べ、該当する人にバッジをつける
- 追加予告今後の追加出演を期待させる中央に太字英字の一文と注釈を置く
- 協賛信頼性を示す細線で区切った下に英字見出しを置き、ロゴを中央に並べる
- 後援公的な支援を示す英字見出しの下に後援団体名を太字で置く
COMPONENTS
部品
- チケット購入CTA button-primary黄色の横長矩形。中央に太字、右端に「>」を置き、黒いオフセット影をつける
- 英字セクション見出し section-heading極太英字の下に、下線付きの小さな日本語ラベルを置く
- ニュース行 news-item太字の日付、太字の題、本文の順に並べ、下に細い線を引く
- 出演者カード artist-card写真の下に太字の小さな名前を置く。2列で並べる
- サブステージバッジ badge-substage写真の左上に重ねる黄色の小さなラベル
- 固定ヘッダー header-bar濃紺の帯。左に白抜きロゴ、右にハンバーガーメニューを置く
- 斜めコラージュFV fv-collage濃紺地に写真を斜めに分割して配置し、赤帯と白抜きロゴを重ねる
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 独自の章。上から順に、カッコ内が各セクションの役割。
- ファーストビュー(開催日・会場・ロゴを強く印象づける): 濃紺地の斜めコラージュ写真に、赤帯の英字、白抜きロゴ、日付を重ねる
- お知らせ(最新情報を伝える): 白地に英字見出しを置き、日付・題・本文の行を線で区切って並べる
- イベント概要(コンセプトを説明して購入へ誘導する): 紺地に大きな白い紋章、太字のリード、本文、黄色CTAの順に置く
- 会場写真帯(当日の熱気を見せる): 横長写真を全幅で横に連ねる
- 出演者(出演者で集客する): カテゴリ別の小見出しの下に2列グリッドで並べ、該当する人にバッジをつける
- 追加予告(今後の追加出演を期待させる): 中央に太字英字の一文と注釈を置く
- 協賛(信頼性を示す): 細線で区切った下に英字見出しを置き、ロゴを中央に並べる
- 後援(公的な支援を示す): 英字見出しの下に後援団体名を太字で置く
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: https://bobfes.jp/(公開状況により表示できない場合があります)
- この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
- 元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
- 色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
- 元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。
似た LP の design.md
エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP
エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP
エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP
エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP
エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP
エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP