--- version: alpha name: Grainy Monochrome Music Anniversary LP description: 楽器ブランドの周年記念 LP。ざらついたモノクロ写真を全面に敷いた黒い地に、白い縦長の欧文コンデンス見出しを大きく置いている。途中のキャンペーン部分だけを淡いミント×サーモンのノイズグラデーションに切り替え、ページにメリハリを付けている。 colors: background: '#0B0B0B' primary: '#FDFDFD' dark-section: '#3E403C' background-alt: '#E7F1E9' accent-1: '#FAC3B5' surface: '#FFFFFF' text: '#070707' text-body: '#2B2A28' cta: '#010101' on-cta: '#FBFBFB' secondary: '#414141' accent-2: '#7A7448' line: '#BDBDBD' typography: display: fontFamily: Bebas Neue fontSize: 64px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Bebas Neue fontSize: 52px fontWeight: 400 lineHeight: 1.0 headline-md: fontFamily: Oswald fontSize: 32px fontWeight: 400 lineHeight: 1.1 headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 150px button-ghost: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px video-embed: textColor: '{colors.primary}' typography: '{typography.note}' height: 300px event-card-grid: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.md}' height: 340px sns-post-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 180px terms-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 210px slider-progress: height: 4px --- # DESIGN.md — 粒子感ある黒×白の楽器周年記念 LP（Grainy Monochrome Music Anniversary LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、力強い・インパクト、ラグジュアリー・ダーク、レトロ - **キーワード**: フィルムグレイン・モノクロ写真・コンデンス欧文・ロック・周年記念・ギャラリー - **地の質感**: 全面に強いノイズ・粒子を乗せ、写真もモノクロ化して質感を出す。明るいセクションもノイズの入ったグラデーションにする。 - **形**: 基本は角のない矩形。ボタンだけをピル型にし、写真カードは小さめの角丸にする。 - **温度感**: 黒中心でクール。オリーブ系の暗い差し色とパステルのキャンペーン面で温度差を付ける。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#0B0B0B` | メインの黒地 | 45% | 画素の実測 | | `primary` | `#FDFDFD` | 見出しと本文の白（ブランド表現） | 6% | 画素の主要色に補正 | | `dark-section` | `#3E403C` | オリーブ調の歴史セクションの地 | 12% | 画素の主要色に補正 | | `background-alt` | `#E7F1E9` | キャンペーン部のミント地 | 18% | 画素の主要色に補正 | | `accent-1` | `#FAC3B5` | グラデーションのサーモン | 4% | 画素の実測 | | `surface` | `#FFFFFF` | イベント枠と規約ボックスの白面 | 6% | 画素の実測 | | `text` | `#070707` | 明るい地の上の見出しの黒 | 1% | 画素の主要色に補正 | | `text-body` | `#2B2A28` | 明るい地の上の本文 | 1% | 画素の主要色に補正 | | `cta` | `#010101` | もっとみるボタン（黒） | 0% | 画素の実測 | | `on-cta` | `#FBFBFB` | ボタン上の文字 | 0% | 画素の実測 | | `secondary` | `#414141` | 半透明グレーのリンクボタン | 1% | 画素の実測 | | `accent-2` | `#7A7448` | イベント写真枠のオリーブ線 | 0% | 推定 | | `line` | `#BDBDBD` | スライダーの進捗線 | 0% | 推定 | - 黒地のセクションを基本とし、文字は白のみで構成する - 歴史を語る中盤だけ、ノイズの入ったオリーブ系の暗い色面に切り替える - 参加型キャンペーンとSNS投稿の部分は、ミントとサーモンのノイズグラデーションの明るい地に黒文字で反転させる - 鮮やかな色は写真に任せ、UI に彩度の高い色は使わない - ボタンは黒地なら半透明グレーに白い枠線、明るい地なら黒ベタに白文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し（欧文） | 装飾・ディスプレイ | Bebas Neue | 400 | 64px | 1.0 | 0.0em | | `headline-lg` | セクションの欧文大見出し（2行） | 装飾・ディスプレイ | Bebas Neue | 400 | 52px | 1.0 | 0.0em | | `headline-md` | 歴史パートの欧文小見出し | 欧文サンセリフ | Oswald | 400 | 32px | 1.1 | 0.0em | | `headline-sm` | 英字見出しの上に置く和文ラベル、キャンペーン内の小見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.02em | | `body-lg` | ファーストビューのリード文 | ゴシック | Noto Sans JP | 700 | 16px | 1.7 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 10px | 1.8 | 0.0em | | `note` | キャプション、投稿者名 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 9px | 1.4 | 0.02em | - 各セクションは「小さな和文ラベル＋巨大なコンデンス英字見出し（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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-ece1ca8e`（元 LP の URL から採番） - **元 LP**: https://gibson.jp/gibson-130th/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。