DESIGN.md — チョコ茶×金五線譜の音楽企画 LP（Chocolate Brown Music Score Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: レトロ、親しみ・手作り感、上品・高級、やさしい・柔らかい
• キーワード: チョコレートブラウン・金の五線譜・音符イラスト・紙質感のクリーム地・太い丸ゴシック欧文・連番カード
• 地の質感: クリーム地とブラウン地にうっすら紙のざらつきノイズを乗せる。カードの縁は少しギザついた手刷り風。
• 形: 角丸なしの四角いカードが基本。上下を金の細線と五線譜バーで挟む。丸はアイコンボタンと再生ボタンのみ。
• 温度感: 暖色寄り。焦げ茶と生成りで甘く温かい。

Colors

• 地はクリームとチョコ茶の2色で切り替え、白は使わない。
• カードは常に濃いチョコ茶。クリーム地の上に置いて強いコントラストをつくる。
• 金色は五線譜ライン・細罫・未公開カードの文字だけに絞る。
• 注目枠のセクションだけ一段明るいミルクチョコ茶にして区別する。
• 文字色は純黒にせず、焦げ茶かクリームを使う。
• フッターだけは無彩色のグレーにして企画部分と分ける。

Typography

• 英字は太く丸みのあるディスプレイ書体で、少し弧を描くように配置してもよい。
• 日本語本文は中央揃え、字間0.1em・行間2.4程度でゆったり組む。
• 見出し末尾に♪を添えて音楽らしさを出す。
• 連番は「#」を小さく、数字を大きくする。
• 準備中の表示は金色の大きな英字1行にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカードを 2 カラムで左右互い違いに配置。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• カードは画面幅の約90%で中央に置き、間隔は40〜50px。
• カードとカードの間の余白に、音符入りの五線譜イラストを左右交互に置く。
• 導入文の前後に60px以上の余白をとる。
• ファーストビューは上下を五線譜バーで挟む額縁の構図。
• カードは上辺に金の細線、下辺に五線譜の導線バーを入れる。

Elevation & Depth

• 影はほぼ使わず、色の差で奥行きを出す。
• カードの縁はわずかにギザつかせて紙を切り抜いたように見せる。
• トップへ戻るボタンだけフラットな濃茶ピルで浮かせる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: カード内の写真は横長16:9程度の長方形で、角丸なし。左下に白い丸枠の再生アイコンを重ねる。
• セクション境界: 直線で色を切り替える。ファーストビューの上下は金の五線譜バーで区切る。
• カードとバーは角丸なしの四角にする。
• ピル型はトップへ戻るボタンだけに使う。
• 再生ボタンは白い線の円に三角を入れる。
• 五線譜バーは両端に縦線のある細い5本線にする。

Components

• 連番動画カード（artist-card）: 濃茶の四角いカード。上から金の細線、#番号、写真、名前とサインのイラスト、五線譜の導線バーの順に並ぶ。
• 準備中カード（coming-soon-card）: 連番カードと同じ枠に、金色の大きな英字を1行だけ入れる。
• 五線譜の導線バー（staff-bar-link）: 金の5本線の上に、クリーム色の短い誘導文と♪を重ねたリンクバー。
• 連番表記（number-badge）: カードの左上に、小さな#と大きな数字をクリーム色で置く。
• 再生アイコン（play-icon）: 写真の左下に重ねる、白い線の円と三角のアイコン。
• アイコン付き英字見出し（heading-icon-en）: マイクのイラストの下に、英字を小・大の2段で中央にそろえる。
• 音符の五線譜装飾（music-ornament）: 線画の波打つ五線譜に音符を並べた飾り。カードの間に左右交互に置く。
• トップへ戻るボタン（pagetop-button）: 濃茶のピル型ボタンにクリーム色の山形矢印を入れ、右下に固定する。

Do's and Don'ts

Do - 地はクリームと濃茶だけで交互に構成する。 - 金の五線譜ラインを額縁・カード・導線に繰り返し使って統一感を出す。 - カードの間のすき間に音符装飾を左右交互に置き、リズムをつくる。 - 未公開の枠も同じカードの型で並べ、連載らしさを見せる。 - 英字の見出しは太い丸みのある書体で大きく組む。

Don't - 純白や鮮やかな原色を企画部分に使わない。 - カードに大きな角丸やドロップシャドウをつけない。 - 金色を広い面の塗りに使わない。線と文字だけにする。 - 本文を左揃えで詰めて組まない。 - 細い明朝体で見出しを組まない（ポップさが失われるため）。

Page Structure

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

1. ファーストビュー（企画名と世界観を一目で伝える）: 濃茶の地を上下の金の五線譜バーで挟む。中央に商品を持つ手の線画、短いサブコピー、弧を描く大きな英字タイトルを置き、周りに音符と板チョコのイラストを散らす。
2. 導入文（企画の背景と記念の節目を語る）: クリーム地に中央揃えの本文を3段落。行間を広くとり、末尾に五線譜の装飾と商品パッケージの画像を置く。
3. 今月の注目（最新回へ誘導する）: ミルクチョコ茶の地に、♪付きの見出しと連番動画カードを1枚置く。
4. 一覧見出し（全回の一覧の始まりを示す）: マイクのアイコンと、英字を小・大の2段に組んだ見出しを中央に置く。
5. 公開済みカード一覧（各回の動画・インタビューへ誘導する）: 連番動画カードを縦に並べ、カードの間に五線譜の装飾を左右交互に置く。
6. 準備中カード一覧（今後の公開を予告して再訪を促す）: 同じカードの型に、金色の準備中表示を入れて最終回まで並べる。
7. フッター（SNS と企業情報への導線）: グレー地にSNSアイコン、小さなリンク群、著作権表記を中央揃えで並べる。

Imagery

• 写真はレコーディングスタジオでマイクの前に立つ人物。暗めで暖色の照明にする。
• 写真の右下に、白い手書きサイン風の線を重ねる。
• イラストは焦げ茶またはクリーム色の単色線画（手・マイク・音符・五線譜）。
• 板チョコは少し傾けた立体的なイラストで、ファーストビューに散らす。
• 背景には薄い紙のざらつきテクスチャを敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではカードを2カラムにし、右の列を半枚分下げて互い違いに並べる。
• PC のファーストビューは横長にし、タイトルとイラストを縮めて中央にまとめる。
• PC の導入文は1行を長くして、行数を減らす。
• PC の注目カードは中央に1枚、幅はおよそ40%にする。
• 音符装飾は 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 行書くと起動時に読み込まれる。