DESIGN.md — 多色ポップ図形の水族館企画展 LP（Pop Geometric Aquarium Exhibition LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、かわいい、クール・先進的
• キーワード: 多色幾何図形・アーチ型背景・紺色の文字・生成りの地・フラットイラスト・斜めのリボン見出し
• 地の質感: フラットな単色面に、うっすら水彩風のグラデーションと網点を重ねる
• 形: アーチ、雲形、星形の吹き出し、円形写真、波形の下端
• 温度感: 明るく軽快。色数は多いが、白と生成りの地で整理されている

Colors

• 地は白と生成りを交互に使い、セクションごとにアーチ型の生成り面を敷く
• 文字は紺を基本にし、強調語だけマゼンタにする
• 多色はシアン・マゼンタ・黄緑・橙・紫・赤を幾何図形の装飾に使う
• 4つのカテゴリにそれぞれ固有色（マゼンタ・青・橙・ターコイズ）を割り当て、見出しアイコンと吹き出しを同じ色で塗る
• 区切り帯の文字列は1文字ずつ色を変えて虹色に並べる
• CTAはターコイズから青へのグラデーションで、ピル型にする
• button-primary は文字 #FFFFFF × 背景 #0A9EAD のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#08818E、4.62:1）を使う。

Typography

• 見出しは字間を広めにとり、中央揃えにする
• カテゴリ見出しは縦書きにし、上に小さなルビを付ける
• 強調したい語だけマゼンタにし、残りは紺で書く
• 難読語には小さなルビを付ける
• 英字見出しは太めのジオメトリック書体を大文字で使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に SP 幅のカラムを置く
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは上が半円のアーチ型の面で始める
• 図版は左右交互に置き、縦書き見出しを反対側に配置する
• 説明文の下に区切り線を引き、生きもの名と解説を中央に置く
• セクション間に色違いの文字列の帯を挟み、画面からはみ出させる
• 写真は全幅で置き、下端をアーチ状に丸める

Elevation & Depth

• 影はほぼ使わず、フラットな面の重なりで奥行きを出す
• 図形の一部にだけ立体的な側面の色を付けて疑似3Dにする
• 写真の上に半透明の色面を重ねる

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 円形・アーチ型・雲形・下端が波形の切り抜き
• セクション境界: 半円のアーチ、または下端を大きく丸めた面
• 商品カードは上部をアーチ、下端を3連の波形にする
• 見出しのリボンは斜めに傾け、端をギザギザに切る
• 小さな注記は点線の円で囲む
• スライダーの矢印は白地に紺の細い枠の円形ボタンにする

Components

• チケット購入ボタン（button-primary）: グラデーションのピル型。上に小さなコピー、下にメイン文言、右に外部リンクのアイコンを置く
• 詳細ボタン（button-outline）: 紺の細い枠のピル型で、外部リンクのアイコン付き
• 斜めリボン見出し（ribbon-label）: 濃紺の帯を傾け、白文字で短いコピーを入れる。端はギザギザ
• カテゴリ紹介ブロック（skill-block）: 色付きの吹き出しにフラットイラストを入れ、実物の円形写真と縦書き見出しを添える
• 商品カード（product-card）: アーチ型の写真の下に、波形の下端を持つ色面を付け、名前・説明・価格を白文字で載せる
• 多色文字の帯（rainbow-band）: ひらがなを1文字ずつ違う色にして、大きく横に流す区切り
• 情報の見出しバー（info-label）: 生成り地の上に白い帯を置き、太字の紺文字を中央に入れる
• 点線丸の注記（badge-dotted）: 白地の円を点線の枠で囲み、短い注記を入れる
• スライダー矢印（slider-arrow）: 白い円に紺の枠と矢印

Do's and Don'ts

Do - 地は白と生成りに抑え、色は図形とイラストに集中させる - カテゴリごとに固有色を決め、アイコン・吹き出し・名前を同じ色で揃える - セクションは毎回アーチ型の面から始める - フラットな幾何図形を画面端からはみ出させて散らす - 本文は紺で、行間を広めにとる

Don't - 黒の文字や黒の地を使わない - 四角い硬いカードを並べない - 重いドロップシャドウを付けない - 本文まで多色にしない - 写真を直線の矩形のまま並べ続けない

Page Structure

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

1. ファーストビュー（企画展のテーマを印象づける）: 白地に多色の幾何図形と生きものの切り抜き写真を散らし、中央に雲形と手書き風の大見出しを置く。下にキャッチを2行で中央揃え
2. 会場写真スライダー（空間の雰囲気を伝える）: 全幅の写真スライダーに、左右に円形の矢印を置く
3. カテゴリ紹介の導入（4つの分類を予告する）: ミントのアーチ面に、斜めリボン、2色の見出し、短い本文を置く
4. カテゴリ別の紹介（分類ごとに代表の生きものを紹介する）: 色付きの吹き出しのイラスト、円形写真、縦書き見出し、太字の説明、区切り線、名前と解説を4回繰り返す
5. 観察の提案（体験の楽しみ方を案内する）: 水色のアーチ見出しの後に、子どもの観察写真と吹き出しを置き、下をアーチ状に丸める
6. 解説コーナー（スタッフ解説とオリジナルの配布物を紹介する）: ラベンダーのアーチ見出し、写真に白文字の注記と矢印、ピーチ帯で花形カードを紹介する
7. カフェ・グッズ（限定商品を紹介して物販を促す）: アーチ写真と波形下端の色面カードをスライダーで見せ、周囲に図形を散らす
8. コンセプト（企画の思想を伝える）: 白地に左揃えの大見出し、マゼンタの小見出し、長めの本文を置き、円形のリンクボタンを添える
9. SNS口コミ（来場者の投稿で信頼性を出す）: 英字見出しとタブで投稿サムネイルを横スクロールさせる
10. インフォメーション（料金・時間・チケットを案内する）: 生成りのアーチ面に建物写真、白い見出しバー、料金表、グラデーションのCTAを置く
11. アクセス（行き方を示す）: 地図、交通と住所の本文、枠線のピル型ボタンを並べ、下端を丸める
12. フッター（運営情報とSNSへ誘導する）: ロゴ、黄緑の丸いSNSアイコン、関連施設のバナー、コピーライトを置く

Imagery

• 生きものはフラットな幾何学イラストにし、単色の吹き出しの中に置く
• 実物の写真は円形に切り抜いて、イラストに添える
• 装飾にはパズル片・L字・半円など太い幾何図形を使い、網点とグラデーションを一部に入れる
• 会場写真は明るい白い空間と、子どもが観察する姿を中心にする
• 商品写真は白背景や芝生の上で、明るく撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも中央にSP幅のカラムを固定し、背景はターコイズで塗る
• PCでは左側にロゴと日付のバッジ、右側にページ内ナビを固定表示する
• PCの背景上部にも幾何図形を散らして、続きの雰囲気を出す
• コンテンツの構成はSPと同じまま変えない

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