DESIGN.md — パステルオーロラの美容サロン求人 LP（Pastel Aurora Beauty Salon Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、上品・高級、情報量多め・訴求型、清潔・爽やか
• キーワード: パステルグラデーション・オーロラ・白カード・細い欧文セリフ・数字訴求・線画イラスト
• 地の質感: 水彩のようにぼかした水色×ピンク×ピーチのグラデーション地。面はマットで、白カードがすりガラスのように浮く。
• 形: 角丸カード、ピル型ボタン、片側だけ大きく丸めた写真フレーム、アーチ型の写真、上辺が楕円のセクション境界。
• 温度感: やや暖かいパステル。水色で清潔感、ピンクで親しみ。

Colors

• 地は水色・ピンク・ピーチを大きくぼかしたグラデーション。セクションごとに寒色寄り→暖色寄りへ移る。
• 情報は必ず白カードに載せ、グラデーション上に直接本文を置かない。
• ピンクはラベル・強調語・CTAだけに使い、面積を小さく保つ。
• 数字パネルは水色・ピーチ・ピンクの淡色を順番に並べる。
• 文字は純黒を避けて濃いチャコールを使う。
• 大きな欧文は白〜淡灰の透かしにして背景になじませる。
• button-primary は文字 #FFFFFF × 背景 #F2A9BA のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DF2D56、4.52:1）を使う。
• label-pill は文字 #FFFFFF × 背景 #F08A8F のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E42932、4.5:1）を使う。

Typography

• 見出しは太いゴシック、装飾は細い欧文セリフの二本立てにする。
• セクション名は細い欧文の透かしと太い和文見出しを重ねる。
• 数字は細い欧文セリフで大きく、単位は小さなゴシックで添える。
• 強調語だけピンクの文字色にする。
• 本文は中央揃えか左揃えの短い行で、行間を広く取る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。数字カードは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面端から 16px 内側に置く。
• 写真と文字は左右交互に置き、SPでは縦に積む。
• 数字カードは同じ高さのタイルで 2 列に並べる。
• セクションごとに上部へ欧文の透かし見出しを置く。
• CTAは中央に1本、横幅の80%で置く。

Elevation & Depth

• 白カードはごく薄い影（0 4px 20px rgba(0,0,0,0.05)）か影なし。
• ボタンは影なしのフラット。
• グラデーション地とのコントラストでカードを浮かせる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形、片側だけ半円に丸めたカプセル、上端がアーチの縦長
• セクション境界: 上辺がゆるい楕円カーブのグラデーション面で区切る
• カードは 12〜20px の角丸。
• ボタン・ラベルはピル型。
• 写真の片側だけ大きく丸めて動きを出す。
• アイコンは細線の線画にする。

Components

• 問い合わせピルボタン（button-primary）: 淡いピンクのピル型。左にチャットアイコン、白文字。
• 数字カード（stat-card）: 白カードの上部にピンクのピルラベル、中央に大きなセリフ数字と線画アイコン。
• ピンクのラベル（label-pill）: カード上部の小さなピル。白文字で項目名。
• 透かし欧文見出し（section-title-watermark）: 細い欧文セリフを大きく淡色で置き、和文見出しと小さなタグを重ねる。
• 制度紹介カード（system-card）: 大きな白カードに縦書きの欧文、カプセル写真、番号付きラベル、見出し、本文。
• 年次別給与パネル（salary-panel）: 淡い3色のパネルに大きな数字を並べ、下に年次の丸ドットのタイムライン。
• ポイント枠（point-box）: クリーム黄の角丸枠に写真と円形のピンクのバッジ。
• お知らせカード（news-card）: ピーチのグラデーション角丸パネル。欧文タグと太い見出し、店舗リスト。
• 募集要項の表（spec-table）: 罫線だけの2列表。左は太字の項目、右は本文。

Do's and Don'ts

Do - 地は必ずぼかしたパステルグラデーションにする。 - 情報は白い角丸カードにまとめる。 - 数字は細いセリフ体で大きく見せる。 - 線画イラストで職場の流れや人物を描く。 - CTAはピンクのピル型で、セクションの合間に繰り返す。

Don't - 原色や濃い背景色の面を使わない。 - 太い黒枠や強いドロップシャドウを付けない。 - ピンクを広い面に塗らない。 - 角ばった直角カードを並べない。 - 装飾の欧文を太字にしない。

Page Structure

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

1. ファーストビュー（世界観と待遇の数字を一目で伝える）: 人物アップ写真に細い欧文の大コピー、下部に白い半透明の数字カード3枚と円形のエントリーバッジ。
2. CTA（気軽な問い合わせを促す）: 中央にピンクのピル型ボタン1本。
3. 研修の導入（育成環境の魅力を示す）: 左右に写真、中央に太い見出しと中央揃えの本文。
4. お知らせ（新店舗など最新情報を伝える）: ピーチのグラデーションカードに欧文タグと店舗リスト。
5. 会社紹介（サロンの教育方針を伝える）: 横に流れる欧文の透かし、左に写真、右に見出しと本文、線画スタッフ。
6. 数字で見る（待遇・実績を数値で示す）: 白い数字カードを格子に並べ、ピンクラベルと線画アイコン。
7. 教育体制（研修内容を具体化する）: 透かし欧文見出し、大きな写真、3枚の写真付き研修カード、月別カリキュラム表。
8. 社内体制（キャリア・給与・福利厚生）（長く働ける制度を示す）: 制度ごとの大きな白カード。縦書き欧文、カプセル写真、ステップ図、給与パネル、アイコン付き福利厚生。
9. スタッフインタビュー（先輩の声で共感を生む）: アーチ型写真の中央に全身人物、左右に次の人物、グラデーションの丸ボタンのスライダー。
10. クロージング（応募意欲を高める）: 全幅写真に白い欧文の大コピーと短い和文。
11. 募集要項（条件を正確に伝える）: 左に見出しと雇用形態タブ、右に罫線の2列表。
12. 応募・問い合わせ（電話・チャットでの応募に誘導）: 楕円カーブのグラデーション面に横に流れる欧文、ピンクのピル型ボタン2本、スタッフの集合写真。

Imagery

• 写真は自然光の明るいハイキーで、肌がやわらかく見える美容人物写真。
• 施術・研修中のスタッフをやや寄りで撮り、背景は白〜水色。
• スタッフは黒いユニフォームの全身を切り抜いて配置。
• 細い黒の線画イラストで人物や職場の流れを描く。
• アイコンは細線のモノトーン線画。
• 背景には水彩のような光のぼかしを重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央 約60% 幅のカード、SPは 90% 幅の1カラムにする。
• 左右に分けた写真と文字は、SPでは写真を上・文字を下に積む。
• 数字カードはPC 4列→SP 2列。
• 給与パネルはPC 3列横並び→SPは横並びを保ち数字を小さくするか縦に積む。
• 大きな欧文はSPで 40〜48px に縮め、横にはみ出してよい。
• 募集要項の表は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 行書くと起動時に読み込まれる。