DESIGN.md — 空色×山吹のポップなクイズ動画企画LP（Pop Quiz Variety Video Series LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: バラエティ番組風・立体ボタン・黒の太い縁取り・網点テクスチャ・白い角丸パネル・話数ナンバリング
• 地の質感: 背景に細かい斜線と網点を入れ、パネルの影も網点ドットで表す。漫画っぽい印刷の質感。
• 形: 大きな角丸の白パネル、厚みのあるピル型ボタン、角丸のサムネイル、木の看板風の見出し。
• 温度感: 明るく暖かい。空色と山吹色の対比が元気。

Colors

• 地は空色、その上に白い角丸パネルを重ねて本文を載せる。
• 主要ボタンは山吹色の面に濃茶の文字。下に濃茶の厚い影をつける。
• 外部の公式サイトへ誘導するボタンだけ赤にして区別する。
• 見出しの強調語は黄色の点線で下線を引く。
• 公開前の項目は淡い水色とベージュでトーンを落とす。
• フッター手前でオレンジ→黄色のグラデーション地に切り替える。

Typography

• 全体に太字を使い、細い文字は使わない。
• 話数番号は黄色の文字に濃茶の太い縁取りと影をつける。
• 見出しは助詞だけ小さくして、キーワードを大きく見せる。
• 英字の小見出しは字間を広めにとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。説明エリアは商品画像と本文の 2 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 白パネルは画面幅の約90%で中央に置く。
• 各話は見出し→サムネイル→商品画像と本文→ボタンの順に組む。
• 話と話の間は約60pxあける。
• パネルどうしの間には地の色を80px前後見せる。

Elevation & Depth

• 白パネルは右下に網点ドットの影をつける。
• ボタンは真下に濃茶の厚い影（4〜6px）を落として押せる感じを出す。
• サムネイルには影をつけず、角丸だけにする。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 動画サムネイルは16:9の角丸、集合写真も角丸の長方形にする。
• セクション境界: 直線で地の色を切り替え、フッターは丘のイラストで終える。
• ボタンは濃茶の2〜3px枠をつけたピル型にする。
• 吹き出しは雲形の白に黒い縁取りにする。
• セクション見出しは木の看板風の枠に入れる。

Components

• 立体ピルボタン（button-primary）: 山吹色の面に濃茶の枠と下影。右端に外部リンクのアイコン。
• 赤の公式サイトボタン（button-portal）: 赤い面に白い文字。黒枠と下影つきの幅広ピル型。
• 話数付き見出し（episode-heading）: 縁取りした話数番号の横にタイトル。キーワードに黄色の点線を引く。
• 動画サムネイル（video-thumb）: 角丸の16:9画像。中央に黄色い丸の再生ボタン。
• 木の看板風見出し（sign-heading）: 生成りの板に釘と縁取りがあり、黄色の英字が入る。
• 雲形の吹き出しバッジ（speech-badge）: パネルの右上に重ねて、予告を短く書く。
• Newの旗（new-flag）: 最新話の見出し左に置く赤い旗形のラベル。
• 準備中カード（coming-soon-card）: 淡い水色のサムネイル、ハテナの画像枠、グレーの線のダミー文字、ベージュのボタン。

Do's and Don'ts

Do - ボタンは必ず縁取りと下影をつけて立体に見せる。 - 見出しと番号は黒い縁取りで漫画風にする。 - 白パネルは大きな角丸にし、網点の影をつける。 - 各話の構成をそろえて繰り返す。 - 空色と山吹色の対比を保つ。

Don't - 細い明朝体や繊細な線は使わない。 - 影のない平らなボタンにしない。 - くすんだ色やモノトーンだけの面にしない。 - 赤を山吹ボタンの代わりに多用しない。 - 白パネルを画面の端まで広げない。

Page Structure

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

1. ファーストビュー（企画の世界観と概要を伝える）: 収録風景の写真スライダーに立体ロゴと縁取りコピーを重ね、話数インジケーターと停止ボタンを置く。
2. 最新話の紹介（最新動画へ誘導する）: 淡い水色の地に白パネル。ロゴ、説明文、斜線つきのクイズ見出し、Newの旗つきサムネイル。
3. 動画一覧（各話の動画と関連商品を見せる）: 看板風の見出しと吹き出しバッジ。話数見出し→サムネイル→商品画像と本文→山吹ボタンを繰り返す。
4. 公開予定（次の回への期待を高める）: 準備中カードを淡い色でトーンダウンして並べる。
5. 出演者の紹介（出演メディアの信頼性を伝える）: オレンジ地に白パネル。ロゴ、説明文、集合写真、赤いボタン、SNSアイコン。
6. フッター（ページの先頭に戻す）: 黄色のグラデーション地に雲と丘のイラスト、赤い丸のトップへ戻るボタン。

Imagery

• 動画サムネイルはテレビのテロップ風に、太い縁取り文字と網点の背景を入れる。
• 出演者は驚き顔や考え込む顔のリアクション写真にする。
• 商品パッケージは切り抜きにして白地に置く。
• ロゴや装飾は漫画調で、黒い太線と影をつける。
• フッターは牧歌的な畑と丘のフラットなイラスト。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは白パネルを中央に置き、幅を約85%（最大約900px）にする。
• PCの動画一覧は2カラムのグリッドにする。
• 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 行書くと起動時に読み込まれる。