DESIGN.md — 真紅一色×黒影のポップな動画キャンペーン LP（Bold Red Pop Campaign Movie LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 真紅ベタ塗り・白の明朝見出し・黒オフセット影・傾いた枠・モノクロ写真・散らかった生活雑貨
• 地の質感: フラットな赤一色。写真の影だけで奥行きを出す
• 形: 角のない矩形を少し傾け、黒いずらし影を付ける
• 温度感: 高温・熱量が高い

Colors

• 地は端から端まで赤一色、色面の切替でセクションを分けない
• 文字は赤地上で白のみ。黒文字は白帯の中だけ
• 枠の影は黒、ずらし方向は右下で統一
• 動画サムネはモノクロ化し、赤の再生アイコンで色を戻す
• 青・灰はフッターの遷移ボタンだけに限定

Typography

• 見出しは英字セリフと和文明朝の組み合わせ
• 本文は白の中央揃え、短い行で改行する
• 数字は大きめのセリフ体にして番号の役割を持たせる
• ボタン文字は太いゴシックに▶を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、動画カードは 2 列＋1 列の混在
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション見出しの横に人物の切り抜きを添える
• 本文は中央揃えにし、周囲に小物写真を散らす
• カードは画面端から 5% の余白で配置
• フッターは白地にボタンを縦に積む

Elevation & Depth

• ぼかしなしの黒い影を右下に 6〜8px ずらす
• 写真の小物には床に落ちる自然な影
• フッターは影なしのフラット

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 矩形を 1〜3° 傾けた台形風、黒縁付き
• セクション境界: 区切りなし。赤のまま余白で区切る
• 動画カードは直角で、少し傾けた黒縁を付ける
• ピルボタンは黒縁と黒影付き
• 再生アイコンは半透明白の円に赤三角

Components

• 傾いた動画カード（video-card）: モノクロ写真に番号見出しと再生円を重ね、下に物件特集の赤帯。黒縁と黒影
• カード下の赤帯ボタン（card-band-button）: 白文字＋▶の特集リンク
• 白ピルボタン（button-pill-white）: 黒縁と黒影付き、赤文字の 2 行テキスト
• 再生ボタン（button-play）: 赤地に黒縁のピル、白い▶と文字
• 英字見出し＋人物（heading-en）: 白セリフ英字の脇に人物の切り抜き
• 白帯ラベル（label-white-band）: 左寄せの白帯に赤い明朝の小見出し
• 黒線の囲み説明（framed-text-box）: 赤地に黒い太線と影の枠、中に白い中央揃えの本文
• Making バナー（making-banner）: 暗く沈めた写真にピンクのセリフ英字と白い数字、ピンクの円の再生ボタン
• フッター遷移ボタン（footer-button）: 赤・青・灰の小角丸ボタンに▶

Do's and Don'ts

Do - 地色は鮮やかな赤一色を保つ - 枠と影は黒のずらし影で統一 - 動画の写真はモノクロにし、再生の赤を際立たせる - 見出しは英字セリフ＋和文明朝で - 小物写真を余白に散らして生活感を出す

Don't - グラデーションやぼかし影を使わない - 赤以外の地色のセクションを挟まない - 丸ゴシックやかわいい書体を使わない - カードを角丸にしない - 本文を左揃えの長文にしない

Page Structure

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

1. ファーストビュー（キャラクター集団の登場を印象づける）: 赤背景に4人の全身写真と散らかった小物。両端に縦書きの明朝コピー
2. メインコピー（テーマを一言で伝える）: 中央に白明朝の2行コピーとロゴ、周囲に小物写真
3. コンセプト動画（メイン動画へ誘導する）: 英字見出し＋人物、黒影付きの動画枠、白帯ラベル、説明、再生ピルボタン
4. ステートメント（共感と応援のメッセージ）: 中央揃えの白い本文を短く改行。周りに小物を配置
5. ショート動画一覧（テーマ別動画から物件特集へ送客）: 傾いたモノクロのカードに番号と赤帯ボタン。もっと見るボタン
6. サブ導線（マニュアルへの誘導）: 黒影付きの白ピルボタン
7. 特別動画（対談動画を見せる）: 英字見出し、白帯の副題、カラー動画を縦に2本、黒線の囲み説明
8. メイキング（舞台裏で親近感を出す）: 暗い写真にピンク英字のバナーを2本
9. クロージングビジュアル（キャラクターで締める）: 赤背景に4人の全身写真
10. フッター（検索サービスへ送客する）: 白地に赤・青・灰のボタン、ロゴ、SNS、リンク一覧

Imagery

• 赤い床と壁のスタジオで、強いフラッシュで人物を撮る
• 衣類の山、扇風機、段ボール、ティッシュなどの生活雑貨を切り抜き、影ごと散らす
• 動画サムネはアップの表情をモノクロ高コントラストにする
• 人物の切り抜きは指差しや手振りなど誇張したポーズ
• 再生アイコンは白の半透明円に赤三角
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に白い細いヘッダー（ロゴ・コピー・SNS）を置く
• PC のFVは横長で、縦書きコピーは右側にまとめる
• PC の動画カードは 3 列と 2 列を交互に並べる
• 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 行書くと起動時に読み込まれる。