--- version: alpha name: Vivid Orange Gradient Recruit LP description: 鮮やかなオレンジのグラデーション面と、淡いピーチベージュの面を交互に重ねた採用サイト。写真のモザイクと縦書きの物語、白い丸矢印ボタン、白地にオレンジ文字のマーカー強調で、熱量と親しみを出している。 colors: primary: '#FF8C1C' secondary: '#FB720C' accent-1: '#FFAA21' background: '#FEE3CE' background-alt: '#FEE1CD' surface: '#FEDFC5' on-primary: '#FEFBF3' text: '#252624' accent-2: '#193318' marker: '#FE8E1B' text-muted: '#DF953C' accent-3: '#346CEC' line: '#FEE0C9' cta: '#FFFFFF' on-cta: '#DF871E' marker-accessible: '#B55C01' primary-accessible: '#B55900' on-cta-accessible: '#A96617' secondary-accessible: '#BF5303' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 52px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Lato fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.04em body-lg: fontFamily: Shippori Mincho fontSize: 16px fontWeight: 600 lineHeight: 1.8 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 28px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' arrow-circle: backgroundColor: '{colors.on-primary}' textColor: '{colors.marker}' rounded: '{rounded.full}' height: 40px text-link-more: textColor: '{colors.text}' typography: '{typography.label-button}' height: 48px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px marker-highlight: backgroundColor: '{colors.on-primary}' textColor: '{colors.marker}' typography: '{typography.body-md}' height: 26px numbered-list-row: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 104px photo-overlay-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 240px interview-card: textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 560px news-row: textColor: '{colors.on-primary}' typography: '{typography.note}' height: 96px cta-panel: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 115px side-tab: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 100px --- # DESIGN.md — 橙グラデと桃ベージュの放送局採用 LP（Vivid Orange Gradient Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、力強い・インパクト、やさしい・柔らかい - **キーワード**: オレンジグラデーション・ぼかし光・写真モザイク・縦書きストーリー・白丸矢印・欧文ラベル見出し - **地の質感**: ぼかしたオレンジの光が重なる、柔らかいグラデーションの面。境目はぼかしでつなぐ - **形**: 写真とカードはほぼ角なしの長方形。ボタンは白い正円の矢印とピル型タグ - **温度感**: 暖色寄りで温かく、情熱的 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF8C1C` | ブランドのオレンジ（グラデ面の主色） | 20% | 画素の実測 | | `secondary` | `#FB720C` | 濃い朱オレンジ（グラデの濃い側） | 10% | 画素の実測 | | `accent-1` | `#FFAA21` | 明るい山吹（グラデの明るい側） | 10% | 画素の実測 | | `background` | `#FEE3CE` | ピーチベージュの地 | 25% | 画素の実測 | | `background-alt` | `#FEE1CD` | 淡いピンクベージュの地 | 10% | 画素の実測 | | `surface` | `#FEDFC5` | オレンジ面に乗る淡色パネル | 6% | 画素の実測 | | `on-primary` | `#FEFBF3` | オレンジ面上の白文字・白丸ボタン | 3% | 画素の実測 | | `text` | `#252624` | 見出しと本文の濃い墨色 | 3% | 画素の主要色に補正 | | `accent-2` | `#193318` | 深緑の見出し・本文アクセント | 1% | 画素の実測 | | `marker` | `#FE8E1B` | 本文中の強調文字（白地マーカー上） | 1% | 画素の主要色に補正 | | `text-muted` | `#DF953C` | 欧文ラベルのオレンジ | 0% | 画素の実測 | | `accent-3` | `#346CEC` | 部署タグの青 | 0% | 画素の実測 | | `line` | `#FEE0C9` | リストの区切り線 | 0% | 画素の主要色に補正 | | `cta` | `#FFFFFF` | 白抜きの主導線パネル | 2% | 画素の実測 | | `on-cta` | `#DF871E` | 白パネル上のオレンジ文字・矢印 | 0% | 画素の実測 | | `marker-accessible` | `#B55C01` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#B55900` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#A96617` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#BF5303` | AA を満たす補正値（計算） | | 計算 | - 大セクションはオレンジ地とピーチベージュ地を交互に置き、境目はぼかしでつなぐ - オレンジ地では文字を白にし、ボタンは白丸にオレンジの矢印 - ベージュ地では見出しを墨色か深緑にし、欧文ラベルをオレンジにする - 本文の強調は白い帯の上にオレンジ文字を置くマーカー表現 - 青はタグなど小さい所だけに使う - 写真の下部にはオレンジのグラデーションを被せて文字を乗せる - `arrow-circle` は文字 `#FE8E1B` × 背景 `#FEFBF3` のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#B55C01`、4.52:1）を使う。 - `marker-highlight` は文字 `#FE8E1B` × 背景 `#FEFBF3` のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#B55C01`、4.52:1）を使う。 - `photo-overlay-card` は文字 `#FEFBF3` × 背景 `#FF8C1C` のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B55900`、4.62:1）を使う。 - `cta-panel` は文字 `#DF871E` × 背景 `#FFFFFF` のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#A96617`、4.57:1）を使う。 - `side-tab` は文字 `#FEFBF3` × 背景 `#FB720C` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#BF5303`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー | ゴシック | Zen Kaku Gothic New | 700 | 52px | 1.2 | 0.02em | | `headline-lg` | セクションの日本語見出し | ゴシック | Zen Kaku Gothic New | 500 | 30px | 1.3 | 0.1em | | `headline-md` | リード見出し・パネル見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `accent` | 見出し上の欧文ラベル | 欧文サンセリフ | Lato | 400 | 13px | 1.4 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.04em | | `body-lg` | 縦書きストーリー | 明朝 | Shippori Mincho | 600 | 16px | 1.8 | 0.1em | | `label-button` | 一覧へ誘導するテキストリンク | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | | `note` | 日付・タグ・社員の補足 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.02em | - セクション見出しは小さい欧文ラベル＋大きい日本語見出しの2段 - 日本語見出しは字間を広めに取る - 本文は行間を2.0前後でゆったり組む - 物語パートは明朝の縦書きで、右から左へ流す - 大コピーは一部の助詞だけ小さくして強弱をつける - 強調語は手描き風の丸囲みも使える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは横スクロールのカルーセル - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 100px、基本単位 8px、カード内 28px（375px 幅換算） - 左右余白は約24px - 各セクションの最後に、中央寄せのテキスト＋白丸矢印の一覧リンクを置く - リスト行はサムネイルを左、番号＋項目名を中央、丸矢印を右に置く - カルーセルは次のカードを端に少し見せる - FVは写真モザイク→コピー→縦書きストーリーの順 ## Elevation & Depth - 影はほぼ使わず、色面とぼかしで奥行きを出す - 白丸ボタンにはごく薄い影をつけてよい - 淡色パネルはオレンジ地の上に平らに重ねる ## Shapes - **角丸**: 小 0px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角なしの長方形。FVは大小の写真をタイル状に組む - **セクション境界**: 直線ではなく、グラデーションのぼかしで色を切り替える - 矢印ボタンは白い正円 - タグはピル型 - 横スクロールカードは上だけ角丸を少しつける - 写真カードは角なし ## Components - **白丸矢印ボタン**（`arrow-circle`）: 白い正円の中にオレンジの→。リンクには全てこれを使う - **一覧リンク**（`text-link-more`）: 太字テキスト＋白丸矢印を中央に置く - **欧文ラベル付き見出し**（`section-heading`）: オレンジの小さい欧文の下に、字間の広い日本語の大見出し - **白帯マーカー強調**（`marker-highlight`）: 本文中の語を白い帯に乗せ、オレンジの太字にする - **番号付きリスト行**（`numbered-list-row`）: 左にサムネイル、オレンジの番号と項目名、右に丸矢印。上下を線で区切る - **写真オーバーレイカード**（`photo-overlay-card`）: 写真全面に暗いかオレンジのグラデを被せ、白文字の見出しと丸矢印を置く - **社員カード**（`interview-card`）: 縦長のポートレートに青い部署タグ、白文字の一言、白いピル型の所属タグ、イニシャル - **お知らせ行**（`news-row`）: 日付と白いピル型タグ、白文字の見出し、右に丸矢印。白い細線で区切る - **白抜き導線パネル**（`cta-panel`）: 白い面の中央にオレンジの見出しと欧文、右に矢印 - **右端固定タブ**（`side-tab`）: 右端に縦書きのタブを固定する。濃いオレンジか黒の地 ## Do's and Don'ts **Do** - オレンジとベージュの地をぼかしで交互につなぐ - リンクの矢印は白丸で統一する - 見出しは欧文ラベルと日本語の2段で組む - 本文の要点は白帯マーカーで強調する - 人物写真は明るく自然な笑顔の仕事シーンを選ぶ **Don't** - 寒色の大きな面を使わない - セクション境界をくっきりした直線で切らない - 重い影や立体的なボタンにしない - オレンジ地に黒の細い文字を置かない - 矢印ボタンを四角やピル型にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューへの導線）: オレンジ地に白いロゴ、右に黒い丸のメニューボタン 2. **ファーストビュー**（仕事の現場と熱量を一目で伝える）: 写真を大小のモザイクで組み、下に白の大コピーと大きな透かし数字 3. **ストーリー**（入社までの物語で共感をつくる）: オレンジ地に明朝の縦書き白文字。スライド式で、白丸の←→ボタンを置く 4. **お知らせ**（最新情報を伝える）: 白の欧文見出し、日付とタグの行を細線で区切ったリスト 5. **モノづくり紹介**（事業の価値と強みを伝える）: ベージュ地、丸囲みの強調語を入れたリード、マーカー入りの本文、横スクロールのオレンジカード 6. **会社の未来**（これからのビジョンを示す）: 深緑の見出し、番号付きサムネイルリストを3行 7. **仕事と人**（職種と社員を知ってもらう）: オレンジ地に淡色パネルの職種図鑑と、社員インタビューのカルーセル 8. **特集コンテンツ**（座談会などの読み物へ誘導）: 写真全面に白文字を重ねたオーバーレイカードを縦に並べる 9. **技術部門**（専門職の魅力を伝える）: 淡色パネルの中に本文、大きな写真、暗いオーバーレイのリンクカード3枚 10. **働き方・制度**（制度と環境で安心してもらう）: ベージュ地にオレンジのリード、マーカー入り本文、番号付きリスト 11. **採用情報**（応募への最終導線）: オレンジ地に写真カード3枚と白抜きパネル、最後に一覧リンク ## Imagery - 仕事中の社員を自然光で撮った、明るく笑顔の写真 - スタジオ、機材、取材といった現場の写真を多く使う - 写真の下部にはオレンジか暗色のグラデーションを被せる - 背景には大きくぼかしたオレンジの光の玉を重ねる - ロゴの一部を大きな透かしとして背景に置く - 強調語はペンで描いたような楕円で囲む - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは見出しを左、本文やリストを右に置く2カラムにする - PCのFVは左にコピー、右に写真モザイクを置く - 縦書きストーリーはPCでは横に長く広げる - PCのカードは3〜4枚を横に並べ、カルーセルは横スクロールのまま - 一覧リンクはPCでは見出しの右上に置く - PCのヘッダーは横並びのナビに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-1a219cc8`（元 LP の URL から採番） - **元 LP**: https://recruit.ohk.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。