黒×真紅のグランジ系アクションアニメ告知 LP

Dark Grunge Red Action Anime LP

黒いざらつき質感の地に真紅の斜めカットを効かせた、TVアニメ告知用の LP。太い欧文コンデンス見出しに赤い和文ラベルを添え、明朝の本文で物語性を出す。ニュース・スタッフ・キャスト・キャラ・映像の順に情報を縦に積む。

エンタメ・ゲーム・アプリラグジュアリー・ダーク力強い・インパクトクール・先進的SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は黒〜濃灰のみ。白い面は使わない
赤は面で大きく使い、斜めにカットしたパネルにする
小さな赤ラベルは見出し下と役職名に使う
文字は基本白。赤パネルの上も白
赤パネル内のサブ情報は黒帯に白文字
グリッド線は暗い赤の細線で背景に沈める

TYPOGRAPHY

書体

displayセクションの英字見出し欧文サンセリフ／ Oswald 700 ／ 36px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

accent英字見出し下の赤い和文ラベルゴシック／ Noto Sans JP 700 ／ 9px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg導入のリードコピー（斜体ぎみの太明朝）明朝／ Shippori Mincho 800 ／ 20px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdキャラクター名明朝／ Noto Serif JP 700 ／ 18px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

body-mdあらすじ・プロフィール・ニュース本文明朝／ Noto Serif JP 500 ／ 10px ／行間 2.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-smスタッフ・キャスト名明朝／ Noto Serif JP 700 ／ 12px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

label-button前後送りボタン・日付欧文サンセリフ／ Oswald 700 ／ 16px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

英字見出しは太いコンデンス体を大きく、白文字に赤や灰色の影をずらす
見出し直下に小さな赤ラベルで和訳を置く
本文はすべて明朝で、行間を広く取る
導入本文は中央揃え
ニュース日付は年と月日を2行に分けて太字で
キャラ名は中央揃えの太明朝

PAGE STRUCTURE

セクション構成

ファーストビュー作品の世界観と放送時期を伝えるキャラ集合のキービジュアルを全面に置く。左に縦書きの白い明朝で時期、下にロゴ。下端は黒に溶かす
特設バナー注目のコンテンツへ誘導する黒地の中央に横長のバナーを1枚置く
ニュース最新情報を一覧で見せる全幅の黒い行を積む。左に赤い日付帯、右に矢印
イントロダクション作品の概要とあらすじを伝える荒廃した背景をモノクロで敷く。太明朝のリードと、中央揃えの本文2段落。赤いカードの飾りを添える
スタッフ制作陣を紹介する赤い役職ラベルと白い名前を2列で揃える。脇に回路線の装飾
キャスト声優を紹介するスタッフと同じ型に、三点吹き出しボタンを付ける
キャラクター登場人物を見せる赤グリッドの黒地。丸アイコンを並べ、下に斜めの赤パネル。左右の矢印で切り替える
映像PVを見せる斜めの赤帯の上に動画枠と再生ボタン。下にPREV/NEXT
フッターロゴと権利表記を載せる黒地の中央にロゴと小さなコピーライト

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へのリンク

守ること

地は必ず黒系にして、ざらつき質感を重ねる
赤は大きな斜め面で使い、緊張感を出す
見出しは英字と和訳ラベルのセットにする
本文は明朝で、行間を広めに取る
回路線や亀裂を背景の飾りに使う

DON'T

避けること

白や明るい背景のセクションを作らない
角丸カードやピル型ボタンを使わない
赤と白と黒以外の強調色を足さない
柔らかい丸ゴシックを使わない
大きなドロップシャドウを付けない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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段落。赤いカードの飾りを添える
スタッフ（制作陣を紹介する）: 赤い役職ラベルと白い名前を2列で揃える。脇に回路線の装飾
キャスト（声優を紹介する）: スタッフと同じ型に、三点吹き出しボタンを付ける
キャラクター（登場人物を見せる）: 赤グリッドの黒地。丸アイコンを並べ、下に斜めの赤パネル。左右の矢印で切り替える
映像（PVを見せる）: 斜めの赤帯の上に動画枠と再生ボタン。下にPREV/NEXT
フッター（ロゴと権利表記を載せる）: 黒地の中央にロゴと小さなコピーライト

Imagery

アニメのキービジュアルは高彩度のまま全面に使う
背景は廃墟などをモノクロにし、暗く沈めて文字を読みやすくする
赤一色のテレホンカードのような飾りを斜めに置く
回路線・亀裂・グリッチの横線を白や黒で細く入れる
キャラの顔は胸から上を円形に切り抜く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC のファーストビューは横長の別ビジュアル。ロゴと時期を左に配置する
PC のニュースは見出しを左に縦組みし、一覧を右に寄せる
PC のキャラクターは2カラムのグリッドで全員を表示し、最後の1人は中央に置く
PC の映像見出しは右端に大きく置く
右端の縦タブは SP・PC 共通
スタッフ名の複数人表記は、PC では1行にまとめる

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 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://psyren-anime.com/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP