DESIGN.md — ビビッド黄×黒のアニメ映画告知 LP（Vivid Yellow Anime Movie Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的
• キーワード: ビビッドイエロー・黒の欧文見出し・斜めの色面・キャラ切り抜き・ピル型ボタン
• 地の質感: ベタ塗りの平面に、かすれたグランジ帯と線だけの大きな欧文を少し重ねる
• 形: 斜めに切った色面と台形の帯、ピル型ボタン、丸アイコン
• 温度感: 高彩度で明るく、にぎやか

Colors

• 地はビビッドイエローを基本にし、イントロだけオリーブ色に切り替える。
• 見出しの欧文は黒にし、頭文字か中の 1 文字だけを赤・紫・黄の差し色に変える。
• セクションごとに、キャラの背後へ置く斜めの色面の色（赤・紫・水色）を変える。
• ボタンと矢印アイコンは黒の面に白文字でそろえる。
• 黒い面は映像の帯とフッターに限る。
• 日付は年の末尾 1 桁と月日の区切りを赤にする。

Typography

• 欧文の大見出しは幾何学的なサンセリフを太字・大文字で組む。
• 大見出しの右下か下に、日本語の小見出しを小さく添える。
• 本文は行間 2.0 前後とゆったり組み、短い文ごとに段落を分ける。
• ボタンの文字は欧文の大文字にし、字間を広げる。
• 背景には線だけの大きな欧文を、見切れるように敷いてよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ニュースは日付と本文と矢印を横に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しはキャラ切り抜きと斜めの色面を重ねたブロックにし、左右どちらかに寄せる。
• ニュースは上下を黒線で区切ったリストにする（カードにはしない）。
• バナーはカルーセルで並べ、PREV/NEXT とドットを付ける。
• 映像サムネイルは中央に置き、再生アイコンを重ねる。
• SNS ボタンは右寄せで縦に積む。

Elevation & Depth

• 影はほぼ使わず、平面の色面を重ねて立体感を出す。
• キャラ切り抜きは色面よりも手前に置き、はみ出させる。
• 映像の帯は上下を斜めに切った黒い面にする。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: キャラは背景なしの切り抜き、バナーは角丸なしの長方形
• セクション境界: 斜めの色面、または色の直線切り替えで区切る
• ボタンは完全なピル型にする。
• 矢印アイコンは黒い正円に入れる。
• キャラの背後の色面は、平行四辺形か三角に切る。

Components

• 黒ピルボタン（button-pill）: 欧文の大文字と右上向き矢印を入れた黒のピル型ボタン
• 欧文大見出し（section-heading）: 大文字の欧文。頭文字だけ差し色にし、日本語の小見出しを添える
• キャラ付き見出しブロック（heading-character-block）: 斜めの色面にキャラの切り抜きを重ね、その横に見出しを置く
• ニュース行（news-row）: 左に 2 段の日付、中央に 2 行で切れるタイトル、右に丸い矢印を置く。上下は黒線
• 丸矢印アイコン（icon-arrow-circle）: 黒の正円に白い斜め矢印
• 枠線タブ（tab-outline）: 黒い帯の上に置く白枠のピル型ラベル
• バナーカルーセル（banner-carousel）: 横長バナーを左右に送り、PREV/NEXT とドットを付ける
• 映像サムネイル（video-thumb）: 暗い画面の中央に、照準のような円の再生アイコンを重ねる

Do's and Don'ts

Do - 地はビビッドイエローで大きく塗る。 - 見出しの頭文字を差し色にする。 - キャラの切り抜きを色面からはみ出させる。 - ボタンは黒のピル型と丸矢印でそろえる。 - イントロは地の色を変えて、文を読ませる区切りにする。

Don't - パステルやくすんだ色を地に使わない。 - 角丸のカードや影を多用しない。 - 見出しを明朝体にしない。 - 差し色を 1 つの見出しに何色も入れない。 - 写真の上に細い文字を直接置かない。

Page Structure

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

1. ファーストビュー（作品のビジュアルと公開日を伝える）: 縦長のキービジュアルを全幅で置き、上にロゴ、下に公開日、右上に丸いメニューボタンを置く
2. 映像（予告映像を見せる）: キャラを大きく置き、斜めの黒い帯に欧文見出しと枠線タブを置く。下に映像サムネイル
3. バナーカルーセル（関連商品や施策へ誘導する）: 横長バナーをスライドで見せ、PREV/NEXT とドットを付ける
4. チケット（前売り券の販売を告知する）: 紫の斜めの色面とキャラに見出しを重ね、全幅の告知バナーを置く
5. 新着情報（最新ニュースを並べる）: 赤の三角の面にキャラを重ねる。線で区切ったニュース 3 行と VIEW MORE のピルボタン
6. イントロダクション（作品の世界観を伝える）: オリーブ地に白の欧文見出し、黄色の太字キャッチ、白の本文を置く。下端に線だけの大きな欧文
7. 関連リンク・SNS（公式サイトや SNS へ誘導する）: 白地のロゴバナーを 2 つ並べ、作品ロゴと黒ピルの SNS ボタンを置く。キャラを左下からはみ出させる
8. フッター（シェアと権利表記）: SHARE アイコンを並べ、黒地に白文字でポリシーとコピーライトを載せる

Imagery

• キャラは黒の主線とアニメ塗りで描き、背景を抜いた切り抜きで使う。
• キャラは画面端から大きくはみ出させ、躍動感を出す。
• 手書き風の縦書きセリフや、ひび割れの線を装飾として足す。
• バナーには警告テープ風の黄黒ストライプなどを使い、にぎやかにする。
• グランジのかすれた黒い帯で映像のパートを演出する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央に置き、左上にテキストのナビを縦に並べる。
• PC のキービジュアルは中央の縦長枠に収め、周囲にフィルム帯の装飾を置く。
• PC のバナーカルーセルは 3 枚を横に並べる。
• PC では TICKET と INTRODUCTION の見出しを縦書きにし、本文の横に置く。
• 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 行書くと起動時に読み込まれる。