DESIGN.md — シアンと黄緑のポップな観光スタンプラリー LP（Pop Illustrated Digital Stamp Rally Tourism LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、情報量多め・訴求型
• キーワード: シアン×黄緑・紫アクセント・線画人物イラスト・ステップ解説・賞品紹介・スタンプラリー
• 地の質感: フラットな単色面。グラデーションや質感はほぼ使わず、イラストと写真で賑やかさを出す
• 形: 円形の白い抜きを中心にしたFV、角丸ボタン、円の番号、点線の縦タイムライン、スマホ枠型カード
• 温度感: 明るく涼しげ。紫とピンクで温度を足す

Colors

• FVとフッターはシアン、キャッチ帯は黄緑で、ページの上下を鮮やかな色で挟む
• 本文セクションは白と薄い水色を交互に置き、区切りを色で示す
• ボタン・ステップ番号・期間見出しは紫に統一し、操作できる所を一目でわかるようにする
• 賞品の数字・コース帯・orはピンクで、当選の訴求に限って使う
• 見出しと本文の文字は濃紺・濃グレーで、純黒は使わない
• 地域ラベルは地域ごとに色を変える（からし色／ターコイズ）
• course-band は文字 #FEFAFF × 背景 #E73277 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E01A66、4.51:1）を使う。
• region-tag は文字 #FEF8FF × 背景 #BDB520 のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#7C7615、4.5:1）を使う。

Typography

• 見出しは中央揃え、ステップ本文は左揃えにする
• 数字は本文より大きく太くし、単位や曜日は小さくする
• キャッチコピーは斜めに傾けた極太体にして、最後に大きな「！」を付ける
• 重要な見出しには黄色いマーカーを下半分に敷く
• 段落は1文ごとに改行して短く区切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ステップ部は左に番号と点線、右に本文の2列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約20px
• ステップ部は左端から約50pxを番号と点線の列にする
• 賞品写真は横幅約80%で中央に置き、左下に地域ラベルを重ねる
• 各セクションの最後に紫ボタンを置いて行動につなげる
• 選択肢の間には点線で挟んだ「or」を置く

Elevation & Depth

• ボタンは影ではなく、右下にずらした薄いグレーの板を重ねて浮かせる
• スマホ枠カードの下に柔らかいドロップシャドウを付ける
• そのほかの面はフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。FVの施設写真は4枚を横に並べた帯にする
• セクション境界: セクションは背景色の切り替えで直線的に区切る。FVだけ白い円形の抜きと雲形の模様を使う
• 主ボタンは角丸8px程度。もっと見るボタンだけピル型
• ステップ番号は紫の正円
• Wチャンス枠は角丸16pxの水色ボックス
• アプリ追加カードは紫の枠線で、右下に三角の折り返しを付ける

Components

• 紫の主ボタン（button-primary）: 左にアイコンを置き、白い太字。右下にグレーの板を重ねて立体感を出す
• ステップ番号（step-number）: 紫の正円に白い数字。下へ濃紺のドット点線が続く
• ステップ見出し（step-title）: 濃紺の太字で、下にミントの太い線を引く
• 期間ラベル（period-badge）: 紫の小さな角丸ラベルに白文字。右に大きな日付を並べ、行の間を紫の細線で区切る
• コース見出し帯（course-band）: 横幅いっぱいのピンク帯に白い太字を中央に置く
• 地域ラベル（region-tag）: 写真の左下にはみ出させて重ねる四角いラベル。地域ごとに色を変える
• スマホ枠カード（phone-frame-card）: 濃紺の太い枠とノッチでスマホを表し、中に参加方法を入れる
• マーカー見出し（heading-marker）: 見出し文字の下半分に黄色の帯を敷く
• or区切り（or-divider）: 左右の灰色の点線の間に、ピンクの太字でorを置く
• スライダー矢印（carousel-arrow）: 画面の端に付けた紫の四角に白い矢印。下に紫とグレーの丸いページ送りを置く

Do's and Don'ts

Do - ボタン・番号・期間ラベルは紫に統一する - FVは白い円を中心に置き、その周りに人物イラストを円形に配置する - ステップは番号・題・ミント線・本文・注釈・ボタンの順で作る - 賞品はコース帯→条件→写真→名前→説明の順に並べる - セクションの背景は白と水色を交互にする

Don't - 写真に角丸や影を付けない - ピンクを操作ボタンに使わない（訴求専用にする） - 暗い背景や重いグラデーションを使わない - 明朝体や手書き体を混ぜない - 1段落に長い文章を詰め込まない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（企画名とにぎやかな雰囲気を伝える）: シアン地に白い円のロゴを置き、周りに線画の人物と白い装飾を配置する。下端は黄緑にし、施設写真4枚を帯にする
2. キャッチ帯（企画の楽しさを一言で伝える）: 黄緑地に、斜めに傾けた極太の濃紺コピーと大きな「！」を置く
3. 実施期間（開催期間を示す）: 紫の見出しの下に、期間ラベルと大きな日付を2行並べ、紫の線で区切る
4. 参加方法の概要（仕組みを短く説明する）: 水色地にスマホ枠カードを置き、黄色マーカーの見出しと中央揃えの本文、下向きの紫三角を入れる
5. 参加ステップ（3つの手順を案内する）: 英字見出しの下に、番号と点線のタイムラインを並べる。各ステップに紫ボタンを付け、2番目だけ水色地にする
6. 応募案内帯（賞品パートへつなぐ）: 淡い水色の帯に、斜線で挟んだ見出しと補足を入れる
7. 賞品紹介（当選人数と賞品で参加意欲を上げる）: ピンクで人数を強調し、コース帯ごとに写真と地域ラベル、or区切りを並べる。続きは白くフェードさせ、もっと見るボタンを置く
8. Wチャンス（外れた人への救済を伝える）: 角丸の水色ボックスに、ピンクの極太見出しと太字の説明を入れる
9. 応募方法（応募の操作をイメージさせる）: 短い説明文と、手でスマホを持ってタップするフラットイラストを置く
10. 特集（関連記事で周遊を促す）: 淡い水色地にアイコンと見出しを置き、写真スライダー・本文・ページ送り・紫ボタンを並べる
11. ホーム画面追加（再訪を促す）: 紫枠のカードに、スマホのイラストと説明、プラスアイコンを入れる
12. フッター再掲（企画名と期間を再確認する）: シアン地にFVのロゴとイラストを縮小して置き、実施期間をもう一度示す

Imagery

• 人物は線画にフラットな塗りを付け、黄緑・紫・青の限られた色で描く。走る・跳ぶなど動きのあるポーズにする
• 背景には白いキラキラ、雲の模様、旅に関する小さなアイコン（電車・城・器など）を散らす
• 施設写真は明るい日中に撮った実写を使う
• 賞品写真は真上か斜め上から撮り、淡い水色の背景の上に置く
• 操作の説明は肌色の手とスマホのシンプルなフラットイラストで描く
• アイコンは濃紺の細い線で描いたシンプルなものにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため、ここからは推奨。PCでは本文の最大幅を960px程度にして中央に置く
• FVは左右にイラストを広げ、中央の円ロゴを大きくする
• 施設写真の帯と賞品は、PCでは3〜4カラムのグリッドにする
• ステップのタイムラインは縦のまま、本文の幅を広げる
• ボタンは最大幅360px程度にして中央に置く

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 行書くと起動時に読み込まれる。