--- version: alpha name: Dark Rock Anime Collab LP description: ほぼ黒の地に深い紫のセクションと警告色の黄色の帯を差し込んだ、アニメと楽器のコラボ特設 LP。黒板風の質感、線画キャラの装飾、カラフルな丸アイコンで見出しを分け、紫と黄のボタンで各詳細ページへ誘導する。 colors: background: '#191D20' dark-section: '#28193A' primary: '#FFF000' secondary: '#7B46D2' cta: '#FCF202' on-cta: '#191D1E' on-dark: '#FBFDFC' background-alt: '#FFFFFF' surface: '#53545D' accent-1: '#E0507E' accent-2: '#F5D20A' accent-3: '#236DA1' text: '#111112' line: '#E6C200' secondary-accessible: '#9165D9' typography: display: fontFamily: Permanent Marker fontSize: 56px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.12em label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 6px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 12px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px heading-circle: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 70px topic-band: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 145px banner-carousel: rounded: '{rounded.md}' height: 170px store-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 270px list-row: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 48px music-note-icon: textColor: '{colors.accent-1}' height: 30px --- # DESIGN.md — 黒×紫×黄のロック系アニメコラボ LP（Dark Rock Anime Collab LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、クール・先進的、力強い・インパクト - **キーワード**: ダーク地・ネオンのような差し色・線画キャラ・黒板の質感・ライブハウス・カルーセル - **地の質感**: FV と最下部の帯に黒板・ざらついた紙のようなノイズ質感。ほかはフラットな単色の面。 - **形**: 画像とボタンは角丸 8〜10px。見出しの上に色違いの円の輪郭アイコン。セクション境界は直線。 - **温度感**: 暗い寒色を地にして、黄・ピンク・紫の暖かい差し色でライブ感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#191D20` | メインの地（ほぼ黒） | 35% | 画素の実測 | | `dark-section` | `#28193A` | イベント系セクションの深紫の地 | 19% | 画素の実測 | | `primary` | `#FFF000` | 警告色イエローの帯・ボタン | 8% | 画素の実測 | | `secondary` | `#7B46D2` | 紫のボタン・店舗リストの帯 | 6% | 画素の実測 | | `cta` | `#FCF202` | 主 CTA ボタン（黄） | 1% | 画素の実測 | | `on-cta` | `#191D1E` | 黄色ボタン上の文字 | 0% | 画素の主要色に補正 | | `on-dark` | `#FBFDFC` | 暗地の上の見出しと本文 | 3% | 画素の実測 | | `background-alt` | `#FFFFFF` | キャンペーンセクションの白地 | 6% | 画素の実測 | | `surface` | `#53545D` | FV 黒板風の地 | 4% | 画素の主要色に補正 | | `accent-1` | `#E0507E` | ピンクの円アイコン・音符 | 0% | 推定 | | `accent-2` | `#F5D20A` | 黄の円アイコン・小見出し | 0% | 推定 | | `accent-3` | `#236DA1` | 青の円アイコン | 0% | 画素の実測 | | `text` | `#111112` | 白地の上の見出しの文字 | 0% | 画素の実測 | | `line` | `#E6C200` | 店舗一覧の黄色の区切り線 | 0% | 推定 | | `secondary-accessible` | `#9165D9` | AA を満たす補正値（計算） | | 計算 | - 地は黒 #191D20 を基本にして、イベント系だけ深紫、キャンペーンだけ白に切り替える - 黄色はページ上端近くの帯・最下部の帯・主 CTA・区切り線だけに使う - 紫のボタンは通常の詳細リンクに使い、暗地でも白地でも同じ色にする - セクションの見出しアイコンはピンク・黄・青・赤と円の色を変えて区別する - 暗地の文字は白、白地の文字は黒に近い色 - 店舗リストは紫の面に暗い文字で、ボタンと同系の面として並べる - `list-row` は文字 `#111112` × 背景 `#7B46D2` のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#9165D9`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のロゴ風タイトル（手書きブラシ） | 手書き・筆 | Permanent Marker | 400 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.4 | 0.08em | | `headline-md` | 各コンテンツのタイトル | ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.45 | 0.03em | | `headline-sm` | 店舗名・リストのタイトル | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.03em | | `body-md` | 説明文（中央揃え） | ゴシック | Noto Sans JP | 500 | 10px | 1.8 | 0.02em | | `note` | 注釈・定休日・コピーライト | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `accent` | 英字のラベル見出し（TOPIC・OTHERS） | 欧文サンセリフ | Montserrat | 800 | 15px | 1.2 | 0.12em | | `label-button` | 詳細ボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.2 | 0.03em | - 見出しは太い丸ゴシックで中央揃え - 本文は小さめにして中央揃え、行間を広めにとる - 日付は全角数字を太字にして大きめに見せる - 英字ラベルは字間を広げた太いサンセリフ - ロゴ風タイトルだけ手書きのブラシ体にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カルーセルでは中央のカードの左右に隣のカードが少しはみ出して見える - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算） - 各ブロックは『丸アイコン→見出し→説明→画像→ボタン』の縦積みで中央揃え - 画像のバナーは画面幅の約 92%、カルーセルの画像は約 60% の幅で中央に置く - 店舗写真は 67% 幅、下に店舗名・定休日・日付を左揃えで置く - サテライト会場は紫の横長リストを 8px 間隔で縦に並べる - セクションの間は 60〜80px の余白と背景色の切り替えで区切る ## Elevation & Depth - 影はほぼ使わず、フラットな面で構成する - 画像カードは暗い地とのコントラストで浮かせる - カルーセルの矢印は半透明の紫の小さな円にする ## Shapes - **角丸**: 小 6px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸 8〜12px の長方形。キービジュアルは正方形に近い比率、バナーは横長 - **セクション境界**: 直線で背景色を切り替える。一部に細い横線を入れる - ボタンは角丸 6px 程度の長方形で、ピル型にしない - 見出しアイコンは輪郭線だけの円（線幅 3px 程度） - リストは角丸 6px の帯にして、右端に > を置く ## Components - **黄色の詳細ボタン**（`button-primary`）: 暗地に置く黄色の角丸ボタン。文字は黒、右に > を付ける - **紫の詳細ボタン**（`button-secondary`）: 白い文字と > を載せた紫の角丸ボタン - **丸アイコン付きの見出し**（`heading-circle`）: 色付きの円の輪郭を見出しの上に置き、セクションごとに色を変える - **お知らせ帯**（`topic-band`）: 黄色の帯に稲妻アイコン付きの英字ラベルと下線付きのリンクを並べ、下に More を置く - **バナーのカルーセル**（`banner-carousel`）: 角丸の横長バナー。右端に紫の丸い矢印を置く - **店舗カード**（`store-card`）: 角丸の写真の右上に矢印、下に店舗名・定休日・日付を置く - **紫の会場リスト行**（`list-row`）: 紫の面に店舗名・定休日・日付を左揃えで書き、右に > を置く - **音符アイコン**（`music-note-icon`）: コンテンツのタイトルの上に置く、色違いの小さな音符 ## Do's and Don'ts **Do** - 暗い地に黄・紫・ピンクを少量ずつ差して、ライブハウスのような雰囲気を保つ - セクションごとに丸アイコンの色を変える - 見出しと説明は中央揃えで短くまとめる - 余白に白い線画のキャラを薄く添える - 各ブロックには必ず詳細ボタンを 1 つ置く **Don't** - パステル調や淡いグラデーションの地にしない - 黄色を本文の文字色として多用しない - ピル型のボタンや強い影を使わない - 明朝体を使わない - 一つのブロックにボタンを何個も並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボであることを一目で伝える）: 黒板風の地に両方のロゴを×でつなぎ、キャラの絵と線画、手書き風タイトル、サブタイトルを重ねる 2. **お知らせ**（最新情報への導線）: 黄色の帯に稲妻アイコン付きのラベル、下線付きのリンクを 2 行、More を置く 3. **コラボ製品・サービス**（製品やレッスンを紹介する）: 黒地に音符・タイトル・説明・横長バナーのカルーセルを 3 組並べる 4. **リアルイベント**（店舗イベントを告知する）: 深紫の地にキービジュアルのカルーセルと黄色のボタンを置く 5. **展開店舗一覧**（会場と日程を案内する）: 黄色の線と見出しで区切り、店舗写真のカードを縦に並べる 6. **サテライト会場**（そのほかの会場を一覧で見せる）: 黄色の見出しと注釈の下に、紫のリスト行を並べる 7. **オンラインイベント**（アプリの企画を紹介する）: 黒地に縦長のビジュアル、2 行の見出し、説明、黄色のボタンを置く 8. **キャンペーン**（応援企画を紹介する）: 白地に切り替え、カルーセル・見出し・説明・紫のボタンを置く 9. **関連リンク**（作品や関連サイトへ誘導する）: 黒地に正方形のカードを縦に並べ、それぞれにタイトル・説明・紫のボタンを付ける 10. **フッター**（権利表記）: ざらついた質感の黄色の帯に小さなコピーライトを中央に置く ## Imagery - アニメ調のキャラが楽器を構えた全身の絵をメインにする - 背景の余白には白い線だけのキャラの線画を大きく薄く置く - 楽器店の写真は明るく広角で、ギターの並ぶ売り場を写す - バナーには太いコンデンス体の英字と黄色・紫の三角形をあしらう - 黒板やチョークのようなざらついた質感を FV と帯に入れる - 音符や稲妻の小さなアイコンで音楽らしさを足す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV のキャラを左右に分け、タイトルを中央に置く - PC ではお知らせの下に、4 つのセクションへ飛ぶ丸アイコンのナビを横に並べる - PC の製品紹介は画像とテキストを左右交互の 2 カラムにする - PC では店舗カードを 3 カラム、会場リストを 3 カラムのグリッドにする - PC の関連リンクは 3 カラムのカードで、ボタンをカード幅いっぱいにする - 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-8bb2fb87`（元 LP の URL から採番） - **元 LP**: https://jp.yamaha.com/products/contents/guitars_basses/btr_collabo/collabo_2.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。