DESIGN.md — コーラル霞グラデの看護師採用 LP（Soft Coral Gradient Nurse Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、上品・高級、清潔・爽やか、シンプル・ミニマル
• キーワード: ぼかしグラデーション・カプセル型写真・欧文セリフ見出し・手書きコピー・余白多め・やわらかな光
• 地の質感: 霧のように滲むコーラル〜ピーチのグラデーションを背景に敷く。紙のような白地の上で光がにじむ質感。
• 形: 写真は縦長カプセル・アーチ・横長ピルの形に切り抜く。ボタンは正円とピル型。角のない丸い形だけで構成する。
• 温度感: 暖色寄り。朱〜コーラル〜ピーチで温かく、白とグレージュで清潔感を保つ。

Colors

• 地は白にする。中盤のセクションにコーラル→ピーチの大きなぼかし帯を敷き、ページを温める。
• グラデーションの縁はぼかし、くっきりした境界線は作らない。
• 朱オレンジは丸ボタンと手書きコピーにだけ使い、面には使わない。
• 文字は真っ黒にせず、濃いブラウングレーにする。
• サブ見出しや注記はグレージュで控えめにする。
• 差し色のミントブルーは、写真カードのグラデーション内にだけ使う。
• button-circle-arrow は文字 #FFFFFF × 背景 #F26A4B のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE3610、4.52:1）を使う。
• header-cta は文字 #FFFFFF × 背景 #F26A4B のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE3610、4.52:1）を使う。
• card-capsule-feature は文字 #EE5A3C × 背景 #FEFEFE のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC3513、4.56:1）を使う。
• card-system は文字 #EE5A3C × 背景 #FEFEFE のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC3513、4.56:1）を使う。

Typography

• セクション見出しは、欧文セリフと小さな和文サブ見出しの2段で組む。
• 和文の文字間は0.1em以上空け、行間は2前後と広めにする。
• 手書き風コピーは朱色で、1ページに1〜2か所だけ使う。
• 写真カード内の和文は縦書きにしてもよい。
• 太字は多用せず、500程度のウェイトで上品にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは横スクロールのカルーセルにする。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃えを基本にし、Education など一部は左寄せにして変化をつける。
• 本文ブロックは幅を狭めて余白を多く取る。
• 特長は縦長カプセルのカルーセルで見せ、中央の1枚を大きくする。
• 制度カードはSPで縦に積む。
• リンクボタンは縦に並べ、間隔は16px前後にする。

Elevation & Depth

• カードとリンクボタンには、ぼかしの大きいごく薄い影（0 8px 30px rgba(0,0,0,.06)）を付ける。
• 丸ボタンにもやわらかい影を付けて、面から少し浮かせる。
• 背景のぼかしグラデーションを光のレイヤーとして重ね、奥行きを出す。

Shapes

• 角丸: 小 8px ／ 中 20px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 縦長カプセル、上部アーチ、横長ピル、角丸カードの形に切り抜く。
• セクション境界: 直線の境界は使わない。ぼかしグラデーションと大きな円弧（写真の下辺のアーチ）でつなぐ。
• 矢印ボタンは直径32〜40pxの正円で、朱のグラデーションにする。
• 写真は必ず丸みのある形にし、四角のまま置かない。
• カードの角丸は20px前後にする。
• リンクボタンはピル型の白面にし、右端に丸ボタンを付ける。

Components

• 丸い矢印ボタン（button-circle-arrow）: 朱〜オレンジのグラデーションの正円に白い矢印を置く。View More の横やカードの下辺中央に配置する。
• リンクボタン（button-link-pill）: 白いピル型で薄い影を付ける。左に和文ラベル、右端に丸い矢印ボタンを置く。
• ヘッダーの応募ボタン（header-cta）: 右上に固定する小さな朱色のピルボタン。横に丸いメニューボタンを並べる。
• 欧文＋和文の見出し（heading-en-ja）: 大きな欧文セリフの下に、小さなグレージュの和文を添える。
• カプセル形の特長カード（card-capsule-feature）: 縦長カプセルに写真を入れ、番号（Feature 01 など）と縦書きのコピーを重ねる。中央以外の写真はぼかす。
• 写真付きの制度カード（card-system）: 上半分が写真、下半分が白面のカード。小さなラベル、朱色の2行コピー、下辺中央の丸ボタンで構成する。
• 横長ピル形の写真パネル（card-pill-hero）: 左側をミント〜黄色のグラデーションにして白文字を載せ、右側に写真を入れる大きなピル形パネル。
• 手書き風コピー（handwritten-copy）: 朱色の手書き文字で、メッセージの締めにする。

Do's and Don'ts

Do - 白地を広く残し、コーラル系のグラデーションはぼかして使う。 - 写真はカプセル形・アーチ形に切り抜き、余白の中に浮かせる。 - 欧文セリフ見出しには、必ず小さな和文サブ見出しを添える。 - ボタンは朱のグラデーションの正円で統一する。 - 本文は字間・行間を広く取り、静かに読ませる。

Don't - 原色の赤やビビッドな青を面で使わない。 - 四角い写真やシャープな角のカードを使わない。 - 太い黒文字や派手なバッジで煽らない。 - グラデーションの境界をくっきり描かない。 - 濃い影や枠線を多用しない。

Page Structure

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

1. ファーストビュー（職場の雰囲気と理念を伝える）: 右側に、歩くスタッフの集合写真を下方向へ白くフェードさせて置く。左に大きな欧文セリフと朱色の手書きコピーを重ねる。
2. メッセージ（仕事への思いを共有する）: 中央寄せの狭い幅で、3行のリードと本文を置き、手書きコピーで締める。左下にピーチのにじみを敷く。
3. 特長（職場の強みを複数見せる）: 番号付きの縦長カプセルを横カルーセルで並べ、中央を大きく見せる。
4. 制度（働き方の仕組みを紹介する）: コーラルのにじみの上に、写真付きの白カードを2枚置く。
5. 1日の流れ（働く1日を想像させる）: コーラルの帯の中に、横長ピル形のパネル（グラデーション＋建物と集合写真）を置く。
6. 教育・キャリア（成長できる環境を示す）: 左に見出しと本文、右にアーチ形写真を4枚、高さをずらして並べる。
7. 施設写真（病院の全景を見せる）: 下辺を大きな円弧で切り抜いた、全幅の建物写真を置く。
8. 募集情報・CTA（応募・資料請求へ誘導する）: 欧文見出しの下に、白いピル型のリンクボタンを3つ縦に並べる。
9. フッター（関連サイトと連絡先を示す）: 白地の左にロゴと住所、右に関連サイトのバナーを2列で並べる。

Imagery

• 自然光が入る院内で、スタッフが笑顔で歩いたり話したりする姿を撮る。
• 写真は明るく、ハイキーでやや暖色寄りに仕上げる。
• 背景用に、コーラル・ピーチ・クリームのぼかした光の球体を重ねる。
• 建物は青空と一緒に撮り、明るく清潔に見せる。
• 装飾イラストは使わず、手書き文字だけを添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは左右2カラムや写真の重なりで見せる。SPでは1カラムに縦積みする。
• ファーストビューはSPで写真を上に置き、欧文見出しを写真の下側に重ねる。
• 特長カルーセルはSPで1枚ずつ表示し、左右に隣のカードを少しのぞかせる。
• 制度カード2枚はSPで縦に並べる。
• Education のアーチ写真はSPで2〜3枚に減らし、横に並べる。
• ヘッダーの応募ボタンとメニューボタンはSPでも右上に固定する。

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