--- version: alpha name: Aqua Gradient Corporate Recruit LP description: シアン〜スカイブルーのグラデーション面と淡いブルーグレー地を交互に重ねたIT企業の採用サイト。写真の角を片側だけ大きく丸める非対称の角丸と、手書き風の欧文筆記体を見出しに透かして敷く装飾が特徴。差し色はローズピンクで、リンクやサブボタンに使う。 colors: primary: '#0CB0C1' secondary: '#39AEDA' background: '#EEF3F6' surface: '#FEFEFE' text: '#2C2A2D' on-primary: '#F8FDFD' accent-1: '#A75F7A' tint-1: '#01B2BB' accent-2: '#DCCB3B' accent-3: '#6493CB' cta: '#DE515C' on-cta: '#FFFFFF' text-muted: '#ACC3CB' dark-section: '#15292A' cta-accessible: '#DA3946' tint-1-accessible: '#017F86' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Allura fontSize: 52px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.08em note: fontFamily: Montserrat fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 48px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-entry-fixed: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 46px button-outline: textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px heading-script: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px card-article: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 250px badge-category: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 22px card-work: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 330px link-circle-arrow: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px menu-button: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' height: 56px --- # DESIGN.md — 水色グラデと有機曲線の企業採用 LP（Aqua Gradient Corporate Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、クール・先進的 - **キーワード**: シアングラデーション・非対称角丸・筆記体透かし見出し・白カード・ローズの差し色・社員写真 - **地の質感**: フラットな単色・グラデ面。影はほぼ使わず、白カードと淡色地のコントラストで階層を作る - **形**: 写真とカードは右上だけ大きく丸める。セクション境界は片側の大きな円弧。中央でくびれた双円形の写真マスク - **温度感**: 爽やかでややクール。笑顔の人物写真で温度を補う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0CB0C1` | ブランドのシアン（グラデ面の主色） | 6% | 画素の実測 | | `secondary` | `#39AEDA` | グラデーション終端のスカイブルー | 8% | 画素の実測 | | `background` | `#EEF3F6` | ページ基調の淡いブルーグレー地 | 18% | 画素の実測 | | `surface` | `#FEFEFE` | カード・企業メッセージ面の白 | 23% | 画素の実測 | | `text` | `#2C2A2D` | 見出しと本文の濃いチャコール | 8% | 画素の主要色に補正 | | `on-primary` | `#F8FDFD` | グラデ面上の白文字 | 1% | 画素の実測 | | `accent-1` | `#A75F7A` | ローズピンクの差し色（リンク・サブボタン・新卒ENTRY） | 1% | 画素の実測 | | `tint-1` | `#01B2BB` | 社員インタビュー等のカテゴリーラベル（ティール） | 0% | 画素の実測 | | `accent-2` | `#DCCB3B` | 用語集ラベルのマスタード | 0% | 画素の実測 | | `accent-3` | `#6493CB` | クロストークラベルのくすみブルー | 0% | 画素の実測 | | `cta` | `#DE515C` | 下部固定ENTRYボタン（コーラル→ローズのグラデ） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ENTRYボタン上の白文字 | 0% | 画素の主要色に補正 | | `text-muted` | `#ACC3CB` | 背景に透かす筆記体英字 | 1% | 画素の主要色に補正 | | `dark-section` | `#15292A` | MENUボタンの濃色面 | 0% | 画素の実測 | | `cta-accessible` | `#DA3946` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#017F86` | AA を満たす補正値（計算） | | 計算 | - 地は淡いブルーグレーを基本にし、主要セクションをシアン→スカイブルーの縦グラデ面で区切る - グラデ面では見出しと本文を白文字にし、カードは白で浮かせる - 差し色ローズはリンク・VIEW MOREボタン・矢印アイコンに限定する - 記事カードのカテゴリーラベルは種類ごとにティール・マスタード・ブルー・ローズで色分けする - 下部固定ENTRYは2分割で、新卒をコーラル→ローズ、中途をシアン→ブルーのグラデにする - 本文はチャコールで統一し、純黒は使わない - `button-entry-fixed` は文字 `#FFFFFF` × 背景 `#DE515C` のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DA3946`、4.51:1）を使う。 - `badge-category` は文字 `#F8FDFD` × 背景 `#01B2BB` のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#017F86`、4.67:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ（白・太字） | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.45 | 0.04em | | `headline-lg` | セクション見出し（和文・英字混在） | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.3 | 0.02em | | `accent` | 見出し背後に透かす筆記体英字 | 欧文スクリプト | Allura | 400 | 52px | 1.0 | 0.05em | | `headline-sm` | カード見出し・環境リンク名 | ゴシック | Noto Sans JP | 500 | 17px | 1.5 | 0.04em | | `body-md` | 本文・カード説明 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.06em | | `label-button` | VIEW MOREなどの英字ボタン | 欧文サンセリフ | Montserrat | 600 | 13px | 1.0 | 0.08em | | `note` | カテゴリーラベル・FVの英字サブコピー | 欧文サンセリフ | Montserrat | 600 | 11px | 1.4 | 0.04em | - 見出しは太字ゴシックで、背後に同じ意味の英単語を筆記体で薄く斜めに重ねる - 英字見出し・ボタンはMontserrat系の幾何学サンセリフにする - 本文は行間2.0前後とし、字間もやや広めにして読みやすくする - FVでは細い横線の後に英字サブコピー、その下に2行の太字キャッチを置く - ボタンの英字は大文字にし、字間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。記事カードは縦積み - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 左右余白は約15px。カード・写真はほぼ全幅 - セクションは英字透かし＋見出し→リード文→カード群→VIEW MOREの順にする - カードの間隔は約16px - VIEW MOREボタンは全幅の枠線ボタンで、右端に矢印を置く - 画面下にENTRYボタン2つを横並びで固定する ## Elevation & Depth - 影はほぼ使わない - 白カードと淡いブルーグレー地の明度差で浮かせる - グラデ面の上に白カードを重ね、奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 48px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は右上角だけ大きく丸める（約48px）。他の3角は直角。Aboutの写真は中央がくびれた双円の有機形マスクで切り抜く - **セクション境界**: グラデ面の上端や下端を片側だけ大きな円弧にする。FV下端は波状の曲線 - 非対称角丸（右上のみ）を写真・カード・セクションで統一する - ボタンは角丸4〜8pxの細い枠線の長方形にする - カテゴリーラベルは角丸なしの小さな帯で、写真の左下に重ねる - 矢印アイコンは細線の円で囲む ## Components - **下部固定ENTRYボタン**（`button-entry-fixed`）: 画面下に2分割で固定。左はコーラル→ローズ、右はシアン→ブルーのグラデで、白の太字を載せる - **VIEW MORE枠線ボタン**（`button-outline`）: 全幅の細枠ボタン。グラデ面上では白枠と白文字、淡色地ではローズの枠と文字。右端に小さな矢印 - **筆記体透かし見出し**（`heading-script`）: 太字の和文見出しの左上に、薄い筆記体英字を斜めにずらして重ねる - **記事カード**（`card-article`）: 白カード。上部写真は右上を大きく丸め、写真の左下にカテゴリーラベルを重ね、下に2行程度のタイトルを置く - **カテゴリーラベル**（`badge-category`）: 白文字の小さな帯。カテゴリー別に色を変える - **仕事紹介カード**（`card-work`）: グラデ面上の白カード。写真の下に見出し・説明を置き、右下に丸囲み矢印付きのVIEW MOREテキストリンクを置く - **丸矢印テキストリンク**（`link-circle-arrow`）: 写真の下に、細線の円で囲んだ矢印とローズの見出しリンクを並べる - **MENUボタン**（`menu-button`）: 右上に固定した濃色の正方形。三本線の下に小さくMENUと入れる ## Do's and Don'ts **Do** - 写真やカードの角丸は右上だけ大きくする - セクション見出しには必ず薄い筆記体英字を重ねる - 淡色地とシアングラデ面を交互に置き、リズムを作る - 社員の自然な笑顔や対話のシーンの写真を使う - 差し色ローズはリンク要素だけに絞る **Don't** - 四隅を均等に丸めたカードは使わない - 濃い影や立体的なボタン装飾は使わない - ローズを広い面に塗らない（ENTRYボタンだけ例外） - 暖色系の地色やベージュの背景は使わない - 見出しを明朝体にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢と人の雰囲気を伝える）: 社員2人の対話の写真を全面に敷き、左下に英字サブコピーと2行の白い太字キャッチを置く。下端は波状の曲線にする 2. **私たちについて**（事業の概要を短く紹介する）: シアングラデ面に白い見出しと2行のリードを置く。双円マスクに人物写真2枚を入れ、その下に白枠のVIEW MOREを置く 3. **記事一覧（人と仕事）**（インタビュー・用語集・イベントなどの記事へ誘導する）: 淡色地に白い記事カードを縦に6枚並べる。写真の左下に色分けしたラベルを重ね、最後にローズ枠のVIEW MOREを置く 4. **仕事紹介**（プロジェクトの流れや職種を紹介する）: 上端を円弧にしたグラデ面に、写真付きの白カードを2枚並べる。各カードの右下に丸矢印のリンクを置く 5. **働く環境**（制度・研修・評価への導線をつくる）: 淡色地に写真3枚を縦に並べ、各写真の下にローズの丸矢印リンクを置く 6. **企業メッセージ**（応募者への約束を伝え、信頼につなげる）: 右上を円弧にした白い面に、ロゴとタグラインを置き、続けて4行程度の本文を置く 7. **ENTRY CTA**（新卒・中途の応募へ誘導する）: 画面下に固定し、グラデのボタン2つを横並びにする ## Imagery - 明るいオフィスで撮った、スーツやオフィスカジュアルの社員の自然な笑顔の写真 - ガラスや窓越しの光が入る、青みのある爽やかな色調で撮る - 対話や打ち合わせなど、複数人の関係性が見えるシーンにする - 解説記事には、ティールを差し色にした線画のアイソメトリック都市・工場イラストを使う - 装飾は筆記体英字の透かしと曲線のみで、アイコン類は細線にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せの見出しとリードにし、記事カードは3列×2段のグリッドにする - PCの仕事紹介は、大きな写真と白カードを左右交互に重ねるジグザグ配置にする - PCの働く環境は写真3枚を横並びにする - PCのAboutは、双円マスク写真の中央に見出し・本文・ボタンを重ねる - PCではENTRYボタンをヘッダー右上にも置き、フッター上は全幅の2分割バーにする ## 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-cb0faee3`（元 LP の URL から採番） - **元 LP**: https://www.b-en-g.co.jp/jp/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。