DESIGN.md — 桜ピンク×水色の看護師求人特集 LP（Sakura Aqua Nurse Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型、かわいい
• キーワード: 桜・水色の帯・濃ピンク CTA・黄色マーカー・季節特集・看護師
• 地の質感: 水彩の桜イラストとパステルのグラデーションを使う。それ以外はフラットな単色面。
• 形: 角丸カード、ピル型ボタン、金のメダルバッジ。
• 温度感: 春らしい、明るくやわらかな暖色寄り。地は水色で清潔感を出す。

Colors

• 地は白と水色の帯を交互に置き、セクションの区切りにする。
• 行動を促す要素（CTA・電話・属性タグ）は濃いピンク 1 色に揃える。
• 本文の要点には淡い黄色のマーカーを敷く。
• 英字のセクションラベルは水色帯の上では白、白地の上では水色にする。
• 最下部の電話セクションは濃いピンクの面で締める。
• button-primary は文字 #FFF4FE × 背景 #E52E82 のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D91B72、4.51:1）を使う。
• phone-box は文字 #E52E82 × 背景 #FFFFFF のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D91B72、4.5:1）を使う。

Typography

• セクション見出しは、英字ラベルと日本語見出しの 2 段で組む。
• 日本語見出しには白か黄色の帯を敷き、字間を広く取る。
• 本文の行間は 1.9 前後にして読みやすくする。
• 明朝体は FV のタイトルだけに使い、それ以外はゴシックで統一する。
• 職種・年代・評価点などの数値や属性はピンク・オレンジ・太字で強調する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。求人カードは横スクロールのカルーセルにする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 水色帯のセクションは全幅にし、上下に 40〜56px の余白を取る。
• カードは左右 16px のマージンで中央に置く。
• CTA は FV・中盤・求人カードに繰り返し置く。
• ポイント見出しは右下に英字番号を添えたアコーディオン風の水色ブロックにする。
• 強みのリストはメダル・テキスト・矢印の横並び 1 行で作る。

Elevation & Depth

• 求人カードと口コミカードに柔らかい影（0 4px 10px rgba(0,0,0,.12)）を付ける。
• CTA ボタンに下方向の薄い影を付ける。
• 水色帯や見出しブロックは影なしのフラットにする。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 角丸 10px の長方形。アイコンは円形に切り抜く。
• セクション境界: 直線で色を切り替える。
• 主 CTA は全幅のピル型にし、左端に円形の「無料」バッジを重ねる。
• カード内の CTA は角丸 10px の長方形にする。
• 属性タグは小さな角丸 2px の矩形にする。
• 流れのステップ間は下向きのピンク三角でつなぐ。

Components

• 無料バッジ付きピル CTA（button-primary）: 濃いピンクのピル型ボタン。左に黄色円の「無料」バッジ、右端に矢印を置く。
• ポイント見出しブロック（point-heading）: 水色の角丸ブロック。左に 2 行の見出し、右下に白い英字の POINT 番号と＋アイコンを置く。
• 英字＋和文の見出し（section-title）: 桜のアイコン、細い英字ラベル、帯を敷いた太字の和文見出しを縦に重ねる。
• 求人カード（job-card）: 白いカード。見出し、写真、ピンクと水色のタグ、年収、説明文、CTA の順に縦に並べる。
• 強みリスト行（merit-row）: 金のメダル、ピンクの小見出しと説明、右端のピンク矢印を横に並べる。
• 口コミカード（voice-card）: 上部の水色ヘッダーに転職先を書く。下に円形アイコン、属性、星評価、マーカー入りの本文を置く。
• 流れのステップ（step-item）: 左に写真、右にピンクの STEP 番号・タイトル・ピンクの要点・説明を置く。ステップ間は三角でつなぐ。
• 電話番号ボックス（phone-box）: ピンク地の上に白い角丸箱を置き、下線付きのピンクの大きなフリーダイヤル番号を入れる。

Do's and Don'ts

Do - 水彩の桜を FV と見出しのアイコンに使い、季節感を一貫させる。 - CTA はピンクの同じデザインを繰り返し置く。 - 要点は黄色マーカーで部分的に強調する。 - 白地と水色帯を交互に置いてリズムを作る。 - 看護師の写真は白衣・笑顔・明るい背景で揃える。

Don't - 濃い色や黒の面を大きく使わない。 - ピンク以外の色で CTA を作らない。 - 明朝体を本文に使わない。 - マーカーを段落全体に引かない。 - 暗い写真や無表情の写真を使わない。

Page Structure

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

1. ファーストビュー（季節の特集であることと無料相談を伝える。）: パステルのグラデーションの上に水彩の桜と白衣の女性を置く。上に明朝の大見出し、下にピル CTA を置く。
2. 悩みの提起（時期特有の不安に共感する。）: 水色帯の上で、悩みのカギカッコ文 3 つに黄色マーカーを引き、中央揃えで並べる。
3. ポイント（その時期に転職する利点を 3 つ示す。）: 水色の見出しブロック、写真、マーカー入りの本文を 1 セットにして、3 つ並べる。
4. 中間 CTA（相談を促す。）: 水色帯に中央揃えの 3 行の文と CTA を置き、下に注釈を添える。
5. 求人例（具体的な求人を見せる。）: 英字ラベルとマーカー見出しの下に、求人カードの横スクロールを置く。
6. 強み（サービスの優位性を示す。）: 水色帯の見出しの下に、白地でメダル付きのリスト 3 行を並べる。
7. お客様の声（利用者の体験で信頼を得る。）: 水色ヘッダー付きの口コミカードを縦に 3 枚並べる。
8. 利用の流れ（手続きの簡単さを示す。）: 水色地に白いパネルを置き、写真付きの 4 ステップを三角でつないで縦に並べる。
9. 電話窓口・信頼情報（電話での申込と安心材料を示す。）: ピンク地に電話番号ボックスを置き、その下のクリーム色の枠に認証アイコン付きの 3 項目を並べる。

Imagery

• 白衣やスクラブを着た女性看護師の笑顔写真を、明るい自然光で撮る。
• 水彩タッチの淡いピンクの桜の花と花びらを散らす。
• 見出しの上には小さな桜 1 輪のアイコンを置く。
• 強みの番号には金色の月桂樹付きのメダルを使う。
• 口コミには線画の女性アイコンを、淡いオレンジの円の背景で使う。
• 流れの写真は、相談や面接の場面のビジネス写真にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅 約 900px で中央揃えにする。
• ポイント・求人・口コミは PC で 3 カラムのカードに並べる。
• 利用の流れは PC で横 4 列にし、三角は横向きにする。
• 強みは PC で白いパネル内に、テキストと右側の写真を交互に並べる。
• FV は PC で横長にし、人物を右、タイトルを左に配置する。

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