--- version: alpha name: Airy Blue Ribbon Corporate Recruit LP description: ごく淡い青を地にして、半透明の青いリボンと紙吹雪を浮かべた、軽くて明るい採用ページ。事業紹介は明るい青とくすんだ紺の大きなパネルで見せる。社員写真は平行四辺形に切り抜き、角丸の細いピル型ボタンと大きな欧文の番号を使って、知的で親しみやすい印象にまとめる。 colors: primary: '#8DB4FF' secondary: '#6C80A5' background: '#F0F5FF' surface: '#F3F8FD' dark-section: '#333A4D' on-dark: '#FCFDFF' text: '#3F4046' accent-1: '#6785BD' cta: '#6785BD' on-cta: '#FCFDFF' line: '#CFD3DA' tint-1: '#D7E5FF' text-muted: '#7A8194' primary-accessible: '#1D6AFF' cta-accessible: '#5375B5' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 40px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-arrow-pill: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px business-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 520px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px interview-row: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 300px info-grid-card: textColor: '{colors.text}' height: 190px news-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 44px entry-banner: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 120px menu-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px --- # DESIGN.md — 淡い青とリボン装飾の採用サイト LP（Airy Blue Ribbon Corporate Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、クール・先進的、信頼・誠実、シンプル・ミニマル - **キーワード**: 淡いブルー・リボン装飾・平行四辺形の写真・大きな欧文番号・余白多め・細い線のピル型ボタン - **地の質感**: 白から淡い青へのグラデーションの地に、半透明のリボンと紙片が浮かぶ。平らで影は少なめ。 - **形**: パネルは角丸が小さく、ボタンはピル型。写真は斜めに切った平行四辺形。 - **温度感**: やや寒色寄りだが、やわらかく明るい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8DB4FF` | ブランドの青（事業パネル・Entry帯） | 12% | 画素の実測 | | `secondary` | `#6C80A5` | くすんだ紺の事業パネル | 7% | 画素の実測 | | `background` | `#F0F5FF` | ページ全体の淡い青の地 | 35% | 画素の主要色に補正 | | `surface` | `#F3F8FD` | お知らせの行・カードの白 | 9% | 画素の実測 | | `dark-section` | `#333A4D` | フッターの濃いグレーがかった紺 | 9% | 画素の実測 | | `on-dark` | `#FCFDFF` | 濃い地・青パネル上の文字 | 2% | 画素の主要色に補正 | | `text` | `#3F4046` | 見出しと本文 | 3% | 画素の実測 | | `accent-1` | `#6785BD` | 見出しの強調語・欧文の番号 | 1% | 画素の主要色に補正 | | `cta` | `#6785BD` | Entry帯・メニューボタン | 4% | 画素の主要色に補正 | | `on-cta` | `#FCFDFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `line` | `#CFD3DA` | 区切り線・ボタンの枠線 | 2% | 画素の主要色に補正 | | `tint-1` | `#D7E5FF` | 半透明のリボン・紙片の装飾 | 5% | 画素の実測 | | `text-muted` | `#7A8194` | 日付・注釈・所属名 | 1% | 推定 | | `primary-accessible` | `#1D6AFF` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#5375B5` | AA を満たす補正値（計算） | | 計算 | - 地は白〜淡い青のグラデーションにして、純白のベタ塗りは避ける - 事業紹介のパネルは明るい青と紺を交互に置く - 見出しの中で 1〜2 語だけを強調の青にする - 濃い色はフッターだけに使い、ページの最後を締める - ボタンは塗りつぶさず、細い線のピル型を基本にする - 装飾には半透明の青を使い、文字にかぶらないようにする - `business-panel` は文字 `#FCFDFF` × 背景 `#8DB4FF` のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1D6AFF`、4.53:1）を使う。 - `entry-banner` は文字 `#FCFDFF` × 背景 `#6785BD` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#5375B5`、4.51:1）を使う。 - `menu-pill` は文字 `#FCFDFF` × 背景 `#6785BD` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#5375B5`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 26px | 1.4 | 0.1em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 24px | 1.4 | 0.12em | | `headline-md` | 事業タイトル・インタビューのタイトル | ゴシック | Zen Kaku Gothic New | 500 | 18px | 1.6 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.06em | | `note` | 所属・日付・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.05em | | `accent` | 欧文ラベル・大きな番号 | 欧文サンセリフ | Montserrat | 300 | 40px | 1.0 | 0.02em | | `label-button` | ボタンの文字（View More など） | 欧文サンセリフ | Montserrat | 500 | 12px | 1.0 | 0.05em | - 見出しの上に小さな欧文ラベルを青で添える - 見出しは中くらいの太さにし、字間を広めに取る - 番号は細い欧文で大きく、半透明でも使う - 本文は行間 2.0 前後でゆったり組む - 極太の書体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は文章と写真の 2 カラム、または 2×2 のグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 余白を大きく取り、写真をずらして浮遊感を出す - インタビューは写真を左、文章を右に置いた行を縦に並べる - 採用情報は 4 つの項目を細い線で区切ったグリッドにする - お知らせは日付・件名・矢印ボタンを 1 行に並べる - 最後に Entry 帯を置き、その下にフッターを置く ## Elevation & Depth - 基本は影なしの平面 - お知らせの行は白い面にごく薄い影を付ける - Entry ボタンは半透明の白い面で青い地から浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 社員写真は平行四辺形に斜めに切り抜く。事業写真は角丸の長方形 - **セクション境界**: 直線で区切り、リボンの装飾がセクションをまたいでつなぐ - 矢印入りのボタンは細い枠線のピル型にする - パネルは小さめの角丸にする - ファーストビューの写真は斜めのひし形でコラージュする ## Components - **矢印付きピルボタン**（`button-arrow-pill`）: 細い枠線の中に右向きの矢印を入れた小さなボタン。左側に View More などの文字を添える - **事業紹介パネル**（`business-panel`）: 青または紺の大きなパネル。左に文章、右に写真を置き、左下に大きな番号を半透明で入れる - **欧文ラベル付き見出し**（`section-label`）: 小さな青い欧文ラベルの下に、字間の広い日本語見出しを置く - **インタビューの行**（`interview-row`）: 平行四辺形の写真の横に、部署名・タイトル・縦線付きのイニシャルと矢印ボタンを並べる - **番号付きの採用情報カード**（`info-grid-card`）: 青い欧文番号・小さな写真・タイトル・View More ボタンで構成し、線で区切る - **お知らせの行**（`news-row`）: 白い角丸の行に、日付・件名・矢印の丸ボタンを並べる - **Entry帯**（`entry-banner`）: 青い帯の中に半透明の白いボタンを置き、大きな欧文と長い矢印を入れる。背面には大きな欧文を透かして敷く - **メニューのピル**（`menu-pill`）: 右上に固定する青いピル型のメニューボタン ## Do's and Don'ts **Do** - 淡い青のグラデーションの地にリボンを流して軽さを出す - 写真は平行四辺形に切り抜き、左右にずらして配置する - ボタンは細い枠線と矢印で統一する - 見出しには必ず欧文ラベルを添える - 番号は大きく細い欧文で入れる **Don't** - 赤や黄色などの暖色を強調に使わない - 太い書体や塗りつぶしの大きなボタンを多用しない - 強い影や立体的な装飾は使わない - 余白を詰めて情報を詰め込まない - 写真を正方形のまま並べるだけにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（会社の使命と雰囲気を伝える）: 斜めに切った社員写真のコラージュと流れるリボンを置き、その下に強調語を青にしたキャッチを大きく入れる 2. **メッセージ**（事業の考え方を短く示す）: 左寄せの短い段落を 3 つ、余白を広く取って並べる 3. **事業紹介**（事業部ごとの仕事内容を示す）: 青と紺の大きなパネルを縦に並べ、文章・写真・大きな番号を入れる 4. **社員インタビュー**（働く人の姿を見せる）: 左に見出しと一覧ボタンを置き、右に写真付きの行を縦に並べる 5. **診断コンテンツ**（親しみを持たせて回遊を促す）: 青いパネルの上に線画の人物イラストを散らし、中央に白文字の見出しとボタンを置く 6. **採用情報**（募集の詳細ページへ誘導する）: 中央に見出しを置き、番号付きカードを 2×2 のグリッドで並べる 7. **お知らせ**（説明会などの最新情報を伝える）: 左に見出し、右に白い行のリストを並べる 8. **CTA**（エントリーを促す）: 青い帯に大きな欧文の Entry ボタンを置き、背面に欧文を透かして敷く 9. **フッター**（サイト内のリンクを示す）: 濃い紺の地に白いロゴとリンク一覧を並べる ## Imagery - 社員写真は明るいオフィスで撮った笑顔のもの。背景は白〜青系で明るい - 業務写真は手元やデバイスを、浅い被写界深度で撮る - 装飾は半透明の青いリボンと紙吹雪状の四角形 - イラストは黒い線画に青のベタを差したフラットな人物 - 写真の色味は寒色寄りで、明るく爽やかにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では事業パネルを写真が上、文章が下の縦積みにする - インタビューは写真と文章を縦に積み、写真幅は 70% 程度にする - 採用情報のグリッドは 1 カラムにする - お知らせは日付と件名を 2 段にする - 見出しは 22〜24px に抑え、メニューは右上に固定する ## 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-f6ae7e94`（元 LP の URL から採番） - **元 LP**: https://recruit.jmc-ltd.co.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。