DESIGN.md — 桜色と明朝のやさしいシニア人材募集 LP（Soft Peach Community Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、上品・高級、親しみ・手作り感、信頼・誠実
• キーワード: 桜色の地・明朝体の見出し・手描きイラスト・ピーチのグラデーション・丸く切り抜いた人物写真・粒子感のあるかすれ
• 地の質感: うっすら紙のような粒子感がある淡いピンクの地。装飾にはスプレーでかすれさせたドットテクスチャを使う。
• 形: 角の大きく丸い面と、円形に切り抜いた人物写真。有機的な波の形も添える。
• 温度感: 暖色寄りでやわらかく、穏やかな温度感

Colors

• 地は淡い桜色を基本にし、白いカードとサーモンの帯を交互に重ねて区切る。
• ブランドのローズピンクは番号ラベル・STEP 帯・スライダーボタンなど小さな面に限って使う。
• ファーストビューだけはピーチからサーモンへのグラデーションで温かさを出す。
• 文字は濃いグレーで統一し、真っ黒は使わない。
• 赤は必須表示と費用の注記だけに使う。
• イラストはネイビー・緑・オレンジ・水色を彩度を抑えて使う。
• label-number は文字 #FFFFFF × 背景 #DC7EA3 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4278、4.55:1）を使う。
• job-badge は文字 #FFFFFF × 背景 #DC7EA3 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4278、4.55:1）を使う。
• slider-nav は文字 #FFFFFF × 背景 #DC7EA3 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4278、4.55:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #01BCD5 のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018293、4.55:1）を使う。
• badge-required は文字 #FFFFFF × 背景 #E53935 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E32C27、4.51:1）を使う。

Typography

• 見出しと本文はどちらも細い明朝にして、上品で穏やかな語り口にする。
• セクション見出しの上に、小さな英字のセリフ体ラベルを添える。
• 本文は行間を約 2.1 と広くとり、シニアでも読みやすくする。
• フォームの部分だけはゴシック体にして、機能性を優先する。
• 太字は使わず、文字の大きさの差で階層をつける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は特長部分をイラストと文章の左右交互 2 カラムにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カードと帯は画面の左右に約 5% ずつ余白を残して浮かせる。
• 見出しは中央揃え、本文とおすすめ項目は左揃えにする。
• おすすめ項目は番号ラベル → 見出し → 本文 → イラストの順に縦に並べる。
• STEP カードは縦に積み、間を細い線でつなぐ。
• フォームは白い大きなカードの中に縦 1 列で並べる。

Elevation & Depth

• 影はほぼ使わず、色の差と淡い枠線で面を分ける。
• STEP カードには 1px の淡いピンクの枠をつける。
• 写真は影なしの角丸で載せる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は円形に切り抜く。仕事の写真やカード内の写真は角丸 12px の長方形にする。
• セクション境界: 段差は設けず、角丸 24px の色面カードを重ねて区切る。周りに花やかすれた円の装飾を散らす。
• 番号ラベルはピル型の小さなバッジにする。
• 会員条件は、角が完全に丸い枠線だけのピル型を縦に並べる。
• スライダーボタンは角丸 6px の小さなピンクの面にする。
• 丸と波の有機的な形を装飾に使う。

Components

• 番号ピルラベル（label-number）: おすすめ項目の頭につける、ピンク地に白い数字のピル型バッジ
• 円形 JOB バッジ（job-badge）: 仕事写真の左上に重ねる、ピンクの円に英字と番号を入れたバッジ
• スライダー前後ボタン（slider-nav）: 矢印付きの戻る・次へボタン。ピンク地に白文字
• STEP カード（step-card）: 白地に淡い枠。上端にピンクの STEP 帯、その下に写真・明朝の見出し・本文を置く
• 条件ピル（condition-pill）: 白地に濃いグレーの枠線と明朝の文字を入れた、条件を示すピル型の枠
• 英字ラベル付き見出し（section-heading）: 小さな英字セリフ体の下に、大きな明朝の見出しを中央揃えで置く
• 会場案内の帯（info-band）: サーモンの角丸の面に、住所・写真・地図を縦に並べる。住所は上下を線で挟む
• フォーム送信ボタン（button-primary）: 横幅いっぱいのシアンのボタン。角丸は小さめ
• 必須バッジ（badge-required）: フォームのラベル横に置く小さな赤いバッジ

Do's and Don'ts

Do - 見出しは細い明朝体にし、行間を広くとる。 - 淡い桜色の地に、角丸の白いカードやサーモンの帯を浮かせる。 - 手描き風でかすれ感のあるフラットなイラストを、各項目に添える。 - 人物写真は円形に切り抜き、ピーチ色のグラデーションの上に配置する。 - ピンクは小さなラベルやボタンに絞って使う。

Don't - 太いゴシック体や派手な原色の見出しは使わない。 - 濃い影や立体的なボタンは使わない。 - ピンクを大きな面に塗り広げない。 - 文字を詰めて情報を詰め込まない。 - 角ばった四角い写真だけで構成しない。

Page Structure

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

1. ファーストビュー（働き方への共感と温かい第一印象をつくる）: ピーチのグラデーションの角丸パネルに、円形の人物写真を 3〜4 点配置する。縦書きの短い問いかけを白い短冊で重ね、かすれた波の装飾を添える。
2. リードメッセージ（地域への愛着に訴えて参加を呼びかける）: 大きな明朝の 4 行見出しと、地域の名所を挙げた本文を置く。下に円で囲んだ手描きの人物イラストを添える。
3. お仕事紹介（具体的な仕事の種類を見せる）: サーモンの角丸の帯の中で、角丸の写真を横にスライドさせる。写真には円形の JOB バッジを重ね、下に職種名と前後ボタンを置く。
4. こんな方におすすめ（対象者を 3 タイプ示し、自分ごと化させる）: 番号ラベル・明朝の 3 行見出し・本文・手描きイラストを 1 セットにして、3 回繰り返す。
5. 団体紹介と入会条件（公的な信頼性と参加条件を伝える）: 上部に街並み写真を載せた白い角丸カードに、ロゴ・説明文・条件ピル 3 つ・注記を並べる。
6. 入会の流れ（申込みの手順を 3 ステップで示す）: 英字ラベル付き見出しの下に、STEP カードを縦に 3 枚並べる。最後のカードには費用の注記を赤で入れる。
7. 説明会会場（場所とアクセスを伝える）: サーモンの帯に、会場名・線で挟んだ住所・建物写真・地図を順に並べる。
8. 申込みフォーム（説明会の予約を受け付ける）: 白い大きなカードに、案内文・ラジオ・入力欄・チェックボックス・同意欄を並べ、最後にシアンの送信ボタンを置く。
9. フッター（運営者を示す）: 中央にロゴを置き、その下にコピーライトを小さな明朝で入れる。

Imagery

• 写真は明るく自然光で撮った、笑顔のシニア男女のポートレート。背景はやわらかくぼかす。
• 仕事の写真は家事・清掃・植木など、実際の作業風景を明るいトーンで撮る。
• イラストはクレヨンやスタンプのようなかすれのあるフラットな人物画。ネイビー・緑・オレンジ・水色を使う。
• 装飾として、ピンクの花・ドーナツ型の円・スプレー状のかすれた粒子を散らす。
• イラストの背後に淡いピンクの円や楕円を敷き、まとまりを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもコンテンツは中央寄せで、最大幅約 1000px のカードにする。
• PC のリードはテキストを左、イラストを右に並べる 2 カラムにする。
• PC のお仕事紹介は写真を 6 枚程度横に並べて見せる。
• PC のおすすめ項目はイラストと文章を左右交互に配置する。
• PC の STEP は 3 枚を横に並べ、会場案内は住所を左、写真を右に置く。

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