DESIGN.md — 生成り×紺×黄×ピンクの音楽機材ガイドLP（Colorful Block Music Culture Guide LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ポップ・元気、クール・先進的、力強い・インパクト
• キーワード: カラーブロック・雑誌風コラージュ・極太コンデンス欧文・手描き線・ナイトカルチャー・入門ガイド
• 地の質感: フラットな面に写真の切り抜き・傾けたポラロイド風写真・手描きイラスト・ノイズ風の円グラフィックを重ねる
• 形: 上角丸の大きなパネルでセクションを重ねる。ピル型ラベル、星形スパイク、手描きのループ線
• 温度感: 生成りの温かさと、ネイビー・黒の夜の空気が交互に来る

Colors

• 章ごとに地色を生成り→濃紺→マスタード→ピンク→黒と切り替える
• 濃紺地ではシアン、黒地ではコーラル、マスタード地では深緑を見出し色にする
• 1章に強調色は1色だけ使う
• ラベルのピルは章の地色とは違う色（青・緑・黄・ピンク）で散らす
• ボタンは塗らず、地色のまま黒の細い枠線で囲む

Typography

• 章見出しは極太の欧文ゴシックと細いイタリックのセリフを1行に並べる
• 和文見出しはキーワードだけ極太、続きの助詞は細くする
• ビッグ欧文は画面からはみ出させ、帯状に流す
• 導入コピーは中央揃えの太字、章のリードは左揃えの細字で小さく組む
• 本文は行間を広め（1.8）にとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴグリッドは 2 列、写真の比較は 2 列
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は16px
• 章の頭は大見出し・リード・写真の順に置く
• 目次は「サムネ・番号＋タイトル・下矢印」の横並びを細い線で区切る
• スタイル紹介カードは横スクロールにして、次のカードを少し見せる
• 写真とイラストはずらして重ね、余白にリズムを作る

Elevation & Depth

• 影はほぼ使わず、色面の切り替えで奥行きを出す
• 写真は傾けたり、重ねたりしてコラージュ感を出す
• 黒地のカードは1段明るい面と角丸で浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 角丸の小さい矩形。傾けた白フチ写真や、機材の切り抜きも混ぜる
• セクション境界: 上の角が大きく丸いパネルを前の章に重ねる。ギザギザの色面も使う
• ラベルとボタンはピル型
• 星形のスパイク・点のグリッド・手描きのループ線を装飾に置く
• ロゴは細い枠線の四角いタイルに収める

Components

• アウトラインボタン（button-outline）: 地色のままのピル型。黒い1px枠と太字、右端に斜め矢印
• カラーピルラベル（pill-label）: 写真の上に置く短い英字タグ。色を変えて複数散らす
• 和欧ミックス章見出し（heading-mixed）: 上に英字（太字＋イタリック）、下に極太和文。下に手描きの曲線を引く
• 目次リスト行（toc-row）: 左にサムネ、中央に番号とシアンの見出し、右に下矢印。行は細い線で区切る
• 見出し帯（highlight-band）: シアンの帯に黒い極太欧文。矢印の連続模様をつける
• スタイル紹介カード（style-card）: 角丸写真の下端に白い短文コピーを重ね、下に太字の説明文を置く。横スクロール
• サービスロゴタイル（logo-tile）: 黒地に細い枠線の矩形。白ロゴを中央に置き、2列で並べる
• 黒地情報パネル（dark-card）: 1段明るい面の角丸パネル。上に機材の切り抜きをはみ出させ、中に2列の写真比較を置く
• テキストタブ（tab-switch）: 選択中は白、それ以外はグレーの太字2行テキスト。下に細い線

Do's and Don'ts

Do - 章ごとに地色をはっきり切り替える - 欧文の極太見出しと細いイタリックを併用する - 写真・切り抜き機材・手描きイラストを重ねてコラージュする - 1章1強調色で、見出しと番号だけに色を使う - ラベルはピル型で短い英字にする

Don't - ボタンを塗りのビビッド色にしない - グラデーションや強いドロップシャドウを使わない - 1章に強調色を複数入れない - 写真を全部同じサイズの格子で並べない - 明朝体で堅く組まない

Page Structure

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

1. 告知帯（テーマを一言で伝える）: ピンク地の細帯に和英のテキストを横に流す
2. ファーストビュー（楽しさを直感的に伝える）: 夜のパーティーの全面写真に白い極太欧文タイトル、手書き風の英字、スクロールの丸い表示
3. 導入（始める価値を共感で伝える）: 生成り地。はみ出すビッグ欧文、写真のコラージュとピルラベル、中央揃えの太字コピー
4. ハードルを下げる（難しくないと安心させる）: 極太欧文と手書き風英字の見出し、傾けた写真に手描きイラストを重ねる
5. 目次（章の全体像を示す）: 濃紺地にノイズ柄の円とシアンの帯見出し、サムネ付きの5行リスト
6. スタイル紹介（楽しみ方の選択肢を見せる）: マスタードの角丸パネル。深緑の見出しと横スクロールの写真カード
7. アプリ紹介（ソフトの導入を促す）: ピンクのパネル。ロゴ、アウトラインボタン、PC画面とスマホのモック、ストアボタン
8. 楽曲の準備（曲の入手方法を案内する）: 黒のパネル。コーラルの見出し、テキストタブ、写真、ロゴタイルの格子
9. 持ち運び方法（現場での使い方を説明する）: 黒地の角丸カード。機材の切り抜き、2列の写真比較とキャプション

Imagery

• 若者が自宅やパーティーで機材を楽しむ自然光・夜景のライフスタイル写真
• 機材は白背景なしの切り抜きで斜めに置く
• 線が太めの手描きイラスト（人物）をくすんだ色で塗る
• 星形スパイク・十字の点グリッド・手描きのループ線を散らす
• モノクロのノイズや波紋の円グラフィックを暗い地に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版は中央の狭い幅に1カラムで組んでいる。SPも同じ構成でよい
• PCでは左右の余白を背景色で埋め、本文は最大幅約640pxに保つ
• ビッグ欧文の帯はどの幅でも画面からはみ出させる
• ロゴ格子はSP2列、PCは3列にしてもよい

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 行書くと起動時に読み込まれる。