DESIGN.md — 赤フレーム×動画配信風のアニメ番組 LP（Red Frame Pop Anime Streaming-Style LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 赤い外枠・動画配信UI風・ピクセルドット・和柄の紙片・太い丸ゴシック見出し・ピル型ボタン
• 地の質感: フラットな塗りに、ぼかした背景写真と市松模様を重ねる。デバイス枠の黒い縁取りで画面感を出す。
• 形: 角丸の大きい外枠、ピル型ボタン、有機的な赤いブロブ形、ドット状の段差境界、三角形のキャラクター切り抜き。
• 温度感: 高い温度感の赤を主役にした、にぎやかで熱量の高いトーン。

Colors

• 画面外周は常に赤で塗り、角丸の内側にコンテンツを置いて額縁のように見せる。
• セクション地は、赤／ぼかし写真＋濃いオーバーレイ／ラベンダー市松／淡いグレーの順で切り替えて単調にしない。
• 淡いグレー地の上には大きな赤いブロブ形を敷き、その上に白い見出しを置く。
• 情報カードは濃い焦げ茶の地に白文字を載せ、タグだけをオレンジ赤で目立たせる。
• 暗い写真の上では、本文を白にして強調語だけオレンジ赤にする。
• 主ボタンは赤地に白文字、淡色地のボタンは焦げ茶地に白文字にする。
• button-primary は文字 #FFF5F6 × 背景 #E11C32 のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DF1C31、4.52:1）を使う。
• category-tag は文字 #FFF5F6 × 背景 #E8401C のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D33715、4.54:1）を使う。

Typography

• 見出しは、太い欧文を大きく置き、その下に小さなカナを中央揃えで重ねる 2 段構成にする。
• 欧文見出しの色は、赤地とグレー地では白、明るい地では赤にする。
• 本文は中央揃えにし、強調語だけ色を変えてカギ括弧でくくる。
• 人名や固有名詞には小さなルビを付けてもよい。
• セリフは縦組みや斜め配置にして、キャラクターの横に大きく置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ニュースは横長カードの縦積みで、カード内は画像左・テキスト右に置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• 外周には約 8px の赤い枠を残し、内側を角丸のコンテンツ面にする。
• 見出し上の余白は約 48px、見出しと中身の間は約 24px にする。
• カルーセルは中央に 1 枚を大きく置き、左右に次のカードを少しはみ出させる。
• カルーセルの下にドット付き矢印ナビ、その下にもっと見るボタンを置く。
• ニュースカードは 12px 間隔で縦に並べる。

Elevation & Depth

• 影はほとんど使わない。立体感はデバイス枠の太い黒縁で出す。
• ボタンと矢印の丸ボタンにだけ、ごく薄い影を付けてもよい。
• 背景写真は強くぼかし、暗いオーバーレイをかけて奥に下げる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: キャラクターは三角形や丸に切り抜き、作品画像はスマホ・タブレット・動画プレイヤーの枠に入れる。
• セクション境界: 流れるロゴ帯、ピクセル状に段差の付いたドット境界、大きな赤いブロブ形で区切る。
• ボタンはピル型にし、右端に白い円＋赤い矢印を付ける。
• タグは小さなピル型にする。
• ニュースカードは角丸 6px の濃色にする。
• 外周フレームは角丸 28px 程度にする。

Components

• もっと見るボタン（赤）（button-primary）: 赤いピル型の地に白い太字を置き、右に白丸の矢印を付ける。
• もっと見るボタン（濃色）（button-dark）: 淡いグレー地の上で使う焦げ茶のピル型ボタン。
• 欧文＋カナ見出し（section-heading）: 太い欧文を大きく置き、下に小さなカナを添えて中央揃えにする。
• 流れるロゴ帯（logo-ticker）: 赤地に白線を引き、配信サービス風のロゴを横に繰り返して流す区切り帯。
• スマホ枠カルーセル（device-carousel）: 黒縁のスマホ枠にキャラクターを入れ、縦書きのセリフと、いいね風のアイコン列を重ねる。
• 矢印＋ドットナビ（carousel-nav）: 白い丸ボタンに赤い矢印を置き、中央にドットを並べる。現在位置のドットは赤にする。
• ニュースカード（news-card）: 濃色の横長カードで、左にサムネイル、右に日付・タグ・タイトルを置く。
• カテゴリタグ（category-tag）: オレンジ赤の小さなピル型に白文字を入れる。
• SNS丸アイコン（sns-icon）: 黒い円にロゴを入れ、下に白文字でIDを置く。

Do's and Don'ts

Do - 外周の赤いフレームを全体で途切れさせない。 - セクションごとに地の質感（写真・市松・グレー・赤）を変える。 - 動画プレイヤー・スマホ・タブレットの枠を使い、配信サービス風に見せる。 - ピクセルドットや和柄の紙片を見出しの周りに散らす。 - ボタンはすべてピル型＋白丸矢印にそろえる。

Don't - 細い明朝体や繊細なセリフ体は使わない。 - 赤を寒色の主役色に置き換えない。 - 長い本文を左揃えのまま密に並べない。 - 影を多用して立体的なカードにしない。 - 装飾を一切置かない真っ白なセクションを作らない（フッターは除く）。

Page Structure

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

1. ファーストビュー（作品の世界観と放送情報を一目で伝える）: 角丸フレームいっぱいにキービジュアルを置き、下部に放送日時の帯と大きな文字、右上に丸いメニューボタンを置く。
2. ピックアップ（注目の企画へ誘導する）: 赤地に白の欧文見出しを置き、バナー 3 枚を横に並べる。
3. イントロダクション（あらすじを伝える）: 上下をロゴ帯で挟む。ぼかし写真を暗くした地に中央揃えの白い本文を置き、強調語はオレンジにする。四隅に三角に切り抜いたキャラクターを配置する。
4. キャラクター（登場人物を紹介する）: ラベンダーの市松地に和柄の紙片と雲を散らし、スマホ枠のカルーセルとドットナビ、赤ボタンを置く。
5. メカ紹介（ロボットの魅力を見せる）: 筆文字の大見出しにルビを添え、タブレット枠のカルーセルを置く。下端はピクセル状の境界にする。
6. 映像（予告映像を見せる）: グレー地に赤いブロブを敷き、白い見出しの下に動画プレイヤー風の枠と、チャンネル誘導の丸バッジを置く。
7. ニュース（最新情報を伝える）: 赤いブロブの上に見出しを置き、濃色の横長カードを 4 枚並べた後、濃色ボタンを置く。
8. 公式SNS（SNSへ誘導する）: 暗いぼかし写真の地に白い見出しを置き、黒丸のSNSアイコンを 2 つ並べる。
9. フッター（権利表記と関連リンク）: 白地に企業ロゴとシリーズバナー、注意書き、縦線で区切ったリンクを置き、最下部に焦げ茶のコピーライト帯を敷く。

Imagery

• アニメ調のキャラクターは、明るい塗りの全身または上半身を、勢いのあるポーズで描く。
• 背景は街並みや室内の写真風画像を強くぼかし、暗く落として文字を読みやすくする。
• ピクセルアート風の四角ドットを、境界やロゴの周りに散らす。
• 青海波などの和柄を描いた紙片、手裏剣、桜を、ポップな色で浮遊させる。
• SNS・動画UI風のアイコン（ハート・いいね・コメント・再生バー）を画像に重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも外周の赤いフレームを維持し、キービジュアルは横長で切り出す。
• ピックアップは、見出しとバナーを 1 行に横並びにする。
• イントロは、和柄の額縁風パネルに入れて中央に置く。
• キャラクターのカルーセルは、3 枚が同時に見える状態にし、中央以外をぼかす。
• メカと映像は 2 カラムにし、見出し・ボタンとデバイス枠を左右に振り分ける。
• ニュースは左に見出しとボタン、右にカードリストの 2 カラムにする。

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