DESIGN.md — 水色×ロイヤルブルーの爽快スイミングスクールLP（Aqua Blue Digital Swim School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、スポーティ、信頼・誠実、情報量多め・訴求型
• キーワード: 水色・青グラデーション・黄色マーカー・アーチカード・波形区切り・デジタル感
• 地の質感: フラットな単色面に、方眼紙・ドット・斜線ストライプの薄いパターンを重ねる。写真はプールの明るい水面。
• 形: 角丸のピル型ボタン、上部が半円のアーチカード、右下に影ずらしのある四角い見出しボックス、波形と円弧の区切り。
• 温度感: 涼しく爽快。黄色と赤のアクセントで元気さも出す。

Colors

• 地は白と薄い水色の帯を交互に使い、ポイント紹介だけ濃い水色にする。
• セクション見出しは青からロイヤルブルーへのグラデーションのボックスに白文字を載せる。
• 強調したい語句には黄色マーカーを敷く。水色の地では見出しを黄色文字にする。
• 価格の0円とヘッダー帯にだけ赤を使い、他の場所では使わない。
• CTAはティール色の塗りと、白地にティール枠の2段で並べる。
• レベル別のアイコンは緑・ピンク・紫に色分けする。
• button-primary は文字 #FFFFFF × 背景 #02AEC2 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#028392、4.5:1）を使う。
• button-secondary は文字 #02AEC2 × 背景 #FEFEFE のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#028392、4.58:1）を使う。

Typography

• 見出しは字間を0.08em前後広げ、中央揃えにする。
• 英字ラベルはイタリック気味の細めサンセリフで水色にする。
• 番号(01〜03)は大きな細い欧文書体にして、日本語見出しの上に置く。
• 本文は左揃えで行間を1.8にする。重要な語は太字の水色か黄色マーカーで示す。
• 斜体の極太見出しの下には黄色の帯を斜めに敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せで、カードは 3 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出し、写真、本文の順に縦へ積む。
• 手順の間には下向きの二重V矢印を挟む。
• ポイント紹介は左右にストライプの縦帯を置き、アーチカードを縦に並べる。
• CTAはキャンペーンカードの直下に2段で置き、ページ内で2回繰り返す。
• 写真は左右の余白を残して幅いっぱいに近く置く。

Elevation & Depth

• キャンペーンカードは白地に薄い影(0 4px 12px rgba(0,0,0,.1))を付ける。
• 見出しボックスは右下に黒い細線の枠をずらして重ね、下中央に吹き出しの三角を付ける。
• 主CTAは下側に濃いティールの厚みを付け、立体的に見せる。
• 写真フレームは右上の角を切った細い水色線で囲む。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 基本は角なしの矩形。手順の写真は角丸24px。声のアイコンは円形に切り抜く。
• セクション境界: 円弧、波線、斜めのストライプ帯を使い、直線の区切りはあまり使わない。
• ポイント紹介のカードは上部を半円にしたアーチ型にする。
• ボタンは完全なピル型にし、右端に丸い再生アイコンを付ける。
• アイコンは水色の細い円で囲んだフラットなピクトにする。

Components

• 主CTAボタン（button-primary）: ティール色のピル型ボタン。白文字で、右端に白い丸の再生アイコンを付け、下に厚みを出す。
• サブCTAボタン（button-secondary）: 白地にティールの2px枠とティール文字のピル型ボタン。右にアイコンを付ける。
• 青グラデ見出しボックス（heading-box）: 青のグラデーションに白文字。右下に黒線の枠をずらし、下に吹き出しの三角を付ける。
• キャンペーン価格カード（campaign-card）: 白い角丸カード。期間と、0円の特典2つを赤の巨大数字で左右に並べ、通常価格は取り消し線で添える。
• アーチ型ポイントカード（arch-point-card）: 上部が半円の白カード。英字ラベル、大きな番号、マーカー付きの見出し、写真、本文の順に並べる。
• 黄色マーカー強調（marker-text）: 語句の下半分に黄色の帯を敷く。
• レベル別の帯見出し（level-header）: 青のグラデーションの帯。左に白い円形バッジ(色分けした泳ぐアイコンとレベル名)を置き、右に白文字の見出しを置く。
• 斜線囲みの小見出し（slash-label）: 短い文の左右を、斜めのスラッシュ線や放射線で挟む。
• エリア別アコーディオン（accordion）: 淡いアクアの行をティールの線で区切る。右に水色のV矢印を置く。
• お客様の声スライダー（voice-slider）: 斜線ストライプの水色地。青太字の見出し、円形のイラスト、本文、もっと見るボタン、属性の順に並べ、左右に丸い矢印を置く。

Do's and Don'ts

Do - 水色・青・白を基調にし、黄と赤は強調だけに絞る。 - セクションの境界を円弧や波線にして、水の流れを感じさせる。 - 見出しボックスは右下に影線をずらし、吹き出しの三角を付ける形で統一する。 - 手順は写真、短文、下向き矢印の繰り返しで見せる。 - 価格特典は赤の巨大数字にし、取り消し線の通常価格を添える。

Don't - 暗い背景や黒基調のセクションを多用しない。 - 赤をCTAや見出しに使わない。 - 角の立ったボタンを使わない。 - 写真をモノクロや低彩度にしない。 - 本文を中央揃えで長く続けない。

Page Structure

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

1. ファーストビュー（サービスの価値とキャンペーンを一目で伝える）: 泳ぐ写真をタブレットの枠で2枚重ねる。明朝の縦組み大キャッチと、白いキャンペーンカードを置く。
2. CTA（体験申し込みとWEB入会へ誘導する）: ティールの塗りボタンと枠線ボタンを縦に2段で並べる。
3. スクールの概要（対象者を示す）: 放射線付きの見出しの下に、円形アイコンと短いラベルを3つ横に並べ、その下に本文を置く。
4. 動画紹介（サービスを映像で見せる）: 薄い水色の帯に青グラデの見出しボックスを置き、埋め込み動画を入れる。
5. サービスの説明（独自システムを解説する）: 水色グラデの地に白と黄の中央揃え文を置き、タブレットを持つ手の写真と英字の円バッジを添える。
6. 仕組みの手順（撮影からフィードバックまでの流れを見せる）: 英字見出しの下に円弧の区切りを入れる。角を切ったフレームの写真とマーカー文を、V矢印でつないで4段にする。
7. 3つのポイント（メリットを番号付きで訴求する）: 濃い水色の地の左右にストライプ帯を置き、アーチ型の白カードを3枚縦に並べる。
8. その他のコース（別のコースを紹介する）: 水色の地に黄色の見出しを置き、写真と黄色のキャプションを2つ並べる。
9. 運動効果（水泳の健康効果を伝える）: 方眼紙の地にする。チェックアイコン付きのリストを並べ、水の特性を表す図解を添える。
10. レベル別レッスン（初級から上級までの安心感を出す）: 斜体の極太見出しに黄色い帯を敷く。青い帯見出しと白カードを3段で並べる。
11. お客様の声（会員の満足を示す）: 斜線ストライプの地にスライダーを置き、イラストのアバターと、もっと見るボタンを入れる。
12. キャンペーンとCTAの再掲（申し込みを後押しする）: キャンペーンカードと2段のボタンをもう一度置く。
13. 付帯設備・体験の流れ（来館後の不安を解消する）: 斜めラベル付きの写真を2枚並べる。ドットの地に、角丸写真と矢印の3ステップを置き、波線で区切る。
14. 導入施設・注意事項（近くの施設を探してもらう）: 紹介バナーを置き、エリア別のアコーディオンと小さい注釈を並べ、フッターで締める。

Imagery

• 明るい屋内プールで、水色がはっきり出る写真を使う。笑顔の大人の受講者を中心にする。
• 泳ぐ姿は水しぶきと水中の青を強調し、白い線のワイヤーフレーム(デジタル表現)を重ねる。
• タブレットやカメラの機材写真で、デジタル感を補う。
• お客様の声は太い線画のフラットなイラストで、円形の白背景に置く。
• アイコンは水色の単色ピクト(泳ぐ人、本、両手を上げる人)にする。
• 装飾にスラッシュ線、放射線、ドット、方眼、斜線ストライプを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではコンテンツ幅を約960pxに収め、中央に寄せる。
• ポイントカード、レベル別、声、体験の流れはPCで3カラムの横並びにする。
• FVはPCでキャッチを横組みにし、写真を左右に分けて置く。
• 手順の写真はPCで2×2のグリッドにし、横向きの矢印でつなぐ。
• 施設のアコーディオンはPCでタブ切り替えにし、施設カードに予約ボタンを付ける。
• CTAボタンはPCでは幅を約360pxに縮め、中央に置く。

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