DESIGN.md — 青空×紺のSNS参加型ドラマ連動キャンペーンLP（Sky Blue SNS Campaign Drama LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、ポップ・元気、情報量多め・訴求型
• キーワード: 青空と雲・ドラマ風キービジュアル・SNS別の色分け・賞品カード・濃紺のフッター帯
• 地の質感: 雲の写真背景に、集中線やグラデーションのカードを重ねる。光沢感のある明るいデジタル質感。
• 形: 角丸小さめの四角いボタンとカード。賞品カードにはギフトアイコンのタブを付ける。
• 温度感: 爽やかで少しクール。SNSの原色で元気さを足す。

Colors

• 上部〜中部は空色と雲の写真を地にして、爽やかさを保つ
• SNSごとにボタン・カード・タブの色を揃える（X=紺、Instagram=マゼンタ、LINE=緑）
• 下部の関連コンテンツと注釈は濃紺一色の帯にまとめ、白文字で読ませる
• 金色はタイトル文字だけに使い、キャンペーン名を目立たせる
• 赤は法令上の注意喚起の帯だけに使う
• badge-episode は文字 #F0FAFE × 背景 #5EBFD7 のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#247C91、4.54:1）を使う。

Typography

• タイトルと応募期間は明朝体にして、ドラマの格調を出す
• UI・ボタン・注釈はゴシック体で統一する
• 当選数は数字を大きく、単位を小さくする
• セクション見出しは中央揃えにして、左右に細い白線を伸ばす
• 期間表記は明朝の太字斜体風にし、白フチで背景から浮かせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム（ボタンは3列、賞品カードは2列＋全幅1枚）
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• キービジュアルは全幅で、下にドラマのカットを横帯で並べる
• SNSボタンは同じ幅で3つ横に並べる
• 賞品カードは上段に2枚、下段に全幅で1枚
• 濃紺帯は全幅で、中は横スクロールのカルーセルにする
• 注釈は「・」付きの箇条書きにする

Elevation & Depth

• 賞品カードには下方向の濃い影を付けて、浮いた札のように見せる
• SNSボタンは平面に、薄い内側の縁取りを付ける
• 次回予告の動画枠には軽い影を付ける

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は切り抜いて合成し、場面カットは小さな角丸の四角に入れる
• セクション境界: 写真背景同士は直線で切り替える。濃紺帯もまっすぐな水平線で切り替える
• ボタンの右側に白丸の矢印アイコンを付ける
• 賞品カードの左上にギフトアイコン付きのタブを重ねる
• 当選数は右下の白いラベルに入れる
• カルーセルの矢印は黒い丸ボタンにする

Components

• SNS参加ボタン（button-sns）: SNS名と「で参加」の2行。右に白丸の矢印。SNSの色で塗る
• 線付き中央見出し（heading-lined）: 白抜きの見出しを中央に置き、左右に細い白線を伸ばす
• 賞品カード（card-prize）: 集中線グラデの背景に賞品の画像を載せる。SNS色の太枠と左上のギフトタブ、右下に当選数
• 話数メダル（badge-episode）: 青い円形メダルに話数を入れ、タイトルの左に添える
• 規約テキストリンク（link-text）: 白文字に下線。縦線で区切って横に並べる
• 関連コンテンツカルーセル（carousel）: 濃紺の上でバナーを横スクロールさせる。黒丸の矢印とバー型のインジケーター付き
• 注意喚起の赤帯（alert-bar）: 赤地に白い太字で2行の注意文
• ヘッダー（header-bar）: 白地の上部バー。左にロゴ、右にSNSアイコンを並べる

Do's and Don'ts

Do - 背景は青空と雲で通し、明るさを保つ - SNSごとの色を、ボタン・カード・タブで一貫させる - 賞品は画像と当選数を大きく見せる - 注釈と法定の表記は濃紺帯にまとめる - 応募期間はファーストビューの中に入れる

Don't - 背景を白一色にしない - SNSの色を入れ替えたり、別の色を足したりしない - 金色を本文やボタンに使わない - 大きな角丸やピル型ボタンにしない - 注釈を空色の背景の上に置かない

Page Structure

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

1. ヘッダー（ブランドへの導線とSNSへのリンク）: 白い角丸のバー。ロゴ2つとSNSアイコン3つを並べる
2. ファーストビュー（ドラマの世界観とキャンペーン名を伝える）: 空の背景に人物を切り抜いて合成。カット写真の横帯、話数メダル、金の明朝タイトル、応募期間を重ねる
3. 応募方法（SNS別に参加してもらう）: 青い帯に線付きの見出しを置き、SNSボタンを3つ並べる。下に規約リンク
4. 賞品紹介（賞品で参加の意欲を高める）: 雲の背景にSNS色の賞品カード。2枚＋全幅1枚で、当選数ラベルを付ける
5. 次回予告（次の話への期待をつくる）: 場面写真に「次回予告」の白札を重ね、下に紺の帯で公開日を入れる
6. おすすめコンテンツ（関連サイトへ誘導する）: 濃紺帯に白い大見出しと、バナーのカルーセル
7. 注意喚起・注釈（法令表示と商標の注記）: 赤帯の注意文と、白文字の箇条書き
8. フッター（コピーライト）: 細い区切り線の下に、グレーの小さい英字を中央揃え

Imagery

• 青空と白い雲の写真を全面背景にする
• ドラマのスチール風の人物を切り抜いて合成し、水しぶきや競技艇などのモチーフを添える
• 場面カットは横長の小窓にして帯状に並べる
• 賞品は白背景の商品写真を、放射状の集中線グラデの上に載せる
• SNSのロゴは公式の色のアイコンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央にコンテンツ幅を約600pxで固定し、雲の背景は全幅に広げる
• PCではSNSアイコンを右上の固定縦バーにまとめる
• PCではキービジュアルを横長にし、人物の合成を左右に広げる
• PCのカルーセルは3枚を同時に見せる
• 賞品カードの配置（2枚＋全幅1枚）は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 行書くと起動時に読み込まれる。