--- version: alpha name: Neon Gradient Corporate Recruiting LP description: 明るいグレーのコンクリート調の地に、ライムイエローの帯見出しと青〜緑のグラデーションを組み合わせた採用サイト。モノクロ加工した社員写真にネオン色を重ね、若々しく先進的な印象を出している。大きな欧文の透かし文字と傾けた写真カードで動きを付けている。 colors: background: '#EDEDEC' primary: '#26A5D3' secondary: '#7ED0AE' marker: '#EFF500' cta: '#E9F100' on-cta: '#2F3A50' text: '#000000' accent-1: '#2BB3A0' accent-2: '#5B4BE0' surface: '#FEFEFE' dark-section: '#2F3A50' tint-1: '#CBE9F3' dark-section-accessible: '#6076A1' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Montserrat fontSize: 24px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Montserrat fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 120px fontWeight: 900 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 0px md: 2px lg: 4px 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}' marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 44px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 64px arrow-link: backgroundColor: '{colors.dark-section}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px gradient-banner: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 180px banner-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.note}' height: 18px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 90px ring-text: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 60px --- # DESIGN.md — ライム×青緑グラデの新卒採用 LP（Neon Gradient Corporate Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、力強い・インパクト、ポップ・元気 - **キーワード**: ネオングラデーション・ライム帯見出し・モノクロ人物写真・巨大欧文透かし・コンクリート調の地 - **地の質感**: 薄いグレーのコンクリート風ノイズの地に、白の大きな欧文を透かしで重ねる - **形**: 角丸のない四角いカードと帯が中心。円形の矢印ボタンと回転するリング文字をアクセントにする - **温度感**: クールな寒色寄り。ライムで熱量を足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#EDEDEC` | コンクリート調のページ地 | 45% | 画素の実測 | | `primary` | `#26A5D3` | ブランドの青緑。グラデーション面の主役 | 12% | 画素の実測 | | `secondary` | `#7ED0AE` | グラデーションのミント緑 | 10% | 画素の主要色に補正 | | `marker` | `#EFF500` | 見出しの帯・CTA のライム | 5% | 推定 | | `cta` | `#E9F100` | エントリーボタンの面 | 3% | 画素の実測 | | `on-cta` | `#2F3A50` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `text` | `#000000` | 見出しと英字ラベル | 2% | 画素の実測 | | `accent-1` | `#2BB3A0` | リード文の青緑テキスト | 0% | 推定 | | `accent-2` | `#5B4BE0` | キャッチの紫〜青グラデ文字 | 2% | 推定 | | `surface` | `#FEFEFE` | 募集要項カードの面 | 3% | 画素の実測 | | `dark-section` | `#2F3A50` | 写真内の濃紺・円形ボタン | 3% | 画素の主要色に補正 | | `tint-1` | `#CBE9F3` | コンテンツ帯の淡い水色 | 8% | 画素の実測 | | `dark-section-accessible` | `#6076A1` | AA を満たす補正値（計算） | | 計算 | - 地は淡いグレーのコンクリート調で統一する - 強調見出しはライムの帯に黒文字で載せる - 大型バナーと最下部 CTA は黄緑→青緑→青の斜めグラデーション - 人物写真はモノクロにし、背景や小物だけネオン色を残す - 本文の短いリードは青緑の文字で軽く見せる - CTA はライム地に濃紺文字で、グラデ面の上で最も目立たせる - `arrow-link` は文字 `#000000` × 背景 `#2F3A50` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#6076A1`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のグラデーション大見出し | ゴシック | Dela Gothic One | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | ライム帯に載る見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.05em | | `headline-md` | 英字セクション名 | 欧文サンセリフ | Montserrat | 800 | 24px | 1.2 | 0.02em | | `headline-sm` | バナー左上のラベル・カード見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | | `body-md` | コンセプト文などの短い本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.08em | | `note` | 入社年や英字の補足 | 欧文サンセリフ | Montserrat | 500 | 10px | 1.4 | 0.1em | | `accent` | 背景の巨大な透かし欧文 | 欧文サンセリフ | Montserrat | 900 | 120px | 1.0 | 0.0em | | `label-button` | CTA ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.1em | - 見出しは極太ゴシックで、助詞は一回り小さくする - キャッチは紫→青のグラデーション文字にする - 英字見出しは太い欧文サンセリフで、下に日本語の小見出しを添える - 本文は短文を改行で刻み、行間を広く取る - 透かし欧文は白系で地にほぼ溶け込ませる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バナーは 1 列、社員カードは横スクロール - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真とテキストは左右で互い違いに配置する - バナーは端まで届くグラデ帯の上に置く - 社員カードは少しずつ上下にずらして並べる - 募集要項は白カードを等幅で並べる - 最下部はフル幅グラデの CTA 帯で締める ## Elevation & Depth - 社員カードに柔らかいドロップシャドウ - 白カードはごく薄い影でフラットに近く見せる - 見出し帯・バナーは影なし ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物を切り抜き、背景にグラデや建物写真を合成。カードは縦長の長方形 - **セクション境界**: 直線で区切り、背景色の帯を切り替える - ボタンとカードは角丸なしの四角 - 矢印ボタンだけ黒い正円 - ボタン右下に小さな三角マークを入れる - 回転する円形のリング文字を見出し脇に置く ## Components - **ライム帯見出し**（`marker-heading`）: ライムの帯に極太の黒文字。2 段で段差を付けて組む - **エントリー CTA**（`button-primary`）: ライム地の横長ボタン。右下に小さな三角マーク - **円形矢印リンク**（`arrow-link`）: 小さなテキストの右に黒い正円の矢印 - **コンテンツバナー**（`gradient-banner`）: グラデ地に切り抜き人物と大きな見出し。左上にラベル - **カテゴリーラベル**（`banner-label`）: バナー左上に付くライムの小さなタグ - **社員カード**（`voice-card`）: 縦長写真に番号と縦書きの一言、下にハッシュタグ帯 - **募集要項カード**（`info-card`）: 白地にアイコンと日本語・英字ラベル - **リング文字**（`ring-text`）: 円周上に英字を並べた回転装飾 ## Do's and Don'ts **Do** - 見出しは必ずライム帯か極太グラデ文字にする - 人物写真はモノクロ化してネオン色を差す - 背景に巨大な透かし欧文を敷く - 四角いカードを少しずらして動きを出す - 最下部はグラデ帯とライムボタンで締める **Don't** - 角丸の大きいやさしいボタンにしない - 暖色や茶系を主色にしない - カラー写真をそのまま並べない - 本文を長い段落で詰めない - 明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（採用メッセージを一言で示す）: グレー地に巨大透かし欧文。中央にグラデの極太キャッチ、右に年度と縦の英字 2. **採用コンセプト**（求める人物像と思いを伝える）: 左にモノクロ合成写真、右にライム帯見出しと青緑の短文、矢印リンク 3. **コンテンツ導線**（会社紹介・人物像・仕事・座談会へ誘導）: グラデのバナーを 2×2 で並べ、各左上にラベル 4. **社員紹介**（働く人の雰囲気を伝える）: 英字見出しとライム帯見出し。縦長カードを段差付きで横スクロール 5. **募集要項**（職種別の要項と FAQ へ案内）: 英字見出しの下に白カード 3 枚、アイコン付き 6. **エントリー CTA**（応募を促す）: フル幅グラデ帯に透かし欧文と白い見出し、ライムのボタン 2 つ ## Imagery - スーツや作業着の社員をモノクロで撮り、切り抜く - 背景に建物や現場の写真をモノクロで合成し、一部にネオン色を残す - グラデ地の上に人物を大きく置いて見出しと重ねる - 細い線のアイコンをブランド色で描く - 数字や英字を背景に薄く散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は写真とテキストの 2 カラム。SP は写真の下にテキストを縦積みにする - PC のバナー 2×2 は SP で 1 列にする - 社員カードは SP で 1.5 枚見せの横スクロールにする - CTA ボタンは PC で横並び、SP で縦積みの全幅にする - 透かし欧文は SP で縮小し、はみ出しを許す ## 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-86868dd4`（元 LP の URL から採番） - **元 LP**: https://www.hawk-one.jp/recruit/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。