DESIGN.md — 水色と白の爽やかな看護師採用 LP（Airy Sky Blue Nursing Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実
• キーワード: 空色・白衣・余白・縦書き・雑誌風・細枠ボタン
• 地の質感: フラットな単色面と、明るく露出を上げた空や屋外の写真。影はほとんど付けない
• 形: 角丸なしの長方形が基本。小さな丸い矢印アイコンと細い線をアクセントにする
• 温度感: 明るく涼しい寒色寄り。人物の肌色と差し色のピンク・黄で温かみを足す

Colors

• 地は白、コンテンツ外周は薄灰で額縁のように囲む
• 水色はブロック面と細枠線に使い、ページのブランド色として通す
• ピンクは問い合わせなど小さな行動ボタンだけに使う
• 黄・緑などのビビッドな色は先輩紹介の人物カードに限定する
• 写真は空色に寄せて明るく補正し、配色になじませる
• button-cta は文字 #FFFFFF × 背景 #F58B8C のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EB1618、4.51:1）を使う。
• event-banner は文字 #FFFFFF × 背景 #82C5DE のコントラスト比が 1.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2A7E9D、4.6:1）を使う。
• recruit-grid は文字 #82C5DE × 背景 #FEFFFF のコントラスト比が 1.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2A7E9D、4.59:1）を使う。

Typography

• 見出しは字間を広めに取り、落ち着いた印象にする
• FVのコピーは縦書きで白帯に乗せる
• 英字は縦長の太いサンセリフで装飾に使う
• ブロックのタイトルの一部に手書き風ロゴ文字を使ってよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ボタン群は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真ブロックは端まで広げ、その上に白や水色の箱を重ねる
• 職種ボタンは2×2の細枠グリッドで並べる
• 見出しの下に、中央寄せの細線付きリンクボタンを置く
• 左右2分割の面（水色・写真）で特集への入口を作る

Elevation & Depth

• 影は基本的に使わない
• 写真の上に白や水色の箱を少しずらして重ね、奥行きを出す
• 人物カードだけに色付きの太枠を付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長の長方形。人物は腰上でトリミングし、空を多めに入れる
• セクション境界: 直線。写真と単色面の境目でセクションを分ける
• ボタンは角丸なしの長方形
• 矢印は小さな丸の中に入れる
• カード型の箱は角を立てる

Components

• 細枠リンクボタン（button-outline）: 白地に水色の細い枠、右端に丸い矢印
• 問い合わせボタン（button-cta）: ピンクのベタ塗りに白い文字
• 見学会バナー（event-banner）: 水色の面に、人物の切り抜きと白抜きの文字を乗せる
• ニュース帯（news-list）: 左に黒地の見出しラベル、右に日付と題名を並べる行
• 縦書き英字の装飾（vertical-label）: 左端に薄い灰色の大きな英字を縦に置く
• 先輩紹介カード（staff-card）: 人物写真を色付きの太枠で囲み、英字のキャッチを大きく重ねるスライダー
• 職種選択グリッド（recruit-grid）: 2×2の細枠ボタン。水色の小さな文字で職種名を入れる

Do's and Don'ts

Do - 空と人物の写真を大きく、明るく使う - 水色・白・薄灰の3色を基調に保つ - ボタンは細枠と角なしでそろえる - 余白を広めに取り、雑誌のように配置する

Don't - 濃い色や黒の大きな面を使わない - 角丸やピル型のボタンを混ぜない - 強い影やグラデーションのボタンを使わない - ビビッドな差し色を全体に広げない

Page Structure

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

1. ファーストビュー（職場の雰囲気と採用サイトであることを伝える）: 空を背景に人物写真を大きく置き、縦書きコピーと英字ロゴを重ねる
2. 入口ナビ（見学会・職種別募集へ誘導する）: 左に水色バナーとピンクボタン、右に2×2の細枠グリッドを置く
3. ニュース（最新情報を知らせる）: 黒ラベルと灰色地の2行リスト
4. 理念・チーム紹介（看護の方針を伝える）: 中央の見出しの下に、空を背景にしたスタッフの並び写真
5. 看護部長メッセージ（信頼感を与える）: 人物写真の横に白箱を重ねて短い言葉を置く
6. 特集の入口（教育や日記コンテンツへ誘導する）: 水色の面と写真の面を左右に分け、手書き風タイトルを添える
7. 先輩紹介（人柄を色とキーワードで見せる）: 色付きの枠のカードを横スライダーで並べる
8. 教育・働き方（制度を伝える）: 病院の外観写真の上にイラスト入りカードを2枚重ねる
9. クロージング（共感を残す）: 空と人物の写真に短いコピーを2か所置く
10. CTA・フッター（応募へ誘導する）: 水色の見学会バナーと募集職種の4ボタンを並べ、下に連絡先を置く

Imagery

• 青空と街並みを背景に、白衣の看護師を自然な表情で撮る
• 露出を高めにし、全体を空色寄りに補正する
• 人物の切り抜きを水色の面に乗せる
• 線画の人物イラストに、ピンクと水色の差し色を入れる
• 手書き風のロゴ文字やマーカーで親しみを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の約900px幅に収め、外周を薄灰にする
• SP では入口ナビのバナーとグリッドを縦に積む
• 左右に分けた特集ブロックは SP では上下に並べる
• 縦書きの英字装飾は SP では小さくするか省く
• 先輩カードは SP では1枚ずつスワイプで見せる

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