DESIGN.md — 粒子感ある黒×白の楽器周年記念 LP（Grainy Monochrome Music Anniversary LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、ラグジュアリー・ダーク、レトロ
• キーワード: フィルムグレイン・モノクロ写真・コンデンス欧文・ロック・周年記念・ギャラリー
• 地の質感: 全面に強いノイズ・粒子を乗せ、写真もモノクロ化して質感を出す。明るいセクションもノイズの入ったグラデーションにする。
• 形: 基本は角のない矩形。ボタンだけをピル型にし、写真カードは小さめの角丸にする。
• 温度感: 黒中心でクール。オリーブ系の暗い差し色とパステルのキャンペーン面で温度差を付ける。

Colors

• 黒地のセクションを基本とし、文字は白のみで構成する
• 歴史を語る中盤だけ、ノイズの入ったオリーブ系の暗い色面に切り替える
• 参加型キャンペーンとSNS投稿の部分は、ミントとサーモンのノイズグラデーションの明るい地に黒文字で反転させる
• 鮮やかな色は写真に任せ、UI に彩度の高い色は使わない
• ボタンは黒地なら半透明グレーに白い枠線、明るい地なら黒ベタに白文字にする

Typography

• 各セクションは「小さな和文ラベル＋巨大なコンデンス英字見出し（2行）＋短い本文」の三段で組む
• 英字見出しはすべて大文字にし、詰め気味で左揃えにする
• 本文は小さめのサイズで、行間を広めに取る
• 和文の大見出しは使わず、見出しのインパクトは英字に任せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真グリッドのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 70px、基本単位 8px、カード内 12px（375px 幅換算）
• 左右の余白は約16pxで、すべて左揃えにする
• セクションごとに背景写真や色面を全幅で切り替える
• メディア（動画・写真）は右端まで伸ばし、裁ち落とし気味に配置する
• 見出しの上下に大きな余白を取って、ゆったり見せる
• SNS投稿は2列の正方形グリッドにする

Elevation & Depth

• 影はほぼ使わない
• 奥行きは背景写真の明暗と粒子で表現する
• ボタンは半透明の面と細い白線で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 矩形の写真を全幅または右端の裁ち落としで置く。グリッド内の写真には小さな角丸を付ける
• セクション境界: 直線で背景を切り替える（写真から色面へ）
• ボタンはピル型にする
• カードや情報ボックスは角丸なし、または極小にする
• 装飾的な曲線や波形は使わない

Components

• 和文ラベル＋英字見出し（section-heading）: 小さな太字の和文ラベルの下に、2行の巨大なコンデンス英字見出しを置く
• 半透明のピル型リンクボタン（button-ghost）: 黒地の上で幅約75%に中央揃え。半透明グレーの面に白い細枠、白い太字。縦に4つ並べる
• もっとみるボタン（button-primary）: 明るい地の上に置く黒ベタのピル型ボタン。中央揃え
• 縦型動画の埋め込み（video-embed）: 左寄せで置く縦長動画。下に小さな白いキャプションを付ける
• イベント写真枠（event-card-grid）: 白い大きな枠の中に、角丸の写真を2×2で並べ、オリーブの線で縁取る。下に日付テキストを置く
• SNS投稿カード（sns-post-card）: 正方形の写真の下に白い帯を付け、投稿者名とSNSアイコンを載せる。2列で並べる
• 応募規約ボックス（terms-box）: 白い面に細枠を付け、規約文を内部スクロールで収める
• ギャラリーの進捗バー（slider-progress）: 横スライダーの下に置く細いグレーの線。現在位置は白い太線で示す

Do's and Don'ts

Do - 背景写真はモノクロ化し、強い粒子ノイズを乗せる - 英字見出しはコンデンス書体で大きく、2行で置く - 明るいキャンペーン面はノイズ入りのパステルグラデーションにする - 余白を大きく取り、1セクション1メッセージにする

Don't - 鮮やかな色のボタンや装飾を加えない - 丸ゴシックや手書き風の書体を使わない - 背景をノイズのないフラットなグレーにしない - 角丸の大きいカードやドロップシャドウを多用しない

Page Structure

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

1. ファーストビュー（周年記念であることを一目で伝える）: 楽器のモノクロ接写を全面に敷き、右寄せの巨大な英字見出しと白い太字のリードを2行置く
2. アーティストからのメッセージ（共感と話題性を作る）: 粒子入りの写真背景に見出しの三段組を置き、縦型動画を埋め込む
3. イベント情報（関連イベントの告知）: 白枠の中に2×2の写真グリッドを入れ、下に名称と日付を添える
4. ブランドストーリー（歴史と想いを伝える）: オリーブ調のノイズ面に大きなロゴを置き、欧文小見出しごとに段落を並べる
5. アーティストインタビュー（ファンの声で魅力を補強する）: 黒地に見出しを置き、全幅の横長写真を1枚配置する
6. SNS投稿キャンペーン（参加を促す）: パステルのノイズグラデーション地に黒い英字見出しを置き、期間・応募方法・賞品写真・規約ボックスを縦に並べる
7. 投稿ギャラリー（参加者の盛り上がりを見せる）: 2列の投稿カードを並べ、下に黒いピル型の「もっとみる」ボタンを置く
8. 製品ギャラリー（製品の世界観を見せる）: 線画装飾入りの黒地に横スライダーを置き、下に進捗バーを付ける
9. 関連リンク・フッター（関連サイトへ誘導する）: 楽器の写真背景に半透明のピル型ボタンを4つ縦に並べ、SNSアイコンとロゴを置く

Imagery

• 楽器の接写をモノクロ化し、高コントラストにして粒子ノイズを強く乗せる
• 人物写真はスタジオやライブハウスの暗めの環境で撮った自然光風のもの
• 製品写真は白またはグレーの無地背景にスタンドで立てて撮る
• 白い線画のボタニカル装飾を黒地にうっすら重ねる
• 明るい面にはミントとサーモンのノイズグラデーションを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では英字見出しを100px以上に拡大し、左寄せのまま余白を増やす
• PC では写真グリッドを3〜4列にする
• PC では本文の幅を最大720px程度に制限する
• 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 行書くと起動時に読み込まれる。