DESIGN.md — 黄緑×オレンジの元気な人材サービス LP（Fresh Lime Pop Staffing Service LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、清潔・爽やか
• キーワード: 黄緑・ライム地・吹き出し・スタッフ写真・太字丸ゴシック・オレンジ強調
• 地の質感: 白地に細かいドット柄、淡いストライプのファーストビュー。グラデーションは使わないフラットな塗り。
• 形: 四角いカード（角丸なし）に黄緑の太枠。雲形の吹き出しとキラキラの線画アイコン。逆三角のつなぎ。
• 温度感: 明るく暖かい。黄緑の爽やかさにオレンジと黄色を足して元気な印象。

Colors

• 地の色は白（ドット柄）と淡いライムを交互に切り替えて、セクションの境目を示す。
• 黄緑は見出し帯、カードの太枠、番号タブ、電話番号に使う。
• オレンジは数字やキーワードなど、一番強調したい語に限る。
• 黄色マーカーは本文中の要点の背景に引く。
• フォーム送信だけ赤い CTA にして、緑系の中で目立たせる。
• 本文は濃いグレーにし、純黒は使わない。

Typography

• 見出しは極太の丸ゴシックにし、点線の下線を付ける。
• 見出しの中の一部の語を黄緑またはオレンジにする。
• 数字は周りの文字の 1.5〜2 倍の大きさにして目立たせる。
• 吹き出しの文字は少し傾けて手書き風にする。
• 本文は行間を広めの 1.9 にし、左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種カードだけ 2 カラム。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地の色を切り替えて全幅で区切る。
• 見出しは中央、本文は左揃えにする。
• 特長は番号付きの横長カードを縦に 4 枚並べる。
• フローはカードの間に下向きの山形矢印を挟む。
• エリア一覧は黄緑の帯見出しと細い区切り線のリストにし、白いカードに拠点をまとめる。

Elevation & Depth

• 影はほぼ使わず、フラットな塗りと枠線で階層を表す。
• 写真の一部には濃いグレーの太枠と少しの傾きを付ける。
• カードは白面と黄緑の太枠（4〜5px）で地から浮かせる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きで地に直接置く。職種写真は四角くトリミングする。
• セクション境界: 直線で区切る。FV の下だけ黄緑の逆三角形のつなぎを置く。
• カードは角丸なしの四角にする。
• 番号タブは左上に斜めカットした黄緑の三角タブにする。
• 吹き出しは雲形で、黄緑の線か白い塗りにする。
• 送信ボタンだけピル型にする。

Components

• 番号付き特長カード（feature-card-numbered）: 白面に黄緑の太枠。左上に番号タブ、左に黄緑のアイコン、右に太字の見出しとオレンジの数字。
• 雲形吹き出し（speech-cloud）: 人物写真の横に添える短い一言。白い塗りに黄緑の線で、一部の語をオレンジにする。
• 点線下線の見出し（heading-dotted）: 極太の丸ゴシックの下に点線を引く。星やキラキラの線画を添える。
• 職種カード（category-card）: 上に黄緑の帯見出し、中に写真、下に黄緑の■を付けた箇条書き。
• 料金表（price-table）: 見出し行を黄緑塗りの白文字にし、外枠と罫線も黄緑にした 2 列の表。
• フローカード（flow-step）: 白いカードの中央に黄緑の見出し、左に線画アイコン、右に説明文。間に山形の矢印を挟む。
• 送信ボタン（button-primary）: 赤いピル型ボタン。白文字で右に矢印。
• エリア帯見出し（area-band）: 全幅の黄緑帯に白文字を左寄せ。下に都道府県ごとのリストを細線で区切って並べる。
• 黄色マーカー（text-marker）: 本文の要点に黄色の背景を敷く。

Do's and Don'ts

Do - 笑顔のスタッフ写真を切り抜いて、吹き出しと一緒に置く。 - 数字は大きなオレンジの文字にする。 - 白ドット地とライム地を交互に使う。 - 線画アイコンは黄緑または黄色の単色にする。 - 見出しには点線の下線を付ける。

Don't - 暗い色や黒の背景を使わない。 - カードの角を大きく丸めない。 - オレンジを面に多用しない。強調語だけに使う。 - 明朝体や細い書体を見出しに使わない。 - グラデーションや強い影を使わない。

Page Structure

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

1. ヘッダー（社名表示とすぐに連絡できる導線）: 白地に左ロゴ、右にオレンジの丸い電話・メールボタンと黄緑のメニューボタン。
2. ファーストビュー（スピード対応と大量手配を一目で伝える）: ライムのストライプ地に極太のキャッチと、雲形吹き出しの実績 3 つ。下にスタッフの集合写真。
3. 理由のつなぎ（強みの説明へ誘導する）: 黄緑の逆三角形に英字と小さな日本語を入れる。
4. 強み・パフォーマンス（拠点数・登録数・対応速度を示す）: 番号付きの太枠カードを 4 枚。その後にマーカー付きの本文と、傾けた写真と吹き出し。
5. 対応職種（対応できる業種の幅を示す）: ライム地に 2 カラムの職種カード。最後の空きスペースに人物と吹き出しを置く。
6. 料金（時間ごとの料金を明示する）: 人物と吹き出しの下に黄緑の 2 列表。その下に注釈を並べる。
7. ご依頼までの流れ（依頼の手順を示して不安をなくす）: ライム地に白いカード 4 段と山形の矢印。
8. お問い合わせ（電話とフォームで申し込みを受ける）: 大きな黄緑の電話番号と人物の吹き出し。黄緑の太枠で囲んだライム地のフォームに、白い入力欄と赤い送信ボタン。
9. 会社紹介（サービス全体の説明）: 白ドット地に見出しを置き、マーカー付きの本文を続ける。
10. 営業エリア・拠点一覧（対応できる地域と拠点を示す）: 地域ごとの黄緑帯と市区のリスト。拠点は白いカードにまとめる。
11. フッター（ページ内リンクと認証マーク）: ライム地に下線付きのナビゲーション、黄緑のボタン、認証ロゴ、コピーライト。

Imagery

• スーツやジャケット姿の若いスタッフを、明るい照明の笑顔ポーズで撮り、背景を切り抜く。
• 指差しやガッツポーズなど動きのあるポーズで元気さを出す。
• 職場写真（倉庫・工場・オフィス・介護など）は明るい実写を四角くトリミングする。
• アイコンは黄緑の単色シルエット、またはフローでは黒線と黄色塗りの線画にする。
• キラキラや星、集中線などの手描きの装飾を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに横並びのナビゲーション、電話番号、メールボタンを置く。
• PC の FV は横長にし、スタッフ 6 人を横一列に並べる。
• 特長カードは PC では 2×2 のグリッドにする。
• 職種カードは PC では 4 カラム、フローは 4 列の横並びにする。
• エリア一覧は PC では左に帯見出し、右にリストを置く 2 カラムにする。
• フォームは PC では中央の約 60% 幅にし、項目名と入力欄を横並びにする。

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