--- version: alpha name: Rough Gemstone Indigo Recruit LP description: 藍色の地に、岩肌のようなギザギザの境界と多面体の白い原石カードを並べた新卒採用 LP。線画の人物イラストと 4 色の宝石アイコンで、遊び心と力強さを出している。後半は濃いグレーの四角いナビカードと黄色の大ボタンで各ページへ案内する。 colors: primary: '#4157A0' background: '#E9EEF1' surface: '#FFFFFF' dark-section: '#333334' cta: '#E7AF00' on-cta: '#FDFCFB' text: '#1D243B' secondary: '#7DAA1E' accent-1: '#CC094D' accent-2: '#D9A610' accent-3: '#3E9E5E' tint-1: '#4D6AC1' background-alt: '#38456F' on-dark: '#F6FBFD' cta-accessible: '#936F00' accent-3-accessible: '#33814D' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Fira Sans Condensed fontSize: 32px fontWeight: 600 lineHeight: 1.2 headline-sm: fontFamily: Fira Sans Condensed fontSize: 22px fontWeight: 500 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Fira Sans Condensed fontSize: 30px fontWeight: 600 lineHeight: 1.2 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 32px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' gem-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 190px nav-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 140px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 90px floating-badge: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 90px logo-tile: backgroundColor: '{colors.surface}' height: 54px rock-divider: backgroundColor: '{colors.primary}' height: 40px multicolor-tagline: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 40px --- # DESIGN.md — 藍×原石シルエットの映像制作会社採用 LP（Rough Gemstone Indigo Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、ポップ・元気、クール・先進的 - **キーワード**: 原石・多面体・岩山シルエット・藍色・線画イラスト・4色アクセント - **地の質感**: フラットな単色面。グラデーションや影はほぼ使わない - **形**: 不規則な多角形（原石・岩肌）と、角丸なしの長方形の対比 - **温度感**: 藍色ベースでややクール。宝石の4色と黄色で明るさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4157A0` | メインの藍色地 | 30% | 画素の実測 | | `background` | `#E9EEF1` | 会社紹介の淡いグレー地 | 21% | 画素の実測 | | `surface` | `#FFFFFF` | 原石カード・ロゴ枠の白 | 12% | 画素の実測 | | `dark-section` | `#333334` | ナビカードの濃グレー | 11% | 画素の実測 | | `cta` | `#E7AF00` | マイページボタンの黄 | 3% | 画素の実測 | | `on-cta` | `#FDFCFB` | 黄ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#1D243B` | 見出し・本文の濃紺黒 | 2% | 画素の主要色に補正 | | `secondary` | `#7DAA1E` | メインコピーの黄緑 | 2% | 推定 | | `accent-1` | `#CC094D` | 挑戦の赤ピンク | 0% | 画素の実測 | | `accent-2` | `#D9A610` | 個性の山吹色 | 0% | 画素の実測 | | `accent-3` | `#3E9E5E` | 創造力の緑 | 0% | 推定 | | `tint-1` | `#4D6AC1` | 好奇心の青 | 0% | 画素の実測 | | `background-alt` | `#38456F` | フッターの暗い藍 | 2% | 画素の実測 | | `on-dark` | `#F6FBFD` | 藍・濃グレー地上の白文字 | 1% | 画素の実測 | | `cta-accessible` | `#936F00` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#33814D` | AA を満たす補正値（計算） | | 計算 | - 地は藍と淡グレーを交互にし、境界は岩肌のギザギザにする - 藍地の上は白文字、淡グレー地の上は濃紺黒文字 - 4つの価値には赤・山吹・青・緑を1色ずつ割り当てる - 黄色は主CTAとフローティングバッジだけに使う - ナビカードは濃グレーの単色面に白文字で統一 - メインコピーの最重要語だけ黄緑で大きく塗る - `button-primary` は文字 `#FDFCFB` × 背景 `#E7AF00` のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#936F00`、4.54:1）を使う。 - `floating-badge` は文字 `#F6FBFD` × 背景 `#3E9E5E` のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#33814D`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの最重要語 | 装飾・ディスプレイ | Dela Gothic One | 900 | 72px | 1.0 | 0.0em | | `headline-lg` | FVのコピー・英字セクション見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.2 | 0.0em | | `headline-md` | ナビカードの英字見出し | 欧文サンセリフ | Fira Sans Condensed | 600 | 32px | 1.2 | 0.0em | | `headline-sm` | 原石カード内の英単語 | 欧文サンセリフ | Fira Sans Condensed | 500 | 22px | 1.2 | 0.0em | | `body-md` | 会社紹介の本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.02em | | `body-lg` | 藍地の中央寄せ導入文 | ゴシック | Noto Sans JP | 700 | 16px | 1.8 | 0.02em | | `note` | カード内の日本語の補足ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `label-button` | 黄CTAの文字 | 欧文サンセリフ | Fira Sans Condensed | 600 | 30px | 1.2 | 0.0em | - 見出しは英字の幅狭サンセリフ、その下に日本語の小さい訳を添える2段構成 - FVコピーは極太ゴシックで、サイズの違う行を詰めて積む - キャッチの1行は1文字ずつ色を変えて多色にする - 本文は太字の白で中央寄せ（藍地）か、左寄せの通常ウェイト（淡グレー地） - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、ロゴ一覧は 3 カラム - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算） - 原石カードは幅約70%で中央に縦積みし、間隔は約50px - ロゴは16:9の白枠を3列並べ、縦の間隔を広めにとる - ナビカードは幅84%・高さ約140pxを24px間隔で縦積み - セクション見出しは左寄せの大きな英字で示す ## Elevation & Depth - 影は使わずフラットにする - 原石カードは白面に薄いグレーの稜線を引き、立体感を出す - フローティングバッジは六角形で画面右下に固定する ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: ロゴは角丸なしの長方形。人物は線画イラストを切り抜いて配置 - **セクション境界**: 山並み・岩肌のような不規則なギザギザ境界 - ボタン・カードは角丸なしの直角 - 原石カードは不規則な多角形をclip-pathで作る - 固定バッジは不規則な六〜七角形 ## Components - **原石カード**（`gem-card`）: 白い多面体に宝石アイコン、英単語、日本語訳を中央に置く - **ナビカード**（`nav-card`）: 濃グレーの長方形。英字の大見出しと日本語の小見出し - **マイページ CTA**（`button-primary`）: 黄色の幅広ボタンに白い英字 - **固定バッジ**（`floating-badge`）: 右下に緑と黄の多角形バッジを重ねて固定 - **実績ロゴタイル**（`logo-tile`）: 白枠の16:9タイルを3列で並べる - **岩肌境界**（`rock-divider`）: 藍と淡グレーの間を不規則なギザギザで切る - **多色キャッチ**（`multicolor-tagline`）: 1文字ずつ赤・黄・緑・青を変えた問いかけ行 ## Do's and Don'ts **Do** - 価値は宝石アイコンと4色で色分けする - セクション境界は岩肌のギザギザにする - 英字見出しには日本語の訳を必ず添える - 人物は単色の線画イラストで描き、境界の上に立たせる **Don't** - ボタンやカードを角丸・ピル型にしない - グラデーションやドロップシャドウを使わない - 黄色をCTA以外の広い面に使わない - 写真の人物で雰囲気を作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（採用テーマを比喩で打ち出す）: 淡グレー地に極太コピーを積み、多色の問いかけ行を添える。下は藍の岩山シルエットと線画の人物群 2. **求める人物像の導入**（比喩の意味を説明する）: 藍地に白太字の中央寄せ文と、大きな英字見出し 3. **4つの価値**（求める資質を4つ示す）: 白い原石カードを4枚縦に並べ、それぞれ別の色の宝石アイコンと英単語を置く 4. **会社紹介**（事業領域を伝える）: ギザギザ境界の下の淡グレー地に、大きな英字見出しと左寄せ本文 5. **実績一覧**（制作実績で信頼を示す）: 番組ロゴを白いタイルで3列のグリッドに並べる 6. **コンテンツナビ**（インタビュー・環境・募集ページへ誘導）: 藍地に濃グレーの長方形カードを4枚。人物イラストを角に添える 7. **CTA**（マイページ登録へ誘導）: 黄色の幅広ボタンに白い英字 8. **フッター**（SNS・著作権表示）: 暗い藍地にSNSアイコンとコピーライト。右下に固定バッジ ## Imagery - 人物は濃紺の単色線画で、ビジネスカジュアルの若手が手を挙げる・指さすなど前向きなポーズ - 背景の岩山は藍の濃淡によるフラットな塗り分け - 宝石は単色のローポリアイコンで、輪郭は濃い線 - 周囲に小さなキラキラ（四芒星）を色違いで散らす - 実績はロゴ画像のみを白枠に並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは原石カード4枚を2×2で配置し、中央に英字見出しを置く - PCのロゴグリッドは6列 - PCのナビカードは2×2のグリッド - PCのCTAはナビ幅いっぱいの黄色帯 - PCは本文幅を約75%に抑えて中央に寄せる ## 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-c1451042`（元 LP の URL から採番） - **元 LP**: https://www.ax-on.co.jp/new_graduate/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。