DESIGN.md — 生成り地×金装飾のダーク幻想アニメ映画 LP（Gothic Gold Ornate Anime Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、レトロ
• キーワード: 金の装飾罫・生成り地・明朝体・細い欧文セリフ・フィルム枠・アーチ額縁
• 地の質感: マットな生成り地に、油彩風の背景とセピアのグラデーションを重ねる。紙と絵画のような質感。
• 形: 直線の細い金罫、アーチ型の額縁、リボン形の見出し帯、フィルムの穴の帯、円形のアイコン枠。
• 温度感: 落ち着いた暖色寄り。生成り地と金・赤褐色で、静かで重い印象。

Colors

• 地は生成りグレーで統一する。暗い地は導入部だけにする。
• 見出しの欧文・役職名・罫線・アイコン枠はすべて同じくすんだ金にする。
• 本文中の強調語は太字の金にする。赤など他の強調色は使わない。
• 暗い地は赤褐色から灰色への縦グラデーションにし、文字は白にする。
• ピンクは外部リンクのバナーだけに使い、ほかには広げない。
• 黒は名前と、フィルム枠などの映像まわりの枠に限る。
• visual-band-link は文字 #D7D4CF × 背景 #927519 のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6F5913、4.56:1）を使う。
• ribbon-heading は文字 #EEEFEA × 背景 #927519 のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6F5913、4.55:1）を使う。
• circle-icon は文字 #927B2B × 背景 #EEEFEA のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7E6A25、4.57:1）を使う。

Typography

• 和文はすべて明朝体を基本にする。小さい本文だけゴシックでもよい。
• 欧文見出しは細くて長い装飾セリフを特大で置き、左右を画面の外まではみ出させてループ状に並べる。
• 見出し語の間に金の★を挟む。
• 導入部の本文は中央揃えにし、段落の間を広く空ける。
• 役職名は小さい金、名前は大きい黒にして、上下 2 段の対比を作る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スタッフ・キャストは 2 カラムのグリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• キービジュアルは全幅で置き、下端を地色へフェードさせてからロゴと日付を続ける。
• 動画はフィルム帯で全幅の横スライダーにする。
• ビジュアルのリンクは全幅の細い帯にし、上下を金罫と中央の飾りで挟む。
• ニュースは日付と見出しを左揃えにし、細い線で区切る。
• セクションの間はたっぷり空けて余白で間を作る。

Elevation & Depth

• 影はほぼ使わず、平面的に作る。
• 奥行きは写真・絵画の背景とグラデーションで出す。
• 額縁カードは影を付けず、金の二重線で浮かせる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形。物語セクションは上部がアーチ型の額縁で切り抜く。
• セクション境界: 直線で切り替える。キービジュアルの下だけフェード。フッターの前に両端が星形の金の細罫を入れる。
• ボタンを角丸にしない。
• SNS アイコンとページトップは金線の円形にする。
• 見出し帯はリボン形にする。
• ページトップは円に沿って文字を回した円形にする。

Components

• フィルム帯の動画スライダー（film-strip-slider）: 上下に黒いフィルムの穴の帯を付けた全幅のスライダー。中央に細い欧文で再生の文字、左右に矢印を置く。
• 金罫の帯リンク（visual-band-link）: 上下を金の二重罫で挟んだ横長の画像帯。左にラベル、右に拡大の表記。中央の上下に唐草の飾りを付ける。
• ニュース行（news-item）: 小さい金の日付の下に本文を置き、細い線で区切る。
• アーチ額縁カード（arch-frame-card）: 上部がアーチになった生成りのカード。金の二重線で縁取り、上部に放射状の線とリボンの見出しを付ける。
• リボン見出し（ribbon-heading）: 金のリボン帯の中に生成り色の欧文見出しを入れる。
• ループ欧文見出し（marquee-heading）: 特大の金の細いセリフ体を★区切りで横に繰り返し、画面からはみ出させる。
• 役職と名前のセット（credit-pair）: 金の小さい役職名の下に黒い明朝体の名前を置き、中央揃えで 2 カラムに並べる。
• 円形の金線アイコン（circle-icon）: SNS 用の円形ボタン。金の二重線に金のロゴを入れる。
• チケットの丸バッジ（ticket-badge）: キービジュアルの右下に重ねる黒い円形バッジ。金の線と文字で入れる。

Do's and Don'ts

Do - 金は 1 色に絞り、線・文字・装飾すべてで統一する。 - 装飾は細い線と小さな唐草・星にとどめて、品よく見せる。 - 和文は明朝体にして、字間をやや広げる。 - 暗い導入部は 1 か所だけにして、生成りの地との対比を作る。 - セクションの間は大きく空ける。

Don't - 鮮やかな原色のボタンや、太いゴシックの訴求文字は使わない。 - ドロップシャドウやグラデーションのボタンは使わない。 - 角丸のカードやポップなアイコンを使わない。 - 純白の地にしない。 - 金の装飾を太くしすぎない。

Page Structure

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

1. ファーストビュー（作品の世界観と公開日を伝える）: 全幅の絵画風キービジュアルの下端を生成りへフェードさせ、金と黒のロゴ・副題・公開日を中央に置く。
2. 作品紹介バナー（シリーズ紹介ページへ誘導する）: 淡いピンクの横長バナーにキャラクター画像と矢印を入れる。
3. 動画（予告映像を見せる）: フィルム帯の横スライダー。
4. ビジュアル一覧（公開中のビジュアルへのリンク）: 金罫の帯リンクを縦に並べる。
5. リードコピー（制作陣と位置づけを一言で伝える）: 中央揃えの明朝体 2 行を、上下の大きな余白の中に置く。
6. お知らせ（最新情報を伝える）: 日付と見出しのリストを細い線で区切る。
7. 導入（作品の歴史と新作の意義を語る）: 赤褐色から灰色へのグラデーション地。背景に巨大な欧文を薄く透かし、白い明朝体を中央揃えで置く。最後は大きいリードで締める。
8. あらすじ（物語を紹介する）: 絵画風の背景の上にアーチ額縁カードを置き、リボン見出しを付ける。キーワードは金の太字にする。
9. スタッフ（制作陣を一覧で見せる）: ループ欧文見出しの下に、役職と名前のセットを 2 カラムで並べる。
10. キャスト（声優を一覧で見せる）: スタッフと同じ型で並べる。
11. フッター（SNS・関連サイト・権利表記）: 金の星罫の下に円形の SNS アイコン、関連ロゴ、小さいリンクと権利表記、円形のページトップを並べる。

Imagery

• キービジュアルは油彩風で、暖色の雲と暗い岩肌を背景にキャラクターが舞う構図にする。
• あらすじの背景は暗い絵画テクスチャを全面に敷く。
• 装飾は金の唐草・星・放射線など、アンティークの書籍風にする。
• 動画のサムネイルは暗めのアニメ場面に細い白の欧文を重ねる。
• 導入部の背景には巨大な欧文を低いコントラストで敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を約 70% の中央寄せにする。帯リンクも幅を絞る。
• PC のフィルム帯は複数の動画を横に並べて見せる。
• PC のスタッフ・キャストは 3 カラムにする。
• PC の額縁カードは幅 50% ほどで中央に置き、左右は背景の絵画を見せる。
• PC では導入部の本文行を長くし、改行を減らす。
• 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 行書くと起動時に読み込まれる。