DESIGN.md — 水彩にじみと紺文字の夏コラボイベント LP（Watercolor Splash Summer Collaboration Event LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 清潔・爽やか、ポップ・元気、やさしい・柔らかい
• キーワード: 水彩にじみ・筆記体英字見出し・紺の細文字・白カード・夏の水面・多色パステル
• 地の質感: 水彩のにじみやブラシの筆跡、水面の光の反射を重ねる。UI の部品はフラットな白カードにする。
• 形: 角丸の白カード、細い線で囲んだピル型ボタン、細線の枠ラベル。
• 温度感: 涼しく明るい。寒色が中心で、パステルの暖色をアクセントに使う。

Colors

• 文字は原則として紺 1 色にし、黒は使わない。
• 白地に多色の水彩にじみを敷き、その上に白カードを置く。
• 日程だけはこげ茶の帯に白文字で載せ、強いコントラストを付ける。
• 後半は水色→青の面に切り替える。白文字と白ボタンで構成する。
• 水色面の小見出しは白帯に水色文字で抜く。
• subhead-white-bar は文字 #1FBFFB × 背景 #FFFFFF のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#037EAC、4.58:1）を使う。

Typography

• 英字のセクション見出しは小文字の筆記体にし、青のグラデーションで塗る。
• 日本語は細めから中太のゴシックにし、字間を少し広げる。
• 日付は大きな太い欧文数字にする。曜日は小さい縦組みの英字で添える。
• コンセプト文は中央揃えにし、1 行ずつ大きく間を空ける。
• 注釈は ※ 付きの小さい文字で、中央揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メンバーは横スクロールのカルーセル、SNS ボタンは 2 列グリッド。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に約 7% の余白を取って中央に置く。
• 英字見出しはカード上端にかかるように重ねる。
• 情報項目は細線で囲んだ全幅ラベル＋中央揃えの値で並べる。
• 区切りには点線を使う。
• CTA はほぼ全幅の線囲みピル型にする。

Elevation & Depth

• カードは影を付けず、白い面だけで背景と分ける。
• 会員証などの画像には薄い影を付ける。
• 水彩背景が奥行きの役割を担う。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物写真は縦長の角丸長方形に切り抜く。写真の下に水彩ブラシの名前プレートを重ねる。
• セクション境界: 直線で切り替える。水彩のにじみがセクション境界をまたいでもよい。
• ボタンは 1px の紺線で囲んだピル型にし、文字の右に細い矢印線を添える。
• ラベル枠は角のない細線の長方形にする。
• SNS ボタンは小さな角丸の長方形にする。

Components

• 線囲みピルボタン（button-outline-pill）: 白地に紺の細枠を付けたピル型ボタン。右側に長い矢印線を置く。
• 筆記体英字見出し（heading-script）: 小文字の筆記体で、青のグラデーションで塗る。カード上端に重ねて置く。
• 白コンテンツカード（card-content）: 水彩背景の上に置く角丸の白カード。見出し・写真・本文・View More ボタンを入れる。
• 細線枠ラベル（label-frame）: 全幅の細線で囲んだ項目名ラベル。下に値を中央揃えで置く。
• 日程帯（band-date）: こげ茶の面に白い大きな日付を載せる。営業時間は 2 列で並べ、間を点線で区切る。
• 人物カルーセル（member-carousel）: 縦長の角丸写真に水彩ブラシの名前を重ねる。下にドットのページャーを付ける。
• 白帯小見出し（subhead-white-bar）: 水色面に置く白帯で、水色の文字で抜く。
• SNS リンクグリッド（sns-grid）: 青フッターに置く 2 列のバナーボタン。

Do's and Don'ts

Do - 白地にパステルの多色水彩を大胆に敷く。 - 英字の見出しは筆記体で統一する。 - 文字色は紺を基調にする。 - 情報は中央揃えにし、細線のラベルで整理する。 - ボタンは細線のピル型にし、矢印線を添える。

Don't - 黒い太字のベタ塗り CTA は使わない。 - カードに強い影を付けない。 - 水彩のにじみをべた塗りの図形に置き換えない。 - 暖色の原色を文字色に使わない。 - 見出しを角ばった英字ゴシックだけで構成しない。

Page Structure

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

1. ファーストビュー（コラボ企画のタイトルと季節感を伝える。）: 水面の写真の上に、水彩の色面と筆記体のタイトルを重ねる。生き物の写真を散らす。
2. 集合写真（出演者を見せる。）: カラフルな色板の前に立つ横並びの集合写真を全幅で置く。
3. 開催日程（会期と営業時間を示す。）: こげ茶の帯に、ロゴタイプと大きな日付、2 列の時間表を置く。
4. コンセプト（企画の想いを伝える。）: 水彩ストライプの背景に、短い文を 1 行ずつ広い間隔で中央に並べる。
5. メンバー紹介（各出演者を見せる。）: 角丸写真と筆記体の名前を組み合わせた横スクロールのカルーセル。
6. コンテンツ紹介（体験内容を説明する。）: 水彩背景の上に白カードを置くスライダー。ドットのページャーを付ける。
7. グッズ・ドリンク（物販を告知する。）: 黄・ピンク・シアンのグラデーション背景に白カードを並べ、筆記体の見出しを重ねる。
8. 開催概要（日時と会場の詳細を示す。）: 白地に細線のラベルと中央揃えの値を並べ、最後に線囲みボタンを置く。
9. 会員制度案内（関連サービスへ誘導する。）: 水色の面に、斜線付きのリード文、白い大見出し、カード画像 2 枚、白帯の小見出しを置き、最後に白いピルボタンを付ける。
10. フッター（SNS への導線と法定表示を載せる。）: 青の面に、ロゴ、2 列の SNS バナー、白い注釈、コピーライトを置く。

Imagery

• 水彩絵の具のにじみやブラシの筆跡を、青・緑・ピンク・黄で半透明に重ねる。
• 水面のコースティクス（揺らぐ光の模様）がある明るい背景に、ペンギン・魚・クラゲの切り抜きを浮かべる。
• 人物は生成り色の衣装で統一し、原色の色板の前で撮る。
• 館内写真は暗い空間に色とりどりの光が映るものを選ぶ。
• 人名は水彩ブラシの帯の上に筆記体で載せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため推奨として記載する。PC では本文を最大幅 800px 前後で中央に置き、水彩背景は全幅に広げる。
• メンバーのカルーセルは、PC では 3〜4 枚を同時に表示する。
• コンテンツカードは 2〜3 列のグリッドにしてもよい。
• 日程帯の 2 列構成は維持し、文字サイズを 1.5 倍程度にする。
• SNS グリッドは 4 列に広げる。

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