--- version: alpha name: Orange Frame Navy Block Recruit LP description: 画面の外周を朱色の太いフレームで囲み、中を生成りの地にしている。紺の大きなブロックと線画イラストを交互に置き、元気さと誠実さを両立させた IT 企業の採用 LP。 colors: primary: '#E94707' secondary: '#012971' background: '#F5F1EC' surface: '#FFFFFF' cta: '#022972' on-cta: '#EAF5FC' text: '#343031' accent-1: '#E94707' dark-section: '#231816' accent-2: '#C27464' accent-3: '#02B902' on-dark: '#FFFFFE' line: '#FFFFFE' primary-accessible: '#D54106' typography: display: fontFamily: Montserrat fontSize: 30px fontWeight: 800 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.85 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 rounded: sm: 0px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 48px 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}' height: 30px button-white: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 30px label-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 30px marker-heading: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 34px number-feature: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 180px interview-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 260px link-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.md}' height: 150px line-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px --- # DESIGN.md — 朱色フレーム×紺ブロックの新卒採用 LP（Orange Frame Navy Block Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、信頼・誠実、親しみ・手作り感、力強い・インパクト - **キーワード**: 朱色フレーム・紺ブロック・生成り地・線画イラスト・モノクロ人物写真・角ばった四角ボタン - **地の質感**: フラットな単色面が中心。生成り地にうっすら筆跡のような模様を置き、手描きの線画イラストで温かみを足す。 - **形**: 基本は角丸なしの矩形ブロックとボタン。採用情報のカードだけ角丸 12px 前後にしている。斜線の装飾もある。 - **温度感**: 朱色で暖かく、紺で締めた中間からやや暖色寄りの温度感。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E94707` | 外周フレーム・採用情報の地 | 15% | 画素の実測 | | `secondary` | `#012971` | 紺ブロック・ボタンの地 | 12% | 画素の実測 | | `background` | `#F5F1EC` | 生成りのページ地 | 23% | 画素の実測 | | `surface` | `#FFFFFF` | お知らせ・白カード | 10% | 画素の実測 | | `cta` | `#022972` | 主ボタンの地 | 1% | 画素の実測 | | `on-cta` | `#EAF5FC` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#343031` | 見出し・本文の文字 | 3% | 画素の実測 | | `accent-1` | `#E94707` | 小見出し・強調の朱文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#231816` | インタビューカード下の焦げ茶帯 | 3% | 画素の実測 | | `accent-2` | `#C27464` | カード上のテラコッタグラデ | 4% | 画素の実測 | | `accent-3` | `#02B902` | LINE ボタン | 0% | 画素の実測 | | `on-dark` | `#FFFFFE` | 紺地の上の白文字 | 2% | 画素の主要色に補正 | | `line` | `#FFFFFE` | 朱地の上の白い枠線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#D54106` | AA を満たす補正値（計算） | | 計算 | - 画面の左右と上に朱色の太いフレーム（約14px）を通し、中のコンテンツは生成りの地に置く - コンセプトとインタビューは紺の大きなブロックにし、白文字で読ませる - 主ボタンは紺の地に白文字。朱地の上でも紺のまま使う - 小見出し・英字見出し・ラベルは朱にして、紺と対比させる - 後半の採用情報は朱の全面地にし、中に生成りのカードを置く - 人物写真はモノクロにし、上に蛍光色の折れ線を一本だけ重ねる - `label-tag` は文字 `#FFFFFE` × 背景 `#E94707` のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D54106`、4.57:1）を使う。 - `line-box` は文字 `#FFFFFE` × 背景 `#E94707` のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D54106`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | INTERVIEW・RECRUIT などの英字大見出し | 欧文サンセリフ | Montserrat | 800 | 30px | 1.2 | 0.0em | | `headline-lg` | セクションの和文キャッチ | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.03em | | `headline-sm` | 朱の小見出し・番号付き項目 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.85 | 0.03em | | `accent` | 縦書き風の英字ラベル（— FEATURE） | 欧文サンセリフ | Montserrat | 600 | 12px | 1.0 | 0.08em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.0 | 0.05em | | `note` | 日付・入社年・職種 | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.0em | - 英字の大見出しと、その下の小さな和文サブ見出しをセットにする - 和文キャッチは 2〜3 行に意図的に改行し、太字にする - キャッチの各行に白い帯を敷き、マーカーのように見せる - 英字ラベルは 90 度回転させ、ブロック左端に縦向きで置く - 本文は短い文で改行を多めにし、行間を広く取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。インタビューと採用情報のカードだけ 2 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 外周を朱フレームで囲み、その内側にコンテンツを置く - 紺ブロックは内側に余白を取ったうえで、写真をはみ出すように配置する - 番号付きの特長は 2×2 グリッドにし、それぞれに線画を添える - 各セクションの末尾にボタンを 1 つ、中央に置く - 会社情報は表形式にし、下に地図を全幅で置く ## Elevation & Depth - 影はほぼ使わず、色面の重なりで奥行きを出す - 白カードが朱地にはみ出して重なる構成で、段差を作る ## Shapes - **角丸**: 小 0px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は基本矩形で切り抜く。PC ではアイキャッチ写真だけ大きな円形にする - **セクション境界**: 直線で色面を切り替える。インタビュー部には斜めの細線を装飾として入れる - ボタンは角丸なしの矩形にし、右に矢印か丸矢印アイコンを付ける - 採用情報のリンクカードだけ角丸にする - 手描き楕円の囲みや矢印の線画を、写真の上に重ねる ## Components - **紺の矩形ボタン**（`button-primary`）: 幅 約 190px。白文字の後ろに朱の丸矢印アイコンを付ける - **白の矩形ボタン**（`button-white`）: 紺地の上で使う白地のボタン。黒文字に朱の丸矢印を付ける - **朱の見出しタグ**（`label-tag`）: 朱の矩形に白文字を入れ、セクションの種類を示す - **白帯キャッチ**（`marker-heading`）: キャッチの各行の背後に白帯を敷く - **番号付き特長**（`number-feature`）: 紺の丸数字と太字の短い見出しの下に、線画イラストを置く - **社員カード**（`interview-card`）: 上からモノクロ写真＋蛍光の折れ線、テラコッタのグラデに白文字の一言、焦げ茶帯に入社年と職種の順に重ねる - **採用情報カード**（`link-card`）: 生成りの角丸カード。紺の小さな見出しと、オレンジ系の線画アイコンを入れる - **LINE 相談枠**（`line-box`）: 朱地に白の細枠を引き、見出し・本文と緑の LINE ボタンを入れる ## Do's and Don'ts **Do** - 朱フレーム・紺ブロック・生成り地の 3 色の構成を、ページ全体で守る - 人物写真はモノクロにし、色付きの折れ線を重ねる - 特長やリンクには手描き風の線画イラストを添える - 英字見出しと和文サブ見出しをセットで使う - ボタンは角丸なしの矩形にする **Don't** - ボタンをピル型にしたり、グラデーションにしたりしない - 朱と紺以外のブランド色を足さない（LINE の緑は例外） - ドロップシャドウを強くかけない - カラー写真の人物をインタビューカードに使わない - 本文を長い一段落で詰めて書かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（社員の集合写真で、会社の雰囲気を伝える）: 全幅の集合写真の左上にロゴを置き、右上に朱のハンバーガーメニューを置く。手描き楕円で囲んだ短いコピーを写真に重ねる 2. **お知らせ**（最新の採用情報を知らせる）: 白地に日付と一行タイトルを並べ、紺のボタンを置く 3. **コンセプト**（仕事観を語る）: 紺ブロックの中に朱の小見出し、白の太字キャッチ、写真、白文字の本文を順に置く。左端に縦向きの英字ラベルを付ける 4. **カルチャー**（働き方の価値観を示す）: 白帯キャッチの下に、番号付き 4 項目を線画とともに 2×2 で並べる。最後に本文とボタンを置く 5. **社員インタビュー**（先輩社員の声を紹介する）: 紺地に朱の英字見出しを置き、社員カードを 2×2 で並べる。斜線の装飾を入れ、白ボタンで締める 6. **仕事紹介**（事業内容を説明する）: 朱タグと太字見出しの下に、オフィス写真と白カードを置く。本文は朱文字にする 7. **採用情報**（データ・募集要項・FAQ へ誘導する）: 朱の全面地に紺の英字見出しを置き、生成りの角丸カードとアイコンを並べる 8. **LINE 相談**（気軽に問い合わせてもらう）: 白の細枠の中に、見出し・本文と緑のボタンを入れる 9. **会社情報**（所在地と連絡先を示す）: 生成り地にロゴ、表形式の会社情報、地図、紺のボタン 2 つを順に置く ## Imagery - 人物は自然光のオフィスや屋外で撮る。笑顔で会話している場面にする - インタビュー写真はモノクロにし、黄緑やマゼンタの折れ線を斜めに重ねる - 線画イラストは黒の手描き線にする。オレンジとグレーを部分的に塗る - 矢印や人物の線画を、写真の端からはみ出して配置する - 生成りの地に、うっすら筆跡のような模様を敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では上部にグローバルナビを横並びで置く - PC のファーストビューは朱地の上に写真を右寄せで重ねる - PC のコンセプトは円形写真と紺ブロックを左右に並べ、互い違いに配置する - インタビューカードは PC で 4 列、採用情報カードは 3 列にする - PC の LINE 枠は横長にし、ボタンを右に置く - 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-f579ba9b`（元 LP の URL から採番） - **元 LP**: https://www.synalabo.com/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。