--- version: alpha name: Crimson Gradient Corporate Recruit LP description: 深紅から暗赤へのグラデーション帯と、白・薄グレーの地を交互に重ねたIT企業の中途採用LP。写真の上に暗いオーバーレイを敷いた資料請求ブロックを繰り返し、赤い光沢のピル型CTAで誘導する。太字ゴシックの見出しに、四角・ひし形・矢印の赤い記号を組み合わせ、情報を整理して見せる。 colors: primary: '#D70127' dark-section: '#7A0F23' cta: '#B40222' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FEFEFE' tint-1: '#F2D2D7' surface: '#605953' text: '#191919' accent-1: '#4C4442' line: '#4A4140' on-dark: '#FEFCFC' text-muted: '#5A534F' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 23px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 72px 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}' rounded: '{rounded.full}' height: 60px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px tinted-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 540px corner-frame: textColor: '{colors.primary}' height: 40px pill-label: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px heading-tab: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 50px job-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 84px service-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 300px icon-tile: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 100px --- # DESIGN.md — 深紅グラデと灰の誠実なIT中途採用LP（Crimson Gradient Corporate Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 深紅グラデーション・コーポレート・太字ゴシック・赤い記号マーカー・資料請求の繰り返し・表組み型サービス一覧 - **地の質感**: フラットな面に縦グラデーションの赤帯。写真には暗いグレーのオーバーレイを敷く - **形**: 角丸は小〜中のカード、CTAはピル型、L字の赤いコーナー罫線 - **温度感**: 赤の熱量と、グレー・白の冷静さが半々 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D70127` | ブランド赤（見出し強調・グラデ帯の起点） | 11% | 画素の実測 | | `dark-section` | `#7A0F23` | グラデ帯の下端の暗赤 | 5% | 画素の実測 | | `cta` | `#B40222` | 資料DLボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 33% | 画素の実測 | | `background-alt` | `#FEFEFE` | 薄グレーの地・職種カード | 13% | 画素の実測 | | `tint-1` | `#F2D2D7` | 赤帯の上に置く薄ピンクのパネル | 7% | 画素の実測 | | `surface` | `#605953` | 資料請求ブロックの暗いベージュグレー地 | 8% | 画素の実測 | | `text` | `#191919` | 見出し・本文の黒 | 3% | 画素の実測 | | `accent-1` | `#4C4442` | 表の縦見出しセル・アイコンの濃茶グレー | 2% | 画素の実測 | | `line` | `#4A4140` | 表の罫線・枠 | 0% | 画素の実測 | | `on-dark` | `#FEFCFC` | 赤・暗い地の上の白文字 | 1% | 画素の実測 | | `text-muted` | `#5A534F` | 注釈のグレー文字 | 0% | 画素の主要色に補正 | - 赤い帯は上から下へ深紅→暗赤の縦グラデーションにする - 白地と薄グレー地を交互に置いてセクションを区切る - 資料請求ブロックは暗いグレーのオーバーレイ写真の上に白カードを載せる - 赤は見出しの一部語句・記号・CTAに絞り、本文には使わない - 赤い帯の上は白文字か、薄ピンクのパネルで読みやすくする - 表の見出しセルは濃茶グレーの地に白文字 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー（白帯・赤帯の上） | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-lg` | 資料請求ブロックの大見出し（赤い下線つき） | ゴシック | Noto Sans JP | 900 | 30px | 1.4 | 0.02em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 23px | 1.5 | 0.03em | | `headline-sm` | サービス分類の赤い小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `body-lg` | メリットや事例の箇条書き | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.03em | | `body-md` | リード文・表のセル | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.03em | - 書体は太いゴシック1種類に統一する - 箇条書きは本文も太字で、詰まった力強い印象にする - 大見出しの中の重要な語句だけ赤くする - 資料請求の見出しは白文字に赤い下線を引く - リード文は中央揃え、箇条書きは左揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。業界アイコンは 3 列、サービス表は 2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算） - 赤帯の中にパネルを置くときは左右に 16px の余白を空ける - 職種一覧は縦に並べたグレーのカード。右端に詳細ボタンを置く - サービス一覧は縦見出しセルつきの表を 2 列に組む - 資料請求ブロックは本文中で 2 回繰り返す - 事例リストは L 字のコーナー罫線 2 本で上下を挟む ## Elevation & Depth - 基本はフラットで影を付けない - CTAボタンだけ下に濃い影と上部のハイライトを付けて立体的にする - 白カードは暗い写真地の上に影なしで載せる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの全幅で使い、暗いオーバーレイを重ねる。アイコンは白い角丸の正方形タイルに入れる - **セクション境界**: 直線で区切り、色の切り替えだけで分ける - CTA・サブボタン・吹き出しラベルはピル型にする - パネルとアイコンタイルの角丸は 12〜16px - 表と職種カードは角丸 0〜4px の四角にする - メリットの記号は赤い正方形、事例の記号は赤いひし形にする ## Components - **光沢のある赤いピル型CTA**（`button-primary`）: 画面幅いっぱいの赤いピル型。上部が明るく、下に影を付ける - **詳細を見るボタン**（`button-outline`）: 白地に赤い枠と赤い文字の小さなピル型ボタン - **薄ピンクのメリットパネル**（`tinted-panel`）: 赤帯の上に置き、赤い四角の記号で 4 項目を並べる - **L字のコーナー罫線**（`corner-frame`）: 左上と右下に赤い太線の L 字を置き、事例リストを挟む - **白枠の吹き出しラベル**（`pill-label`）: 暗い地の上に置く、白枠と白文字のピル型ラベル。下に小さなしっぽを付ける - **赤いピル型の見出しタブ**（`heading-tab`）: 白カードの上端に重ねる赤いピル型の見出し - **職種カード**（`job-card`）: 薄グレーの横長カード。左に職種名、右に詳細ボタンを置く - **縦見出しつきサービス表**（`service-table`）: 左に縦書きの濃茶セル、右に罫線で区切った項目行を並べる - **業界アイコンタイル**（`icon-tile`）: 白い角丸の正方形に濃茶のピクトグラムを入れ、下に白文字のラベルを付ける ## Do's and Don'ts **Do** - 赤い帯には必ず縦グラデーションを付ける - 資料請求ブロックはページの中ほどと最後に繰り返す - リストの記号は赤い四角・ひし形・矢印で使い分ける - 白地とグレー地を交互にしてリズムを作る - FVでは写真の上に白帯や赤帯の帯状テロップでコピーを載せる **Don't** - 丸ゴシックや明朝を使わない - 赤以外の鮮やかな色を足さない - 本文の長い段落を赤文字にしない - パステル調や手描きの装飾を入れない - CTAをフラットな四角ボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象者と募集職種を伝える）: 社員写真の上に白帯の大コピーと赤帯の職種名を重ね、白丸の吹き出しで対象者を示す 2. **働くメリット**（入社するメリットを 4 つ示す）: 赤のグラデ帯の上に白い見出しを置き、薄ピンクのパネルに赤い四角の記号で箇条書きする 3. **プロジェクト事例**（仕事の規模感を伝える）: 白地に赤い L 字罫線を置き、赤いひし形の記号で事例を並べる 4. **資料請求CTA**（会社説明資料のダウンロードへ誘導する）: 暗いオーバーレイ写真の上に吹き出しラベルと下線つき大見出しを置き、赤い見出しタブ付きの白カードに矢印リストと資料サムネイル、光沢CTAを並べる 5. **キャンペーンバナー**（入社特典を告知する）: 横長のバナー画像と、その下に右矢印つきのテキストリンクを置く 6. **募集職種**（職種ごとの詳細ページへ導く）: グレーのカードを縦に並べ、右端に赤枠の詳細ボタンを置く 7. **提供ソリューション**（事業の幅広さを示す）: グレー地にリード文と、赤いひし形の小見出しつきの表を 2 列に組む 8. **取引業界**（取引先業界の広さを示す）: 赤のグラデ帯に白い角丸アイコンタイルを 3 列×4 段で並べる 9. **資料請求CTA（再掲）**（最後にもう一度ダウンロードを促す）: 中盤の資料請求ブロックと同じ構成で繰り返す ## Imagery - スーツやジャケット姿の社員が笑顔で話す、明るいオフィスの写真 - 資料請求の背景はPC作業中の人物写真にグレーのオーバーレイを重ねる - アイコンは濃茶 1 色の太いピクトグラム - 資料のサムネイルはスライドを数枚重ねて見せる - 記号は赤い四角・ひし形・矢印のシンプルな図形 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約 70% 幅で配置し、文字を小さく抑える - PCでは職種カードを 2 列にする - PCではサービス表を 4 列にする - PCでは業界アイコンを 6 列にする - PCでは資料請求カードを左にリスト、右にサムネイルの 2 カラムにする - PCではメリットの箇条書きを各 1 行にまとめる ## 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-5d77862d`（元 LP の URL から採番） - **元 LP**: https://recruit.shiftinc.jp/lp/career/aoj_02/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。