DESIGN.md — 空色グラデと白カードの派遣求人LP（Airy Sky Blue Staffing Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい
• キーワード: 空色グラデーション・白い角丸カード・筆記体の英字あしらい・オレンジCTA・働く女性の写真
• 地の質感: フラットな面に淡いグラデーションとごく薄い影を使う。ビル街の写真をうっすら透かす。
• 形: 大きめの角丸カード、円形のバッジ、ピル型ボタン、円形に切り抜いた人物写真
• 温度感: 寒色が中心でやや涼しい。オレンジのCTAで温かみを少し足す。

Colors

• 地は白・淡い水色・青グレー・薄グレーを交互に使い、セクションを分ける。
• 大見出しは紺。キーワードだけ青にして大きくする。
• オレンジは主CTAとチェックマークだけに使う。
• カードは白、または淡い水色にする。枠は細い青線にする。
• 筆記体の英字は淡い青グレー（透明度30%前後）で背景に重ねる。
• 写真の上には濃い色の帯を敷かず、白文字に軽い影を付けて置く。
• button-primary は文字 #FFFFFF × 背景 #FC941C のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B26102、4.56:1）を使う。
• badge-circle は文字 #4D7FBA × 背景 #FEFEFE のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4577B3、4.58:1）を使う。
• reason-number は文字 #4D7FBA × 背景 #FEFEFE のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4577B3、4.58:1）を使う。
• step-item は文字 #4D7FBA × 背景 #FEFEFE のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4577B3、4.58:1）を使う。

Typography

• 見出しは2行以内で中央揃えにする。
• 強調したい語だけ青にして1.3倍の大きさにし、引用符で囲む。
• 「01」などの番号は欧文サンセリフの太字で大きくし、筆記体の「Reason」を添える。
• 本文は左揃えにし、行間を1.8前後にする。
• 英字の筆記体は飾りとして使い、読ませる情報は載せない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストの2カラムを交互に並べる。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの上下余白は64〜80pxにする。
• 理由ブロックは「番号＋見出し→写真→本文」の順で縦に積む。
• CTAの直前に、斜線で挟んだ小さなリード文を置く。
• カード同士の間隔は16pxにする。
• 求人カードと声カードは横スライダーにし、ドットのページ送りを付ける。

Elevation & Depth

• カードにはごく淡い影を付ける（0 4px 16px rgba(30,80,140,0.08)）。
• CTAには弱いオレンジの影を付ける。
• 写真には影を付けず、角丸で切り抜く。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸16〜24pxで切り抜き、人物は円形にも切り抜く。
• セクション境界: 直線で切り替え、大きな角丸の面を重ねる。FV下とクロージングの写真の下は大きな弧にする。
• 特長は円形バッジを3つ並べる。
• 番号ラベルは片側を丸めた白いタグにする。
• セクションのパネルは角を大きく丸める（32px以上）。

Components

• 主CTAボタン（button-primary）: オレンジのグラデーションのピル型。左端に「所要時間」を書いた白い枠を斜めの区切りで付け、右端に矢印を置く。
• CTA上のリード（cta-lead）: 斜線（＼／）で挟んだ短い一文
• 円形の特長バッジ（badge-circle）: 白い円に青枠を付け、青い太字を2〜3行入れる。3つ並べる。
• 悩みのチェックリストカード（check-card）: 白い角丸カードに、オレンジのチェックを付けた悩みを5行並べる。
• 理由の番号タグ（reason-number）: 白いタグに青の大きな数字を置き、筆記体の「Reason」を添える。右に小さなリードと見出しを置く。
• 求人カード（job-card）: 上部に青い帯の見出し、アイコン付きの給与・勤務地の行、ハッシュタグを並べる。
• お客様の声カード（voice-card）: 筆記体の「Case」番号、線画の人物イラスト、Before/Afterの帯、太字の見出し、本文の順に並べる。
• ステップ（step-item）: 青い線のアイコンを円で囲み、線でつなぐ。上に「Step」のラベル、下に青い見出しを置く。
• FAQカード（faq-card）: 淡い水色の角丸カード。青い質問文、区切り線、本文の順に置く。

Do's and Don'ts

Do - 地色は白と淡い水色系に絞り、爽やかさを保つ。 - 見出しの近くに、薄い筆記体の英字を斜めに重ねる。 - CTAは3〜4回繰り返し、同じデザインにする。 - 人物写真は明るい自然光で、笑顔のオフィスワーカーにする。 - 強調語は青い大きな文字と引用符で示す。

Don't - オレンジをCTA以外の面に広く使わない。 - 黒や原色の濃い地を使わない（フッターも淡い色にする）。 - 角の立った四角いカードやボタンにしない。 - 装飾の英字を濃くし、本文の邪魔をさせない。 - 暗い写真や硬い表情の写真を使わない。

Page Structure

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

1. ファーストビュー（理想の働き方を印象づけ、すぐ登録へ誘導する）: 空とビル街の淡い写真に女性の人物写真を置き、白い太字のキャッチを載せる。下に円形バッジ3つとCTAを置く。
2. 悩みの提起（今の働き方への不満に共感する）: 青グレーの地に、人物写真と白いチェックリストカードを重ねる。下に中央揃えの問いかけを置く。
3. 解決の提示（サービスの強みを3点で示す）: 大見出しの下に、写真と吹き出し、3つの強みを線で区切ったパネルを置く。
4. 利用後のイメージ（働く日常を想起させる）: 淡い水色の角丸パネルに、オフィスや同僚の写真を互い違いに並べ、筆記体の英字を添える。
5. 求人例（具体的な仕事を見せる）: 青い帯の求人カードを横スライダーで見せる。
6. 中間CTA（登録を促す）: 円形の人物写真と吹き出し風の円、問いかけ、CTAを置く。
7. 選ばれる理由（4つの理由で信頼を作る）: 大きな角丸の水色パネル内で、番号タグ・写真・本文を左右交互に並べる。担当者の役割は3枚のカードで見せる。
8. 全国対応（対応エリアの広さを訴求する）: ドットで描いた日本地図の上に、強調語を大きくした見出しを置き、CTAを続ける。
9. お客様の声（利用者の変化を見せる）: Before/Afterの付いた声カードを横スライダーで見せる。
10. ご利用の流れ（手順の簡単さを示す）: グレーの地に、線でつないだ円形アイコン3ステップを置く。
11. よくある質問（不安を解消する）: 淡い水色のFAQカードを縦に3つ並べる。
12. クロージング（最後の後押しをする）: 人物写真に斜めの青いキャッチを載せ、下端を弧状に切る。最後にCTAを置く。
13. フッター（関連リンクを示す）: くすんだ水色の地に、白い小さなリンクとコピーライトを置く。

Imagery

• 20〜30代の女性のオフィスワーカーを、明るい自然光で笑顔に撮る。
• 背景は高層ビルや明るいオフィスにし、ハイキーで青みのある色調に整える。
• スーツ姿の担当者を3人並べ、信頼感を出す。
• 人物は線画のシンプルなイラストにする（お客様の声用）。
• アイコンは青い細線で、円で囲む。
• 地図や装飾は淡い青のドットパターンで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラムにし、写真→テキストの順に縦に積む。
• 円形バッジ3つはSPでも横並びのまま縮める（各96px程度）。
• 求人カードと声カードは、SPで1枚ずつ表示するスライダーにする。
• CTAはSPで横幅の90%に広げる。
• PCは本文幅を約880pxにし、写真とテキストを左右交互に並べる。

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