---
version: alpha
name: Pixel Retro Underwater Character Event LP
description: 水族館とキャラクターのコラボイベント告知LP。上から下へ深い青から明るい水色へと海のグラデーションが変わる。黄色いレトロ書体の英字見出し、ドット絵風の角が欠けたボタン、白い角丸カードに紺の太い縁取りを組み合わせ、かわいくポップなゲームらしさを出している。
colors:
  primary: '#265FAC'
  secondary: '#2F8BCC'
  background-alt: '#3BBBEC'
  background: '#FEFEFE'
  dark-section: '#032667'
  text: '#05245C'
  on-dark: '#ECF9FD'
  cta: '#FEE201'
  on-cta: '#15377D'
  accent-1: '#FEE587'
  tint-1: '#E4ECC4'
  tint-2: '#FAD4AE'
  accent-2: '#E8473C'
  accent-2-accessible: '#DC261A'
typography:
  display:
    fontFamily: DotGothic16
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.02em
  accent:
    fontFamily: DotGothic16
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.2em
  body-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 14px
    fontWeight: 700
    lineHeight: 2.1
    letterSpacing: 0.05em
  body-md:
    fontFamily: Zen Maru Gothic
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.6
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 15px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.1em
rounded:
  sm: 4px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.display}'
    height: 44px
  button-secondary:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 48px
  section-title:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 50px
  card-content:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
  speech-bubble:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 160px
  content-label:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 14px
  period-tag:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 22px
  carousel:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 560px
  notice-box:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 70px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#265FAC` | 上部セクションの深い青地 | 14% | 画素の実測 |
| `secondary` | `#2F8BCC` | 中盤の中間ブルー地 | 20% | 画素の実測 |
| `background-alt` | `#3BBBEC` | 下部の明るい水色地 | 10% | 画素の実測 |
| `background` | `#FEFEFE` | カード内とフッターの白地 | 32% | 画素の実測 |
| `dark-section` | `#032667` | カード縁・ボタン枠の濃紺 | 5% | 画素の実測 |
| `text` | `#05245C` | カード内の見出しと本文の紺文字 | 3% | 画素の実測 |
| `on-dark` | `#ECF9FD` | 青地の上の白文字 | 2% | 画素の実測 |
| `cta` | `#FEE201` | チケットボタンの黄色 | 1% | 画素の実測 |
| `on-cta` | `#15377D` | 黄ボタン上の紺文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#FEE587` | 英字見出しの黄色 | 1% | 画素の主要色に補正 |
| `tint-1` | `#E4ECC4` | 吹き出しのクリーム〜ミントのグラデ | 2% | 画素の実測 |
| `tint-2` | `#FAD4AE` | カード見出し帯のピンク寄りグラデ | 1% | 画素の実測 |
| `accent-2` | `#E8473C` | 前半ラベルの赤 | 0% | 推定 |
| `accent-2-accessible` | `#DC261A` | AA を満たす補正値（計算） |  | 計算 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 英字のセクション見出し（黄色文字＋紺の縁取り） | 装飾・ディスプレイ | DotGothic16 | 700 | 34px | 1.2 | 0.05em |
| `headline-lg` | カード内コンテンツのタイトル | 丸ゴシック | Zen Maru Gothic | 900 | 24px | 1.4 | 0.03em |
| `headline-md` | カード帯の和英タイトル・小見出し | 欧文サンセリフ | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.02em |
| `accent` | CONTENT 01 のような小さいドット英字ラベル | 装飾・ディスプレイ | DotGothic16 | 400 | 10px | 1.2 | 0.2em |
| `body-lg` | 青地の上の中央揃えリード文 | 丸ゴシック | Zen Maru Gothic | 700 | 14px | 2.1 | 0.05em |
| `body-md` | カード内の本文 | 丸ゴシック | Zen Maru Gothic | 700 | 13px | 1.8 | 0.03em |
| `note` | 注釈・コピーライト | ゴシック | Zen Kaku Gothic New | 700 | 10px | 1.6 | 0.0em |
| `label-button` | ドット枠ボタンのラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.0 | 0.1em |

- 本文は太めの丸ゴシックにし、全体を太字ぎみにしてキッズ向けの読みやすさを出す。
- セクション見出しは英字のみのレトロ書体にし、和文の見出しは添えない。
- 青地のリード文は中央揃えにし、行間を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

```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-1eb11b7e`（元 LP の URL から採番）
- **元 LP**: https://www.enosui.com/tamagotchi/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。