DESIGN.md — 青空ブルー×白の運転士採用 LP（Bright Blue Sky Bus Driver Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: 青空・ブルー×白・大きな欧文見出し・雲・煙の装飾・整理されたカード・現場写真
• 地の質感: フラットな単色面に青空写真を大胆に敷き、グレーと白のもくもく雲で柔らかさを足す
• 形: 角丸の小さいカード、円形の切り抜き写真、ピル型のタブ
• 温度感: 爽やかで明るく、少し親しみのある温度感

Colors

• 地は白が基本で、カードや帯は淡い青（tint）で区切る
• 見出しの欧文・数字・ボタン・FAQの質問帯はすべてブランドブルーで統一する
• 本文は濃いグレーにして、純黒は使わない
• 金額や上限などの数字はブルー文字で強調し、注意事項だけ赤文字にする
• タイムラインの時刻だけ黒パネル＋オレンジ文字にして、行先表示（LED）の雰囲気を出す
• フッターは全面ブルーにして、ページの終わりを示す
• button-primary は文字 #FFFFFF × 背景 #017BE3 のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0177DB、4.5:1）を使う。
• timeline-row は文字 #F0A030 × 背景 #C1DBFE のコントラスト比が 1.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#87530A、4.53:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #017BE4 のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0176DA、4.56:1）を使う。
• accordion-bar は文字 #FFFFFF × 背景 #017BE4 のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0176DA、4.56:1）を使う。
• speech-bubble は文字 #017BE4 × 背景 #D9E9FE のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0176DA、4.55:1）を使う。

Typography

• セクション見出しは、大きな青い欧文コンデンス体の下に和文の太字ゴシックを添える 2 段構成にする
• 欧文見出しの左にバス停標識のアイコンを置く
• 数字（番号・金額・時刻）は欧文コンデンス体で大きく表示する
• 本文は行間 1.8 で、1 行あたりの文字数を短めにする
• 強調はブルー文字＋太字にし、下線やマーカーは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は 2 カラムのカードグリッド）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに見出しを中央寄せで大きく置く
• サポート制度は番号付きのカードを 2 列に並べる（SP は 1 列）
• 1 日の流れは、時刻パネルと説明文の横並び行を縦に積む
• FAQ は Q 帯（青）と A 面（淡グレー）を交互に置く
• 募集要項はアコーディオン内に 2 列の表で載せる

Elevation & Depth

• 基本はフラットで、影は使わない
• 動画サムネイルにだけ角丸と薄い影を付ける
• 雲の装飾を写真やセクション境界に重ね、奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は円形または角丸の四角に切り抜き、FV は大きな円形のコラージュにする
• セクション境界: もくもくした雲（排気煙風）のシルエットでセクションの境界をぼかす
• CTA は角丸 4px 程度の長方形にし、右端に白い丸点を付ける
• タブはピル型の白枠ボタンにし、選択中だけ青で塗る
• カードは角丸 4〜8px の淡青の面にする
• 装飾写真は円形にしてカードの外側に浮かせる

Components

• 応募 CTA ボタン（button-primary）: 青い長方形のボタン。文字は中央、右端に白い丸点を付ける
• バス停アイコン付き欧文見出し（section-heading）: バス停標識のアイコンを添えた大きな青い欧文と、その下の和文太字の 2 段見出し
• 番号付き制度カード（support-card）: 小さなラベルと大きな番号の下に淡青カードを置く。見出しの下に区切り線、金額はブルー文字
• 時刻表示タイムライン（timeline-row）: 黒パネルにオレンジで時刻と業務名を表示し、右に説明文を置く。行ごとに淡青を交互に塗る
• Q&A ブロック（faq-item）: Q は白文字の青帯、A は淡グレーの面に青い A マークを付ける
• 職種切替タブ（tab-pill）: 白地に黒枠のピル型。選択中は青で塗り、文字を白にする
• 募集要項アコーディオン（accordion-bar）: 青帯の左に職種名を白で、右端に＋アイコンを置く
• 支援額の吹き出し（speech-bubble）: 淡青の円形吹き出しに、大きな青い数字で支援額を載せる
• 先輩の声（voice-card）: 左に人物の顔写真、右に青い見出しと下線、本文を置く横並び

Do's and Don'ts

Do - 青空と実際の車両・人物写真で、開放感と現場のリアルさを出す - 各セクションに欧文と和文の 2 段見出しを必ず付ける - 数字（金額・期間・時刻）を大きく青で目立たせる - セクションの境界に雲の装飾を入れて、柔らかくつなぐ - CTA は FV・動画の後・要項の後・ページ末尾に繰り返し置く

Don't - 暖色を地色に使わない（オレンジは時刻表示だけに使う） - 明朝体や手書き体を混ぜない - 濃い影やグラデーションのボタンを使わない - カードの角を大きく丸めすぎない - 本文を純黒にしない

Page Structure

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

1. ファーストビュー（仕事のやりがいと応募の手軽さを伝える）: 左に太字のキャッチとチェック付きの訴求 3 点、CTA を置く。右に運転士写真の円形コラージュ、下端に雲
2. 仕事の魅力（仕事の意義を 3 つの観点で示す）: 全面の青空写真に巨大な欧文見出しを載せる。リード文と、写真付きの白カード 3 枚を縦に並べる
3. 仕事の種類（キャリアの段階を見せる）: 青と淡青の円でバスの種類を並べ、角丸写真の上に説明を重ねる
4. 先輩の声（現場の声で安心感を出す）: 顔写真と見出し・本文の横並びを 3 件。横にバス写真を添える
5. インタビュー動画と CTA（動画で理解を深めて応募へ誘導する）: 動画の埋め込みと欧文の縦積みテキストを置き、下に CTA。背景は雲と淡青
6. サポート制度（支援の手厚さを示す）: キャラクターと支援額の吹き出しの下に、番号付きの淡青カードを 5 枚、グリッドで並べる
7. 1 日の仕事（働き方を具体的にイメージさせる）: 職種のピル型タブの下に、時刻パネル付きのタイムラインを置く
8. お仕事動画（職場ごとのリアルを見せる）: 動画サムネを 2×2 で並べ、青いキャプションを付ける。下に雲と車両の並び
9. よくある質問（不安を解消する）: 青い Q 帯と淡グレーの A 面を 5 件
10. 募集要項（条件を詳しく伝える）: 青いアコーディオンの中に 2 列の表を置き、最後に CTA
11. クロージング CTA（最後のひと押し）: 青空写真の中央に大きな押しボタン型の応募ボタンを置き、左右に人物とキャラクター
12. フッター（ナビゲーションの提供）: 全面ブルーにロゴとリンク 2 列、巨大な欧文の透かし文字

Imagery

• 快晴の青空と白い雲を背景に、車両を斜めの低い角度から撮る
• 制服の運転士は笑顔か指差し確認のポーズで、自然光の明るい写真にする
• 人物は白背景に切り抜くか、円形・角丸でトリミングする
• グレーと白のもくもく雲のイラストを、セクションの端に重ねる
• バス停標識やハンドルなど、交通モチーフの青い線画アイコンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP はカードのグリッドを 1 列にし、欧文見出しを 48〜56px に縮める
• FV は写真コラージュを上、キャッチと CTA を下に縦積みにする
• タイムラインは時刻パネルを上、説明文を下に縦積みにする
• 要項の表は、項目名を上に置く縦積みにする
• PC は中央 900px 前後の幅で、装飾写真を左右の余白に浮かせる

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