--- version: alpha name: Pop Pink Stripe & Lemon Yellow Stamp Rally Campaign LP description: 濃いマゼンタピンクのストライプ地と、蛍光寄りのレモンイエローの面を大胆に組み合わせた、スタンプラリー型の抽選キャンペーンLP。黒い線で描いた人物イラストと手書き風のロゴ文字で楽しさを出す。後半は白カードに地域の魅力を読み物として並べ、最後に注意事項と締切を太字で見せる。 colors: primary: '#E63082' secondary: '#EFEA0C' cta: '#EA578F' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#FEF4F3' tint-1: '#FCFDE4' tint-2: '#F3F3A4' dark-section: '#4D4948' text: '#282321' text-body: '#4D4D4D' accent-1: '#70A66A' accent-2: '#008802' line: '#CCCCCC' cta-accessible: '#E31E69' primary-accessible: '#E11B74' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.7 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 32px 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: 54px panel-yellow-octagon: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 200px heading-pink-label: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 44px heading-dark-bar: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 40px step-block: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 150px prize-row: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 48px stripe-band: backgroundColor: '{colors.primary}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 230px article-section: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 400px deadline-box: backgroundColor: '{colors.primary}' typography: '{typography.display}' height: 180px --- # DESIGN.md — ピンク縞×レモン黄のポップな酒巡りキャンペーンLP（Pop Pink Stripe & Lemon Yellow Stamp Rally Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、力強い・インパクト、親しみ・手作り感 - **キーワード**: マゼンタ縞・レモンイエロー・黒線イラスト・スタンプラリー・抽選プレゼント・ご当地酒 - **地の質感**: ピンクの縦ストライプと淡ピンクの斜めストライプ地。面は単色でフラット、写真は商品の切り抜き集合カット。 - **形**: 角を斜めに落とした八角形パネル、ピル型ボタン、リボン型の見出し帯、丸数字。 - **温度感**: 暖色寄りで高彩度。お祭りのような明るさと賑わい。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E63082` | メインのマゼンタピンク（FV地・縞帯・強調文字） | 12% | 画素の主要色に補正 | | `secondary` | `#EFEA0C` | レモンイエローのパネル面 | 10% | 画素の実測 | | `cta` | `#EA578F` | ピル型ボタンのピンク | 3% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の白地 | 36% | 画素の実測 | | `background-alt` | `#FEF4F3` | 淡ピンクの斜め縞地（読み物セクション外側） | 6% | 画素の実測 | | `tint-1` | `#FCFDE4` | 手順説明の淡クリーム地 | 3% | 画素の実測 | | `tint-2` | `#F3F3A4` | リンク誘導の淡黄色ピル帯 | 1% | 画素の実測 | | `dark-section` | `#4D4948` | 見出し帯のダークグレー | 2% | 画素の実測 | | `text` | `#282321` | 見出し・本文の黒文字 | 3% | 画素の実測 | | `text-body` | `#4D4D4D` | 読み物本文のグレー | 2% | 推定 | | `accent-1` | `#70A66A` | サブ見出しの緑（ビール等） | 0% | 画素の主要色に補正 | | `accent-2` | `#008802` | フッターの鉄道グリーン | 9% | 画素の実測 | | `line` | `#CCCCCC` | 区切り線・枠線 | 0% | 推定 | | `cta-accessible` | `#E31E69` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E11B74` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にし、ピンク縞帯とイエローのパネルで交互にリズムを作る。 - ピンクは見出し強調・ボタン・縞帯に使い、黄色の上の強調文字もピンクにする。 - 黄色パネル上の通常文字は黒。ピンク地の上の文字は白。 - 読み物セクションは淡ピンク斜め縞の外枠に白カードを載せる。 - サブ見出しは酒の種類ごとに色を変える（青緑・橙・ピンク・緑）。 - 注意事項の重要行だけ赤ピンク文字にする。 - `button-primary` は文字 `#FFFFFF` × 背景 `#EA578F` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E31E69`、4.51:1）を使う。 - `prize-row` は文字 `#E63082` × 背景 `#FEFEFE` のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E11B74`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVタイトル・抽選訴求の大見出し（手書き風太字） | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.02em | | `headline-lg` | プレゼント訴求などセクション大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 34px | 1.3 | 0.02em | | `headline-md` | 見出し帯・賞名・手順タイトル | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.05em | | `headline-sm` | 読み物の地域魅力見出し（明朝寄り） | 明朝 | Shippori Mincho | 700 | 20px | 1.4 | 0.02em | | `body-lg` | 黄パネル内の説明・強調文 | ゴシック | Noto Sans JP | 700 | 15px | 1.7 | 0.0em | | `body-md` | 読み物本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.0em | | `note` | 注釈・注意事項 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ピル型ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.2 | 0.03em | - 大見出しは太く丸みのある書体で、ピンクと黒を行ごとに切り替える。 - 抽選訴求の見出しは少し斜めに傾け、放射線と星の飾りを添える。 - 数字（個数・日付・名様）は文字より一回り大きく極太にする。 - 読み物の見出しは明朝体で落ち着かせ、ポップ部分と差をつける。 - 本文はゴシックで12〜15px、行間は広めにとる。 - 黄色パネルの説明文は中央揃えにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 32px、基本単位 8px、カード内 20px（375px 幅換算） - FVはイラスト入りの全幅ビジュアル1枚。 - 黄パネル・白カードは左右4%の余白を残して中央に置く。 - 手順は「ステップ見出し帯＋淡クリーム説明」を積み、間に＋や↓の丸記号を挟む。 - 賞品一覧は1行ずつ「賞名・人数バッジ・内容」の横並びにする。 - 読み物は白カード内で項目ごとに細線で区切る。 - 締切ブロックはラベル箱と大きな日付を横並びにする。 ## Elevation & Depth - ピル型ボタンは下方向に柔らかい影をつける。 - 白ボタン（資料案内）は上が白で下が淡いグレーのグラデーションに影をつける。 - 応募はがきの見本図には右下に落ち影。 - 黄パネル・カードは基本的にフラットで影なし。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品は白抜きの切り抜きで集合配置。人物はイラスト。 - **セクション境界**: 直線で切り替え。帯は縦ストライプ柄。黄パネルは四隅を斜めに落とす。 - 黄パネルは角を斜めにカットした八角形。 - 賞品紹介カードは太いピンク枠と角丸16px。 - 見出しリボンは両端を切り込んだ帯型。 - 番号は塗りつぶしの丸数字。 - リンクボタンは黒枠の角丸ボタンに外部リンクアイコン。 ## Components - **ピンクのピル型ボタン**（`button-primary`）: 横幅いっぱいの丸ボタン。右端に＞の矢印、下に影。 - **角落とし黄色パネル**（`panel-yellow-octagon`）: 四隅を斜めに切った黄色の面。説明文や抽選訴求を中央揃えで入れる。 - **ピンク帯の見出しラベル**（`heading-pink-label`）: 黄パネルの上端に載せる、角丸ピンクの見出し帯。文字は白。 - **ダークの見出し帯**（`heading-dark-bar`）: 両端を斜めに切ったダークグレーの帯に白の太字見出し。 - **手順ステップ**（`step-block`）: 黄色帯に丸数字と大きな個数を入れ、下に淡クリームの説明を置く。間に＋や↓の丸記号。 - **賞品リスト行**（`prize-row`）: 地域名＋ピンクの賞名、黄色の人数バッジ、黒文字の内容を1行に並べ、下線を引く。 - **ピンク縞帯の案内エリア**（`stripe-band`）: 縦ストライプのピンク地に、白いグラデーションボタンを2つ並べる。注釈は白文字。 - **地域の魅力読み物**（`article-section`）: 丸アイコン＋明朝見出し、色付きサブ見出し、本文。そのあと淡黄ピル帯と黒枠リンクボタン。 - **締切表示**（`deadline-box`）: ピンク塗りの四角ラベルと極太の日付を並べ、黄色の吹き出しで何回でも応募可能と伝える。 ## Do's and Don'ts **Do** - ピンクと黄色の高彩度2色を主役にして、白で一息つかせる。 - 抽選訴求は放射線・星の飾りと傾けた文字で賑やかにする。 - 応募手順は図（はがき見本）と番号で視覚化する。 - 数値・日付は極太で大きく表示する。 - 後半の読み物は白カードと明朝見出しで落ち着かせる。 - 注意事項は白カードの中に箇条書きでまとめる。 **Don't** - くすんだ色やパステルだけでまとめない。 - 黄色の上に白文字を置かない。 - 写真の人物を主役にしない（イラストで統一）。 - 角丸の小さいボタンや細いボタンにしない。 - 読み物部分まで装飾を過剰にしない。 - 応募条件を本文中に埋もれさせない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と開催期間を伝える）: ピンク縞地に手書き風の大タイトル、黒線の人物イラスト、酒種の丸バッジ、下部に建物と列車のシルエット、期間を大きな数字で。 2. **企画の説明**（造語・企画の意味を伝える）: 角落とし黄パネルの上端にピンク見出しラベル。中央揃えの本文と、ピンクの一文で締める。 3. **プレゼント訴求**（応募の動機づけ）: 白地に黒とピンクの大見出し。左右に放射線と星の飾り。 4. **参加方法**（応募の流れを説明）: ダーク見出し帯、ピンク強調入り説明、はがき見本の図、黄帯のステップを＋↓でつなぐ。 5. **抽選訴求パネル**（賞の種類と条件をまとめる）: 大きな黄パネルに傾けたピンク大見出し、条件文、ピンク文字の賞の列挙を角括弧で囲む。 6. **賞品紹介**（賞ごとの当選数と内容を見せる）: ピンク枠カードにリボン見出し、賞品リスト行、下部に商品の集合写真と黄色地。 7. **誘導ボタン群**（詳細ページへ誘導）: ピンクのピル型ボタン2つと、緑のお得情報バナー。 8. **資料案内**（パンフレット・はがき印刷へ誘導）: ピンク縞帯に白のグラデーションボタン2つと白文字の注釈。 9. **地域の魅力読み物**（酒の種類ごとの魅力を紹介）: 淡ピンク斜め縞地に白カード。項目ごとに丸アイコン＋明朝見出し、色付きサブ見出し、本文、外部リンク。 10. **注意事項と締切**（応募条件と期限を明示）: ピンク縞地の白カードに箇条書き、締切ラベルと大きな日付、黄吹き出し、発送時期。下に白文字で飲酒の注意。 11. **主催・協賛**（運営元を示す）: 白地に中央揃えで、小さなピンクのラベルと黒の小文字。 12. **フッター**（サイト共通ナビ）: グリーン地にアコーディオンメニューとリンク一覧、最下部は黒帯。 ## Imagery - 人物は黒の太い線とピンク・黒・ベージュ・淡紫だけで塗ったフラットなイラスト。乾杯して走るような動きのあるポーズ。 - 背景の建物・列車は黒のシルエットにピンクの窓。 - 酒種は黒丸に黄色の手書き文字のバッジにする。 - 商品写真は瓶・パックを白抜きにして、すき間なく集合させる。 - 装飾は星・放射線・丸点などの線画を黒で入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央固定幅（約1000px）で、FVイラストを横に広げる。 - PCでは手順がステップ列とはがき図の2カラムになる。 - PCの賞品リストは2カラムのグリッドになる。 - PCの資料ボタンは横に2つ並べる。 - PCの注意事項は2カラム、締切ブロックは1行に横並び。 - ボタンはPCでは幅を約60%に縮めて中央に置く。 ## 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-5a2f5295`（元 LP の URL から採番） - **元 LP**: https://www.jreast.co.jp/nagano/ekisyupart/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。