--- version: alpha name: Pop Yokai Hot Spring Stamp Rally LP description: ピンク・水色・黄色のパステルな面を交互に敷く温泉めぐりキャンペーンLP。黒の太いフチ取り文字と太い黒枠のカード、ゆるい妖怪イラスト、点線や雲の飾りで、和のレトロさと漫画っぽいポップさを両方出している。 colors: primary: '#8CB9E2' background: '#FEFEFE' secondary: '#F8DAD2' accent-1: '#F2EB5F' text: '#0F0C0B' text-body: '#333333' accent-2: '#BC4F48' accent-3: '#4F719F' background-alt: '#F4D5A4' tint-1: '#D0E1FB' surface: '#FDFDF6' tint-2: '#F9E1B5' marker: '#6CC5E4' accent-1-pink: '#E58BAE' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 120px pill-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px prize-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 320px cloud-badge: backgroundColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px facility-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 240px step-circle: backgroundColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 130px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 110px black-tag: backgroundColor: '{colors.text}' typography: '{typography.label-button}' height: 32px --- # DESIGN.md — ピンク×水色の妖怪ポップ温泉スタンプラリーLP（Pop Yokai Hot Spring Stamp Rally LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、和風、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 妖怪キャラ・太い黒フチ・パステル面・点線の道・雲モチーフ・スタンプラリー - **地の質感**: グラデーションは使わずベタ塗りだけ。黒の主線が太い漫画風イラストと、フチ取り付きの立体見出しで作る。 - **形**: 黒く太い線で囲んだ角丸カード、ピル型ラベル、雲形の地名バッジ、丸く切り抜いた写真、境界は斜めの波線。 - **温度感**: 暖かく陽気。夏祭りのようなにぎやかさ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8CB9E2` | メインのセクション地（水色） | 13% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 20% | 画素の実測 | | `secondary` | `#F8DAD2` | 交互に敷くピンク地 | 9% | 画素の実測 | | `accent-1` | `#F2EB5F` | 黄色の地・景品カード | 10% | 画素の実測 | | `text` | `#0F0C0B` | 主線・見出しのフチ・カード枠 | 6% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文の濃いグレー | 3% | 推定 | | `accent-2` | `#BC4F48` | 見出しの赤 | 2% | 画素の実測 | | `accent-3` | `#4F719F` | 見出しの青 | 1% | 画素の実測 | | `background-alt` | `#F4D5A4` | 注意事項エリアのベージュ地 | 5% | 画素の実測 | | `tint-1` | `#D0E1FB` | 参加方法ボックスの淡い青 | 8% | 画素の実測 | | `surface` | `#FDFDF6` | 景品の流れを載せるアイボリー地 | 5% | 画素の実測 | | `tint-2` | `#F9E1B5` | 推し飯の欄の薄いオレンジ | 3% | 画素の実測 | | `marker` | `#6CC5E4` | ラベル帯の明るい水色 | 1% | 画素の実測 | | `accent-1-pink` | `#E58BAE` | 当選人数を示すピンクのラベル | 1% | 推定 | - セクションごとに地色をピンク→水色→ピンク→水色→白→ベージュ→ピンク→黄の順で切り替える - 地色が変わる境目は、斜めの波線と黒の点線でつなぐ - 見出しは赤と青を1文字ずつ交互に塗り、白フチと黒フチの二重で囲む - カードの枠と主線は、どれも黒で太さを揃える - 景品カードは段階ごとに紫・黄・水色・赤みピンク・緑と地色を変える - 本文は濃いグレーにし、強調だけを赤か青にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション番号（01・02など） | 装飾・ディスプレイ | Dela Gothic One | 900 | 52px | 1.0 | 0.02em | | `headline-lg` | セクション見出し（赤青の交互塗り＋フチ） | ゴシック | Dela Gothic One | 900 | 34px | 1.25 | 0.05em | | `headline-md` | 景品名・カード内の大見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.3 | 0.08em | | `headline-sm` | 施設名・Q&Aの質問 | ゴシック | Zen Kaku Gothic New | 900 | 18px | 1.4 | 0.02em | | `body-lg` | リード文（中央揃え・字間広め） | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.7 | 0.1em | | `body-md` | カードの説明・注意事項 | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.0em | | `note` | ※付きの注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | ピル型ラベル・バッジの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.2 | 0.15em | - 見出しは極太にし、白と黒の二重フチで立体感を出す - リード文は中央揃えで、字間を0.1em前後に広げる - キャラクター紹介は縦書きにする - セクション見出しは、大きな番号の下に主見出しを置く2段組みにする - 注釈は小さい文字に※を付けて、カードの下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。施設カードの中だけ写真 2 枚とサイド欄を並べる - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右に約7%の余白をとって中央に置く - 景品カードは▼でつなぎ、縦に流れを見せる - カードの左上に、雲形の番号バッジを枠からはみ出させて置く - 施設カードは、本文側約70%と推し飯欄約30%の2分割にする - セクションの冒頭には、キャラクターのイラストを端からはみ出させて配置する ## Elevation & Depth - 影はつけず、黒の太い枠線だけで立体感を出す - 見出しには黒で塗ったオフセット影（ずらした影）をつける - カードの右下に黒い面をずらして重ね、立体風に見せることがある ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 施設写真は角丸の長方形、料理とキャラクターの背景は正円で切り抜く - **セクション境界**: 斜めの波線で地色を切り替え、黒の点線を這わせる - カードの枠線は黒で3〜4pxの太さにする - ラベルは黒枠のピル型にする - 地名バッジは雲形にする - 飾りとしてキラキラの星と雲を散らす - シークレット要素はギザギザの爆発形バッジで見せる ## Components - **番号付きセクション見出し**（`section-heading`）: 大きな白抜き番号の下に、赤青を交互に塗った極太見出しを置く - **ピル型ラベル**（`pill-label`）: 水色やピンクの面を黒枠で囲み、条件や当選人数を示す - **景品カード**（`prize-card`）: 黒枠の角丸カード。左上に雲形の番号バッジを置き、地色は段階ごとに変える - **雲形地名バッジ**（`cloud-badge`）: 赤・青・橙の雲形に、白文字で地名を入れる - **施設カード**（`facility-card`）: 白地に写真2枚と説明、右に推し飯の丸写真を載せる - **手順アイコン**（`step-circle`）: 黒い円に白線のアイコンを描き、円弧に沿って文字を入れ、左に番号を置く - **Q&Aボックス**（`faq-item`）: 白地を黒枠で囲み、Qは赤・Aは青の大きな文字で示す - **黒い帯タグ**（`black-tag`）: 黒地に白文字の、斜めにカットした見出しタグ ## Do's and Don'ts **Do** - 地色はベタ塗りのパステルにし、セクションごとに切り替える - 枠線と主線は太い黒で統一する - ゆるい妖怪キャラクターを、各セクションの境目に配置する - 点線・雲・星の飾りを余白に散らす - 情報はカードに分けて、▼で流れを見せる **Don't** - グラデーションやぼかした影は使わない - 細い明朝体で上品にまとめない - 黒枠のない薄いカードは置かない - 地色を1色だけにしない - 写真を角丸なしで裁ち落とし配置しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベント名と会期を伝える）: 左右にのれん、中央に極太ロゴ、縦帯2本、大きな日付を置き、周りに妖怪や桶を配する 2. **導入**（季節感とともに参加を誘う）: ピンク地に、赤いフチ文字のキャッチと中央揃えのリード文を置く 3. **景品紹介**（スタンプの数ごとの景品を示す）: 水色地にアイボリーの大枠を置き、その中に色違いの景品カードを▼でつなぐ 4. **参加方法**（LINEで参加する手順を伝える）: ピンク地に淡い青のボックスを置き、黒丸アイコン4つを縦に並べる 5. **参加施設一覧**（県ごとに施設を紹介する）: 雲形の県名バッジの下に、白い施設カードを並べる 6. **地図**（施設の場所を示す）: 白地に、地図を埋め込んだ枠を置く 7. **注意事項**（参加の条件を伝える）: ベージュ地に小さい文字の箇条書きを並べる 8. **よくある質問**（疑問を解消する）: ピンク地に、黒枠のQ&Aボックスを縦に並べる 9. **キャラクター図鑑**（世界観で楽しさを伝える）: 黄地に、縦書きの説明・白丸の上のキャラクター・黒い縦帯の名前を並べる 10. **開催概要・フッター**（主催の情報と次回の告知を載せる）: 白地に表組みと協賛ロゴを置き、ロゴとNEWSで締める ## Imagery - 太い黒の主線とベタ塗りで描く、ゆるい妖怪キャラクター - のれん・桶・富士山・雲など、和のモチーフをイラストで描く - 施設写真は明るめに、角丸で切り抜く - 料理写真は真上から撮り、正円で切り抜く - キラキラの星、黒の点線、雲を散らして余白を飾る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、以下は推奨。SP の幅を基準に、PC では本文を最大 720px で中央に置く - PC では、地色の帯を画面の全幅まで延ばす - PC では、施設カードを2カラムにしてよい - PC では、キャラクターをカードの外側に大きく配置する ## 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-4621822a`（元 LP の URL から採番） - **元 LP**: https://shinshu-yunomichi.jp/kitakanto2026/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/）からご連絡ください。