DESIGN.md — 灰地×水色グラデのタイル型採用サイト LP（Gray Grid Tile Editorial Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、ポップ・元気、情報量多め・訴求型
• キーワード: タイルグリッド・ポートレート・細線欧文・グラデーション・編集的・ネオンアクセント
• 地の質感: フラットなグレー地。写真背景は柔らかい水色〜黄緑のグラデーション。フッターだけ細かいドット柄
• 形: 角丸なしの矩形タイルを密に並べる。ボタンとバッジだけピル型
• 温度感: やや寒色寄りのニュートラル。人物写真の笑顔とネオン色で温かさを足す

Colors

• 地は全面グレー。白い余白はほとんど使わない
• 人物写真の背景は水色〜黄緑のグラデーションで統一する
• ネオン緑・朱色・ライム黄はカード 1 枚単位でだけ使う
• CTA の赤ピンクはヘッダーのエントリーボタンだけに使う
• リンクとニュースバーの枠線は青で統一する
• 記事カードはくすんだティールグレーの面に白文字
• button-entry は文字 #F1F6F6 × 背景 #F0305A のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD103D、4.57:1）を使う。
• news-bar は文字 #3A5BD9 × 背景 #D1D6DA のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#294DD5、4.6:1）を使う。
• badge-hot は文字 #F1F6F6 × 背景 #F0305A のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD103D、4.57:1）を使う。

Typography

• セクション名は白や灰の細線欧文で大きく置き、写真の上に重ねる
• 和文の補足コピーは欧文のすぐ下に小さく添える
• 本文は 12px 前後で小さく、情報は短く切る
• トップメッセージだけ明朝体を使い、白い帯の上に載せて強調する
• 細線欧文は下にある写真の色と対比をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: PC は 4 列の正方形〜縦長タイルグリッド。SP は 2 列タイル
• 本文ブロックの幅: 画面幅の約 100%
• 余白: セクション間 48px、基本単位 4px、カード内 12px（375px 幅換算）
• タイル間の溝は 2〜4px でほぼ隙間なく敷き詰める
• 大きいカードは 2×2 マス、小さいカードは 1 マスで変化をつける
• 一部のマスは空けてグレー地を見せる
• 文字だけのカードは写真カードと同じサイズにする
• インスタとジョブガイドは横一列の帯にする

Elevation & Depth

• 影は使わずフラットにする
• 重なりはヘッダー固定と右下のフローティングバナーだけ

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 人物は腰上〜胸上の縦長矩形。円形の切り抜きは特集カードのアクセントだけ
• セクション境界: 直線。タイルの境目がそのままセクションの区切りになる
• カードは角丸 0
• ボタンと HOT バッジだけピル型
• 矢印は細い線の右向き矢印

Components

• エントリーボタン（button-entry）: ヘッダー右の赤ピンクのピル型ボタン
• メニューボタン（button-menu）: グレー地に黒枠のピル型ボタン
• ニュースバー（news-bar）: 青の細枠で囲った 1 行の告知。右端にもっと見るリンク
• HOT バッジ（badge-hot）: カード左上に置く赤い小さなピル型ラベル
• 社員ポートレートタイル（portrait-tile）: 水色グラデ背景の人物写真。上に細線欧文、左下に職種タグ
• 記事カード（article-card）: ティールグレーの面に、カテゴリー名・タイトル・写真・抜粋・矢印を縦に並べる
• 告知テキストカード（note-card）: ライムイエローの面に小さな本文だけを載せる
• 右下の追従バナー（floating-banner）: キャラクター付きのインターン受付中バナー。閉じるボタン付き
• カテゴリータブ（tab-nav）: 欧文のカテゴリー名を横に並べ、選択中は塗りで反転させる

Do's and Don'ts

Do - カードは角丸なしでほぼ隙間なく敷き詰める - 人物写真の背景は水色〜黄緑のグラデーションで揃える - 細線の欧文タイトルを写真に重ねて雑誌のような表紙にする - ネオン色はカード 1 枚分だけにしてリズムを作る - グレー地をベースにして写真を目立たせる

Don't - カードに影や大きな角丸をつけない - 白い背景で余白の多いレイアウトにしない - 赤ピンクをエントリー以外に多用しない - 太いゴシックの大見出しを並べない - 人物写真の背景を色ごとにバラバラにしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ロゴとエントリー導線）: 中央にロゴ、右にエントリーとメニューのピル型ボタン。左端に縦書きのキャッチを置く
2. ファーストビュー（ブランドの世界観を一目で伝える）: 多色の言葉が入った立体空間グラフィックを全幅で見せ、中央にロゴ
3. タブとニュース（コンテンツの絞り込みと最新情報）: 欧文タブを横に並べ、その下に青枠の 1 行ニュースバー
4. 特集タイル（キャリアや働き方の記事へ誘導）: 大きな人物写真タイルに細線欧文を重ね、横にライム色の説明カード
5. 社員紹介グリッド（職種ごとの先輩を見せる）: 水色グラデ背景のポートレートを 4 列に並べ、職種タグを添える
6. 対談・特別企画（本音の記事で共感を得る）: 2×2 の大きな写真タイルと、小さな本文カードを組み合わせる
7. 数字で見る（会社データを直感的に伝える）: 淡いグレー地に折れ線と立体の円柱アイコンを並べる
8. トップメッセージ（トップの言葉で志望動機を高める）: グレーのグラデ地に明朝の大見出しを白帯で強調し、右に人物写真
9. 記事一覧（関連コンテンツへ回遊させる）: ティールグレーの記事カードを 4 列のグリッドで並べる
10. SNS（最新情報への導線）: 細線欧文の見出しの下に投稿画像を 4 枚横に並べる
11. ジョブガイド帯（職種紹介へ誘導）: 巨大な細線欧文の下に、濃緑背景の人物を横並びにしたスライダー
12. フッター（サイトマップ）: ドット柄の地に 4 列のリンク一覧、右にロゴ

Imagery

• 人物は明るい自然光で、腰上の笑顔を正面から撮る
• ポートレートの背景は水色から黄緑への柔らかいグラデーション
• 職場の写真はモニターや窓のあるオフィスで、奥行きをぼかす
• ロゴ風のグラフィックはネオン色の立体や円形バッジにする
• ゆるキャラ風のマスコットを小さく添えて親しみを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 4 列のタイルグリッド。SP は 2 列にして、大きいタイルは全幅にする
• ヘッダーの縦書きキャッチは SP では省いてロゴとボタンだけにする
• 細線欧文は SP で 28〜36px に縮める
• 記事カードは SP では 1 列または 2 列にする
• 追従バナーは SP では画面下に小さく固定する

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 行書くと起動時に読み込まれる。