--- version: alpha name: Grunge Dark Crimson Anime Official Site description: チャコールのコンクリート質感と深紅の帯を交互に積む、格闘アクション系アニメの公式サイト型。かすれたコンデンス欧文の大見出しに小さな赤ラベルのカナ訳を重ね、ドット網点や飛沫で境界をつなぐ。 colors: background: '#3B3B3B' dark-section: '#000000' primary: '#70201F' secondary: '#71201E' accent-1: '#9D0203' on-dark: '#F0F0F0' text-muted: '#B8B8B8' surface: '#2A2A2A' line: '#454140' background-alt: '#75736F' typography: display: fontFamily: Oswald fontSize: 44px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em body-lg: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Oswald fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 100px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' section-title: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 56px label-kana: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 12px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 330px character-tile: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 140px credit-item: textColor: '{colors.on-dark}' typography: '{typography.body-lg}' height: 40px schedule-table: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 30px tab-slanted: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 36px video-thumb: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 190px link-viewall: textColor: '{colors.accent-1}' typography: '{typography.label-button}' height: 20px --- # DESIGN.md — 黒×深紅グランジのアニメ公式 LP（Grunge Dark Crimson Anime Official Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的 - **キーワード**: グランジ・コンクリート質感・深紅・網点ドット・斜めカット・かすれ欧文 - **地の質感**: ざらついたコンクリート・紙の汚し、インク飛沫、ハーフトーンドット - **形**: 角丸なし、平行四辺形の斜めカット、破れたような不定形の境界 - **温度感**: 冷たく重い暗色に、熱を感じる血のような深紅を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#3B3B3B` | 基本のチャコール地（質感付き） | 38% | 画素の実測 | | `dark-section` | `#000000` | あらすじ・放送情報・楽曲カードの黒地 | 25% | 画素の実測 | | `primary` | `#70201F` | キャラクター・動画セクションの深紅地 | 17% | 画素の実測 | | `secondary` | `#71201E` | 表ヘッダー・ラベル・タブの赤 | 2% | 画素の実測 | | `accent-1` | `#9D0203` | 役職名・ダイヤ記号・日付の鮮赤 | 0% | 画素の実測 | | `on-dark` | `#F0F0F0` | 暗地上の見出し・本文の白 | 3% | 画素の実測 | | `text-muted` | `#B8B8B8` | 注釈・著作表記の淡灰 | 0% | 画素の実測 | | `surface` | `#2A2A2A` | ニュースカードの暗灰面 | 3% | 画素の実測 | | `line` | `#454140` | 表の行区切り線 | 0% | 画素の主要色に補正 | | `background-alt` | `#75736F` | 網点や汚しの中間グレー | 6% | 画素の主要色に補正 | - 地はチャコール・黒・深紅の 3 色をセクションごとに交互に切り替える - 深紅地はキャラクター一覧と動画など絵が主役のセクションに使う - 情報表とあらすじは黒地にして白文字で読ませる - 鮮赤は役職名・記号・日付など小さい要素だけに絞る - 本文は白か淡灰のみ。色付きの本文は使わない - セクション境界は網点ドット・飛沫を中間グレーや赤で描き、色をなじませる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション英字大見出し（かすれ加工） | 装飾・ディスプレイ | Oswald | 700 | 44px | 1.0 | 0.02em | | `headline-lg` | あらすじの導入コピー | ゴシック | Noto Sans JP | 400 | 24px | 1.4 | 0.05em | | `headline-sm` | 放送情報などの小見出し | ゴシック | Noto Sans JP | 500 | 17px | 1.4 | 0.02em | | `body-md` | あらすじ本文（中央揃え） | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `body-lg` | スタッフ・キャスト名 | ゴシック | Noto Sans JP | 500 | 13px | 1.5 | 0.02em | | `note` | 表のセル・役職名・注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | 大見出しに重ねる赤ラベルのカナ訳 | ゴシック | Noto Sans JP | 700 | 7px | 1.2 | 0.1em | | `label-button` | タブ・ラベル・もっと見るリンク | 欧文サンセリフ | Oswald | 700 | 12px | 1.2 | 0.05em | - 大見出しは縦長コンデンス欧文の大文字で、インクのかすれ加工を入れる - 大見出しの右下に赤帯の小さなカナ訳ラベルを重ねる - あらすじ本文は中央揃えにし、短い段落を空行で区切る - スタッフ・キャストは赤の小さな役職名＋白の名前を 2 段で組む - 表の文字は極小で中央揃え - 背景に巨大な作品名ロゴを赤でかすれさせ、透かしとして敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラクター・スタッフ・キャストは 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しは左寄せ、本文ブロックは中央 - セクション間はグランジの帯や網点で 60〜100px の移行エリアを作る - キャラクターは平行四辺形の画像を 2 枚ずつ隙間なしで並べる - スタッフ・キャストは 2 カラムのグリッドで行間を広く取る - 放送情報は全幅の 3 列表で組む - 楽曲は黒いカードにタブを付けて切り替える ## Elevation & Depth - 影は使わず、明度の差と質感でレイヤーを分ける - 黒カードはチャコール地の上にフラットに置く - 動画サムネイルには半透明の暗いオーバーレイをかける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: キャラ画像は平行四辺形の斜めカット、写真は長方形 - **セクション境界**: 破れた紙や飛沫のような不定形の境界と網点のグラデ - 角丸は使わない（外部埋め込みは例外） - タブ・ラベルは右端を斜めに切り落とす - 斜めの角度は 10〜15° でそろえる - 再生ボタンは円形で、円周に文字を回す ## Components - **グランジ英字見出し**（`section-title`）: かすれた白のコンデンス大文字に、赤帯のカナ訳を重ねる - **カナ訳ラベル**（`label-kana`）: 見出しの右下に重ねる小さな赤帯 - **ニュースカード**（`news-card`）: 暗灰面にバナー画像・タイトル・赤い日付を置き、左右の矢印で送るスライダー - **斜めキャラタイル**（`character-tile`）: 平行四辺形のキャラ画像の下に白い小さな名前を入れる - **役職＋名前**（`credit-item`）: 赤の極小役職名の下に白の名前。声優には吹き出しアイコンを付ける - **放送・配信表**（`schedule-table`）: 赤ヘッダー＋黒地の行。行は細い灰線で区切り、見出しの頭に赤いダイヤを付ける - **斜めタブ**（`tab-slanted`）: 選択中は黒、非選択は赤の斜めカットのタブ - **動画サムネイル**（`video-thumb`）: 16:9 画像の中央に白い円形の再生ボタン、下にタイトルを置く - **一覧リンク**（`link-viewall`）: 赤い横線と赤のコンデンス大文字で右寄せにする ## Do's and Don'ts **Do** - セクションの地色を黒・チャコール・深紅で切り替えてリズムを作る - 境界には網点やインク飛沫を必ず入れる - 見出しは英字大文字＋赤いカナ訳ラベルの組み合わせで統一する - 画像やタブを斜めに切って、スピード感を出す - 赤は面積を絞って要所の強調に使う **Don't** - 角丸やピル型のボタンを使わない - パステル色や明るい白い地を使わない - 柔らかい丸ゴシックを使わない - ドロップシャドウや光沢のあるグラデーションを使わない - フラットで質感のない単色の地にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と主要キャラを一目で伝える）: キャラ集合のキービジュアルを全幅に置き、左右の縦書きコピーと下部にロゴを配置する 2. **放送日告知**（放送開始日と局を伝える）: チャコール地に白い太字を中央揃えで置き、局名には下線を付ける 3. **ニュース**（最新情報を伝える）: 英字見出し＋右寄せの一覧リンク、矢印付きのカードスライダー 4. **SNS**（公式アカウントへ誘導する）: 縦書きの赤い英字見出しと黒い埋め込みタイムライン 5. **イントロダクション**（あらすじで世界観を語る）: 黒グランジ地に白の導入コピーと中央揃えの段落 6. **キャラクター**（登場人物を一覧で見せる）: 深紅地に斜めカットの画像を 2 列で並べ、背景にかすれたロゴを敷く 7. **スタッフ**（制作陣を示す）: チャコール地に赤い役職名と白い名前を 2 列で組む 8. **キャスト**（声優を紹介する）: スタッフと同じ型に吹き出しアイコンを足す 9. **放送・配信情報**（視聴方法を網羅する）: 黒地に赤いダイヤ付きの小見出しと、赤ヘッダーの表を 3 つ並べる 10. **ムービー**（PV を見てもらう）: 深紅地に再生ボタン付きのサムネイルを縦に並べる 11. **ミュージック**（主題歌とアーティストを紹介する）: 斜めタブ付きの黒カードに、写真・曲名・赤ラベルのコメントを入れる 12. **フッター**（公式サイトへの導線と権利表記）: かすれたロゴバナーと極小の注釈を中央揃えで置く ## Imagery - アニメのキャラは鋭い表情のアップで、ハイコントラストに - 画像は平行四辺形にクロップして隙間なく並べる - 背景にはコンクリートや汚れた紙のテクスチャを敷く - 黒・グレー・赤のハーフトーンドットとインク飛沫を境界に入れる - 作品名を巨大に赤でかすれさせ、反転して透かしにする - 人物写真は暗いスタジオでネオン系の煙をまとわせる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は左に固定の赤いサイドナビ（ロゴ・放送日・メニュー・言語）、右にコンテンツを置く - PC のニュースは 3 カード横並び、キャラクターは 4 列 - PC のスタッフ・キャストは 4 列のグリッド - PC の動画は 2 列横並び、楽曲カードは写真と曲名を横に並べる - PC でも表は全幅の 3 列のまま、文字サイズを少し上げる ## 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-e07f07dd`（元 LP の URL から採番） - **元 LP**: https://www.guiltygear.com/ggstdr/jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。