--- version: alpha name: Bright Yellow Plaid Travel Campaign LP description: 黄色のチェック柄の地に白い角丸カードを重ねた旅行キャンペーンLPです。紺の太字で金額を大きく見せ、ラベルは水色帯、ボタンは赤い楕円にしています。応募期ごとに4色で色分けし、利用方法のパートだけ黄緑の方眼地に切り替えます。 colors: primary: '#FDDE02' background-alt: '#FDDC03' surface: '#FEFEFE' background: '#D2EEC9' text: '#16253D' secondary: '#B2DEF5' cta: '#D9381E' on-cta: '#FFFFFF' accent-1: '#FF99B3' accent-2: '#3FA535' accent-3: '#F08A1C' tint-1: '#FFF7CA' text-body: '#333333' accent-1-accessible: '#ED003C' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 16px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.full}' height: 44px button-secondary: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 90px prize-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 44px period-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 160px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 260px headline-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px logo-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 70px --- # DESIGN.md — 黄色チェック×紺見出しの旅行キャンペーンLP（Bright Yellow Plaid Travel Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 黄色チェック・白カード・紺の太字・期ごとの色分け・イラスト人物・キャンペーン告知 - **地の質感**: 黄色のトーン違いで描いた斜めチェック柄、黄緑の方眼柄 - **形**: 角丸の白カード、左側の水色ラベル帯、楕円の赤ボタン - **温度感**: 明るく暖かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FDDE02` | ページ地の黄色 | 38% | 画素の実測 | | `background-alt` | `#FDDC03` | チェック柄の濃い黄 | 16% | 画素の実測 | | `surface` | `#FEFEFE` | 情報カードの面 | 22% | 画素の実測 | | `background` | `#D2EEC9` | 利用方法パートの黄緑方眼地 | 17% | 画素の主要色に補正 | | `text` | `#16253D` | 大見出し・金額の紺 | 2% | 画素の実測 | | `secondary` | `#B2DEF5` | 項目ラベル帯の水色 | 3% | 画素の実測 | | `cta` | `#D9381E` | 応募ボタンの赤 | 0% | 推定 | | `on-cta` | `#FFFFFF` | ボタンの文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FF99B3` | 応募要項の見出し帯のピンク | 1% | 画素の実測 | | `accent-2` | `#3FA535` | 黄緑の注意帯・見出し | 1% | 推定 | | `accent-3` | `#F08A1C` | 期ごとの色分けのオレンジ | 0% | 推定 | | `tint-1` | `#FFF7CA` | 賞品枠の淡い黄 | 3% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文の文字 | 2% | 推定 | | `accent-1-accessible` | `#ED003C` | AA を満たす補正値（計算） | | 計算 | - ページの地は黄色2トーンのチェック柄にし、情報は白カードに載せる - 数字・日付・見出しは紺の太字で強く見せる - CTAは赤い楕円ボタンだけにし、他の要素に赤を使わない - 応募期はピンク・水色・オレンジ・紫の4色で枠線と帯を色分けする - 利用方法と個人情報のパートは黄緑の方眼地で区切る - 注釈は灰色の小さい文字にし、赤は注意喚起に少しだけ使う - `headline-band` は文字 `#FFFFFF` × 背景 `#FF99B3` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#ED003C`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVタイトル・当選金額 | ゴシック | Dela Gothic One | 900 | 36px | 1.2 | 0.02em | | `headline-lg` | 期間の日付・期ごとの日付 | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.0em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | カード内の小見出し・ラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `body-md` | 本文・応募要項 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.0em | | `note` | 注釈（※の補足） | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | FVの手書き風コピー・吹き出し | 丸ゴシック | Zen Maru Gothic | 700 | 14px | 1.4 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.02em | - 数字は単位より2倍ほど大きく組み、単位は小さく添える - 日付の曜日は丸囲みにする - 見出しは紺の太字にして装飾は入れない - 注釈は※から始め、本文より2〜3px小さくする - 長い本文も13px以下にはせず、行間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（PC はラベル帯＋本文の2分割、期とロゴは4列グリッド） - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 16px、基本単位 8px、カード内 16px（375px 幅換算） - 情報カードは縦に詰めて並べ、カード間は12〜16pxあける - PCではカード左に水色ラベル帯、右に内容を置く - 応募期4つは横並び（SPは2×2）にする - 利用ステップは番号付きの3カラムにする（SPは縦積み） - ロゴ一覧は白い枠のグリッド（SPは2列）にする ## Elevation & Depth - 白カードには影を薄く付け、地から浮かせる - ボタンにも影は少しだけ付ける - 基本はフラット ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物イラストは切り抜いて背景に散らす。ロゴは白い矩形に入れる - **セクション境界**: 直線で背景を切り替える（黄チェック→黄緑方眼） - カードは角丸8px - ボタンは楕円か完全なピル型にし、右端に丸矢印アイコンを付ける - 賞品の数量は×記号でつなぎ、四角枠に入れる - 左のラベル帯はカード内で左側の角だけ丸める ## Components - **応募ボタン**（`button-primary`）: 赤いピル型ボタン。白い太字の1行目の下に小さな補足を入れ、右に丸矢印を付ける - **リンクボタン**（`button-secondary`）: 紺か濃緑のピル型ボタン。白文字で右に矢印を付ける - **ラベル付き情報カード**（`info-card`）: 白カードの左側に水色のラベル帯を置き、小さい見出しと太い項目名を入れる - **賞品の数量ボックス**（`prize-box`）: 淡い黄の枠に金額×当選人数を大きな数字で並べる - **応募期カード**（`period-card`）: 期ごとの色の枠と上部の帯に期番号を入れ、日付を大きく、締切を小さく書く - **番号ステップカード**（`step-card`）: 黄緑地の上の白カードに大きな緑の数字、説明文、線画イラストを入れる - **見出し帯**（`headline-band`）: ピンクまたは緑の帯に白文字を入れ、要項や注意の始まりに置く - **吹き出し**（`speech-bubble`）: 白い楕円の吹き出しに紺の短いコピーを丸ゴシックで入れる - **ロゴ一覧グリッド**（`logo-grid`）: 白い矩形にロゴと小さい会社名を入れて格子状に並べる ## Do's and Don'ts **Do** - 日付・金額・人数は紺の極太で大きく見せる - 情報は必ず白カードにまとめ、黄色の地の上へ直接文章を置かない - 期や区分は色分けし、凡例のように揃える - 人物イラストを余白に散らして旅行の楽しさを出す - 応募CTAはFVと要項内の両方に置く **Don't** - 黄色の地に灰色の細い文字を載せない - 写真を全面に敷いて黄色チェックの印象を消さない - 赤をCTA以外で多用しない - 明朝体などで高級感に寄せない - カードの角を尖らせたり、影を濃くしたりしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と趣旨を伝える）: 黄チェック地の中央に淡い黄の楕円を置き、紺と赤の大タイトルを入れる。周りに旅行者のイラストを散らし、右下に応募ボタンを置く 2. **賞品の訴求**（当たる金額を一目で見せる）: 紺の極太数字で横一行に置き、白い縁取りで目立たせる 3. **応募対象・賞品**（条件と賞品数を示す）: ラベル付きの白カードを縦に並べ、賞品は数量ボックスに入れる 4. **対象期間・カレンダー**（対象となる日を示す）: 大きな日付と、月ごとに色を変えたカレンダーを横スライドで見せる 5. **応募期**（締切を区別して見せる）: 4色の期カードを横に並べる 6. **応募要項**（応募方法・当選通知を詳しく伝える）: ピンクの帯見出しの白カードに丸アイコン見出しと表を入れ、中に応募ボタンを置く 7. **利用方法**（クーポンの使い方を説明する）: 黄緑方眼地に緑の注意帯を置き、番号付き3ステップカードを並べる 8. **個人情報の取り扱い**（規約を示す）: 箇条書きの小さい文字と、濃緑のリンクボタン 9. **問い合わせ・主催**（連絡先と主催団体を示す）: 白カードに大きな電話番号を入れ、その下に団体ロゴと説明、紺のボタンを置く 10. **参加企業一覧**（対象会社を見せて信頼を得る）: 白いロゴタイルのグリッド 11. **フッター**（協賛を表示する）: クリーム地の中央にロゴを置く ## Imagery - 旅行者・家族・自転車・車・スーツケースのフラットなイラスト。輪郭線は細くし、彩度は中くらい - 紙飛行機や点線の軌跡で動きを出す - ステップには線画の人物とスマホやPCのアイコンを使う - 背景は黄色2トーンの斜めチェック柄 - 写真はほぼ使わず、イラストとロゴで構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPでは、ラベル帯をカードの上部に横帯として置く - SPでは、期カードを2×2に並べる - SPでは、ステップカードを縦積みにする - SPでは、ロゴグリッドを2列にする - SPでは、FVイラストを減らしてタイトルを画面幅の90%にする - SPでは、カレンダーを1か月ずつ横スワイプで見せる ## 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-af76103b`（元 LP の URL から採番） - **元 LP**: https://heijitsu.jp - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。