--- version: alpha name: Dark Grunge Red Action Anime LP description: 黒いざらつき質感の地に真紅の斜めカットを効かせた、TVアニメ告知用の LP。太い欧文コンデンス見出しに赤い和文ラベルを添え、明朝の本文で物語性を出す。ニュース・スタッフ・キャスト・キャラ・映像の順に情報を縦に積む。 colors: primary: '#E22113' background: '#131313' background-alt: '#010101' dark-section: '#232323' on-dark: '#FFFFFF' on-primary: '#FFFFFF' text: '#010101' line: '#232325' accent-1: '#542625' text-muted: '#8B7F86' accent-2: '#B0101A' typography: display: fontFamily: Oswald fontSize: 36px fontWeight: 700 lineHeight: 1.0 accent: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em label-button: fontFamily: Oswald fontSize: 16px fontWeight: 700 lineHeight: 1.0 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 60px news-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 66px role-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 14px more-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 18px character-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 420px character-thumb: backgroundColor: '{colors.primary}' rounded: '{rounded.full}' height: 55px movie-frame: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 190px pager-button: textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 30px side-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 80px --- # DESIGN.md — 黒×真紅のグランジ系アクションアニメ告知 LP（Dark Grunge Red Action Anime LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的 - **キーワード**: 黒地グランジ・真紅の斜めカット・コンデンス欧文見出し・明朝本文・回路線の装飾・グリッド背景 - **地の質感**: 黒地にコンクリートや紙のようなざらつきノイズ、赤い細グリッド、走査線のグリッチ - **形**: 平行四辺形・斜めカットの赤パネル、円形アイコン、角の欠けたフレーム - **温度感**: 暗く緊張感がある。赤で熱量を加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E22113` | ブランドの真紅（日付帯・パネル・ラベル） | 12% | 画素の実測 | | `background` | `#131313` | ページの基本の黒地 | 35% | 画素の実測 | | `background-alt` | `#010101` | ニュース行・フッターの漆黒 | 12% | 画素の実測 | | `dark-section` | `#232323` | グランジ質感の濃灰帯 | 10% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の見出し・本文の白 | 4% | 推定 | | `on-primary` | `#FFFFFF` | 赤地上の白文字 | 2% | 推定 | | `text` | `#010101` | 赤パネル内の黒帯（CV帯） | 1% | 画素の実測 | | `line` | `#232325` | ニュース行の区切り線 | 1% | 画素の主要色に補正 | | `accent-1` | `#542625` | 背景グリッドの暗い赤線 | 3% | 画素の主要色に補正 | | `text-muted` | `#8B7F86` | 回路装飾線・注釈のグレー | 2% | 画素の主要色に補正 | | `accent-2` | `#B0101A` | 見出しの影に入る赤のずれ | 1% | 推定 | - 地は黒〜濃灰のみ。白い面は使わない - 赤は面で大きく使い、斜めにカットしたパネルにする - 小さな赤ラベルは見出し下と役職名に使う - 文字は基本白。赤パネルの上も白 - 赤パネル内のサブ情報は黒帯に白文字 - グリッド線は暗い赤の細線で背景に沈める ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字見出し | 欧文サンセリフ | Oswald | 700 | 36px | 1.0 | 0.0em | | `accent` | 英字見出し下の赤い和文ラベル | ゴシック | Noto Sans JP | 700 | 9px | 1.2 | 0.1em | | `headline-lg` | 導入のリードコピー（斜体ぎみの太明朝） | 明朝 | Shippori Mincho | 800 | 20px | 1.4 | 0.02em | | `headline-md` | キャラクター名 | 明朝 | Noto Serif JP | 700 | 18px | 1.3 | 0.05em | | `body-md` | あらすじ・プロフィール・ニュース本文 | 明朝 | Noto Serif JP | 500 | 10px | 2.0 | 0.03em | | `headline-sm` | スタッフ・キャスト名 | 明朝 | Noto Serif JP | 700 | 12px | 1.5 | 0.03em | | `label-button` | 前後送りボタン・日付 | 欧文サンセリフ | Oswald | 700 | 16px | 1.0 | 0.0em | - 英字見出しは太いコンデンス体を大きく、白文字に赤や灰色の影をずらす - 見出し直下に小さな赤ラベルで和訳を置く - 本文はすべて明朝で、行間を広く取る - 導入本文は中央揃え - ニュース日付は年と月日を2行に分けて太字で - キャラ名は中央揃えの太明朝 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラは 1 人ずつのスライダー - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算） - ニュースは画面幅いっぱいの行。左に赤い日付帯、右に矢印 - スタッフ・キャストは役職ラベルを右揃え、名前を左揃えにして中央で揃える - キャラクターは上に丸アイコンを並べ、下に斜めの赤パネル - 映像は赤い斜め帯の上に動画枠を置く - セクションの間は黒地をたっぷり空ける ## Elevation & Depth - 影はほぼ使わない。明暗と質感で奥行きを出す - 見出しの文字は色をずらした影でグリッチ風にする - ファーストビューの下端は黒へグラデーションで溶かす ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: キャラは円形に切り抜き、赤い太枠を付ける。動画は角に黒いL字フレーム - **セクション境界**: 斜めカットの赤帯と、グランジやグリッチの横線で区切る - 角丸は使わず直角か斜めカットにする - 赤パネルは平行四辺形に傾ける - 丸はアイコンと再生ボタンだけに使う ## Components - **英字見出し＋赤ラベル**（`section-title`）: 太いコンデンスの英字に、和訳の小さな赤ラベルを重ねる - **ニュース行**（`news-row`）: 左に赤い日付帯、黒地に明朝タイトル、右に白い山形矢印 - **役職ラベル**（`role-label`）: 赤地に白い小さな文字。名前の左側に右揃えで置く - **三点吹き出しボタン**（`more-bubble`）: 名前の横に置く赤い円形の「…」ボタン。詳細を開く - **キャラ紹介の斜めパネル**（`character-panel`）: 赤い平行四辺形の上に円形アイコンを重ね、名前と黒帯のCV、プロフィールを入れる - **キャラ選択アイコン**（`character-thumb`）: 赤い太枠の円形サムネイルを5つ横に並べる - **動画フレーム**（`movie-frame`）: 赤帯の上に、角を黒L字で囲んだサムネイル。中央に赤い円形の再生ボタン - **PREV/NEXT ボタン**（`pager-button`）: 二重山形とコンデンス英字を白で。背景は付けない - **右端の縦タブ**（`side-tab`）: 右端に固定した赤い縦書きタブ。言語切替とSNSへのリンク ## Do's and Don'ts **Do** - 地は必ず黒系にして、ざらつき質感を重ねる - 赤は大きな斜め面で使い、緊張感を出す - 見出しは英字と和訳ラベルのセットにする - 本文は明朝で、行間を広めに取る - 回路線や亀裂を背景の飾りに使う **Don't** - 白や明るい背景のセクションを作らない - 角丸カードやピル型ボタンを使わない - 赤と白と黒以外の強調色を足さない - 柔らかい丸ゴシックを使わない - 大きなドロップシャドウを付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と放送時期を伝える）: キャラ集合のキービジュアルを全面に置く。左に縦書きの白い明朝で時期、下にロゴ。下端は黒に溶かす 2. **特設バナー**（注目のコンテンツへ誘導する）: 黒地の中央に横長のバナーを1枚置く 3. **ニュース**（最新情報を一覧で見せる）: 全幅の黒い行を積む。左に赤い日付帯、右に矢印 4. **イントロダクション**（作品の概要とあらすじを伝える）: 荒廃した背景をモノクロで敷く。太明朝のリードと、中央揃えの本文2段落。赤いカードの飾りを添える 5. **スタッフ**（制作陣を紹介する）: 赤い役職ラベルと白い名前を2列で揃える。脇に回路線の装飾 6. **キャスト**（声優を紹介する）: スタッフと同じ型に、三点吹き出しボタンを付ける 7. **キャラクター**（登場人物を見せる）: 赤グリッドの黒地。丸アイコンを並べ、下に斜めの赤パネル。左右の矢印で切り替える 8. **映像**（PVを見せる）: 斜めの赤帯の上に動画枠と再生ボタン。下にPREV/NEXT 9. **フッター**（ロゴと権利表記を載せる）: 黒地の中央にロゴと小さなコピーライト ## Imagery - アニメのキービジュアルは高彩度のまま全面に使う - 背景は廃墟などをモノクロにし、暗く沈めて文字を読みやすくする - 赤一色のテレホンカードのような飾りを斜めに置く - 回路線・亀裂・グリッチの横線を白や黒で細く入れる - キャラの顔は胸から上を円形に切り抜く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC のファーストビューは横長の別ビジュアル。ロゴと時期を左に配置する - PC のニュースは見出しを左に縦組みし、一覧を右に寄せる - PC のキャラクターは2カラムのグリッドで全員を表示し、最後の1人は中央に置く - PC の映像見出しは右端に大きく置く - 右端の縦タブは SP・PC 共通 - スタッフ名の複数人表記は、PC では1行にまとめる ## 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-079f46e3`（元 LP の URL から採番） - **元 LP**: https://psyren-anime.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。