DESIGN.md — 黒×金の曲線が舞うアニメ作品公式 LP（Dark Gold Elegant Anime Series LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、レトロ
• キーワード: 黒×金・クラシックホテル・装飾スクリプト見出し・細い金の曲線・生成りの差し色・余白多め
• 地の質感: ほぼフラットな暗色面に、ごく薄い円弧の地紋と金の細線が走る
• 形: 角括弧状の細枠、小さな角丸ボタン、円形の矢印ボタン、アーチ形・円形のキャラ切り抜き
• 温度感: 暖色寄りのダーク（焦げ茶黒）に金で温かみ

Colors

• 地は焦げ茶黒と墨黒をセクションごとに交互に切り替える
• 金はセクション見出し・小見出し・ボタン・装飾曲線のみに使う
• 本文は暗地では白、生成り地では焦げ茶
• 生成り地はキャラクター紹介の一箇所だけに使い明暗の山場を作る
• キャラ名などの作品固有色は差し色として1色だけ
• 原色の強い色はSNSアイコン以外で使わない

Typography

• 英字見出しは頭文字だけ大きな装飾スクリプト、残りを細身セリフで組む
• 見出しは金色、左寄せと右寄せを交互に配置
• 物語のリード文だけ明朝で詩的に、それ以外はゴシック
• 小見出しは「＊」記号＋英字大文字の金ラベル
• 本文の行間は2.0前後と広めに取る
• スタッフ表記は役職を細字、名前を太字で中央揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（スタッフ一覧は 2 カラム）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクション上端に大きな英字装飾見出しを置く
• 見出しは画面端にはみ出すほど大きく使ってよい
• セクション間に十分な余白を取り曲線を走らせる
• 放送情報・楽曲情報は左右に角括弧状の細枠で囲む
• MOREボタンはセクション末尾に右寄せまたは中央
• ニュースは日付＋タイトル＋右矢印の1行リスト

Elevation & Depth

• 影はほぼ使わずフラット
• 奥行きは金の細い曲線と薄い円弧地紋で表現
• キャラ立ち絵の足元に淡い楕円の影を置く

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 動画サムネは片側だけ大きく角丸、キャラ表情は円形・アーチ形・矩形を重ねて配置
• セクション境界: 直線で色を切り替え、その上を金の細い曲線が横切る
• ボタンは小さな角丸の長方形
• スライダー矢印は細線の円形ボタン
• 枠は四辺ではなく左右の角括弧状
• 未公開キャラは装飾的な八角メダル形サムネ
• メニューボタンは金縁のダイヤ形エンブレム

Components

• MOREボタン（button-more）: 金地に濃色の英字と右矢印、小さな角丸
• 装飾英字見出し（heading-script）: 頭文字だけ大きな金のスクリプト体＋セリフ大文字、小さな唐草飾り付き
• ＊ラベル小見出し（label-asterisk）: ＊記号付きの金の英字大文字ラベル
• 角括弧枠ボックス（bracket-box）: 左右に細いグレーの括弧線を置いた情報ボックス
• ニュース行（news-row）: 灰色の日付＋白タイトル省略表示＋右矢印、下に細線
• 円形矢印ボタン（arrow-circle）: 細い白またはグレー線の円に矢印、スライダー操作用
• メニューエンブレム（menu-emblem）: 金縁ダイヤ形にベルのアイコンとMENU文字
• キャラリストサムネ（character-thumb）: ベージュ金の八角メダル形、未公開は白文字の仮表示
• スタッフクレジット（staff-credit）: 細字の役職の下に太字の名前、代表作を小さく

Do's and Don'ts

Do - 金は落ち着いたマスタード寄りの金に統一する - 金の細い曲線をセクションをまたいで大きく流す - 英字見出しは装飾スクリプト頭文字で格調を出す - 暗地を基本にし、キャラ紹介だけ生成り地で抜く - 余白を大きく取り情報を詰め込まない

Don't - 鮮やかな原色をボタンや背景に使わない - 太いピル型ボタンやポップな影を付けない - 金をグラデーションやメタリック加工で多用しない - 本文に明朝や装飾体を使わない - 枠で四辺を囲った箱型カードを並べない

Page Structure

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

1. ファーストビュー（作品の世界観と放送開始日を示す）: 全面キービジュアルに金の大きな日付英字とロゴを重ねる
2. 放送情報帯（放送・配信情報を即時に伝える）: 黒帯に角括弧枠の白太字テキストと金のメニューエンブレム
3. ニュース（最新情報の告知）: 日付つき1行リスト4件とMOREボタン
4. 放送・配信（視聴方法の案内）: ＊ラベル＋角括弧枠の情報をTV・配信で2つ
5. 動画（PVへの誘導）: 片側角丸のサムネと再生ボタン、円形矢印のスライダー
6. あらすじ（世界観の導入）: 明朝の大きなリード＋英訳＋行間広めの本文を段組ずらし
7. キャラクター（登場人物紹介）: 生成り地に立ち絵と円・アーチ切り抜きの表情、ピンクの名前、メダル形リスト
8. スタッフ・キャスト（制作陣の信頼性）: 2カラム中央揃えのクレジット、金の区分ラベル
9. 音楽（主題歌の告知）: ＊INFO本文と、ジャケット画像付き楽曲情報を角括弧枠で
10. 締めのメッセージ（余韻を残す）: 鉤括弧で囲んだ細字の一文を広い余白に置く
11. シェア・フッター（拡散と権利表記）: 円形SNSアイコン3つ、企業ロゴ、小さな規約リンクとコピーライト

Imagery

• アニメ調のセル画キャラを主役に、星空や夜景の深い青を背景にする
• キャラ立ち絵は白抜きで生成り地に置き、足元に淡い影
• 表情カットは円形・アーチ形に切り抜いて立ち絵の周囲に重ねる
• 装飾は金の細い一本線の曲線と、薄い円弧の地紋
• 見出しに小さな唐草・渦巻きの飾りを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは左に縦のナビゲーションを固定し、中央にキービジュアル
• PCではニュース・放送情報・動画を横並びの2カラムに
• PCのスタッフ一覧は4カラム、見出しは右上に配置
• PCのキャラクターは画像左・プロフィール右の2カラム
• PCの音楽は見出し左、楽曲2件を横並び
• 装飾英字見出しはPCでも相対的に大きく残す

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