DESIGN.md — 空色グラデと虹色の学校周年記念 LP（Iridescent Sky Gradient Anniversary School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、やさしい・柔らかい
• キーワード: 空色グラデーション・虹色ライン・明朝見出し・ガラス質3D・大きな実績数字・周年記念
• 地の質感: 霞がかったぼかしグラデーションと光沢のあるガラス・メタル質の3Dオブジェクト
• 形: 角丸の白カードとピル型の白ボタン、写真は角丸正方形
• 温度感: やや寒色寄りだが、ピンク・ラベンダーの光で柔らかく温かみを添える

Colors

• 地は水色→白→ラベンダーの淡いグラデーションでセクションを滑らかにつなぐ
• 文字は黒ではなく濃紺で統一し、柔らかい地とのコントラストを確保
• 物語の転換点（それぞれのゴール等）だけ濃紺〜青の深いグラデ帯にする
• 英字ラベルの下には青→紫→ピンク→黄緑の虹色グラデ帯を敷く
• ボタンは白地に濃紺文字のピル型で、地に溶け込ませつつ控えめに目立たせる
• 虹色・蛍光色は装飾ライン・3D・キービジュアルのみに使い、本文には使わない
• label-gradient は文字 #FCFDFE × 背景 #C86ED8 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B63ECB、4.54:1）を使う。

Typography

• 見出しは明朝で上品に、本文はゴシックで読みやすく
• 本文は行間2.0前後とゆったり、短い行で改行する
• 英字ラベルは大文字・広めの字間で日本語見出しの上に置く
• 大数字は欧文サンセリフ、単位は日本語で小さく添える
• 強調語は「」で括り、色は変えない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はテキストと画像の 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは上下に大きな余白を取り、背景グラデで区切る
• 英字ラベル→明朝見出し→本文の順で縦に積む
• 人物写真は横スクロール風に 6 枚並べる（SP は 2〜3 列）
• 実績数字は白カード内に大きく左寄せ
• 最終セクションは濃色ブロックとキービジュアルを左右分割

Elevation & Depth

• 白カードはごく薄い青みの影（0 4px 20px rgba(30,60,140,.08)）
• 3Dアイコンには光沢と柔らかい落ち影
• ボタンは影なし、またはごく薄い影

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は角丸正方形、プロジェクト画像はカード上部に角丸で全幅
• セクション境界: 直線を使わずグラデーションで滑らかにつなぐ
• カードは角丸16px前後の白
• ボタンは全てピル型
• 写真の円形切り抜きは使わない

Components

• 白ピルボタン（button-pill）: 白地に濃紺文字の小さめピルボタン。詳細リンク用
• 虹色英字ラベル（label-gradient）: 大文字の英字見出しの下半分に青→紫→黄緑のグラデ帯を敷く
• 実績数字カード（stat-card）: 白カードに大きな数字と小さな単位・注釈、角にメダルの3D
• プロジェクトカード（project-card）: 上部に鮮やかなビジュアル、下に黒帯タイトルと説明文
• 黒帯タイトル（title-band）: 濃紺地に白文字のマーカー帯タイトル
• ハッシュタグ流れ帯（hashtag-ticker）: 細い帯に「#〜な先輩」を横一列に流す
• 人物タイル（person-tile）: 角丸正方形の人物写真を横に並べる
• 動画プレイヤー（video-play）: 全幅の写真に白丸の再生ボタン

Do's and Don'ts

Do - 地は淡い空色グラデを基本にする - 見出しは濃紺の明朝で落ち着かせる - 英字ラベル＋虹色帯を各セクション冒頭に統一して置く - ガラス質の3Dアイコンで先進性を出す - 実績は大きな数字で一目で見せる

Don't - 真っ黒の文字や純黒背景を多用しない - 赤や原色の大きなボタンを置かない - セクションを直線の色帯で硬く区切らない - 虹色を本文や面全体に使わない - フラットな線画アイコンに置き換えない

Page Structure

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

1. ファーストビュー（周年の節目と理念を印象づける）: 空色グラデ地に明朝コピー3〜4行と虹色の周年ロゴ3D
2. 動画（卒業生の姿で感情に訴える）: 全幅の暗めの写真に白丸再生ボタン
3. あいさつ（周年と学校の姿勢を伝える）: 中央揃えの明朝見出しと短い行の本文
4. 問いかけ（個性と卒業の両立を提起）: 左に明朝見出しと本文、右に式典写真2枚
5. 卒業生紹介（多様なゴールを見せる）: 濃紺グラデ帯に英字ラベル、ハッシュタグ帯、人物タイル横並び
6. 実績（数字で信頼を示す）: 盾の3Dと説明文、白カードに大数字と注釈
7. 仕組み（学習スタイルの手軽さを伝える）: ピンの3Dと本文、白ピルボタン
8. 記念プロジェクト（周年企画へ誘導）: ラベンダーピンク地に画像付き白カードを縦に2枚
9. 締めメッセージ・CTA（学校紹介ページへ誘導）: 左に青グラデ地の白文字メッセージとボタン、右にロゴ3D
10. フッター（ロゴと著作権表示）: 白地にロゴ、右にページトップの丸ボタン

Imagery

• ガラスやクリスタル質感の青い3Dアイコン（盾・ピン・メダル）
• 虹色に光る流線やリボンの抽象グラフィック
• 学生の自然な笑顔のポートレート、柔らかい照明
• 式典・卒業式の暖色ライトの記録写真
• パステルのぷっくりした3Dステッカー群で若さを演出
• 背景に霞むボケ光・グラデーション
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP はテキストと画像の2カラムを縦積みにする
• 人物タイルは横スクロールか2〜3列グリッド
• 大数字は SP で 56〜64px 程度に縮小
• 最終の左右分割は上下に並べ替える
• 見出しは SP 22〜24px、本文13px を目安

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