DESIGN.md — パステル虹グラデの音楽講師求人 LP（Pastel Gradient Music Teacher Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型、かわいい
• キーワード: パステルグラデーション・番号付き円形見出し・淡いカード・多色アクセント・繰り返しCTA・幾何学の透かし
• 地の質感: フラットな淡色地に、半透明の三角・円の幾何学模様と柔らかいドロップシャドウを重ねる
• 形: 角丸カード、ピル型ボタン、有機的なブロブ型の番号バッジ、波形のセクション境界
• 温度感: やや涼しげで明るい。ピンクとラベンダーで温かみを加える

Colors

• 地はほぼ白の淡いグレーミント。区切りに淡いミントや淡いラベンダーの帯を敷く
• ファーストビュー下はピンク→紫→水色の縦グラデーション帯で世界観を出す
• 番号セクションごとに強調色をピンク・紫・緑・オレンジに切り替え、見出しとバッジを同じ色にそろえる
• CTAは常にピンク〜紫のグラデーションのピル型。ほかの要素にこのグラデーションは使わない
• 本文はグレー、見出しは濃いネイビーグレーにして、強調色は単語単位で使う
• 支援制度の一覧は淡いイエローの面に白カードを並べ、ほかと区別する
• button-primary は文字 #FFFFFF × 背景 #E66AB8 のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D82495、4.56:1）を使う。
• section-number-badge は文字 #FFFFFF × 背景 #E86FB5 のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DB238D、4.53:1）を使う。
• label-tag は文字 #9B7FC4 × 背景 #F4EFF6 のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#805CB4、4.51:1）を使う。
• voice-card は文字 #E86FB5 × 背景 #FDFEFE のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DB238D、4.55:1）を使う。

Typography

• 見出しは中央揃え。番号バッジ→英字ラベル→日本語見出しの順に重ねる
• 英字ラベルは細字で字間を広くとり、淡い色で添える
• 大きな数字（給与・人数・年数）は本文の2〜3倍に拡大し、単位は小さくする
• 本文は左揃えで行間1.8。強調したい語だけ色付きの太字にする
• 見出しは2行に分け、2行目に要点を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列のグリッドも可
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 番号付きセクションを縦に並べ、各セクションの終わりにCTAを置く
• テキストと写真の左右交互配置は、SPでは写真を上・テキストを下に積む
• サブ情報は白カードのグリッドで整理する
• 募集要項は左ラベル・右内容の2列表にする
• セクション境界に斜めのグラデーション帯や波形を入れてリズムをつける

Elevation & Depth

• カードは影をぼかし大きめ・濃度弱めにする（0 4px 16px rgba(0,0,0,0.06)）
• CTAボタンには柔らかいピンクの影
• 写真カードは白枠＋薄い影で浮かせる
• 背景の幾何学模様は透明度10%前後で奥に置く

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。人物写真は切り抜きにしてCTA脇に添える
• セクション境界: 斜め・波形のパステルグラデーション帯と淡色の面の切り替え
• 番号はブロブ（不定形の丸）の中に白抜き数字を置く
• タグやラベルは角丸の小さなピル
• ステップは下向き矢印や番号付き丸でつなぐ
• 背景に大きな三角・円の線画を透かしで置く

Components

• エントリーCTA（button-primary）: ピンク〜紫グラデーションのピル型。2行の文字＋右側に人物の切り抜き写真
• 番号ブロブバッジ（section-number-badge）: セクション色の不定形の丸に白抜きの数字。下に英字ラベル
• 小見出しタグ（label-tag）: 見出し上に置く、淡い色のピルタグ
• 情報カード（info-card）: 白カードに色付きの見出しと短い説明。グリッドで並べる
• 報酬ランク表（rank-bar）: ランク名の色付きピル＋金額の式を横一列にし、下から上へ段階的に並べる
• ステップボックス（step-box）: 色付きの枠線で囲む大きなカード。上部に見出し帯を付け、内側に3列のサブカードを並べる
• 募集要項表（spec-table）: 淡いラベンダー地。左に太字のラベル、右に内容、行の間に細線
• 応募フロー（flow-steps）: 番号＋アイコンの6つの枠を矢印でつなぎ、下に番号付きの説明リスト
• 社員の声カード（voice-card）: 人物写真の下に色付きの一言と名前・担当。左右に互い違いに配置

Do's and Don'ts

Do - 番号付きセクションごとに強調色を決め、見出し・バッジ・枠線をその色でそろえる - セクションの区切りごとにピンクのピル型CTAを繰り返し置く - 数字の訴求は大きく、色付きで見せる - 背景は淡い色にとどめ、白カードで情報を区切る - 写真は明るく自然光で、人物は笑顔にする

Don't - 濃い色・黒の面を広く使わない - CTAのグラデーションをほかの装飾に使わない - 明朝体や太すぎるディスプレイ書体を使わない - 角が鋭いボックスや強い影を使わない - 1つのセクションの中で強調色を3色以上混ぜない

Page Structure

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

1. ファーストビュー（職種と魅力をひと目で伝える）: 右に子どもと講師の写真、左に大見出し。下に丸いバッジで魅力を3つ並べる
2. キャンペーン告知（期間限定の特典で応募を急がせる）: 白い枠のバナー。左に写真、右にカウントダウンとオレンジ帯の特典
3. コンセプト＋目次（理念を伝え、各章へ案内する）: ピンク→水色のグラデーション帯に英字の大見出し、写真付きの目次カードを4列×2段
4. 仕事の考え方（仕事の価値観を伝える）: 番号1のバッジ。テキストと写真を左右交互に3ブロック
5. メリット（待遇・制度の強みを示す）: タグボタンの一覧から、淡いミントの帯ごとの詳細へ。数字グラフ・ランク表・アイコン図解
6. 代表メッセージ（経営者の思いで信頼を得る）: 左に人物写真と名前、右に白い長文ボックス。小見出しは緑色
7. 職場環境（働く場所のイメージを伝える）: スタジオ写真を大小のグリッドで並べ、下にピンク帯の地域リスト
8. 独立支援ステップ（キャリアパスを段階で示す）: 悩みの吹き出しを人物の周りに置き、3色の枠線のステップボックスを縦に並べる
9. サポート一覧（支援制度の多さを伝える）: 淡いイエローの面に白い小カードを4列×3段
10. 募集要項（条件を正確に伝える）: 紫の見出し帯と淡いラベンダーの2列表、勤務地のピル、コースのタググリッド
11. 応募の流れ（応募までの手順をわかりやすくする）: 6ステップのアイコン枠を矢印でつなぎ、番号付きの説明を添える
12. 社員の声（多様な人材がいることを見せる）: 白い大きなパネルに人物写真カードを互い違いに配置。下にもっと見るボタン
13. 会社概要・事業紹介（事業の広さで安心感を出す）: ロゴと説明のカードを2列で並べ、緑の見出しで締める

Imagery

• 自然光で明るく撮った、講師と子どものレッスン写真
• 楽器を持った講師の全身・半身のポートレート。白壁やレンガ壁を背景にする
• CTA脇にはスーツ姿の人物を切り抜きで添える
• シンプルな線画のアイコン（楽器・カレンダー・スマホ）をパステル色で描く
• 背景に大きな三角や円の半透明の線画を置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約960pxにして中央に寄せる。SPは画面幅の90%で1カラムにする
• PCの左右交互配置は、SPでは写真を上に積む
• 目次カードはPCの4列からSPでは2列にする
• サポートカードはPCの4列からSPでは2列にする
• ランク表や募集要項表は、SPではラベルを上・内容を下に積む
• CTAは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 行書くと起動時に読み込まれる。