DESIGN.md — 深紅×チャコールの明朝系SFアニメ公式LP（Crimson Serif Sci-Fi Anime Official Site）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 上品・高級、クール・先進的、シンプル・ミニマル
• キーワード: 深紅のセリフ英字・ライトグレー地・二重線のピルボタン・回路のような曲線・円形の切り抜き・黒い波形の帯
• 地の質感: フラットなライトグレー。暗いセクションには点と十字の細かいグリッドを薄く敷く
• 形: ピル型ボタン、角丸カード、円形の画像マスク、上下がうねる帯
• 温度感: クールなグレーに深紅で熱を差す、やや冷たい基調

Colors

• 地はライトグレー #F0F0F0 が基本。純白は面には使わず、ボタンやアイコンだけに使う
• 英字のセクション見出し・小ラベル・曲線装飾はすべて深紅で統一する
• ボタンは常にチャコールの面に白文字。赤い面の上だけ赤地＋白の線のボタンにする
• ページ中盤に深紅の全面帯と黒の全面帯を 1 回ずつ入れて、リズムを変える
• 本文はチャコール系のグレー。真っ黒は使わない

Typography

• 和文も欧文もセリフ・明朝で統一し、ゴシックは使わない
• 英字見出しは大きく細め。左右に寄せたり 2 行に分けたりして配置する
• 本文は行間を 2.0 前後まで広くとる
• 太字はほとんど使わない。強調はサイズと赤い色で出す
• カード上の話数は 90° 回転させて右端に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ボタン群だけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの頭に深紅の英字大見出しを置き、曲線のラインを添える
• 配信先ボタンは 2 列で並べ、奇数個のときは最後の 1 個を中央に置く
• 本文ブロックは左揃え。告知系は中央揃え
• カードは縦に並べ、カード同士の間隔は 8px 程度
• MORE ボタンは各セクションの最後に中央配置

Elevation & Depth

• 影はほぼ使わずフラットに作る
• ボタンはチャコールのピルの外側に 4px 程度の隙間を空け、細いグレーの二重線で囲んで立体感を出す
• 黒帯の上下は波形にくり抜いて、浮いている印象を出す

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: キービジュアルの画像は円形マスクで切り抜き、外周に細い赤の同心円と小さな点を添える。話数カードは角丸 16px
• セクション境界: 赤帯は片側だけ緩い段差のカーブ、黒帯は上下ともうねる波形で切り替える
• ボタンはすべてピル型＋外周の細い線
• 曲線ラインの端には小さな赤い丸を付けて回路のように見せる
• 直線の区切り線は細く、赤またはグレーにする

Components

• 二重線のピルボタン（button-pill-dark）: チャコールのピルの外側に細いグレーの枠を重ねる。左端に小さなアイコン、中央に文字
• MOREボタン（button-more）: 左に白い小さな点、中央に英字。赤地や黒地の上では面を透明にして白線だけで描く
• 英字セクション見出し（section-title-en）: 深紅のセリフ英字を大きく置き、下や横から曲線ラインを伸ばす。ラインの端は赤い点で止める
• 赤い英字ラベル（label-red）: 小さな赤い英字の上ラベルの下に、大きな和文見出しを置く
• 話数カード（episode-card）: 場面写真を全面に敷いた角丸カード。左下に白いタイトル、右端に回転させた大きな話数表記
• 円形ビジュアル（circle-visual）: 画像を円で切り抜き、赤い細線の同心円と点で囲む。画面の端から少しはみ出させる
• 左右線つき小見出し（title-with-rules）: 中央の赤い英字の左右に赤い細線を伸ばす
• 動画カルーセル（movie-carousel）: 黒帯の上に横スクロールのサムネイルを並べる。中央に円形の再生アイコン、下にキャプション

Do's and Don'ts

Do - 見出しの英字は深紅のセリフ体で大きく扱う - ボタンは必ずピル型＋外周の細い線で作る - 曲線ラインと赤い点で見出しや写真をつなぐ - 余白を広くとり、静かで上品な密度を保つ - 赤帯・黒帯は 1 回ずつ入れて、全体のリズムを作る

Don't - ゴシック体や太いポップ書体を使わない - 赤を本文や広い面に多用しない（全面帯の 1 か所だけに留める） - 角張った四角ボタンや、強いドロップシャドウを使わない - 純白の地やビビッドな多色使いにしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（作品の世界観とロゴを見せる）: キャラクター全員のキービジュアルを全幅で敷き、上部中央にロゴ。下端は緩やかなカーブで地と切り替える
2. 放送・配信情報（放送日と視聴先を案内する）: 赤い英字ラベルと明朝の大見出しを中央揃えにし、配信先を種類ごとに見出しで分けて 2 列のピルボタンで並べる
3. ニュース（最新のお知らせを伝える）: 縦書きの赤い英字見出しと曲線ライン。横スライドのカードに日付（赤）と本文を添え、最後に MORE ボタン
4. 作品紹介（作品のコンセプトを伝える）: 2 行に分けた英字見出しと右側の円形ビジュアル。下に明朝のリードと本文、注釈を置く
5. キャラクター紹介（主役ロボットの設定を見せる）: 深紅の全面帯に白い英字見出しと全身の立ち絵。白文字の説明とクレジットを置き、白線の MORE ボタンで締める
6. エピソード一覧（各話の世界観を見せる）: 角丸の場面写真カードを縦に並べ、右端に回転させた話数を置く
7. 動画（PVを見せる）: 上下が波形の黒帯に細かいグリッド模様を敷き、白い英字見出しと動画カルーセルを置く
8. 音楽（主題歌を紹介する）: 赤い英字ラベル＋和文の楽曲名＋正方形のジャケット写真を縦に積む
9. スタッフ・キャスト（制作体制を示す）: 左右線つきの小見出しで区切り、赤い役職名の下に名前を中央揃えで置く。両端にチャコールの装飾帯を入れる
10. 企業の想い（制作した企業の意図を伝える）: 英字見出しに曲線ラインを添え、問いかけの見出しと本文を左揃えで置く。下にワイヤーフレーム風の円形ビジュアル
11. フッター（公式SNSと関連リンクへ誘導する）: グレーのグラデーション地にバナー、ロゴ、丸い白のSNSアイコン、白とチャコールのピルボタン、シェアアイコン、ポリシーのリンクを並べる

Imagery

• 高彩度で緻密なセルアニメ調のキービジュアルとキャラクター立ち絵
• キャラクター設定画は背景なしの切り抜きにして、赤地の上に正面と背面を並べる
• 場面写真は宇宙・夕景・ネオン街など、ドラマチックな光のものを使う
• ワイヤーフレームのモノクロ 3D レンダーを、未来感を出す装飾に使う
• 赤い細線の同心円・曲線・点で、回路や軌道のような装飾を描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長にし、配信先ボタンを 4 列に並べる
• PC のニュースは 3 カラムのカードグリッドにする
• PC のエピソードは、開いた 1 枚と細い縦カードが並ぶ横アコーディオンにする
• PC のキャラクター・作品紹介・スタッフは、テキストとビジュアルの左右 2 カラムにする
• PC はシェアアイコンを画面左端に縦に固定し、本文の幅は約 70% に絞る

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