--- version: alpha name: Bold Yellow and Navy Recruiting LP description: 鮮やかなレモンイエローの面と濃紺の太ゴシックで構成した、学習塾・予備校の新卒採用 LP。淡い水色背景で撮った社員ポートレートと黄色の言葉ブロックを組み合わせ、明るく誠実で前向きな印象を出す。写真はセクションの帯として大きく使い、MORE リンクと紺の角丸ボタンで導線をシンプルに保つ。 colors: primary: '#FEF102' secondary: '#051F60' cta: '#062A74' on-cta: '#EAEC68' background: '#FFFFFF' background-alt: '#EBFDFF' tint-1: '#E8F7FE' dark-section: '#34524D' on-dark: '#FFFFFF' text: '#0B172B' line: '#0E2A6E' tint-2: '#EBF2C1' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.12em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 4px md: 8px lg: 10px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px link-more: textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 20px button-outline-dark: textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 38px quote-block: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 240px staff-card: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 360px label-eyebrow: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px news-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 240px job-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 210px --- # DESIGN.md — 鮮黄×紺の明るい教育系採用 LP（Bold Yellow and Navy Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、信頼・誠実、清潔・爽やか、シンプル・ミニマル - **キーワード**: 鮮黄の大面積・紺の太ゴシック・水色背景の社員写真・言葉で語る社員・線画マスコット - **地の質感**: フラットな単色面に写真を矩形で組む。グラデーションや影はほぼ使わない - **形**: 基本は直角の矩形ブロック。カードとボタンだけ小さい角丸 - **温度感**: 黄色で暖かく元気、紺と水色で引き締めた明るい中間温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FEF102` | ブランドの鮮黄・面 | 28% | 画素の実測 | | `secondary` | `#051F60` | 見出し・ボタンの濃紺 | 4% | 画素の実測 | | `cta` | `#062A74` | 紺の主ボタン面 | 1% | 画素の実測 | | `on-cta` | `#EAEC68` | 紺ボタン上の黄文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 白地 | 13% | 画素の実測 | | `background-alt` | `#EBFDFF` | 写真背景の淡い水色 | 12% | 画素の実測 | | `tint-1` | `#E8F7FE` | ごく淡い水色面 | 6% | 画素の主要色に補正 | | `dark-section` | `#34524D` | 写真帯の暗いオリーブ調 | 10% | 画素の実測 | | `on-dark` | `#FFFFFF` | 写真上の白文字 | 1% | 画素の主要色に補正 | | `text` | `#0B172B` | 本文・注釈の濃紺黒 | 1% | 画素の主要色に補正 | | `line` | `#0E2A6E` | MORE 横線と区切り線 | 0% | 推定 | | `tint-2` | `#EBF2C1` | 見出し背後の淡黄の装飾文字 | 0% | 画素の主要色に補正 | - 黄色を主役の面色にし、ページの約 3 割を黄で塗る - 見出し・ボタン・ラベルは濃紺に統一し、黒は使わない - 社員写真は淡い水色の背景で撮り、黄色ブロックと隣り合わせる - 紺地のボタンには黄文字、黄地のボタンには紺文字で反転させる - 写真帯は黄緑がかった暗いトーンに色補正し、白文字を載せる - 白地は見出しの導入部やセクション間の余白だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインコピー・大見出し | ゴシック | Zen Kaku Gothic New | 700 | 40px | 1.4 | 0.06em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 32px | 1.5 | 0.08em | | `headline-md` | 社員の言葉・写真上コピー | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.8 | 0.12em | | `accent` | 英字見出し・英字ラベル | 欧文サンセリフ | Montserrat | 800 | 28px | 1.2 | 0.04em | | `body-md` | リード文・本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.05em | | `note` | 職種・入社年・日付 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.05em | | `label-button` | READ MORE・MORE | 欧文サンセリフ | Montserrat | 700 | 13px | 1.2 | 0.06em | - 見出しは太いゴシックを紺で、字間を広めに取る - コピーは 1 行 7〜9 文字で改行し、2〜3 行で句点で終える - 英字の小さいラベルを日本語見出しの上に置く - 社員の言葉は中央揃え、下に職種と入社年を小さく添える - 写真上の文字は白の太字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。社員カードは横スクロールの 2 列風 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - FV は写真と黄色の言葉ブロックを左右交互に半分ずつ並べる - セクションは全幅の色面か写真帯で区切る - 写真グリッドは 3×3 で、中央 1 マスを黄色のマスコットにする - MORE リンクは右下に置き、右に横線を伸ばす - 募集職種は黄地の上に写真バナーを縦に重ねる ## Elevation & Depth - 影はほぼ使わず、フラットな面の塗り分けで階層を作る - 写真カードは影なしの矩形で置く - スクロールで写真がフェードインする程度の軽い動きにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 10px。ボタンは角丸の長方形。 - **写真の切り抜き**: 直角の矩形。社員は腰上のバストアップで中央に配置する - **セクション境界**: 直線。色面を切り替えるだけ - 黄色ブロックの写真側に小さい三角を付け、吹き出し風にする - 紺ボタンは 4px 角丸の長方形 - 社員カードは下側だけ 8px 角丸 - 小さいラベルは黄色の角丸ボックスに紺文字 ## Components - **紺の READ MORE ボタン**（`button-primary`）: 幅広の紺地に黄の英字。中央に置く - **MORE 線リンク**（`link-more`）: 英字 MORE の右に 30px の横線。右下に置く - **写真上の白枠ボタン**（`button-outline-dark`）: 半透明地に白の 1px 枠と白文字、右端に山括弧 - **社員の言葉ブロック**（`quote-block`）: 黄色の面に紺の太字コピーを 3 行。写真側に三角の切れ込み - **社員カード**（`staff-card`）: 上が水色背景の写真、下が黄色の言葉と職種。横スクロールで並べる - **英字ラベル**（`label-eyebrow`）: 見出し上の黄色の角丸ボックスに紺の小さい英字 - **お知らせカード**（`news-card`）: 白地にマスコット線画。下に日付と紺のカテゴリタグ - **職種バナー**（`job-banner`）: 暗く補正した写真に白の職種名を中央に置き、右下に MORE ## Do's and Don'ts **Do** - 黄色は彩度の高いレモンイエローを広い面で使う - 見出しは短い言葉で言い切り、句点で終える - 社員は水色の背景で笑顔のバストアップに揃える - 線画のマスコットを区切りや空いたマスに使う - 導線は MORE 線リンクと紺ボタンの 2 種類に絞る **Don't** - 黄と紺以外の強い色を足さない - グラデーションや強い影を付けない - 細い明朝や手書き風の書体を使わない - 写真を丸や斜めに切り抜かない - 長い本文を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（社員の言葉とメインコピーで第一印象を作る）: 写真と黄色の言葉ブロックを交互に置き、間に白地で大きな紺のコピーを挟む 2. **お知らせ**（説明会などの最新情報を伝える）: 黄地に英字見出しを置き、白カードを横スクロールで並べ、紺ボタンを付ける 3. **採用コンセプト**（会社の考え方を一言で示す）: 暗く補正した写真コラージュに白の大きなコピーと白枠ボタンを 2 つ載せる 4. **社員の言葉一覧**（職場の雰囲気を多くの社員の声で伝える）: 英字ラベル付き見出しの後ろに淡黄の大文字を置き、社員カードを 2 列で並べる 5. **社員インタビュー導入**（インタビュー記事へ誘導する）: 3×3 写真グリッドの下に黄色の面。大見出しとリード文、MORE を置く 6. **トップメッセージ**（代表の思いを伝える）: 水色背景に紺のコピー、下に代表写真と黄色の帯、MORE リンク 7. **理念・行動指針**（企業文化を象徴的に見せる）: 水色背景に紺の大きな英字ロゴ、黄色い本の写真を中央に置く 8. **制度と環境**（福利厚生ページへ誘導する）: 黒板前の社員写真に白の 2 行コピーを載せ、右下に MORE 9. **募集要項**（職種ごとの応募ページへ誘導する）: 黄色の面に見出しを中央揃えで置き、写真バナーを 3 つ縦に並べる 10. **クロージング・フッター**（コンセプトを再提示してブランドを印象づける）: 写真コラージュに白コピー、その下の黄地にマスコット付きロゴを中央配置 ## Imagery - 社員ポートレートは淡い水色の無地背景で撮る。スーツ姿の笑顔で正面を向かせる - 仕事風景は授業・面談・デスクワークを自然光で撮り、3×3 グリッドにする - コンセプト系の写真は黄緑寄りに色を被せ、暗めに落として文字を載せる - 紺の単線で描いたシンプルな人物マスコットを区切りやプレースホルダーに使う - 象徴的なアイテムを水色背景で物撮りし、ブランドの黄色で見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は 3 列。左右に社員写真と言葉ブロック、中央の白カードに縦書き風のコピーを置く - PC のお知らせは見出しを左、カード 3 枚を右に横並びにする - PC の社員カードは 4 列のグリッドで 2 段に並べる - PC のインタビュー導入は写真グリッドを左、黄色ブロックを右に配置する - PC のメッセージ・理念・制度は横長バナーを縦に重ね、黄色の小さい READ MORE ボタンにする - PC の募集要項は幅 70% の中央バナーにし、職種名を 1 行にまとめる ## 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-fd7af4ec`（元 LP の URL から採番） - **元 LP**: https://www.yotsuyagakuin.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。