--- version: alpha name: Monochrome Hero Idol Official Site description: 白地と漆黒の帯を交互に重ね、濃紺を差し色にした男性アイドルグループの公式サイト。極太欧文の見出しに、透かしの漢字アウトラインを重ねる。日付付きリストと黒い全幅の「VIEW ALL」バーを繰り返して情報を整理し、カラフルなヒーロー衣装の写真をいちばん目立たせている。 colors: primary: '#2B3A64' background: '#FFFFFF' dark-section: '#0D0D0D' secondary: '#1A1B20' text: '#0A0909' text-muted: '#8A8A8A' line: '#F7F2ED' background-alt: '#FDFDFD' on-dark: '#FFFFFF' cta: '#2B3A64' on-cta: '#F4FDFF' accent-1: '#D0342C' tint-1: '#F7F2ED' text-muted-accessible: '#767676' typography: display: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em accent: fontFamily: Oswald fontSize: 16px fontWeight: 700 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em label-button: fontFamily: Oswald fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 12px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' section-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 70px date-list-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 48px badge-new: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 10px view-all-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 30px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 20px sns-icons: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 32px bottom-tab: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 40px --- # DESIGN.md — 白黒×紺アクセントの特撮系アイドル公式サイト（Monochrome Hero Idol Official Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、力強い・インパクト、シンプル・ミニマル、情報量多め・訴求型 - **キーワード**: 白黒コントラスト・極太欧文見出し・漢字の透かし・日付リスト・黒帯ボタン・ヒーロー写真 - **地の質感**: フラットな単色面と細い罫線。装飾は見出し背後の線画漢字だけにする - **形**: ほぼ直角の矩形が基本。リストカードは角丸 2px 程度、SNS アイコンは正円 - **温度感**: クールで無機質な地に、写真の原色が熱量を加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2B3A64` | 見出し下線・日付・CTA の濃紺 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 40% | 画素の実測 | | `dark-section` | `#0D0D0D` | リリース・SNS・フッターの黒帯 | 22% | 画素の実測 | | `secondary` | `#1A1B20` | VIEW ALL バーの墨黒 | 3% | 画素の実測 | | `text` | `#0A0909` | 見出し・本文の黒 | 2% | 画素の実測 | | `text-muted` | `#8A8A8A` | 曜日・注釈のグレー | 1% | 推定 | | `line` | `#F7F2ED` | リストカードの枠線 | 1% | 画素の主要色に補正 | | `background-alt` | `#FDFDFD` | バナー枠の淡いグレー | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の白文字 | 1% | 画素の実測 | | `cta` | `#2B3A64` | 問い合わせボタンの濃紺 | 1% | 画素の実測 | | `on-cta` | `#F4FDFF` | CTA 上の白文字 | 0% | 画素の実測 | | `accent-1` | `#D0342C` | 日曜の日付などの赤 | 0% | 推定 | | `tint-1` | `#F7F2ED` | 透かし漢字の線色 | 2% | 画素の主要色に補正 | | `text-muted-accessible` | `#767676` | AA を満たす補正値（計算） | | 計算 | - 地色は白とほぼ黒の 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 24px | 1.2 | 0.02em | | `headline-md` | リリース名・SNS 見出し | 欧文サンセリフ | Noto Sans JP | 900 | 18px | 1.3 | 0.04em | | `accent` | リストの日付数字 | 欧文サンセリフ | Oswald | 700 | 16px | 1.1 | 0.0em | | `body-md` | リストのタイトル・本文 | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.02em | | `note` | 見出し下のカナ・注釈 | ゴシック | Noto Sans JP | 500 | 8px | 1.5 | 0.15em | | `label-button` | VIEW ALL などのボタン文字 | 欧文サンセリフ | Oswald | 700 | 12px | 1.0 | 0.15em | - 見出しは極太の英字＋小さなカナの 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 ```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-e035d623`（元 LP の URL から採番） - **元 LP**: https://www.thesuperboys.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。