--- version: alpha name: Fresh Lime Pop Staffing Service LP description: 黄緑を基調に、淡いライム地と白地を交互に重ねた人材派遣の BtoB 向け LP。手書き風の太い丸ゴシック見出し、オレンジの強調数字、吹き出し付きのスタッフ写真で、親しみやすさとスピード感を出している。後半は問い合わせフォームと営業エリア一覧が中心で、情報量が多い。 colors: primary: '#8EC21F' background: '#FDFEFC' background-alt: '#EFF6C0' tint-1: '#F1F6C0' surface: '#FEFEFE' accent-1: '#F0861E' marker: '#FDE302' accent-2: '#F4E24B' text: '#333333' text-muted: '#666666' cta: '#C2272D' on-cta: '#FFFFFF' line: '#A4BC5E' secondary: '#F39A1E' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 900 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 0px md: 4px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' feature-card-numbered: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 150px speech-cloud: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px heading-dotted: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px category-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 330px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 360px flow-step: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 190px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px area-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 56px text-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 20px --- # DESIGN.md — 黄緑×オレンジの元気な人材サービス LP（Fresh Lime Pop Staffing Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、清潔・爽やか - **キーワード**: 黄緑・ライム地・吹き出し・スタッフ写真・太字丸ゴシック・オレンジ強調 - **地の質感**: 白地に細かいドット柄、淡いストライプのファーストビュー。グラデーションは使わないフラットな塗り。 - **形**: 四角いカード（角丸なし）に黄緑の太枠。雲形の吹き出しとキラキラの線画アイコン。逆三角のつなぎ。 - **温度感**: 明るく暖かい。黄緑の爽やかさにオレンジと黄色を足して元気な印象。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8EC21F` | ブランド黄緑（見出し帯・枠・番号タブ） | 7% | 画素の実測 | | `background` | `#FDFEFC` | 白地（ドット柄セクション） | 32% | 画素の実測 | | `background-alt` | `#EFF6C0` | 淡いライム地の交互セクション | 33% | 画素の実測 | | `tint-1` | `#F1F6C0` | FV のストライプ地 | 4% | 画素の実測 | | `surface` | `#FEFEFE` | カード・フォーム入力欄の白面 | 10% | 画素の実測 | | `accent-1` | `#F0861E` | オレンジの強調数字・キーワード | 1% | 推定 | | `marker` | `#FDE302` | 黄色の文字マーカー | 0% | 画素の実測 | | `accent-2` | `#F4E24B` | イラストの黄色塗り | 0% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃いグレー | 3% | 推定 | | `text-muted` | `#666666` | 住所・注釈の中間グレー | 2% | 推定 | | `cta` | `#C2272D` | 送信ボタンの赤 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#A4BC5E` | 一覧の黄緑区切り線 | 0% | 画素の主要色に補正 | | `secondary` | `#F39A1E` | ヘッダーの電話・メール丸ボタン | 0% | 推定 | - 地の色は白（ドット柄）と淡いライムを交互に切り替えて、セクションの境目を示す。 - 黄緑は見出し帯、カードの太枠、番号タブ、電話番号に使う。 - オレンジは数字やキーワードなど、一番強調したい語に限る。 - 黄色マーカーは本文中の要点の背景に引く。 - フォーム送信だけ赤い CTA にして、緑系の中で目立たせる。 - 本文は濃いグレーにし、純黒は使わない。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大キャッチ | 丸ゴシック | Dela Gothic One | 900 | 44px | 1.25 | 0.02em | | `headline-lg` | セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 30px | 1.3 | 0.04em | | `headline-md` | 特長カードの見出し・フロー名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.02em | | `accent` | オレンジの強調数字 | 丸ゴシック | M PLUS Rounded 1c | 900 | 30px | 1.2 | 0.0em | | `headline-sm` | エリア帯・カテゴリ帯の白文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em | | `note` | 注釈・住所 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.03em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.0 | 0.08em | - 見出しは極太の丸ゴシックにし、点線の下線を付ける。 - 見出しの中の一部の語を黄緑またはオレンジにする。 - 数字は周りの文字の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-d7535d2b`（元 LP の URL から採番） - **元 LP**: https://www.h4-haken.com/syukyakulp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。