DESIGN.md — 深緑×ライムの清潔な転職支援 LP（Fresh Lime Green Career Support LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、シンプル・ミニマル
• キーワード: 深緑・ライムグリーン・白カード・英字ラベル・オフィス写真・無料訴求
• 地の質感: フラットな面に淡い影。濃色セクションは中央が少し明るい深緑のビネット
• 形: 角丸8〜12px のカード、円形の番号バッジ、ピル型タグ
• 温度感: やや爽やかで落ち着いた中間温度

Colors

• 地は白と淡い若草色をセクションごとに交互に切り替える
• 濃い深緑は結論ブロック・比較表・最終CTA・フッターに限定する
• 見出しの1語だけをライムまたは濃い緑で色替えする
• ライムは CTA・番号・チェックアイコン・英字ラベル前の短線に使う
• 濃色地の上ではライムを強調語に使い、白文字と組む
• 比較表は自社列だけを少し明るい緑面にして目立たせる

Typography

• 見出しは極太ゴシックにし、句点「。」で言い切る
• 見出しの上に、短い緑線と大文字の英字ラベルを置く
• 本文は行間を約2倍と広めにし、灰緑の文字色にする
• 数字（番号・金額）は欧文太字で大きくする
• 見出しはセンター揃えと左揃えをセクションごとに使い分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦積み
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約14px で、カードはほぼ全幅に置く
• セクションの上下には80〜100px の余白をとる
• 特長はカード＋記号（＋・＝）でつないで式のように見せる
• ステップは大きな番号と細い区切り線で並べる
• 比較表は横スクロールにする

Elevation & Depth

• カードは淡い緑みの大きなぼかし影（0 10px 30px rgba(60,90,20,.08)）をつける
• 結論ブロックの深緑カードには、やや強い影をつける
• CTA ボタンはライムの柔らかい発光影をつける
• 画面モックは薄い枠と影でブラウザ風に浮かせる

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸8px の横長長方形で、カード上部に収める
• セクション境界: 直線で背景色だけを切り替える
• CTA ボタンは角丸8px の長方形にする
• タグ・バッジはピル型にする
• 番号は円形の塗りバッジにする
• FAQ の開閉アイコンは淡緑の円に＋を入れる

Components

• 主 CTA ボタン（button-primary）: ライムの面に黒太字と右矢印を置く。発光影つき
• 追従 CTA バー（sticky-cta）: 画面下に固定するほぼ全幅のライムボタン
• 英字ラベル（eyebrow-label）: 短い緑線＋大文字英字。見出しの上に置く
• 写真カード（photo-card）: 白カードの中に角丸写真・太字見出し・本文を入れる。中央揃え
• 円形番号（number-badge）: 直径約48px の円にライムの欧文数字を入れる。白地では深緑、または緑塗りに黒字
• 結論ブロック（result-block）: 深緑のカードに白見出しを置き、数字だけライムにする
• ピルタグ（pill-tag）: 淡緑の面に濃緑の太字を入れる。カテゴリや増加額の表示に使う
• 比較表（compare-table）: 深緑地で、自社列を明るい緑面にする。丸印＋短文で横スクロール
• FAQ 行（faq-row）: 太字の質問、右に＋円、下に細線
• 画面モック（browser-mock）: 灰色バーに3つの丸を並べたブラウザ枠。中にサービス画面を表示する

Do's and Don'ts

Do - 白と若草色の地を交互にしてリズムを作る - 見出しの1語だけを緑にして要点を示す - 英字ラベル＋句点止めの見出しで、各セクションを統一する - 写真は明るいオフィスで自然光のトーンにそろえる - 無料や金額は大きな欧文数字で見せる - 注釈は灰色の小さな文字で必ず添える

Don't - 赤や橙など、緑系以外の強調色を使わない - 濃色セクションを連続させない（要所だけに置く） - カードに太い枠や濃い影をつけない - 明朝体や丸ゴシックを混ぜない - ボタンをピル型や細い線だけのボタンにしない - 写真に強いフィルターや派手な加工をかけない

Page Structure

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

1. ファーストビュー（無料の価値を一言で伝える）: 暗い緑を重ねたオフィス写真の上に、白の極太見出しを置き最後の語をライムにする。ピルバッジとチェック4項目、注釈を添える
2. 無料の理由（無料への疑問を解消する）: 白地。写真カード2枚を＋と＝でつなぎ、深緑の結論ブロックで締める
3. 無料で使える内容（提供機能を具体的に見せる）: 若草色の大枠の中に、円番号＋見出し＋画面モックを3つ並べる。最後に打消し価格→0の比較カード
4. サービス紹介・対象者（共感を得る）: 若草地に左揃えの見出しを置く。写真カード4枚で悩み型の見出しを並べる
5. 今必要な理由（時代背景で動機づける）: 白地。深緑の円番号つき写真カードを3つ並べる
6. 選ばれる理由（強みを示す）: 若草地。小番号＋大見出し＋本文＋写真を区切り線で3つ並べる
7. ご利用の流れ（手順を簡潔に示す）: 白地。大きなライム数字と短い見出しを細線で区切って4段にする
8. 他社比較（優位性を示す）: 深緑地の比較表。自社列を明るくし、ライムの丸印をつける
9. 追加特典（成約後の価値を伝える）: 若草地。ピルラベルつきの白カード2枚を下矢印でつなぐ
10. 学習ツール紹介（サービス内容を見せる）: 白地。左揃えの見出しの下に、緑太字の強調文・ピルタグ群・ブラウザモックを置く
11. キャリア事例（成果のイメージを伝える）: 線画人物アイコン＋前職→新職＋打消し年収→大きな年収＋増加額ピルのカードを並べる
12. よくある質問（不安を解消する）: 白地。細線区切りのアコーディオンに＋円アイコンをつける
13. 最終CTA・フッター（申込を促す）: 深緑のビネット地に白とライムの見出し、ライムのボタンを置く。フッターは黒緑地で英字見出しのメニュー

Imagery

• 明るい自然光のオフィスで、観葉植物と木のデスクを入れる
• スーツやジャケット姿の20〜30代男女が、相談やPC作業をしている自然なシーン
• 小物に緑のノートや植物を入れ、ブランドの緑となじませる
• サービス画面はブラウザ枠つきのスクリーンショットで見せる
• 事例の人物は細い線画で、服の一部だけをライムで塗る
• FV 写真には深緑の半透明レイヤーを重ねて文字を読みやすくする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにナビとライムの小さい CTA を並べる
• PC の FV は左に文字、右に人物写真を置き、チェック項目は2列にする
• 無料の理由は、カード2枚＋結論ブロックを横一列の式にする
• 対象者は4列、時代背景と事例は3列のカードグリッドにする
• 選ばれる理由は写真と文字を左右交互に置く
• 比較表とステップは 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 行書くと起動時に読み込まれる。