--- version: alpha name: Kyoto Collab Snack Train Campaign LP description: 駄菓子ブランドと地方鉄道のコラボ企画を伝える LP。赤いヘッダーとフッター、生成り地を太い紫の枠で囲んだ額縁型セクション、黄色の二重枠見出し、市松・霞・扇の和柄モチーフ、キャラクターイラストで、京都の和の雰囲気とお菓子のポップさを両立させている。 colors: primary: '#915C8A' secondary: '#E31522' background: '#F7F4ED' background-alt: '#FFFFFF' text: '#2B2B2B' accent-1: '#FDD402' accent-2: '#91C43C' accent-3: '#F191A7' marker: '#D4EDB0' text-muted: '#ABABAB' cta: '#FDD402' on-cta: '#040101' on-primary: '#FFFFFF' accent-2-accessible: '#5F8027' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.04em headline-lg: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.02em accent: fontFamily: Noto Sans fontSize: 9px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.8 rounded: sm: 0px md: 8px lg: 20px full: 999px spacing: unit: 8px card: 22px section: 120px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-frame: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 1000px heading-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.display}' height: 150px number-badge: textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 64px circle-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 96px info-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 22px news-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 290px button-outline: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 70px fan-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' height: 140px banner-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 340px sns-tile: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 96px --- # DESIGN.md — 紫枠×赤黄の和柄コラボ菓子キャンペーン LP（Kyoto Collab Snack Train Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、和風、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 和柄モチーフ・紫の額縁枠・キャラクター・市松模様・霞雲・コラボ告知 - **地の質感**: フラットな単色面で作る。和柄（市松・霞・扇）を平面的な装飾として置く - **形**: 角のない太枠の四角い額縁、六角形の番号バッジ、丸い吹き出しバッジ - **温度感**: 暖かく賑やか。生成り地に赤・黄・緑・紫を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#915C8A` | セクション額縁・番号バッジの紫 | 5% | 画素の実測 | | `secondary` | `#E31522` | ヘッダー・フッター・強調文字の赤 | 5% | 画素の実測 | | `background` | `#F7F4ED` | 額縁内の生成り地 | 33% | 画素の実測 | | `background-alt` | `#FFFFFF` | セクション間の白地 | 27% | 画素の実測 | | `text` | `#2B2B2B` | 見出し・本文の濃グレー | 8% | 画素の実測 | | `accent-1` | `#FDD402` | 見出し枠・お知らせ帯の黄 | 4% | 画素の実測 | | `accent-2` | `#91C43C` | 期間ラベル・マーカーの黄緑 | 2% | 画素の実測 | | `accent-3` | `#F191A7` | 霞雲・番号バッジ差し色のピンク | 1% | 画素の実測 | | `marker` | `#D4EDB0` | 本文キーワード下の薄緑マーカー | 0% | 推定 | | `text-muted` | `#ABABAB` | 日付ラベル・霞雲のグレー | 1% | 画素の実測 | | `cta` | `#FDD402` | 過去企画バナーの黄色枠ボタン | 2% | 画素の実測 | | `on-cta` | `#040101` | 黄色ボタン上の文字 | 0% | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤・黄緑面の白文字 | 0% | 画素の主要色に補正 | | `accent-2-accessible` | `#5F8027` | AA を満たす補正値（計算） | | 計算 | - ページ外枠は赤のヘッダーとフッターで挟む - 各セクションは白地の上に、太い紫枠で囲んだ生成り地の額縁として置く - 大見出しは黄色の二重枠の白い箱に入れる - 期間などの項目ラベルは黄緑の面に白文字で載せる - 注意書きや未定の告知は赤文字にする - 本文のキーワードには薄緑のマーカーを引く - `info-label` は文字 `#FFFFFF` × 背景 `#91C43C` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#5F8027`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 黄枠内のメイン見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.35 | 0.04em | | `headline-lg` | 企画ごとの見出し（太い個性的なゴシック） | 装飾・ディスプレイ | Dela Gothic One | 400 | 28px | 1.3 | 0.02em | | `headline-sm` | 見出し上のコラボ表記・期間の値 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-lg` | 導入文（中央揃え太字） | ゴシック | Noto Sans JP | 700 | 15px | 2.2 | 0.02em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.9 | 0.02em | | `accent` | 見出し下の英字サブコピー | 欧文サンセリフ | Noto Sans | 700 | 9px | 1.4 | 0.03em | | `label-button` | ラベル・ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `note` | 赤い注意書き・日付 | ゴシック | Noto Sans JP | 700 | 11px | 1.8 | 0.0em | - 見出しは極太で、黒に近いグレーにする - 企画見出しの下には紫の市松模様の帯を敷く - 導入文は中央揃えの太字で、行間を広く取る - 説明本文は左揃えの小さめの文字にする - コラボ表記は2色で書き分ける（紫と赤） - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。額縁の中も 1 カラムで縦に積む - **本文ブロックの幅**: 画面幅の約 75% - **余白**: セクション間 120px、基本単位 8px、カード内 22px（375px 幅換算） - 額縁は画面幅の約88%、枠線は約7px - 額縁の内側に約20pxの余白を取る - 額縁と額縁の間は白地を大きく空ける - 企画ブロックは番号バッジ→写真→見出し→ラベル付き情報→本文の順に並べる - キャラクターと和柄モチーフは見出しの脇に余白を埋めるように置く ## Elevation & Depth - 基本は影のないフラットな作り - 過去企画バナーにだけ弱いドロップシャドウを付ける - SNSボタンは影を付けずに塗りだけで作る ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの長方形。ファーストビューは中央に大きな円形のイラストを置く - **セクション境界**: 直線の額縁で区切る。ヘッダー下とフッター上は波形の縁にする - 額縁と見出し箱は角丸なし - 見出し箱の四隅は内側に切り欠く - 番号は六角形の枠で囲む - 訴求バッジは赤い円形の吹き出しにする - SNSボタンは角丸20pxの正方形に近いタイルにする ## Components - **紫の額縁セクション**（`section-frame`）: 太い紫の枠線で生成り地を囲み、セクション全体を額縁に入れる - **黄色二重枠の見出し箱**（`heading-box`）: 白い箱を黄色の二重線で囲む。上段にコラボ表記、下段に大見出し。角に紫の菱形と赤い霞の飾りを置く - **六角形の番号バッジ**（`number-badge`）: 紫とピンクの六角形の枠の中に、黄緑の数字を入れる - **赤い丸の吹き出しバッジ**（`circle-badge`）: 赤い円に白い縁取りを付け、白と黄の文字で企画の目玉を3行で書く - **黄緑の項目ラベル**（`info-label`）: 期間・場所などの項目名を黄緑の面に白文字で載せ、右に太字で値を書く - **お知らせカード**（`news-card`）: 灰色の日付タブ、画像、黄色の帯の順に重ね、帯には要約と赤い三角の矢印を入れる - **外部リンクボタン**（`button-outline`）: 白いボタンを紫の二重枠で囲み、外部リンクのアイコンを添える - **扇形の見出し**（`fan-heading`）: 赤い扇の上に白文字の見出しと弧を描く英字を載せ、紫の縁と黄の市松を添える - **過去企画バナー**（`banner-cta`）: 黄色の太枠と見出し帯を付けた画像バナー。右下に黄色の丸い矢印を置く - **SNSタイルボタン**（`sns-tile`）: 各サービスの色で塗った角丸タイルを2列に並べ、アイコンと白い文字、右に矢印を入れる ## Do's and Don'ts **Do** - セクションはすべて紫の額縁に収める - 和柄（市松・霞雲・扇・菱形）を平面の装飾として散らす - キャラクターイラストを見出しの脇に配置して賑やかにする - 企画は番号付きのブロックで縦に並べる - 期間などの情報はラベルと値の2列で書く **Don't** - グラデーションや強い影でリッチに見せない - 角丸の柔らかいカードを多用しない - 寒色や彩度の低い配色に寄せない - 長い本文を中央揃えにしない（中央揃えは導入文だけ） - 装飾のない無地のセクションを続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドとメニューへの導線を示す）: 赤い帯の左にロゴ、右にメニューを置く。下の縁は波形にする 2. **ファーストビュー**（コラボ企画を印象づける）: 観光写真を格子状に敷き、中央の大きな円に紫の縁取りを付けてキャラクターの集合イラストとタイトルロゴを入れる 3. **導入**（コラボの背景と趣旨を伝える）: 額縁の中に黄枠の見出し箱、英字サブコピー、マーカー付きの中央揃え太字文、左右にキャラクターを置く 4. **お知らせ**（最新情報へ誘導する）: 菱形の飾りで見出しを作り、左右を市松の帯で挟む。下に日付付きのお知らせカードを縦に並べる 5. **コラボ先の紹介**（相手先とキャラクターを紹介する）: ロゴの下に扇形の見出しを置き、写真と説明文を並べる。最後に二重枠の外部リンクボタンを置く 6. **企画の詳細**（各企画の内容と期間を伝える）: 黄枠の見出しの下に、番号バッジ・写真・赤丸バッジ・ラベル付き情報・本文のブロックを4つ並べる 7. **締めのビジュアル**（世界観で余韻を残す）: キャラクターの集合イラストとタイトルロゴを再び大きく置く 8. **過去企画への導線**（関連企画へ回遊させる）: 黄色の見出し帯付きのコラージュバナーを置く 9. **SNS・フッター**（SNSと公式チャネルへ誘導する）: シェアボタン、2列のSNSタイル、キャラクター付きのブランドメッセージ、波形の赤いフッターの順に並べる ## Imagery - 写真は路面電車や古都の街並みを晴天の下で撮った、彩度の高い実写 - 車両の写真は斜め前から全体が収まる構図で撮る - キャラクターは黒い太線と原色の塗りで描いたフラットなイラスト - キャラクターの周りに黄色のキラキラを添える - 霞雲・市松・扇・竹の葉は単色の平面パーツで描く - お知らせの背景にはお菓子の麺のテクスチャ写真を敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも額縁は中央に置いた1カラムで、幅は約800pxまで - PC では紹介ブロックを2列に、お知らせカードを横に2枚並べる - PC では企画ブロックの写真とテキストを左右交互に並べる - PC のヘッダーには横並びのグローバルナビとSNSアイコンを加える - PC ではSNSタイルを横一列に6個並べる ## 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-1570ade8`（元 LP の URL から採番） - **元 LP**: https://www.oyatsu.co.jp/product/randen/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。