DESIGN.md — ターコイズ×焦げ茶のレトロ旅情ギフトカードLP（Retro Time-Travel Pet Character Gift Card LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、レトロ、親しみ・手作り感、ポップ・元気
• キーワード: ターコイズ・生成り・焼き色ブラウン・肉球モチーフ・レトロ旅情・暖簾・リボン見出し
• 地の質感: フラットな面に青海波・ドット・肉球柄・ギンガムチェックを淡く敷く。紙の巻物やノート風の枠を使う
• 形: 角丸カード、もこもこ雲形の価格バッジ、リボン型の見出し、ゆるい波線の下線
• 温度感: 暖かめ。寒色のターコイズを生成りとブラウンでやわらげる

Colors

• ターコイズを全体の地にし、主要コンテンツは白カードか生成り面に載せる
• 2択のテーマは A を藍・ターコイズ、B を焼き色ブラウンと色で分ける
• 見出しや本文は黒ではなく焦げ茶を使う
• 赤は「目印」「好評発売中」など最重要の強調だけに使う
• 動画セクションはピンクと黄色のチェック地で区切りごとに色を変える
• Q&A は紺の枠線と紺の文字、質問行は生成りの帯にする

Typography

• 全体を丸ゴシックの太字で統一し、やわらかく親しみやすくする
• 見出しはセンター揃え。2〜3行で改行位置を整える
• 小見出しの前に「＼ ／」の囲みを付ける
• 数字や Part 番号は丸数字バッジと組み合わせる
• 本文は焦げ茶で、行間を 1.7 前後に広めに取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。動画は縦に 1 本ずつ並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地色を全幅で切り替える
• カードは左右に 6% ほどの余白を取って中央に置く
• 商品画像の上に価格の雲形バッジを重ねる
• 説明カードは画像の直後に重ね気味に置く
• 都道府県リストは 3 列のグリッドにする

Elevation & Depth

• 影はほぼ使わず、色ずらしのベタ影（黄色の板を右下にずらす）で立体感を出す
• 商品カードは白い太枠で浮かせる
• 封筒や小物の画像だけ軽いドロップシャドウ

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。特典の画像は大きな円の中に置く
• セクション境界: 基本は直線で切り替える。ファーストビューの下だけ黄色の波線
• 地区ラベルはピル型
• 価格バッジはもこもこの雲形
• 見出しはリボン・暖簾・吊り看板など、モチーフのある形にする
• 吹き出しには下向きのしっぽを付ける

Components

• リボン見出し（ribbon-heading）: 両端が折り返されたワイン色の帯に白文字
• 暖簾・看板見出し（noren-heading）: A/B の丸記号と一緒に置く、テーマ別の看板風見出し
• 雲形価格バッジ（price-cloud-badge）: 白い雲形に価格を大きく、補足を小さく入れる
• 巻物・ノート風説明カード（scroll-card）: 生成り地に点線の下線付き小見出しと本文。枠は藍または茶
• 赤い強調吹き出し（alert-bubble）: 赤地に白の太字。黄色のベタ影としっぽ付き
• 地区ラベル（region-pill）: 地区ごとに色を変えたピル型ラベルと、その下の県名リスト
• 動画パート番号（video-part-label）: 欧文の Part に色付きの丸数字と秒数を添える
• Q&A アコーディオン（faq-accordion）: 紺の枠の角丸カード。質問行は生成り地で右に＋/−、回答の前に紺の丸い A

Do's and Don'ts

Do - 肉球・波線・＼／など、かわいい小さな装飾を見出しに添える - テーマごとに地色と柄を変えて違いを見せる - 文字は焦げ茶か紺にし、色数は多くてもトーンをそろえる - 画像は角丸の白枠カードに収める - 影はベタ影や色ずらしで表現する

Don't - 純黒の文字や細い明朝体は使わない - ぼかしの大きい影やグラデーションを多用しない - 赤を広い面に使いすぎない - 装飾のない直角の四角い見出しにしない - 白一色の無地セクションを続けない

Page Structure

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

1. 発売日ヘッダー（発売日を最初に知らせる）: 白帯に大きなターコイズの数字と右端のロゴ
2. ファーストビュー（限定品であることとタイトルを見せる）: 生成り地にロゴ風の太いタイトル、赤い星形の発売中バッジ、黄色の波線
3. 導入ストーリー（世界観を伝え、2択に誘う）: ターコイズ地に線画の街並み、角丸のイラスト、問いかけの白い吹き出し
4. 商品A紹介（和のテーマのデザインを見せる）: ターコイズ地に青海波の柄。暖簾見出し、雲形の価格、画像カード、巻物風の説明
5. 商品B紹介（レトロ喫茶テーマのデザインを見せる）: 焼き色ブラウン地に喫茶の線画。看板見出しとノート風の説明カード
6. 特典紹介（付属するケースと封筒を訴求する）: ピーチの肉球柄地にリボン見出し。円の中に特典の画像、さらにの帯カード
7. 販売店一覧（買える地域を示す）: コルクボード風の枠に色分けの日本地図、地区ピルと県名を 3 列、注意書き
8. 店頭目印・購入情報（店頭での見つけ方と購入条件を示す）: 白い角丸カードに赤い吹き出し、ポスター画像、上下罫線で挟んだ発売日、箇条書き
9. 関連動画（関連企画でファンの関心を高める）: 白地に見出しとバナー、ピンクと黄色のチェック地に動画と Part 番号を並べる
10. Q&A（購入に関する不安をなくす）: ターコイズ地にキャラクターの添え絵、紺の枠のアコーディオン

Imagery

• 主役の動物は小物（笠・帽子・蝶ネクタイ）を付けた演出写真にし、正面を向かせる
• 背景は浮世絵風や昭和の喫茶など、時代の雰囲気がわかる合成にする
• キャラクターは丸みのある線のフラットなイラストで、縁から顔をのぞかせる構図
• セクションの地には白い線画（建物・茶器・グラス）を薄く散らす
• 肉球・ドット・青海波・ギンガムチェックを地の柄として使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもコンテンツは中央に約 60〜70% 幅で置き、地色を全幅に敷く
• PC では商品画像と価格バッジを左右にずらして配置する
• 販売店一覧は PC で地図の周りに県名を直接添えるレイアウトにする
• 店頭目印セクションは PC で吹き出しとポスターを 2 カラムにする
• 動画は PC で 2 列のグリッド。奇数のときは最後の 1 本を中央に置く
• Q&A は PC で幅を約 70% に絞る

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