DESIGN.md — 淡い青緑と筆記体の資格スクール LP（Airy Teal Career Academy LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 淡い水色の地・筆記体の英字見出し・円形写真・ピル型の赤いボタン・フラットイラスト・流れる曲線
• 地の質感: フラットで余白が多い。背景に淡い水色・黄色の大きな曲線帯を透かして敷く
• 形: 白いカードは角丸小さめ、ボタンはピル型、写真は円形か角丸の矩形
• 温度感: ややクールな青緑が主体。黄色と赤をわずかに差して温かみを添える

Colors

• 地は白と淡い水色を交互に使い、水色地の上に白カードを重ねる
• 見出しは深い青緑、本文は濃いグレーで統一
• 主CTAだけ赤にし、ページ内で目立つ色はこれに限る
• サブボタンや「すべて見る」は明るい青緑で主CTAと分ける
• 黄色はキャッチの強調語とイラストに少しだけ使う
• 締めのCTA帯だけ濃い青のベタ面にし、文字は白にする
• button-primary は文字 #FFF1ED × 背景 #C55252 のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C14545、4.53:1）を使う。
• button-secondary は文字 #FFF1ED × 背景 #53ABC5 のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2F778D、4.6:1）を使う。
• hero-copy-band は文字 #53ABC5 × 背景 #FFFFFF のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2F778D、4.62:1）を使う。

Typography

• 英字の筆記体は見出しの左上に大きく置き、写真や面に少しかかるようにする
• 和文の見出しは太めのゴシックで、色は青緑
• 小さなカテゴリ名を見出しの上に明るい青緑で添える
• 本文は小さめにして行間を広く取り、余白を見せる
• FVのキャッチは白い帯の上に1行ずつ載せ、強調語を黄色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 水色地のセクションに白カードを左右12px程度あけて重ねる
• 写真と筆記体の見出しをずらして重ね、動きを出す
• 各セクションの最後に中央寄せのピル型ボタンを置く
• お知らせは日付と件名を1行に並べ、細い線で区切る
• 画面下に2つのCTAを並べた固定バーを置く

Elevation & Depth

• 影はほとんど使わず、面の色の差で階層を作る
• 白カードは影なしで水色地との差だけで浮かせる
• 固定CTAバーは淡いグレーの面で本文と分ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 活用例は円形に切り抜き、少しずらした細い青緑の円線を重ねる。インタビューは角丸の矩形、紹介写真は角なしの矩形
• セクション境界: 直線で切り替える。背景に大きな曲線帯を透かして流れをつなぐ
• ボタンはピル型で、右端に白い円線の中に矢印アイコンを入れる
• カードは角丸を小さく、一部のカードは片側を画面端まで伸ばす
• 装飾の曲線帯は淡い色で、内容の邪魔にならない透け具合にする

Components

• 主CTAボタン（button-primary）: 赤いピル型。右端に円で囲んだ矢印を付け、中央に置く
• サブボタン（button-secondary）: 明るい青緑のピル型。矢印付きで、濃い帯の中では縦に並べる
• 筆記体の英字見出し（script-heading）: 明るい青緑の手書き風英字を大きく置き、和文見出しと組み合わせる
• FVのキャッチ帯（hero-copy-band）: 写真の上に白い帯を行ごとに敷いてキャッチを載せ、その下に濃い青と青緑の帯でサブコピーを入れる
• 円形写真の活用例（circle-photo-card）: 円形写真の下に太字のタイトルと短い説明を置く。白カードの中で縦に並べる
• 解説カード（illustration-card）: 小さなカテゴリ名、大きな見出し、本文を並べ、下にフラットイラストを置く白カード
• インタビューカード（interview-card）: 角丸の人物写真、太字の一言、青緑の所属、グレーの注記を並べる。横にスクロールする
• お知らせ一覧（news-list）: 青緑の日付と太字の件名を1行ずつ並べ、細い線で区切る。水色の面の上に置く
• 固定CTAバー（sticky-cta-bar）: 画面下に、青緑の申込ボタンと赤い説明会ボタンを横に並べる

Do's and Don'ts

Do - 余白を広く取り、本文は小さめで行間を広くする - 見出しの近くに筆記体の英字を大きく添える - 人物写真は自然光で明るく、笑顔のビジネスパーソンを使う - 主CTAは赤のピル型に統一し、各セクションの最後に置く - 背景には淡い曲線帯を流して、セクションの間をつなぐ

Don't - 濃い色の面を多用しない（濃い青は締めの帯だけ） - 赤をボタン以外に使わない - ボタンの角を四角にしない - 影やグラデーションを強くかけない - 装飾的な明朝体や太すぎるディスプレイ書体を使わない

Page Structure

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

1. ファーストビュー（価値を一言で伝え、詳細へ誘導する）: 複数人の集合写真の上に、白い帯に載せたキャッチと青系の帯のサブコピーを重ね、赤いボタンを置く
2. 運営団体の紹介（スクールの信頼性を示す）: 筆記体の見出しを縦長の人物写真に重ね、下に青緑の見出し、本文、赤いボタンを置く
3. 資格の概要（コースの内容と受講生の幅広さを伝える）: 水色地に筆記体の見出しとグループ写真を置き、その後に見出しと本文を続ける
4. 活用イメージ（資格を取った後の活かし方を3つ見せる）: 白カードの中に円形写真、タイトル、説明を縦に3つ並べ、最後に赤いボタンを置く
5. 概念の解説（職種や必要なスキル、今求められる理由を説明する）: カテゴリ名、見出し、本文、フラットイラストの白カードを3枚、互い違いに重ねる
6. 受講者インタビュー（実際の声で受講後の姿を想像させる）: 筆記体の見出しと中央寄せの和文見出し、横スクロールの写真カード、赤いボタンで作る
7. お知らせ（募集など最新の情報を伝える）: 水色の面に日付と件名の一覧を並べ、青緑のボタンで一覧ページへ誘導する
8. 締めのCTA（受講を考えてもらい、各ページへ誘導する）: 横顔の写真に白いキャッチを重ね、濃い青の帯に本文と青緑のボタン3つを置く
9. フッター（サイト内のリンクと運営情報を載せる）: 白地にロゴと2列のリンクを置き、水色の帯に著作権と規約リンクを入れる。下にCTAを固定する

Imagery

• 人物写真は明るいオフィスや窓際で撮り、自然光と白・紺・ベージュなど落ち着いた服装にする
• 笑顔か真剣な表情の30〜40代のビジネスパーソンを中心にする
• イラストは紺・青緑・黄を使ったフラットな人物で、電球・吹き出し・階段などの比喩を描く
• 背景の装飾は淡い青緑と黄の太い曲線帯を、大きくゆるやかに流す
• 締めの帯の写真は青のフィルターをかけた横顔にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは上部にロゴとナビ、右上に赤い説明会ボタンを置く
• PCの紹介セクションは写真が左、文章が右の2カラムにする
• PCの活用イメージは円形写真のカードを横に3つ並べる
• PCの解説カードはイラストと文章を左右交互に並べる
• PCのインタビューは3枚を並べ、左右に矢印ボタンを付けたカルーセルにする
• PCのお知らせは、左に見出しとボタン、右に一覧を置く

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