DESIGN.md — 深海ブルーとドット枠のキャラコラボイベントLP（Pixel Retro Underwater Character Event LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、かわいい、レトロ、清潔・爽やか
• キーワード: 海中グラデーション・ドット絵枠・黄色い英字ロゴ見出し・紺縁の白カード・キャラ区切り・波形境界
• 地の質感: フラットな単色面に、波形の境界と泡・クラゲの線画を少し散らす。カードには紺のオフセット影をつけて立体感を出す。
• 形: 角丸カード、ドット状に角が欠けた八角形ボタン、横長の六角形の吹き出し、楕円形に切り抜いた写真
• 温度感: 寒色が中心。黄・ピンク・クリームの差し色で温かみを加える

Colors

• 背景はページを下るほど濃紺から水色へ段階的に明るくし、海の深さを表現する。
• 情報は白カードにまとめ、紺の太い縁と下右方向のオフセット影をつける。
• 英字のセクション見出しは黄色の文字に紺の太い縁取りをつける。
• 主CTAは黄色地に紺の文字。サブボタンは白地に紺の枠。
• カード上部の見出し帯や吹き出しには、ピンク・クリーム・ミントの淡いグラデを使う。
• フッターだけを白地にして、ロゴとSNSアイコンを置く。
• period-tag は文字 #ECF9FD × 背景 #E8473C のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC261A、4.51:1）を使う。

Typography

• 本文は太めの丸ゴシックにし、全体を太字ぎみにしてキッズ向けの読みやすさを出す。
• セクション見出しは英字のみのレトロ書体にし、和文の見出しは添えない。
• 青地のリード文は中央揃えにし、行間を2以上取る。
• カード内の本文は左揃えで、紺の文字を使う。
• 注釈は※で始め、白か紺の小さい文字で段落ごとまとめて置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内も縦積みにし、グッズはカルーセルで見せる。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面幅いっぱい近くまで広げ、左右の余白は約12pxにする。
• セクションの間は波形の境界とキャラクターのイラストでつなぐ。
• 英字見出しの下に、中央揃えの短いリード文を置く。
• グッズとノベルティはカード1枚ずつのカルーセルにし、左右に丸い矢印、下にドットのページ送りをつける。
• アクセスは路線図を線と枠の図で描く。

Elevation & Depth

• カードには紺色のぼかさない影をつけ、右下に4〜6pxずらす。
• ボタンは右下に濃い色のドット状の影をつけ、ピクセルらしい段差を出す。
• ぼかしたドロップシャドウは使わない。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は横長の楕円か丸に切り抜く。小さな丸い写真を重ねて添えてもよい。
• セクション境界: ゆるやかな波形のシルエットで、青の濃さを切り替える。
• ボタンは角が段々に欠けたドット絵風の八角形にする。
• 吹き出しは左右が尖った横長の六角形にし、白い線の枠を二重にずらして重ねる。
• カードは角丸20pxにし、紺の線を3pxで引く。
• 期間ラベルは小さな角丸タグで、前半は赤、後半は青にする。

Components

• ドット枠チケットボタン（button-primary）: 黄色地に紺の枠をつけたドット絵風の八角形ボタン。レトロ英字のラベルを入れる。
• もっとみるボタン（button-secondary）: 白地に紺のドット枠をつけ、右端に三角の矢印を置く。
• 英字ロゴ見出し（section-title）: 黄色い英字に紺の太い縁取りと影をつけ、中央に置く。
• 紺縁の白カード（card-content）: 上部にパステルのグラデ帯を敷いて英字タイトルを置く。紺の縁とずらし影をつける。
• 六角吹き出し（speech-bubble）: クリームからミントへのグラデ地にし、白い二重線の枠で囲む。キャラクターのセリフを中央揃えで入れる。
• CONTENTラベル（content-label）: ドット英字の小さな番号ラベル。その下に大きな見出しを置く。
• 期間タグ（period-tag）: 赤か青の小さなタグに、日付を太い数字で添える。
• 商品カルーセル（carousel）: 白カードを1枚ずつ見せる。左右に水色の丸い矢印、下にドットのインジケーターを置く。
• 条件案内ボックス（notice-box）: カード内に置くピンクからクリームへのグラデ帯。短い注意事項を入れる。

Do's and Don'ts

Do - 背景はセクションが進むごとに一段ずつ明るい青へ変える。 - セクションの間にキャラクターを1〜3体置き、波形とつなげる。 - ボタンや枠はドット絵風に角を欠いた形にそろえる。 - カードは白地・紺の縁・ずらし影の組み合わせで統一する。 - 英字の見出しは黄色に紺の縁取りで、毎回同じ型にする。

Don't - 暖色の背景や黒地を広く使わない。 - 細い明朝体や細いウェイトの本文を使わない。 - ぼかしの強い影やガラス風の効果を足さない。 - ピル型のボタンにしない（ドットの角を守る）。 - 写真を四角いまま大きく置かない。

Page Structure

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

1. ファーストビュー（イベントの世界観と開催期間を伝える）: 海中のキャラクターイラストを全面に敷き、中央にロゴを置く。その下に前半・後半の期間タグを並べる。
2. チケットCTA（チケット購入へ誘導する）: 濃紺地の中央に、黄色いドット枠ボタンを置く。
3. ストーリー（イベントの設定を物語として伝える）: 英字見出しの下に白文字の中央揃えリードを置き、途中に六角形の吹き出しでセリフを挟む。
4. 展示内容（目玉となる展示を3つ紹介する）: 大きな白カードに、CONTENT番号・見出し・本文・楕円の写真を縦に並べる。最後にもっとみるボタンを置く。
5. 体験コンテンツ（会場でアイテムを受け取れることを案内する）: グラデ帯のタイトルをつけたカードに、説明・バナー画像・注釈・サブボタンを入れる。
6. キャンペーン（SNS投稿で特典がもらえることを伝える）: カードに中央揃えの条件文と特典画像を置き、最後にグラデ帯の注意書きを入れる。
7. グッズ（コラボ商品を紹介する）: 水色地に商品カードのカルーセルを置き、価格は右寄せの太字にする。下に注釈と枠つきのお知らせを置く。
8. ノベルティ（購入特典を店舗別に見せる）: 店舗ごとのカードをカルーセルで並べる。特典画像3枚と条件を入れる。
9. アクセス（交通手段を案内する）: ドット枠の小見出しで電車と車を分ける。所要時間を表で示し、路線図とマップを図で描く。
10. フッター（運営情報とSNSを載せる）: 白地にロゴとSNSアイコン3つを置き、小さな注記と法定表示を並べる。

Imagery

• 太い線と丸いフォルムで、ゆるくかわいい海の生き物キャラクターをフラットに描く。
• 背景には泡・クラゲ・光の筋・海藻を、青のトーンでまとめて描く。
• 施設の写真は青い照明の幻想的なものを選び、楕円に切り抜く。
• 商品はまっすぐ正面から撮り、白背景に整列させて並べる。
• 路線図は単色の線と白い箱で、ゲームのマップ風に描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約900pxのコンテナを置き、背景の青グラデと波形は画面全幅に広げる。
• PC の展示カードは写真とテキストの2カラムにし、左右を交互に入れ替える。
• PC のグッズ・ノベルティは3枚を並べたカルーセルにする。
• PC の吹き出しやボタンは横に広げ、文字サイズは少し小さめにして密度を上げる。
• ファーストビューのイラストは 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 行書くと起動時に読み込まれる。