DESIGN.md — ミント緑×オレンジの爽やか採用サイト制作 LP（Fresh Mint Green and Orange Recruiting Web Production LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ミントグリーン・オレンジCTA・白カード・英字透かし・グラデーション帯・制作実績モックアップ
• 地の質感: フラットな面に、ごく淡いグラデーションと柔らかい影。紙っぽさはなくデジタルで清潔な質感
• 形: 角丸12〜16pxのカードとピル型ボタン。区切りは直線で、一部にV字の切り込み
• 温度感: やや涼しげ。緑の爽やかさにオレンジで温かさを足す

Colors

• 地はミント淡色と白を交互に使い、セクションの切り替えを示す
• 課題解決の帯だけ緑グラデーションを全幅で敷き、白カードを載せる
• CTA帯はオレンジのグラデーションを全幅で敷き、中に白カードと2つのボタンを置く
• 主CTAはオレンジ、サブCTAは緑のグラデーションにして役割を分ける
• 見出しの一部の語句だけ緑かオレンジにして強調する
• 英字の透かし見出しは背景よりわずかに濃い淡緑にする
• button-primary は文字 #FFFFFF × 背景 #D2803B のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AB6427、4.58:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #36C49A のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#248468、4.59:1）を使う。
• cta-band は文字 #FFFFFF × 背景 #D2803B のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AB6427、4.58:1）を使う。

Typography

• 全体を太めのゴシックで統一し、字間を0.06〜0.12em広めにとる
• セクション見出しは中央揃えにし、背後に大きな淡い英字を重ねる
• 番号は緑の太い欧文数字（01, 02…）にする
• 強調語は色変えとマーカー下線で示し、本文の太字は控えめにする
• 本文は行間1.9前後でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サービスと制作実績は縦積みのカードリスト
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約18pxの余白を残して配置する
• セクション見出しの上下は40〜56px空ける
• 強みブロックは写真→番号付き見出し→本文の順で縦積みにし、淡緑の線で区切る
• CTA帯はページ内に3〜4回繰り返す
• フローはカードの背後に縦の淡緑ラインを通し、つながりを見せる

Elevation & Depth

• 白カードには緑みのごく薄い大きめの影（0 4px 16px rgba(60,160,120,0.08)）
• ボタンは影なしか、ごく弱い影
• 悩みカードとFAQの行は影なしの淡色フラット面

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸12pxの長方形。制作実績はサイトのスクリーンショットを斜めに並べたモックアップ
• セクション境界: 基本は直線で切り替え。課題解決の帯の上端だけV字の切り込みを入れる
• 主要ボタンと工程のチップはすべてピル型にする
• カードは角丸12〜16pxで統一する
• 見出しラベルは白の角丸ボックスを緑の線で囲む

Components

• 主CTAボタン（button-primary）: オレンジのグラデーションに白文字のピル型ボタン
• サブCTAボタン（button-secondary）: 緑のグラデーションのピル型ボタン。見積もり依頼用
• CTA帯（cta-band）: オレンジ全幅の帯に白い2行コピーを置き、白カード内に限定特典の一文と2つのボタンを縦に並べる
• 英字透かし見出し（heading-watermark）: 中央の和文見出しの背後に大きな淡緑の英字を重ねる
• 悩みカード（problem-card）: 淡いグレー緑の角丸面に中央揃えの2行テキスト。左上に緑の引用符
• メリットカード（merit-card）: 白い大きなカードに、縦書きの英字番号・緑とオレンジのアイコン・マーカー付き見出し・本文を並べる
• サービス行カード（service-item）: 白い角丸の行に、左に緑の線画アイコン、右にマーカー付きの太字名称
• フローカード（flow-step）: 緑の大きな番号を左上にはみ出して置き、白カードに緑の見出しと本文。無料範囲の終わりにオレンジのラベル帯
• FAQアコーディオン（faq-item）: 淡緑の行に白丸に入った緑のQと緑の山形矢印。開くと白地に白丸のオレンジAを表示
• 工程チップ（process-chip）: 白いピル型に中央揃えの工程名。最終工程は王冠アイコンとオレンジ文字

Do's and Don'ts

Do - 地はミントと白を交互に使い、強い色は緑帯とオレンジのCTA帯にだけ使う - 見出しは中央揃えにし、背後に淡い英字を重ねる - 情報は白い角丸カードにまとめ、余白を広くとる - CTAはオレンジと緑の2つを縦に並べ、特典の一文を添える - アイコンは緑を主に、オレンジを差し色にしたフラットな線画か面で描く

Don't - 濃い紺や黒の面を広く使わない - 明朝体や細すぎる書体を使わない - 角張った四角ボタンを使わない - オレンジを本文の大部分や面積の広い面に使わない - 強い影や立体的な装飾を入れない

Page Structure

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

1. ファーストビュー（サービスの価値とすぐ相談できる導線を示す）: ミントのグラデーション地に左揃えの2行キャッチ（一部を緑で強調）、下線付きのサブコピー、オレンジのピルCTA。下に制作実績の画面を斜めに並べたモックアップ
2. 悩みの提起（ターゲットの課題に共感を示す）: 白地に英字透かしと中央見出し。引用符付きの淡色カードで悩みを3つ並べる
3. 解決策・メリット（サービスで課題が解決できると示す）: 上端がV字の緑グラデーション帯に白文字の見出し。白い大カードに、アイコン付きのメリット3つと淡緑の補足ボックスを入れる
4. 強み（選ばれる理由を実績と姿勢で示す）: ミント地に、写真・淡い番号・一部オレンジの見出し・本文のセットを3つ、線で区切って並べる。受賞バッジも添える
5. CTA（相談・見積もりへ誘導する）: オレンジ帯に白いコピーと白カード。限定割引の一文とオレンジ・緑のボタン2つ
6. サービス一覧（対応できる範囲を示す）: アイコン付きの白い行カードを6つ縦に並べ、下に説明文
7. 制作実績（デザインの品質を見せる）: サイトのスクリーンショットを角丸カードにして縦に並べる
8. 発注までの流れ（手順を見せて不安をなくす）: 縦ラインで結んだ番号付きの白カード。無料範囲の終わりにオレンジのラベル、発注のステップは緑の面、その後の工程はピル型チップで縦に並べる
9. よくある質問（疑問を解消する）: 白地にQとAのアコーディオンを6つ
10. コラム（専門性を示し、検討を後押しする）: 色のグラデーション枠のサムネイルカードとタイトルを縦に並べる
11. 最終CTA（最後に問い合わせを促す）: 上と同じオレンジ帯のCTAを繰り返す

Imagery

• 自然光の明るいオフィスで、打ち合わせやPC作業をする人物写真。手元や口元に寄った構図で、顔は見切ってもよい
• Webサイトの画面を角丸カードにし、斜めに傾けて重ねたモックアップ
• アイコンは緑のグラデーションを主にし、オレンジのきらめきや矢印を添えたフラットなもの
• コラムのサムネイルは、ノート風の白い枠に手描きの人物イラストと太字タイトル。外枠を色のグラデーションにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは上部に白いピル型のナビゲーションと右上のオレンジCTAを固定する
• PCのFVはキャッチを左に置き、右側いっぱいに斜めのモックアップを敷き詰める
• 悩みカードとメリットは3列、サービスは3列×2段、制作実績は3列のグリッドにする
• 強みは写真と本文を左右に並べる
• CTA帯の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 行書くと起動時に読み込まれる。