--- version: alpha name: Bold Red Pop Campaign Movie LP description: 全面を鮮やかな赤で塗りつぶし、白の明朝見出しと黒のオフセット影の枠で動画カードを並べる。生活雑貨を散らした演出写真とモノクロ人物写真のコントラストで、ユーモラスで勢いのある不動産キャンペーンを表現する。 colors: primary: '#E11725' background: '#FFFFFF' on-primary: '#FFFFFF' dark-section: '#000001' cta: '#C32C34' on-cta: '#FFFFFF' surface: '#FDFDFD' secondary: '#0096DB' accent-1: '#FC2452' background-alt: '#ECEDEC' text: '#2C272C' text-muted: '#9C9394' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Playfair Display fontSize: 36px fontWeight: 500 lineHeight: 1.1 letterSpacing: -0.02em headline-md: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 700 lineHeight: 1.3 body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' video-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 300px card-band-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px button-pill-white: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 70px button-play: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px heading-en: textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 70px label-white-band: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 30px framed-text-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 220px making-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 130px footer-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px --- # DESIGN.md — 真紅一色×黒影のポップな動画キャンペーン LP（Bold Red Pop Campaign Movie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 真紅ベタ塗り・白の明朝見出し・黒オフセット影・傾いた枠・モノクロ写真・散らかった生活雑貨 - **地の質感**: フラットな赤一色。写真の影だけで奥行きを出す - **形**: 角のない矩形を少し傾け、黒いずらし影を付ける - **温度感**: 高温・熱量が高い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E11725` | 全面の地色の赤 | 60% | 画素の実測 | | `background` | `#FFFFFF` | フッターの白地 | 8% | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤地上の白文字 | 3% | 画素の主要色に補正 | | `dark-section` | `#000001` | 枠のずらし影・縁の黒 | 4% | 画素の実測 | | `cta` | `#C32C34` | 動画下の物件特集帯・賃貸ボタン | 4% | 画素の実測 | | `on-cta` | `#FFFFFF` | 帯ボタン上の白文字 | 1% | 画素の主要色に補正 | | `surface` | `#FDFDFD` | 白ピルボタン | 1% | 画素の実測 | | `secondary` | `#0096DB` | 購入系の青ボタン | 1% | 画素の実測 | | `accent-1` | `#FC2452` | Making 見出しのビビッドピンク赤 | 1% | 画素の実測 | | `background-alt` | `#ECEDEC` | フッターの淡灰ボタン | 1% | 画素の実測 | | `text` | `#2C272C` | フッター文字 | 1% | 画素の主要色に補正 | | `text-muted` | `#9C9394` | モノクロ写真の中間灰 | 6% | 画素の主要色に補正 | - 地は端から端まで赤一色、色面の切替でセクションを分けない - 文字は赤地上で白のみ。黒文字は白帯の中だけ - 枠の影は黒、ずらし方向は右下で統一 - 動画サムネはモノクロ化し、赤の再生アイコンで色を戻す - 青・灰はフッターの遷移ボタンだけに限定 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きのFVキャッチ | 明朝 | Shippori Mincho | 700 | 40px | 1.1 | 0.0em | | `headline-lg` | 英字セクション見出し | 欧文セリフ | Playfair Display | 500 | 36px | 1.1 | -0.02em | | `headline-md` | 中央の和文コピー | 明朝 | Noto Serif JP | 500 | 28px | 1.5 | 0.02em | | `headline-sm` | カード上の番号と見出し | 明朝 | Noto Serif JP | 700 | 22px | 1.3 | 0.0em | | `body-md` | 中央揃えの本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.08em | | `label-button` | 帯ボタン・ピルボタン | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.04em | | `note` | フッター注記 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | - 見出しは英字セリフと和文明朝の組み合わせ - 本文は白の中央揃え、短い行で改行する - 数字は大きめのセリフ体にして番号の役割を持たせる - ボタン文字は太いゴシックに▶を付ける - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-8c0dae3f`（元 LP の URL から採番） - **元 LP**: https://www.athome.co.jp/special/brand/leaders/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。