DESIGN.md — ピンク×水色の妖怪ポップ温泉スタンプラリーLP（Pop Yokai Hot Spring Stamp Rally LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、和風、親しみ・手作り感、情報量多め・訴求型
• キーワード: 妖怪キャラ・太い黒フチ・パステル面・点線の道・雲モチーフ・スタンプラリー
• 地の質感: グラデーションは使わずベタ塗りだけ。黒の主線が太い漫画風イラストと、フチ取り付きの立体見出しで作る。
• 形: 黒く太い線で囲んだ角丸カード、ピル型ラベル、雲形の地名バッジ、丸く切り抜いた写真、境界は斜めの波線。
• 温度感: 暖かく陽気。夏祭りのようなにぎやかさ。

Colors

• セクションごとに地色をピンク→水色→ピンク→水色→白→ベージュ→ピンク→黄の順で切り替える
• 地色が変わる境目は、斜めの波線と黒の点線でつなぐ
• 見出しは赤と青を1文字ずつ交互に塗り、白フチと黒フチの二重で囲む
• カードの枠と主線は、どれも黒で太さを揃える
• 景品カードは段階ごとに紫・黄・水色・赤みピンク・緑と地色を変える
• 本文は濃いグレーにし、強調だけを赤か青にする

Typography

• 見出しは極太にし、白と黒の二重フチで立体感を出す
• リード文は中央揃えで、字間を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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。