--- version: alpha name: Bold Yellow Campaign Car Lease LP description: 黄色と紺のポップな抽選キャンペーンのファーストビューから始まり、緑地の定額カーリースのプラン紹介、黒地にオレンジのサブブランド紹介へとつながる訴求型 LP。太いゴシック、立体文字、桜の装飾、白カードに価格を大きく見せる構成で、情報量が多くても読み分けやすい。 colors: primary: '#0E8D40' secondary: '#33337B' accent-1: '#FBDC03' accent-2: '#EA7A4C' accent-3: '#E070A0' dark-section: '#000000' background: '#FEFEFE' background-alt: '#EEF7F4' surface: '#F7F7F7' tint-1: '#4BB392' marker: '#E0336B' cta: '#33337B' on-cta: '#F8FAFF' text: '#070808' marker-accessible: '#DE2863' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.15 headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 24px fontWeight: 800 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 14px full: 999px spacing: unit: 8px card: 12px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-plan: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px heading-pill: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 36px car-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 360px plan-card: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 1100px point-box: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 120px compensation-list: backgroundColor: '{colors.background}' textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 70px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 240px --- # DESIGN.md — 黄×紺×緑の賑やか新車リースキャンペーンLP（Bold Yellow Campaign Car Lease LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: 情報量多め・訴求型、ポップ・元気、力強い・インパクト - **キーワード**: 抽選キャンペーン・月額定額・太ゴシック・価格の大きな数字・桜の装飾・ブランド色でブロックを分ける - **地の質感**: ベタ塗りの面に、斜めの色帯・立体文字・桜の切り抜き写真を重ねたチラシ風 - **形**: 角丸の白カード、ピル型の見出し枠、矢印付きの角丸ボタン - **温度感**: 暖色の黄・オレンジと、寒色の紺・緑が共存する明るく賑やかな温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0E8D40` | メインブランドの緑の面 | 12% | 画素の実測 | | `secondary` | `#33337B` | キャンペーン見出し・紺の帯 | 3% | 画素の実測 | | `accent-1` | `#FBDC03` | キャンペーンの黄色地 | 5% | 画素の実測 | | `accent-2` | `#EA7A4C` | サブブランドのオレンジ面 | 8% | 画素の実測 | | `accent-3` | `#E070A0` | 斜め帯のピンク | 1% | 推定 | | `dark-section` | `#000000` | サブブランドを囲む黒地・3年プランのカード | 8% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#EEF7F4` | 淡いミントの地（決済の紹介） | 7% | 画素の実測 | | `surface` | `#F7F7F7` | 比較表の淡いグレー | 6% | 画素の実測 | | `tint-1` | `#4BB392` | サブの緑（ボタン・帯） | 3% | 画素の実測 | | `marker` | `#E0336B` | 補償の見出し・強調の赤ピンク | 1% | 推定 | | `cta` | `#33337B` | 問い合わせボタン（紺） | 1% | 画素の実測 | | `on-cta` | `#F8FAFF` | ボタン上の文字 | 0% | 画素の実測 | | `text` | `#070808` | 本文・見出しの墨色 | 4% | 画素の主要色に補正 | | `marker-accessible` | `#DE2863` | AA を満たす補正値（計算） | | 計算 | - ブランドやプランごとに地の色を変える（緑＝メイン、黒×オレンジ＝サブ、黄×紺＝キャンペーン）。 - 地が色付きのセクションは、中身を白カードに載せて読みやすくする。 - プランの比較は黒・青・緑のボタンで期間を色分けする。 - 補償の見出しや強調はマゼンタ寄りの赤だけを使う。 - セクション見出しは紺の文字か、白地に紺枠のピル形にする。 - 淡いミントやグレーは表や補足のブロックの地に使う。 - `compensation-list` は文字 `#E0336B` × 背景 `#FEFEFE` のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#DE2863`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン名やプラン名の立体ロゴ風見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.15 | 0.0em | | `headline-lg` | セクションのメイン見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.02em | | `headline-md` | ピル枠の見出し・カードのタイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.05em | | `accent` | 価格や金額の大きな数字 | 欧文サンセリフ | Montserrat | 800 | 24px | 1.1 | 0.0em | | `body-md` | お客様の声などの本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.75 | 0.02em | | `note` | 注意書き・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.03em | - 見出しは極太のゴシックにし、斜体や縁取り、立体の影で目立たせる。 - 金額は数字だけを大きくし、「円」「税込」は小さく添える。 - 本文は 13px 前後のゴシックで、行間を広めにとる。 - 注釈は 9〜10px の細かい文字でまとめてブロックにする。 - 英字のブランド名は太いサンセリフで字間を広めにとる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。車種カードは 3 列、特長は 3〜4 列の小さなグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算） - 色付きの地の中に、角丸の白カードを幅 88% ほどで置く。 - 車種カードは 3 枚を横に並べ、各カードに写真・車名・価格・ボタンを縦に積む。 - プラン比較は横にスワイプするカルーセルにし、左右に隣のカードを少しのぞかせる。 - 比較表は罫線で区切った中央揃えの行にする。 - お客様の声は、丸いアバターと属性の下に本文を置く 2 列の配置。 ## Elevation & Depth - カードは基本的に影なし。白い面と地の色の対比で浮かせる。 - 立体見出しには、太い縁取りとずらした影をつける。 - ボタンに影はつけない。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。 - **写真の切り抜き**: 車は背景を切り抜き、人物はイラストを丸く切り抜く - **セクション境界**: 基本は直線で区切る。キャンペーン部だけ斜めの色帯、プラン帯の下に三角の矢印をつける - セクション見出しは左右が丸いピル型の枠にする。 - ボタンは角丸 4〜6px で、右端に三角の矢印を置く。 - 特長のボックスは細い色の線で囲む。 - 番号は丸いバッジにする。 ## Components - **問い合わせボタン**（`button-primary`）: 紺地に白文字、右に白い三角をつけた角丸ボタン - **プラン別の見積もりボタン**（`button-plan`）: 期間ごとに黒・青・緑で色分けした小型ボタンを縦に並べる - **ピル型の見出し**（`heading-pill`）: 白または色の線で囲んだ横長のピル枠に、見出しを中央揃えで置く - **車種カード**（`car-card`）: 白い角丸カードに、メーカーロゴ・切り抜き写真・車名・含まれるものの小さなタグ・大きな価格を載せる - **プランのカルーセルカード**（`plan-card`）: 黒地のカードに、大きなプラン名・特長 4 つの番号ボックス・利用者の声の吹き出しを並べる - **ポイントの 3 列ボックス**（`point-box`）: 上に丸い番号バッジを重ね、太字の短い見出しと小さな説明を入れた枠囲みのボックス - **補償の一覧**（`compensation-list`）: 左に赤い縦線、小見出し、赤い大見出し、説明を置き、右に写真を並べる行 - **お客様の声**（`voice-card`）: 黄色い縁の丸いアバターと太字の属性を並べ、その下に本文を置く ## Do's and Don'ts **Do** - ブランドやプランごとに地の色を変え、どこに何の情報があるかを色で区別する。 - 価格は太い数字を大きく見せ、カードの下に色分けしたボタンを置く。 - 季節感を出すため、桜などの切り抜き素材を見出しの左右に添える。 - 色付きの地の上の情報は白カードに載せる。 - 注釈は小さな文字でブロックにまとめ、本文から離す。 **Don't** - 淡いパステルだけでまとめない。彩度の高いベタ塗りを主役にする。 - 見出しに細い書体や明朝を使わない。 - 1 つのセクションに、ブランド色を 3 系統以上混ぜない。 - 価格の数字と単位を同じ大きさにしない。 - カードに強い影やグラデーションの背景をつけない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと問い合わせへの導線）: 白地の左にロゴ、右に紺の小さな問い合わせボタン 2. **ファーストビュー（キャンペーン）**（抽選キャンペーンの告知）: 黄色地にピンク・紺の斜め帯。立体のロゴ文字、車の切り抜き写真、キャラクター、期間、最大金額のバッジ 3. **賞品と抽選日**（当たる額と日程を示す）: 白カードに斜体の大きな金額を 3 つ。抽選日は番号バッジ付きで 4 列のグリッド 4. **申込みの流れ**（店舗とWebの 2 通りの申込み方法を示す）: アイソメトリックのイラストを左右に置き、矢印で成約の車へつなぐ 5. **キャンペーン概要と注意事項**（期間・応募方法・規約を示す）: ラベル付きの表、紺の帯で賞品の要約、細かい注釈の段落 6. **ブランドの導入**（定額リースの紹介へ切り替える）: キャラクターを大きな見出しで挟み、緑地に桜とプランのロゴ 7. **人気車種**（車種と月額を比較する）: 白カード 3 列に、価格と期間ごとの見積もりボタン 8. **プラン比較**（期間ごとの違いを示す）: 横スクロールの色分けカード、特長 4 つ、吹き出し、比較表 9. **決済方法**（カード払いができることを訴求する）: ミントの地に、ブランドのロゴ列と 3 列のメリットの枠ボックス 10. **補償の紹介**（安心感を出す）: 緑地の白カードに、大きな補償額と写真付きの補償 4 つのリスト 11. **サブブランドの紹介**（別サービスへ誘導する）: 黒い外枠にオレンジのカード。0 円などの数字ボックス、車種カード、選ばれる理由 3 つ 12. **どちらを選ぶか**（2 つのサービスへ振り分ける）: 緑とオレンジを左右に分け、それぞれにカードとボタン 13. **お客様の声**（実際に使った人の声で信頼を得る）: 紺の見出しを横線で挟み、アバター付きの声を 2 列に並べる 14. **問い合わせ・フッター**（電話とフォームへ誘導する）: キャンペーンと同じ黄色の柄に、大きな電話番号と紺のボタン。下に 2 色の固定ナビ ## Imagery - 車は真横か斜め前から撮った、背景を切り抜いた明るい写真にする。 - 桜の枝の切り抜きを見出しの両側に散らし、季節感を出す。 - 人物は線のはっきりした簡単なイラストのアバターにし、丸く切り抜いて黄色い縁をつける。 - 店舗やパソコンはアイソメトリックのフラットなイラストにする。 - アイコンは単色の線画で、ブランドの緑を使う。 - 補償の説明には、傷やガラスの破損などの実写写真を小さく添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅 750px 前後の SP レイアウトを置き、左右を各セクションの地の色で延長する想定。 - 車種カードは PC でも 3 列のまま、余白を広げる。 - プランのカルーセルは、PC では 3 枚を並べて表示してもよい。 - お客様の声は PC で 3 列にする。 ## 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-c4d4059f`（元 LP の URL から採番） - **元 LP**: https://joycal.jp/campaign/2025/spring/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。