DESIGN.md — 深緑×淡ミントの爽やか就職フェア LP（Fresh Green Online Job Fair LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、ポップ・元気、情報量多め・訴求型
• キーワード: 深緑・淡ミントのグラデーション地・白カード・吹き出し・線画アイコン・グラデーション CTA
• 地の質感: 淡いミント〜グレーのグラデーションに斜めの光の帯を重ねる。全体はフラットで、カードの影はごく軽い
• 形: 角丸カード（12〜16px）、ピル型ボタン、円形の番号バッジ、カードの右下にずらした色帯
• 温度感: 爽やかで少し涼しい。CTA の暖色だけが温かいアクセント

Colors

• 地は淡ミントのグラデーション、薄グレー、深緑の 3 つを交互に使う
• 見出しと番号・アイコンは深緑 1 色にそろえる
• 申込 CTA だけ赤→黄のグラデにして目立たせる
• サブボタンはティール単色か、ティール→緑のグラデ
• 体験談と FAQ は深緑の地に白文字・白カードで見せる
• 詳細カードは番号ごとにティール・緑・ミントの色帯を変える
• button-primary は文字 #FFFFFF × 背景 #FF4546 のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#ED0001、4.56:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #55BABA のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#348181、4.56:1）を使う。
• date-band は文字 #FDEF04 × 背景 #019573 のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#01795D、4.5:1）を使う。
• feature-card は文字 #019573 × 背景 #FFFFFF のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#01795D、4.56:1）を使う。
• flow-step は文字 #7F7F7F × 背景 #FFFFFF のコントラスト比が 4.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。
• faq-item は文字 #7F7F7F × 背景 #FFFFFF のコントラスト比が 4.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 見出しは太いゴシックで中央ぞろえ、深緑の文字
• 本文は小さめにして行間を広くとる（1.8 以上）
• 番号付きカードは、大きな淡色の番号に見出しを重ね、下に英字ラベルを置く
• 日付は黄色の大きな数字に、曜日を丸で囲んで添える
• グレーの見出しは字間を広げて、やわらかい印象にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。企業紹介は横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面幅の約 90% で中央に置く
• 詳細カードの中のフローは枠線ボックスを縦に並べ、▼でつなぐ
• セクション見出しの上下に 32〜40px の余白をとる
• 体験談は丸囲みのキャッチと人物イラストを左右に並べる
• 画面下に申込とサブボタンを並べた固定バーを置く

Elevation & Depth

• 白カードはごく薄い影か、影なし
• 詳細カードは右下にずらした色帯でオフセット影のように見せる
• フローの枠は影なしで、2px のグレー線
• FV の端末型写真フレームに薄い白縁と軽い影

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真はスマホ・端末型の角丸フレームで、少し傾けて切り抜く
• セクション境界: 直線で地の色を切り替える。淡地には斜めの光の帯を入れる
• ボタンはすべてピル型で、右端に白丸の矢印を置く
• 番号は円の線で囲む
• FAQ は角丸なしの白い帯
• 対象者ボックスは緑の太枠に、見出しの帯を重ねる

Components

• 申込 CTA（button-primary）: 赤→黄のグラデのピル。右端に白丸の矢印
• 企業検索ボタン（button-secondary）: ティール単色のピルに白丸の矢印
• 開催期間の帯（date-band）: 深緑の地に黄色の大きな日付。下に赤いピルで参加規模を示す
• 特徴カード（feature-card）: 白の角丸カード。円枠の番号、緑の線画アイコン、見出し、区切り線、説明の順
• 番号付き詳細カード（detail-card）: 白カードの右と下に色帯をずらして置く。左上に淡色の大きな番号と英字ラベル
• フローステップ（flow-step）: グレー線の角丸ボックスに、見出し・区切り線・説明。間を▼でつなぐ
• 対象者ボックス（target-box）: 緑の太枠に、緑の見出し帯をはみ出させて重ねる
• FAQ アコーディオン（faq-item）: 深緑の地に白い帯を並べ、右端に円の＋アイコン
• 丸囲みキャッチ（catch-circle）: 体験談の白線の円の中に、短いキャッチを白文字で入れる
• 固定 CTA バー（sticky-cta-bar）: 画面下に、サブボタンと申込ボタンを半分ずつ並べる

Do's and Don'ts

Do - 見出しとアイコンは深緑 1 色にそろえる - 申込ボタンだけ暖色のグラデにする - 情報はカードやボックスで区切り、白の余白を多めにとる - 人物は線画風のフラットなイラストで、親しみを出す - ステップは▼でつないで、流れを見せる

Don't - 深緑以外の濃い色を見出しに使わない - CTA 以外に赤や黄の面を多用しない - 角の鋭い四角いボタンにしない - 本文を太く大きくしすぎて詰めない - 写真に強いフィルターをかけない

Page Structure

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

1. ファーストビュー（驚きの一言でつかみ、イベントの概要を伝える）: 淡ミントの地に、白い吹き出しと深緑の巨大な感嘆文字。下に短いキャッチと、傾けた端末型の人物写真 3 枚
2. 開催情報の帯（開催期間と参加規模を示す）: 深緑の全幅帯にロゴ、黄色の日付、赤いピルの規模表示
3. 参加特典バナー（支援制度へ誘導する）: 紺のバナーに黄色の吹き出し見出し、下にティールの詳細帯
4. イベント紹介（イベントの内容と対象者を説明する）: 中央ぞろえの緑見出しとグレー本文。緑の太枠の対象者ボックス
5. 3つの特徴（参加するメリットを示す）: 番号と線画アイコンの白カードを縦に 3 枚（PC は横 3 列）
6. 紹介動画（短い動画で使い方を伝える）: 緑見出しの下に、16:9 の動画埋め込み
7. 機能の詳細（3 枚）（各機能の説明と流れを伝える）: 薄グレー地に、色帯をずらした番号付きの白カード。中にフローと CTA
8. 企業ピックアップ（参加企業の例を見せる）: 淡ミント地に、白カードの横カルーセル。左右に丸い矢印
9. 参加者の事例（体験談で安心してもらう）: 深緑地に白文字。丸囲みのキャッチと人物イラスト、Q&A 形式の本文
10. よくある質問（不安を解消する）: 深緑地に、白い帯のアコーディオンを縦に並べる
11. 最終 CTA（申込を促す）: 白い角丸枠の中に、見出しの帯、喜ぶ人物のイラスト、グラデ CTA、特典バナー
12. フッター（関連サイトと問い合わせ先を示す）: 濃緑の地に、関連バナー、白ロゴ、半透明の問い合わせボックス

Imagery

• 人物写真は明るいオフィスや現場の自然光で撮った笑顔。端末型の角丸フレームに入れる
• イラストは紺・白・グレーの細い線画風の人物で、フラットに塗る
• アイコンは深緑 1 色のピクトグラム（PC 作業・階段・握手など）
• 背景は淡ミントのグラデーションに、白い斜めの光の帯
• 強調には集中線やきらめきの短い線を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% の幅に収め、特徴カードは横 3 列にする
• PC の FV は横長にし、感嘆文字の左右に写真を散らす
• PC ではヘッダーの右上に、サブボタンと申込ボタンを常に置く
• PC の詳細カードはフローの横にイラストを添える
• PC の体験談はイラスト左・本文右の 2 カラム
• SP は画面下に CTA 固定バーを出す

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 行書くと起動時に読み込まれる。