DESIGN.md — 白黒×紺アクセントの特撮系アイドル公式サイト（Monochrome Hero Idol Official Site）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 白黒コントラスト・極太欧文見出し・漢字の透かし・日付リスト・黒帯ボタン・ヒーロー写真
• 地の質感: フラットな単色面と細い罫線。装飾は見出し背後の線画漢字だけにする
• 形: ほぼ直角の矩形が基本。リストカードは角丸 2px 程度、SNS アイコンは正円
• 温度感: クールで無機質な地に、写真の原色が熱量を加える

Colors

• 地色は白とほぼ黒の 2 色だけにし、セクション単位で切り替える
• 濃紺は見出し下線・日付・NEW バッジ・主 CTA に限って使う
• 色数は写真に任せ、UI には彩度の高い色を使わない
• 日曜は赤、土曜は青で曜日を色分けする
• 透かし漢字は薄いグレーの線だけで描き、塗らない
• bottom-tab は文字 #8A8A8A × 背景 #FFFFFF のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 見出しは極太の英字＋小さなカナの 2 段で組む
• 見出しの下に濃紺の短い下線を引く
• 見出しの右上に、意味を表す漢字 2 文字をアウトラインで大きく透かす
• 日付は年を小さく、月日を太く大きく、曜日を最小にした縦 3 段にする
• ボタンの英字は字間を広げ、横に小さく和訳を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。プロフィールだけ横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• リストは幅いっぱいのカードを縦に 4 件並べる
• 各リストの下に全幅の黒い VIEW ALL バーを置く
• 黒帯セクションは中央揃え、白地セクションは左揃え
• 画面下に 5 項目のタブナビを固定する

Elevation & Depth

• 基本は影なしのフラット
• バナーの外枠にだけ薄いぼかし影を付ける
• CTA には下方向に浅い影を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: メインビジュアルは全幅。メンバー写真は縦長の矩形、告知バナーは角丸 8px
• セクション境界: 直線の色面切り替え
• ボタンは直角かごく小さな角丸にする
• SNS アイコンだけ正円にする
• 矢印ボタンは白い正方形で、バーの右端に置く

Components

• 英字見出し＋透かし漢字（section-heading）: 極太の英字・カナ・濃紺の下線を重ね、右に線画の漢字を透かす
• 日付付きリストカード（date-list-card）: 左に縦 3 段の日付と縦線、右にバッジとタイトル、右端に小さな矢印を置く
• NEW/NEXT バッジ（badge-new）: 濃紺地に白の小さな英字ラベル
• VIEW ALL 黒帯（view-all-bar）: 全幅の黒いバー。白い英字と和訳を並べ、右端に白い正方形の矢印ボタンを置く
• 問い合わせ CTA（button-primary）: 濃紺の横長ボタン。左にメールアイコン、右に白丸の矢印を置く
• 枠線ボタン（button-outline）: 白地に濃紺の細枠をかけ、英字と矢印を入れる
• SNS 丸アイコン（sns-icons）: 黒地に各 SNS のブランド色の円を 4 つ並べ、下に名称を添える
• 固定タブナビ（bottom-tab）: 白地にアイコンとラベルを 5 つ並べ、現在地を濃紺で示す

Do's and Don'ts

Do - 見出しは毎回、英字・カナ・下線・透かし漢字のセットで作る - リストの下には必ず VIEW ALL 黒帯を置く - 白と黒のセクションを交互に配置してリズムを作る - 写真は原色の衣装が映える高彩度のものを使う

Don't - UI にパステル色やグラデーションを使わない - ピル型の丸いボタンを使わない - 見出しを細い書体で組まない - 透かし漢字を濃い色で塗らない

Page Structure

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

1. ファーストビュー（グループの世界観を示す）: 宇宙背景に全員の集合写真と立体ロゴを重ね、全幅で見せる
2. ライブ・イベント（直近の予定を告知する）: 日付リストを 4 件並べ、下に VIEW ALL 黒帯を置く
3. ニュース（お知らせを伝える）: イベントと同じ形のリストに NEW バッジを付ける
4. 告知バナー（主力の公演を訴求する）: 角丸の大きなキービジュアルを 1 枚置く
5. 新譜・動画（楽曲と MV に誘導する）: 黒帯の上にジャケット・曲名・白ボタンを置き、その下に全幅の動画サムネイル
6. プロフィール（メンバーを紹介する）: 縦長写真の横スクロールにドットのページャーを付ける
7. メディア出演（出演情報を伝える）: 日付リスト 2 件と VIEW ALL 黒帯
8. グッズ（通販サイトへ送客する）: グッズ着用の集合写真バナーと黒帯ボタン
9. SNS（フォローを促す）: 黒地の中央に見出しを置き、丸アイコンを 4 つ並べる
10. お問い合わせ（仕事の依頼を受け付ける）: 中央揃えの説明文、濃紺の CTA、注釈
11. アプリ告知（配信アプリに誘導する）: 白いバナーにロゴ・QR コード・集合写真を入れる
12. フッター（補足のリンクと権利表記）: 黒地に巨大なアウトラインのロゴを置き、枠線付きのリンクを 2 列で並べる

Imagery

• メンバーごとに色の違うヒーロー衣装を着た集合写真を使う
• 宇宙や星空の背景に、メタリックで立体的なロゴを合わせる
• メンバーの個別写真は、濃紺の宇宙背景で胸から上を撮った縦構図
• MV は街中や倉庫でのロケ写真をワイドで使う
• グッズ写真は白背景にカラフルな T シャツで並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横並びのグローバルナビと SNS アイコンを置く
• PC では、イベントとニュース、メディアとグッズをそれぞれ 2 カラムで並べる
• PC の黒帯ボタンは全幅ではなく、カラム幅に収める
• PC の問い合わせはカード内で、左に文言・右に CTA の横並びにする
• SP は下部の固定タブナビ、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 行書くと起動時に読み込まれる。