--- version: alpha name: Holographic Gradient Grid Recruit LP description: 歪んだ方眼の白い地に、水色から黄緑、黄色へ流れるグラデーション帯とホログラム風の図形を浮かべた採用 LP。黒い太字の欧文見出し、黒枠に黄色のずれた影を付けたボタン、写真カードで、明るくポップで先進的な印象にまとめている。 colors: background: '#FEFEFD' line: '#FAFAFA' primary: '#27A0D6' secondary: '#F5FB45' accent-1: '#9EDB8A' marker: '#F5EB2A' text: '#111111' text-body: '#302F32' text-muted: '#4A4A4A' cta: '#AB96FE' on-cta: '#FFFCFE' accent-2: '#FD7CCB' tint-1: '#83CCC8' dark-section: '#152122' cta-accessible: '#7654FD' primary-accessible: '#1E7DA7' typography: display: fontFamily: Montserrat fontSize: 44px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Barlow Semi Condensed fontSize: 34px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.05em note: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em label-button: fontFamily: Barlow Semi Condensed fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-check: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 46px button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 46px heading-gradient-bar: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px photo-card-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 230px news-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 230px badge-new: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px slider-arrow: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 40px member-caption: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 40px holo-sticker: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 50px --- # DESIGN.md — 白グリッド×青黄グラデの放送局採用 LP（Holographic Gradient Grid Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、ポップ・元気、清潔・爽やか - **キーワード**: ホログラム・グラデーション帯・方眼グリッド・黒枠ボタン・太字欧文見出し・写真カード - **地の質感**: 白地に薄いグレーの歪んだ方眼線を敷き、虹色ホログラムのぼかし図形を半透明で重ねる - **形**: 角丸なしの矩形が基本。ボタンは黒枠の矩形に黄色の影をずらして重ねる。装飾は三角形や楕円のホログラム - **温度感**: 白と水色が中心の涼しい色に、黄色で明るさを足した軽やかな温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEFD` | ページ地の白 | 45% | 画素の実測 | | `line` | `#FAFAFA` | 背景の方眼線 | 5% | 画素の主要色に補正 | | `primary` | `#27A0D6` | ブランド水色・小見出しと矢印ボタン | 4% | 画素の実測 | | `secondary` | `#F5FB45` | グラデーション終点の黄色 | 3% | 画素の実測 | | `accent-1` | `#9EDB8A` | グラデーション中間の黄緑 | 2% | 推定 | | `marker` | `#F5EB2A` | ボタン影の黄色 | 1% | 推定 | | `text` | `#111111` | 見出しと枠線の黒 | 4% | 推定 | | `text-body` | `#302F32` | 本文の濃いグレー | 3% | 画素の実測 | | `text-muted` | `#4A4A4A` | 日付の灰色 | 0% | 画素の実測 | | `cta` | `#AB96FE` | エントリーボタンの紫 | 1% | 画素の実測 | | `on-cta` | `#FFFCFE` | エントリーボタンの白文字 | 0% | 画素の実測 | | `accent-2` | `#FD7CCB` | NEWバッジのピンク | 0% | 画素の実測 | | `tint-1` | `#83CCC8` | NEWS帯の水色グラデ | 3% | 画素の主要色に補正 | | `dark-section` | `#152122` | FV写真上の暗部 | 5% | 画素の実測 | | `cta-accessible` | `#7654FD` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#1E7DA7` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄い方眼線のみ。セクションごとに地色は変えない - 強調は水色→黄緑→黄色の横グラデーション帯で行う - 見出しと枠線は黒で締め、色は帯や装飾に任せる - ボタンは白地・黒枠・黄色影で統一する - 主CTAだけ紫の塗りにして他と区別する - ピンクはNEWバッジなど極小の面だけに使う - ホログラム装飾は半透明にして文字に重ねない - `button-entry` は文字 `#FFFCFE` × 背景 `#AB96FE` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#7654FD`、4.62:1）を使う。 - `slider-arrow` は文字 `#FFFCFE` × 背景 `#27A0D6` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1E7DA7`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの欧文キャッチ | 欧文サンセリフ | Montserrat | 800 | 44px | 1.1 | 0.02em | | `headline-lg` | セクションの欧文見出し | 欧文サンセリフ | Barlow Semi Condensed | 700 | 34px | 1.1 | 0.02em | | `headline-md` | 水色の和文小見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.05em | | `headline-sm` | カード下の和文ラベル | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.05em | | `body-md` | 説明本文 | ゴシック | Zen Kaku Gothic New | 500 | 15px | 2.1 | 0.05em | | `note` | 日付や所属表記 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.5 | 0.04em | | `label-button` | ボタンの欧文ラベル | 欧文サンセリフ | Barlow Semi Condensed | 700 | 20px | 1.2 | 0.04em | - セクション見出しは黒の太字欧文1語にする - 欧文見出しの下にグラデーション帯を重ねて敷く - 和文の小見出しは水色の太字にする - 本文は行間を約2倍にとって余裕を持たせる - FVの和文コピーは白文字に白い下線を引く - ボタンのラベルは短い英単語1〜2語にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。メンバー紹介は1枚ずつのスライダー - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真カード、見出し、本文、ボタンを縦に積んだ単位を繰り返す - ボタンは中央に置き、幅は画面の約60% - 写真の下端にグラデーション帯を敷き、そこに欧文見出しを重ねる - NEWSは黒枠の箱に日付とタイトルを2件並べる - スライダーは写真の左右に丸い矢印ボタンを置く ## Elevation & Depth - ボタンは黒枠に黄色の塗りを右下へ約5pxずらして重ねる - メンバー写真には淡い青のぼかし影を付ける - それ以外のカードは影なしのフラット ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 横長の矩形で角丸なし。メンバー写真は縦長の矩形 - **セクション境界**: 区切り線は使わない。方眼の地と余白で切り替える - 角丸は使わない。矢印ボタンとバッジだけ丸くする - 枠線は黒の2px - 装飾は三角形や楕円のホログラムを画面端からはみ出させる ## Components - **黄色影付き黒枠ボタン**（`button-check`）: 白地に黒2px枠、右下に黄色の影をずらした矩形ボタン - **エントリーボタン**（`button-entry`）: 画面下に置く紫の横長ボタン。黒枠で、キラ星アイコンと白文字を載せる - **グラデ帯付き欧文見出し**（`heading-gradient-bar`）: 水色から黄色への帯の上に、黒い太字の欧文を半分重ねて置く - **写真カード**（`photo-card-label`）: 写真の下端にグラデ帯を敷き、左下に欧文見出しを載せる - **お知らせ枠**（`news-box`）: 黒枠の白い箱に日付、NEWバッジ、1行に省略したタイトルを並べ、黒線で区切る - **NEWバッジ**（`badge-new`）: ピンクのピル型に黒の小さな文字とキラ星を入れる - **丸矢印ボタン**（`slider-arrow`）: 水色の円に白い矢印を入れ、写真の左右に置く - **所属ラベル**（`member-caption`）: 写真の左下に重ねる白い矩形。黒の太字で所属や職種を書く - **ホロ職種ステッカー**（`holo-sticker`）: ホログラムのグラデ地に斜めの和欧文を並べたシール ## Do's and Don'ts **Do** - 地には方眼線を必ず敷き、白を広く残す - 見出しは欧文1語とグラデ帯をセットで使う - ボタンは全部同じ黄色影付き黒枠にする - ホログラム装飾は画面端に半透明で浮かべる - 人物写真は笑顔や動きのあるポーズを選ぶ **Don't** - 角丸のカードや柔らかい影は使わない - 地色を濃い色の帯で区切らない - グラデーションに水色・黄緑・黄色以外の色を混ぜない - 明朝体や手書き書体を使わない - 主CTA以外のボタンを塗りつぶさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（現場の熱気とビジョンを伝える）: 撮影現場の全面写真に、白い太字の欧文キャッチと下線付きの和文コピーを左下へ置く 2. **お知らせ**（最新情報を知らせる）: グラデ帯の上に欧文見出しを置き、黒枠の箱に2件を並べる 3. **イベント案内**（説明会やインターンへ誘導する）: 写真カード、和文ラベル、本文、黒枠ボタンの順に縦へ積む 4. **よくある質問案内**（学生の疑問を解消する）: イベント案内と同じ構成の写真カード 5. **グループ会社**（関連会社の採用情報へ誘導する）: イベント案内と同じ構成の写真カード 6. **報告書**（企業の取り組みを示す）: 表紙画像の写真カードと説明、ボタン 7. **社員紹介（新人）**（若手の人柄を見せる）: グラデ帯見出しの下に水色の小見出しを置き、縦長写真のスライダーと所属ラベルを付ける 8. **社員紹介（職種）**（職種ごとの働き方を見せる）: 縦長写真にホロステッカーと職種ラベルを重ね、一言とView allボタンを添える 9. **CTA**（エントリーへ導く）: 紫の横長ボタンを置き、ページ最下部にグラデ帯を敷く ## Imagery - 撮影スタジオや機材の前で働く社員を、自然光の中で撮ったドキュメンタリー風の写真 - 社員のポートレートは屋外の緑や水色の背景で全身を撮り、笑顔や動きのあるポーズにする - 装飾は虹色ホログラムの三角形や楕円を、ぼかして半透明に重ねる - 背景は波打つように歪めた細い方眼線にする - 写真の下端には水色から黄色への帯を敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅を約65%にして中央に寄せる - PCでは写真カードを2カラムにし、写真とテキストを左右交互に配置する - PCの見出しは欧文の横に和文の補足を小さく添える - PCのお知らせは波形の円形バッジと横長の箱で横並びにする - PCの社員紹介はスライダーをやめ、4列のグリッドにする - FVはPCで横長写真にし、コピーは左寄せにする ## 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-c1805d98`（元 LP の URL から採番） - **元 LP**: https://company.tv-asahi.co.jp/saiyo/shinsotsu/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。