DESIGN.md — 黒×深紅グランジのアニメ公式 LP（Grunge Dark Crimson Anime Official Site）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: グランジ・コンクリート質感・深紅・網点ドット・斜めカット・かすれ欧文
• 地の質感: ざらついたコンクリート・紙の汚し、インク飛沫、ハーフトーンドット
• 形: 角丸なし、平行四辺形の斜めカット、破れたような不定形の境界
• 温度感: 冷たく重い暗色に、熱を感じる血のような深紅を差す

Colors

• 地はチャコール・黒・深紅の 3 色をセクションごとに交互に切り替える
• 深紅地はキャラクター一覧と動画など絵が主役のセクションに使う
• 情報表とあらすじは黒地にして白文字で読ませる
• 鮮赤は役職名・記号・日付など小さい要素だけに絞る
• 本文は白か淡灰のみ。色付きの本文は使わない
• セクション境界は網点ドット・飛沫を中間グレーや赤で描き、色をなじませる

Typography

• 大見出しは縦長コンデンス欧文の大文字で、インクのかすれ加工を入れる
• 大見出しの右下に赤帯の小さなカナ訳ラベルを重ねる
• あらすじ本文は中央揃えにし、短い段落を空行で区切る
• スタッフ・キャストは赤の小さな役職名＋白の名前を 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。