DESIGN.md — 紙資料×群青のアニメ制作現場風作品 LP（Animation Studio Paperwork Anime LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 親しみ・手作り感、力強い・インパクト、上品・高級
• キーワード: 絵コンテ用紙・紙の質感・群青・明朝の大見出し・手書き番号・制作道具の散らし
• 地の質感: 淡い紙ノイズの地に、方眼や罫線のある紙資料を重ねる。群青面には細かな粒子と定規風の目盛りを入れる。
• 形: 角丸なしの矩形が基本。紙を少し傾けて重ね、境界は直線か浅いV字にする。
• 温度感: 生成りの暖かさと群青の冷たさを交互に置き、黄色のキービジュアルで熱量を出す。

Colors

• 地は紙色を基本にし、スタッフ・劇中劇・フッターだけ群青から青の面に切り替える。
• 黄色はキービジュアルの中だけで使い、UI には使わない。
• CTA は黒い面に白文字とし、斜線テクスチャを重ねる。
• 赤は手書きの修正ペン表現にだけ使う。
• 群青面の上では役職を小さな白、氏名を大きな白で書き分ける。
• キャストセクションは生成りにして、紙地と群青の間をつなぐ。

Typography

• 見出しは太い明朝体で大きく組み、左上に斜めの手書き風「#番号」を添える。
• 一部の見出しは白抜きの袋文字や縦組みにして変化をつける。
• あらすじは手書き風書体で紙資料の中に組む。
• 本文と情報はゴシック体で端正に組む。
• 英字ラベルは灰色の大文字にし、末尾にピリオドを付ける。
• キャッチは黒帯に白の縦書きで入れる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スタッフとキャストは 2 カラムの中央揃え。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは左寄せで、横に制作道具のイラストを置く。
• ニュースは左に罫線と番号を付けた横長の白カードを縦に並べる。
• スタッフ表は役職と氏名の組を 2 カラムで並べる。
• 紙資料はコンテンツ幅より少しはみ出し、傾けて重ねる。
• 画面端に定規のような目盛り線を入れる。

Elevation & Depth

• 紙資料は複数枚をずらして重ね、薄い影で厚みを出す。
• ニュースカードは影なしの白面に左罫線だけを付ける。
• スライダー枠はモニター風の黒帯ヘッダーを付けたフラットな枠にする。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターは切り抜きにし、足元を白くフェードさせる。場面画像は紙片に貼った矩形で、少し傾ける。
• セクション境界: 直線で地の色を切り替える。群青面の下端は浅い V 字にする。
• 角丸は使わない。
• COMMENT ボタンは左上を斜めにカットした線枠にする。
• 再生ボタンは細い円の中に三角を置く。

Components

• SNS公式アカウントボタン（button-primary）: 黒い矩形に斜線テクスチャを敷き、左右端に砂時計形の装飾を入れる。
• MOREボタン（button-more）: 黒い矩形に白の英字を中央に置き、斜線テクスチャを敷く。
• コメント線枠ボタン（button-comment）: 白地に黒の細線枠を付け、左上を斜めにカットする。
• 番号付き見出し（heading-numbered）: 手書き風の「#番号」を斜めに置き、大きな明朝体の見出しを添える。
• ニュースカード（news-card）: 白い横長カードに日付と見出しを入れ、左外に小さな番号を付ける。
• 絵コンテ紙資料（storyboard-paper）: TITLE・NO などの欄がある紙に、赤ペンの見出しと手書き風の本文を載せる。
• 縦書き黒帯キャッチ（vertical-catch）: キャラクター画像に重ねる黒帯に、白の縦書きで一言を入れる。
• モニター風スライダー（monitor-slider）: 黒帯にライムの線を入れた枠で、左右に四角い矢印ボタンを付ける。

Do's and Don'ts

Do - 地に紙のノイズを入れ、鉛筆・クリップ・資料束などの線画を余白に散らす。 - セクション番号は手書き風にして見出しの左上に置く。 - 群青と紙色を交互に切り替えて、セクションのリズムを作る。 - ボタンは黒い矩形にテクスチャを敷いて統一する。 - 英字ラベル、明朝の名前、ゴシックの本文で情報の階層をつける。

Don't - 角丸やピル型のボタンを使わない。 - 黄色をボタンや文字色に流用しない。 - ドロップシャドウの強いカードを使わない。 - 丸ゴシックなどのポップな書体にしない。 - 制作現場モチーフと関係のない装飾を足さない。

Page Structure

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

1. ファーストビュー（作品の世界観と放送開始日を伝える）: 黄色系のキービジュアルの上に縦組みの明朝ロゴを重ね、下を紙色へフェードさせて明朝で日付を大きく出す。
2. SNS導線（公式アカウントへ誘導する）: 黒い斜線テクスチャのボタンを中央に 1 つ置く。
3. 作品概要（タイトルの意味とあらすじを伝える）: クラフト封筒の上に絵コンテ用紙を重ね、赤ペン見出しと手書き風の本文を組む。
4. 最新情報（ニュースを告知する）: 番号付き見出しの下に白カードを 3 件並べ、MORE ボタンを置く。
5. 予告映像（PVの視聴を促す）: 白い絵コンテ枠に青みのある映像サムネイルと円形の再生ボタンを置き、縦組みの見出しを重ねる。
6. スタッフ（制作陣を紹介する）: 群青面に役職と氏名を 2 カラムの中央揃えで組み、下端を V 字にする。
7. キャスト（声優を紹介する）: 生成りの地に役名と氏名を 2 カラムで並べ、それぞれにコメントボタンを付ける。
8. 登場人物（主人公を詳しく紹介する）: 袋文字の見出しの下に、傾けた紙に載せたキャラ立ち絵と縦書きの黒帯キャッチを置き、続けて英字ラベル付きのプロフィールを載せる。
9. 劇中劇の紹介（作中作品のキャラクターを紹介する）: 群青面に概要文を置き、アイコンでキャラを切り替えるモニター風スライダーを置く。
10. フッター（サイト内ナビとSNSを案内する）: 青空と荒野の背景画に、縦組みのロゴと縦書きのナビを右から並べる。

Imagery

• アニメのセル画調キャラクターを切り抜き、足元を白くフェードさせる。
• 鉛筆・ペン・クリップ・書類束・スマホを線画で描いて余白に置く。
• 場面写真は鉛筆の下描き風背景と組み合わせ、紙に貼った矩形にする。
• 映像サムネイルには青紫のフィルターをかける。
• フッターには広い空と大地の背景美術を全面に敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は概要の紙資料を横長にして、本文をワイドに組む。
• PC のニュースカードは日付とタイトルを 1 行で横に並べる。
• PC のスタッフとキャストは 3 カラムにし、見出しは縦組みで左右端に置く。
• 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 行書くと起動時に読み込まれる。