DESIGN.md — 夜空から朝焼けへ移る空グラデの転職支援LP（Cinematic Sky Gradient Career Agent LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型、信頼・誠実
• キーワード: 空のグラデーション・雲と光・明朝の白抜き見出し・黄緑ピルCTA・吹き出し丸写真・ストーリー型
• 地の質感: 写真合成の雲・空・光の粒子。カードは半透明の生成り色で、紙のような質感
• 形: 円形の写真、思考吹き出しの小さな丸、角丸を抑えた四角カード、ピル型ボタン
• 温度感: 冷たい夜色から始まり、暖かい金色へ移り、最後は爽やかな青空で終わる

Colors

• 背景はベタ塗りにせず、空や雲の写真グラデーションでつないでいく
• 上から順に、夜→夕暮れ→青空→金色→青空と色温度を変え、気持ちの変化を表す
• 見出しは基本白で、光彩（グロー）をかけて背景から浮かせる
• 金色の見出しは暗い背景の問いかけだけに使う
• CTAは常に黄緑のグラデーションで、ほかの要素に黄緑は使わない
• カードは半透明の生成り色にして、本文は濃い茶灰にする
• Q番号やステップアイコンにはオレンジ系をアクセントとして使う
• button-primary は文字 #F5F7F0 × 背景 #94C442 のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#5B7A26、4.57:1）を使う。

Typography

• ほぼすべての文字を明朝で統一し、上品な語り口にする
• 見出しは中央揃えで2行に分け、字間を広め（0.1em）にとる
• 強調したい語は文字を一段大きくするか、下線を引く
• 数値（統計値）は大きな明朝で示し、単位は小さくする
• 本文は中央揃えの短い行で、詩のように並べる
• 欧文の筆記体は番号の装飾だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。求人カードだけは2列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 背景写真は全幅で敷き、本文は中央の狭い幅に置く
• セクションの終わりに毎回CTAを置く
• ポイントは丸写真と本文を左右交互に配置する
• FAQは縦に積んだカード形式で、各カードにQとAを入れる
• ステップは5つのアイコン円を横に並べる（SPでは3+2で折り返す）

Elevation & Depth

• カードには薄いドロップシャドウ（0 2px 8px rgba(0,0,0,.15)）をつける
• 白文字の見出しには白の外側グロー（text-shadow 0 0 8px）をかける
• CTAには下側に濃い緑の影をつけて、立体感を出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: シーン写真は円や雲形に切り抜き、白い細い縁をつける。求人写真は四角
• セクション境界: 直線では区切らず、雲や光のグラデーションで溶け込ませる
• 思考吹き出しは大きな円の下に小さな円を2つ添える
• カードはほぼ角丸なしの四角で、紙のような生成り色にする
• CTAは完全なピル型にして、右端に白い矢印を置く

Components

• 黄緑のピル型CTA（button-primary）: 上段に小さな前置き文、下段に大きな行動文、右端に矢印を置く
• 思考吹き出しの丸写真（thought-bubble）: 円形の写真の左上にラベル帯を重ね、下に小さな丸を2つ添える
• 筆記体のポイント番号（point-script）: 丸写真の下部に白い筆記体の番号を重ねる
• 統計値の表示（stat-callout）: 白い枠の中に大きな数値を置き、下に吹き出しの線とグラフカードを添える
• 求人カード（job-card）: 写真の下に、チェック付きの白いラベルと職種名を重ねる
• お客様の声のカード（voice-card）: 生成りの紙のような面に、名前・年代の見出し、本文、注釈を入れる
• FAQカード（faq-item）: オレンジの筆記体でQ/Aを示し、質問の帯と回答部分を線で区切る
• ステップのアイコン円（step-icon）: オレンジの円に白い線画アイコンを入れ、間を点線の矢印でつなぐ

Do's and Don'ts

Do - 背景は空・雲・光の写真グラデーションでつないでいく - 見出しは白い明朝に光彩をかけ、中央揃えにする - CTAはセクションごとに同じ形で繰り返す - 写真は円や吹き出しの形に切り抜き、柔らかく見せる - カードは半透明の生成り色にして、背景の色をほんのり透かす

Don't - ゴシック体の太字を多用しない - 背景をはっきりした色の境界で区切らない - CTA以外に黄緑を使わない - 角丸の大きいポップなカードにしない - 原色や彩度の高い赤を使わない

Page Structure

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

1. ファーストビュー（働きすぎて時間がない悩みに共感させる）: 夜の暗い時計と嵐の写真に、白い明朝の大コピーを重ね、悩みの吹き出しを2つ置き、その下にCTA
2. 理想の問いかけ（自由な時間ができたらしたいことを想像させる）: 金色の見出しの下に、思考吹き出し型の丸写真を4つ交互に並べる
3. 統計データ（平均残業時間と自分を比べさせる）: 大きな数値と白いグラフカード、問いかけの見出し
4. 問題提起と解決の提示（今の働き方を見直させ、サービスを紹介する）: 雲の背景に中央揃えの短い文を並べ、キーワードに下線を引き、その下にCTA
5. サポートのポイント（支援内容3点を示す）: 青空とビルの写真の上に、丸写真と筆記体の番号を左右交互に置く
6. 求人例（条件のよい求人を具体的に見せる）: 金色の地に、写真とラベルの求人カードを2〜3列で並べる
7. 未来の提案（希望の働き方を叶えた後を想像させる）: 左右に人物の写真を置き、中央に白い文とCTA
8. お客様の声（体験談で信頼を高める）: 紙のような生成りのカードに、写真付きの大きなカード1枚と小さなカード2枚
9. よくある質問（不安を解消する）: Q/AのカードをQ5まで縦に積み、最後に5つのステップアイコンを入れる
10. クロージングCTA（登録を最後に後押しする）: 青空と街の道を歩く人の写真の上に、光る白見出しと大きなCTA

Imagery

• スーツ姿の人物、オフィス、街並みの明るいストック写真
• 雲・空・夕焼けの写真を重ねて、幻想的なグラデーションを作る
• 光の粒子やレンズフレアを薄く重ねる
• 趣味のシーン（ゲーム・入浴・映画など）の生活写真を円形に切り抜く
• アイコンは白い線画で、オレンジの円の中に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPCでも中央の狭い幅に組んでいるので、SPではそのまま縦に積めばよい
• SPでは求人カードを2列にする
• SPではポイントの丸写真を本文の上に置き、縦並びにする
• SPではステップアイコンを3+2で折り返す
• PCでは背景写真を全幅に広げ、本文は約640pxで中央に寄せる

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