DESIGN.md — ミント×ラベンダーの淡色転職支援 LP（Soft Mint Lavender Career Support LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: 淡いミント・ラベンダーグラデ・透かし英字見出し・大きな数字・LINE 相談・女性向け
• 地の質感: マットでフラット。背景にぼかした色玉や線画イラストを薄く散らし、空気感を出す
• 形: 角丸はほぼ使わない直線的な枠と細線フレーム。ボタンだけピル型、悩みは正円で囲む
• 温度感: やや涼しげ。ミントとラベンダーの寒色寄りパステルを、温かい人物写真で中和する

Colors

• 地は白とグレージュを交互に置き、セクションの区切りを色面で示す
• ミントとラベンダーはグラデーションで混ぜて、英字見出しや帯、矢印に使う
• 強調したい本文はミントの太字で示す。もう一つの話題ではラベンダー寄りの青紫を使う
• CTA は必ず藍紫の全幅帯の中に白カードを置き、緑のボタンを載せる
• 濃い色は追従バーの濃紺だけにして、全体はパステルで明るく保つ
• button-line は文字 #FFFFFF × 背景 #53AF6E のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#3D8351、4.6:1）を使う。
• cta-band は文字 #2A2A2A × 背景 #7B85BD のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#858EC2、4.54:1）を使う。

Typography

• セクション名は大きな細身セリフの英字をグラデーションで薄く置き、下に日本語の太字見出しを重ねる
• 実績の数字だけ 2〜3 倍の大きさにして、色をミントかラベンダーにする
• メリットの番号は細身サンセリフの大きな 2 桁数字にし、横に明朝の見出しを置く
• 本文は小さめの 12px で行間を広く取る
• 英字の小ラベルは角かっこで挟んで添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せの 1 カラムで、ポイントと声だけ 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右 12〜16px の余白を残して全幅に近い幅にする
• 悩みは正円 3 つを横に並べる
• CTA ブロックは同じ型でページ内に 3〜4 回繰り返す
• メリットは番号、見出し、本文 2 段落の順に縦に積む
• 見出しと本文の間は 24px 前後あける

Elevation & Depth

• 影はほとんど使わず、フラットな面と枠線で階層を作る
• 声のカードは白い太枠の中に色面を入れて浮かせる
• 背景のぼかし色玉で奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。
• 写真の切り抜き: 四角の全幅か、カード上部の横長。相談者のアイコンだけ正円
• セクション境界: 直線で色面を切り替える。下向きの三角矢印で話をつなぐ
• ポイントカードは太い淡色フレームの四角にする
• FV のキーワードは細い四角枠で囲む
• 締めのメッセージは四隅を斜めに切った額縁枠にする
• FAQ の開閉ボタンは小さな正方形で、中に＋を置く

Components

• LINE 相談ボタン（button-line）: 緑のピル型ボタン。左に LINE アイコン、白の太字
• CTA 帯ブロック（cta-band）: 藍紫の全幅帯の上に白カード。かっこで挟んだ見出し、短い説明、緑の強調コピー、ボタンの順に並べる
• 実績ポイントカード（point-card）: 淡いミントかラベンダーの太枠に、セリフの POINT 番号と大きな数字を入れる
• 悩み円（worry-circle）: 細い黒線の正円の中に、悩みを短い 2 行で書く
• 悩み解決ボックス（solution-box）: 色帯の見出し付きの枠ボックス。下にロゴ入りタブと薄い色面の解決文を置く
• お客様の声カード（voice-card）: 白枠の中に上は写真、下はミントの面。VOICE 番号、太字の見出し、本文、右下に名前と年齢
• FAQ 行（faq-item）: グラデーションの Q 四角と質問文、右端に＋の正方形ボタン
• 追従 CTA バー（sticky-bar）: 画面下に固定する濃紺のバー。かっこ付きのコピーと緑のボタン

Do's and Don'ts

Do - 英字のセクション名はミントからラベンダーへの淡いグラデーションで大きく置く - 実績は数字だけを大きく色付けし、単位や前後の言葉は小さくする - 悩みは人物アイコンと明朝の吹き出し文で出し、すぐ下に解決ボックスを置く - CTA は同じデザインのまま繰り返し、迷わせない - 写真は明るく自然光で、笑顔の女性を使う

Don't - 原色や濃いグラデーションを広い面に使わない - 角丸の大きいカードや強い影を使わない - 本文を太字だらけにしない。強調は 1 段落に 1 か所まで - 黒い背景のセクションを入れない（濃い色は追従バーだけ） - 派手な装飾フォントは使わない

Page Structure

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

1. ファーストビュー（対象者とサービスを一目で伝える）: 明るいオフィスで笑う女性の写真の上に、枠付きキーワードの大きなコピーと月桂樹の実績バッジを置く
2. 悩みの提起（対象者の不安に共感する）: 明朝の大きな見出し、悩みの正円 3 つ、縦のグラデーション帯、かっこ枠の応援メッセージ
3. ポイント（実績を数字で示す）: 淡い太枠のカードを 3 つ縦に並べ、セリフの番号と大きな数字を入れる
4. CTA（LINE 相談へ誘導する）: 藍紫の帯に白カードと緑のピルボタン
5. メリット（転職で得られるメリットを説明する）: 写真の帯見出しのあと、大きな番号、グラデーション下線付きの明朝見出し、本文を 3 回繰り返す
6. サポート内容（支援の中身を伝える）: 全幅写真とグレージュの地に、透かしの英字と短い本文
7. 不安の解消（よくある不安に答える）: 線画イラストを散らしたミントの地に、人物アイコンと吹き出し、三角矢印、解決ボックスを並べる
8. 職種紹介（働ける仕事の例を示す）: ラベンダーの地に番号と職種名、写真のスライダーを置く
9. お客様の声（体験談で信頼を高める）: グレージュの地に、写真とミントの面を組んだ声カードを 3 枚、最後に額縁枠のメッセージ
10. よくある質問（最後の疑問を解消する）: ぼかし色玉の背景に、Q 四角と＋ボタンのアコーディオン
11. 最終 CTA（申し込みを後押しする）: 藍紫の CTA 帯と、濃紺の追従バー

Imagery

• 20〜30 代女性の明るい笑顔の写真。白やベージュの服で、自然光のオフィスやカフェで撮る
• 相談している場面は暖色の室内で、横顔を入れて対話感を出す
• 背景は白飛び気味のハイキーにして、淡い配色になじませる
• 地には服や小物の細い線画イラストを薄いミントで散らす
• ミントやラベンダーのぼかし円を背景の飾りに置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅のコンテンツにし、左右に余白とぼかし色玉を見せる
• PC の FV は写真を全幅にし、右側に LINE 相談カードを重ねる
• PC ではポイントと声のカードを 3 列に並べる
• PC ではメリットを番号と本文の 2 列にする
• PC は右上に追従 CTA を置く。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 行書くと起動時に読み込まれる。