DESIGN.md — 藍×原石シルエットの映像制作会社採用 LP（Rough Gemstone Indigo Recruit LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、ポップ・元気、クール・先進的
• キーワード: 原石・多面体・岩山シルエット・藍色・線画イラスト・4色アクセント
• 地の質感: フラットな単色面。グラデーションや影はほぼ使わない
• 形: 不規則な多角形（原石・岩肌）と、角丸なしの長方形の対比
• 温度感: 藍色ベースでややクール。宝石の4色と黄色で明るさを足す

Colors

• 地は藍と淡グレーを交互にし、境界は岩肌のギザギザにする
• 藍地の上は白文字、淡グレー地の上は濃紺黒文字
• 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

• 見出しは英字の幅狭サンセリフ、その下に日本語の小さい訳を添える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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。