DESIGN.md — ラベンダー地×職種別ビビッドカラーの美容系採用LP（Pastel Lavender Multicolor Beauty Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、ポップ・元気、やさしい・柔らかい
• キーワード: ラベンダー地・職種別カラー・三角形モチーフ・グラデーション英字見出し・すりガラスカード・女性スタッフ写真
• 地の質感: フラットな淡色地に、ぼかしたピンク・紫のグラデーション光と半透明の三角形を重ねた柔らかな質感
• 形: 角丸の大きいカード、ピル型ボタン、斜めの三角形や平行四辺形の装飾
• 温度感: やや寒色寄りのラベンダーに暖色ピンクを差した中間的で明るい温度感

Colors

• 地は淡いラベンダーと白を交互に使い、セクションを区切る
• 募集職種は1職種1色のビビッド面にし、色で職種を識別させる
• 職種カード内のボタンは同系色の濃いグラデーションのピル型にする
• 英字見出しはピンク〜紫のグラデーションかパステル単色で塗る
• 主CTAだけをイエローにし、他の要素に黄色を使わない
• 代表メッセージはマゼンタ全面、応募フォームは紫全面で強く締める
• 本文は真っ黒を避け濃いグレーで柔らかくする
• job-card は文字 #FFFFFF × 背景 #EA8933 のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B45E13、4.61:1）を使う。
• button-job は文字 #FFFFFF × 背景 #EE5DC2 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DB179F、4.53:1）を使う。

Typography

• 英字大見出しの右下に日本語の小ラベルを並べる
• 日本語は字間を0.1em前後に広くとる
• 背景に薄い巨大英字を帯状に流して装飾にする
• 数字は大きくピンクで、単位は少し小さくする
• 本文は行間1.9程度でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種カードはテキスト左・人物写真右の重ね配置
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 職種カードは上を角丸にして少しずつ重ね、縦に積み上げる
• 本文ブロックは左寄せで左右に約24pxの余白をとる
• カードは画面右端に寄せたり、はみ出したりして動きを出す
• 会社概要は項目名と値の2列表にし、縦線で区切る

Elevation & Depth

• すりガラス風カードはごく薄い大きめのぼかし影で浮かせる
• FAQ項目は影なしの白い角丸面
• フォームのCTAは平行四辺形にし、ずらした半透明の面を重ねて立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きでカードからはみ出させ、社員の声は三角形でマスクする
• セクション境界: 直線で区切り、半透明の三角形をまたがせて重ねる
• 装飾は三角形と斜めの線を中心にする
• カードは上だけ大きな角丸にしてタブ状に重ねる
• イベント写真は斜めにずらしてコラージュ状に並べる

Components

• 職種別カラーカード（job-card）: 英字小ラベル・職種名・短い説明・ボタンを左に、切り抜き人物を右に置くビビッド単色カード
• 募集要項ボタン（button-job）: 同系色の濃いグラデーションのピル型。右端に白丸と矢印を付ける
• 応募CTA（button-primary）: イエローの平行四辺形ボタン。上に黒い吹き出しの短いラベルを載せる
• 英字グラデ見出し（heading-en）: 大きな英字をグラデーションで塗り、右下に日本語の小ラベルを置く
• 悩みチェックリスト（check-list）: チェックアイコンと鉤括弧付きの短文を4行並べる
• 福利厚生アイテム（benefit-item）: 白丸の中に紫のアイコン、右に見出し・下線・説明を置く
• 数字強調サークル（stat-circle）: 細い円弧の中に年度・大きな数字・注釈を中央揃えで置き、背景をピンクでぼかす
• FAQアコーディオン（faq-item）: 白い角丸バーに「Q.」付きの質問と右端のシェブロン

Do's and Don'ts

Do - 職種ごとに異なるビビッドな色を割り当てる - 淡いラベンダー地にピンク・紫のぼかしを散らす - 英字見出しと日本語ラベルを必ず組み合わせる - 人物は明るい笑顔の切り抜き写真をカードからはみ出させる - 三角形の半透明装飾を要所に重ねる

Don't - 黒や濃紺の重い背景を広く使わない - CTAイエローを装飾に流用しない - 角張ったボックスだけの硬いレイアウトにしない - 明朝体を使わない - 字間を詰めた窮屈な本文にしない

Page Structure

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

1. ファーストビュー（採用メッセージと主力の募集職種を印象づける）: 大きな太字キャッチの下に、オレンジの三角形を重ねた人物スライダーと斜めの職種帯を置く
2. 共感の提起（経験者の想いを言語化する）: 中見出しの下にチェック付きの短文を4行並べ、背景に巨大英字を流す
3. 募集職種一覧（職種を色分けして選ばせる）: 6色の職種カードを上角丸で重ねて縦に積む
4. 会社の現状（成長フェーズと採用背景を伝える）: 写真コラージュ、紫の大英字、白マーカー付きのリード文
5. 理念（価値観を共有する）: すりガラスの大カードにグラデ英字見出し、ハート形スライダー、本文
6. 社内イベント（職場の楽しさを見せる）: 白い角丸カードに英字見出しと、写真を斜めに並べたコラージュ
7. 福利厚生（待遇を伝える）: 白地にアイコン丸と見出し・下線・説明のリスト
8. 働き方（休日数で安心感を出す）: リード文と、円弧で囲んだピンクの大きな数字
9. 社員の声（入社後の姿を想像させる）: 三角形にマスクした写真に年次・職種と短いコメントを添える
10. 代表メッセージ（トップの想いを伝える）: マゼンタ全面に白の太字本文、下に代表の写真
11. 会社概要（企業情報の提示）: 白地にリード文と、紫の項目名を置いた2列表
12. よくある質問（応募前の不安を解消する）: ラベンダー地に白いアコーディオンを縦に並べる
13. 応募フォーム（応募へ誘導する）: 紫全面に英字見出しとイエローの平行四辺形CTA

Imagery

• 白衣やジャケットの女性スタッフを明るい自然光で撮り、笑顔の切り抜きにする
• 職種ごとに同じ構図のバストアップをそろえる
• イベント写真はパーティーや旅行の集合写真を斜めのコラージュにする
• 半透明の三角形、細い斜線、ピンク・紫の円形ぼかしを装飾に使う
• アイコンは紫の単色ベタのシンプルな形にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで最大幅約1100pxにする
• PCの職種カードはテキスト・人物切り抜き・職場写真の3要素を横に並べる
• PCのFVは左にキャッチ、右に人物ビジュアルを置く2カラム
• PCのFAQは3列グリッドに並べる
• PCの会社概要は左にリードと写真、右に表の2カラム
• 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 行書くと起動時に読み込まれる。