DESIGN.md — 紺黒スモークと銀文字のライブツアー LP（Dark Smoky Concert Tour LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: スモーク背景・銀グラデ見出し・細い白枠・ティールのアコーディオン・ネオン黄・ツアー日程
• 地の質感: 霧やスモークがにじむ濃紺〜黒の写真調テクスチャ。チケットだけ明るい灰色の雲模様にする
• 形: 基本は角丸なしの四角と 1〜2px の白い細枠。チケット枠だけ大きな角丸
• 温度感: 冷たい。青・ティール寄りの暗色に、黄とオレンジの暖色をごく少量差す

Colors

• 地は黒と濃紺スモークを交互に置き、セクション切替は地色の差で示す
• チケットだけ明るい灰色の雲地にして、購入情報を目立たせる
• 強調色はネオン黄（日付・ラベル）とオレンジ（入会 CTA・会員見出し）の 2 色に絞る
• 情報カードはティール黒の面に白い細枠、または左右だけ細い線を付ける
• 商品写真は明るい灰色の台紙に載せ、暗い背景との明暗差をつける
• シアンはシングル曲名など一点だけに使う
• accordion-row は文字 #7A8486 × 背景 #03313C のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• button-primary は文字 #F5F7F1 × 背景 #DD6C21 のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B3571B、4.53:1）を使う。
• limited-badge は文字 #F5F7F1 × 背景 #DD6C21 のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B3571B、4.53:1）を使う。

Typography

• セクション名は細長いコンデンス欧文を画面幅いっぱいに置き、銀〜灰のメタル調グラデにする
• チケット見出しだけ紺から青のグラデにする
• 和文の本文は中央揃えで小さめにし、行間は広めにとる
• 価格は数字を大きく、税込表記は小さく添える
• 日付は数字を太く大きく、曜日と月日は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。グッズも 1 列で縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクション冒頭に大きな欧文見出しを中央に置く
• 日程は同じ型のアコーディオン行を 30 件近く縦に繰り返す
• グッズは白い細枠の箱に、灰色台紙の写真・商品名・価格を中央揃えで入れる
• CTA や注意事項は幅 80% 程度で中央に置く
• 本文ブロックの左右には 5% 程度の余白をとる

Elevation & Depth

• 影はほぼ使わず、平面に細枠で区切る
• 会員証のサンプル画像だけ外側に白いぼかしの光を付ける
• 背景のスモークで奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 四角いまま切り抜く。商品は灰色台紙の上に置いた切り抜き画像にする
• セクション境界: 直線で地色を切り替える。細い水平線で区切ることもある
• カード・アコーディオンは角丸なし
• チケット販売の黒カードと配信用の白カードだけ角丸 20px
• CTA ボタンはピル型
• 枠線は 1〜2px の白か灰色

Components

• メタル調欧文見出し（section-title-metal）: 銀グラデのコンデンス欧文を画面幅いっぱいに置くセクション名
• 白細枠ボックス（framed-box）: 新作告知やグッズを囲む 2px の白い枠。中身は中央揃え
• 日程・情報のアコーディオン（accordion-row）: ティール黒の面に日付・県・会場名を並べ、右上に＋を置く。左右に細い線
• お知らせカード（news-card）: 右上に字間の広い日付と＋、本文は白く太いタイトル。下に細線
• チケット販売カード（ticket-card）: 黒または白の角丸カード。中に購入ボタンと注意書きを入れる
• 黄色ラベル帯（label-yellow）: 「チケット代」などの項目名を入れる横長の黄色い帯
• 入会 CTA ボタン（button-primary）: オレンジのピル型。白文字は 2 行
• 注意事項バー（notice-accordion）: 淡い水色の横長バーに下線付きの文字と＋
• 星区切りの特典リスト（benefit-list-star）: 中央揃えの太字項目の間をオレンジの星で区切る
• 限定バッジ（limited-badge）: 商品枠の右上に付く小さな茶オレンジの限定タグ

Do's and Don'ts

Do - 背景は暗いスモーク写真調にして、セクションごとに濃淡を変える - セクション名は大きなコンデンス欧文にし、メタル調にする - 情報はすべて同じ型のボックスとアコーディオンで繰り返す - 差し色は黄とオレンジだけにし、使う場所を絞る - 商品は明るい灰色台紙に載せ、白い細枠で囲む

Don't - パステルや白地を広く使わない（チケットの灰色地だけ例外） - カードに角丸や影を多用しない - 見出しに丸ゴシックや手書き書体を使わない - 差し色を 3 色以上に増やさない - 本文を大きくしすぎない。情報密度を保つ

Page Structure

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

1. ファーストビュー（アーティストと新章のイメージを伝える）: 暗い青のスモーク写真にメンバーの立ち姿。黄色い明朝の大きなコピーを重ね、下に動画を埋め込む
2. 新作リリース告知（新曲と発売日を知らせる）: 白細枠の箱に、白・シアン・白の大きなコンデンス文字を 3 段。動画、仕様、特典カード、収録曲を続ける
3. ツアーキービジュアル（ツアーの世界観を示す）: 灰色地に巨大な黒いロゴと宇宙飛行士風の人物を置いたバナー
4. お知らせ（最新情報を一覧にする）: ティールのニュースカードを 3 件並べ、下に小さな READ MORE を置く
5. チケット（価格と購入方法を案内する）: 灰色の雲地に紺グラデの見出し。黒の角丸カード、白の配信カード、黄色ラベル、販売サイトのバナーを置く
6. スケジュール（全公演の日程と会場を見せる）: 黒地にティールのアコーディオン行を大量に並べる。終わった公演は取り消し線にする
7. グッズ（公式グッズを紹介する）: 購入方法 3 種のアコーディオンのあと、白細枠の商品ボックスを縦に積む
8. ファンクラブ企画（会員限定の企画を紹介する）: オレンジの太い和文見出し、中央揃えの本文、バナー、会報の誌面画像
9. 会員募集 CTA（新規入会を促す）: 会員証サンプルを光らせて見せ、特典説明と紹介アコーディオン、オレンジのピル型ボタンを置く
10. 会員特典（入会のメリットを並べる）: 白い太字見出しと細線。特典を星区切りで縦に並べる
11. 関連告知・フッター（会報・映像作品・関連サイトへ誘導する）: 会報の表紙 2 枚、紫の映像バナー、SNS アイコン、白細枠のロゴバナー 2 つ、クレジット

Imagery

• 暗い背景にメンバーを逆光で立たせる。青白いスモークに包まれたライブ写真調
• ツアーのアイコンは宇宙飛行士風のシルエットと星空
• グッズは影のない正面からの切り抜き画像。前と後ろを並べる
• 背景は霧や雲のテクスチャを全面に敷く（紺・黒・灰）
• ライブ映像のバナーは紫のネオン照明で、他と差をつける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横並びのテキストナビを固定する
• PC のグッズは 3 列のグリッドにする
• PC の収録曲は 3 列の横並びにする
• PC のコンテンツ幅は 60〜70% に絞り、左右の暗い背景を広く見せる
• 日程行は PC で 1 行にまとめ、日付・県・会場を横に並べる

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