--- version: alpha name: Warm Orange Regional Food Vote Campaign LP description: 朱色の帯と生成りの地色で構成した、地域グルメの投票キャンペーン LP。手描き風の線画イラスト、STEP 形式の参加方法、エリアごとに色分けしたタブと番号付きの商品カードで、多めの情報を整理して見せる。 colors: primary: '#DC530F' background: '#FEF9F1' surface: '#FEFEFE' background-alt: '#FEFEFE' cta: '#B5492B' on-cta: '#FFFFFF' secondary: '#CBB63F' accent-1: '#EA5099' accent-2: '#CF3236' text: '#040201' tint-1: '#FCECBA' line: '#8E908A' dark-section: '#1A1A1A' accent-1-accessible: '#E21B79' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Oswald fontSize: 30px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 40px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px period-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' height: 72px step-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px pill-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px area-tabs: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 260px prize-box: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 320px mark-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 28px --- # DESIGN.md — 朱色×生成りの駅弁投票キャンペーン LP（Warm Orange Regional Food Vote Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 親しみ・手作り感、情報量多め・訴求型、ポップ・元気 - **キーワード**: 朱色の帯・生成りの地・線画イラスト・エリア色分け・番号付きカード・記念ロゴ - **地の質感**: フラットな塗り。淡い線画イラストと紙吹雪のドットで温かみを足す - **形**: 角が四角い帯見出しと、小さな角丸のカード・ボタン。旗形の番号バッジ - **温度感**: 暖色寄り。朱・オレンジ・生成りが中心 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DC530F` | FV 背景・セクション帯見出し | 8% | 画素の実測 | | `background` | `#FEF9F1` | ページ全体の生成り地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | 白いカード・情報パネル | 25% | 画素の実測 | | `background-alt` | `#FEFEFE` | FV 下部や記念セクションの淡いピーチ地 | 10% | 画素の実測 | | `cta` | `#B5492B` | 主ボタン・強調の赤 | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#CBB63F` | 記念セクションの帯・カテゴリ見出し | 4% | 画素の実測 | | `accent-1` | `#EA5099` | エリア別ピンク見出し・番号 | 2% | 画素の実測 | | `accent-2` | `#CF3236` | 強調見出しの赤文字 | 0% | 画素の実測 | | `text` | `#040201` | 見出し・本文の黒 | 3% | 画素の実測 | | `tint-1` | `#FCECBA` | 投票期間ボックスの淡黄 | 0% | 画素の実測 | | `line` | `#8E908A` | 区切りの点線・枠線 | 0% | 画素の主要色に補正 | | `dark-section` | `#1A1A1A` | 黒ラベル（小見出しピル） | 0% | 推定 | | `accent-1-accessible` | `#E21B79` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと白を交互に使い、セクションの境目を作る - 大見出しの帯は朱色の全幅帯に白文字で入れる - 強調したい一文は赤文字の太字にし、多用しない - カテゴリごとに帯・番号・ラベルの色をそろえる（記念=金黄、地域=ピンクなど） - エリアタブは 8 色の中間トーンのパステルで塗り分ける - 主ボタンは濃い赤一色。右端に暗い色の矢印ブロックを付ける - `area-tabs` は文字 `#FFFFFF` × 背景 `#EA5099` のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E21B79`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のタイトルロゴ風の文字 | ゴシック | Dela Gothic One | 900 | 34px | 1.2 | 0.02em | | `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.5 | 0.02em | | `headline-md` | STEP 見出し・赤い強調見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.0em | | `headline-sm` | 商品名・帯見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.0em | | `body-md` | 本文・商品説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.0em | | `note` | 注釈・価格補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 記念ロゴの欧文・大きな日付数字 | 欧文サンセリフ | Oswald | 500 | 30px | 1.1 | 0.05em | | `label-button` | ボタン・タブ文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.05em | - 見出しは中央揃えの太ゴシックで 2 行に分ける - 日付の数字は大きく、曜日は丸括弧付きで小さく添える - 本文は中央揃えを基本にし、カード内は左揃えにする - 赤文字の強調は 1 セクションに 1 か所までにする - 注釈は ※ を付けて小さく灰色で入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品カードは文章・人物・写真を縦に積む - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 全幅の帯見出しのあと、内側に白パネルを置く - STEP の間は下向きのオレンジ点線矢印でつなぐ - 商品カード同士は点線で区切る - エリアタブは SP で 2 列のグリッドにする - プレゼント枠は赤い細線の角丸ボックスに入れ、角にリボンを飾る ## Elevation & Depth - 影はほぼ使わずフラットにする - カードは白い面と細線で地から分ける - 人物写真は円形に切り抜き、細い枠を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 料理は角版か切り抜き。人物は円形、賞品写真は円形で重ねる - **セクション境界**: 直線の色面切り替え。FV 下に線画の街並みイラストの帯を入れる - 見出し帯は角丸なしの長方形にする - 番号は下が V 字に切れた旗形のバッジにする - 小見出しラベルは黒のピル型にする - 販売箇所ラベルは左がカテゴリ色、右が白の横長タグにする ## Components - **全幅の帯見出し**（`section-band`）: 朱色やカテゴリ色の帯に白い太字を中央に置く - **主 CTA ボタン**（`button-primary`）: 赤い長方形。右端に暗い赤の区画を付け、下向きの矢印を入れる - **期間ボックス**（`period-box`）: 淡黄の地に黒い枠。上部のラベルに期間名、下に大きな日付 - **STEP 見出し**（`step-heading`）: STEP 番号を黒太字、手順の要点はオレンジ文字。次の STEP へ点線矢印でつなぐ - **黒ピルラベル**（`pill-label`）: 小見出しを黒いピル型に白文字で入れる - **エリアタブ**（`area-tabs`）: 地域ごとの色で塗ったタブを格子に並べ、右に下矢印を付ける - **番号付き商品カード**（`product-card`）: 旗形の番号、商品名、説明、販売箇所タグ、価格。右側に推薦者の丸写真と商品写真 - **プレゼント枠**（`prize-box`）: 赤い細線の角丸枠にリボンを飾り、賞品を 2 列で並べ、当選数を赤字で大きく出す - **アイコンバッジ**（`mark-badge`）: 初出品・受賞・予約などを示す小さな四角いバッジ ## Do's and Don'ts **Do** - 朱色・生成り・白の 3 色を骨格にする - 線画のイラストで手作り感を足す - 情報はカテゴリ色の帯で区切り、色の意味をそろえる - 日付や数量は大きな数字で見せる - 商品カードは同じ並び順で繰り返す **Don't** - 寒色を主役にしない - 濃い影やグラデーションのボタンにしない - 帯見出しを角丸にしない - 赤文字の強調を連発しない - カードごとに配置を変えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と期間を伝える）: 朱色の地に白い線画の小物を散らし、タイトルロゴと日付を置く。右に料理の写真、縦書きのコピー帯、丸い参加案内バッジを添える 2. **リード**（企画の趣旨を説明する）: 生成り地に中央揃えの 2 行見出しと短い本文。下に期間ボックスを置く 3. **参加の流れ**（投票の手順を示す）: 朱色の帯見出しと黒ピルラベルのあと、STEP1・2 をイラスト付きで並べ、点線矢印でつなぐ 4. **決勝・結果発表**（今後の日程を伝える）: 太字の見出しと中央揃えの短文を点線矢印でつなぐ 5. **プレゼント**（参加の動機を作る）: リボン付きの赤い枠に賞品 2 点を並べ、当選数を赤字で出す 6. **周年記念**（記念企画を伝える）: 金黄の帯に欧文の記念ロゴ。紙吹雪の装飾と駅舎・車両のイラスト、本文、主 CTA 7. **沿革**（背景のエピソードを伝える）: 日付の見出しの下に赤線を引き、左に本文、右に写真 2 点を並べる 8. **マークの見方**（アイコンの意味を説明する）: 朱色の帯の下の白パネルに、バッジと説明を並べる 9. **エリアナビ**（一覧へ移動させる）: 色分けしたタブを 4 列で並べる（SP では 2 列） 10. **エントリー商品一覧**（対象の商品を紹介する）: カテゴリ色の帯のあと、番号付き商品カードを点線で区切って縦に繰り返す ## Imagery - 料理は真上か斜め上から撮り、具材の彩りが見える明るい写真にする - 推薦する人物は制服姿の正面バストアップを円形に切り抜く - 白またはオレンジの線画で小物・人物・駅舎を描き、手描き感を出す - 記念セクションには小さな色ドットの紙吹雪を散らす - 推薦コメントは筆文字風の小さな吹き出しを人物の上に添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 80% 幅。SP は約 90% 幅の 1 カラムにする - 商品カードは PC の横 3 分割を、SP では縦積みにする - エリアタブは PC の 4 列を SP では 2 列にする - プレゼントの賞品は PC の 2 列を、SP では縦に並べてもよい - FV は SP で料理の写真をタイトルの下に回す ## 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-a719330d`（元 LP の URL から採番） - **元 LP**: https://www.jrkyushu.co.jp/train/ekiben/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。