DESIGN.md — 群青×淡グレーの通信企業採用 LP（Electric Indigo Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: 群青・コラージュ・ワイド欧文・細線・余白・流れる巨大文字
• 地の質感: フラットで無地。細い罫線とドット・グリッド柄を小さく散らす
• 形: 角丸小さめのカード、ピル型の小ボタン、カプセル型の写真枠
• 温度感: クールで澄んだ寒色寄り

Colors

• 地は淡い青灰と白を基本にし、中盤の特集群を群青の全幅帯で包む
• 群青帯の上は白文字・白ピル型ボタンのみ
• 強調したい語は鮮やかな青文字＋下線で示す
• 緑は応募CTAだけに使い、他で使わない
• 巨大な流れる文字は地色より少し濃い線だけで描く
• 番号バッジは系統ごとにピンク・紫・水色などで色分け
• button-entry は文字 #FFFFFF × 背景 #00C41A のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#008912、4.58:1）を使う。
• number-badge は文字 #F3F6FF × 背景 #E0186C のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#D91769、4.54:1）を使う。

Typography

• 大見出しは横に広いワイドな欧文、その下に小さな日本語を添える
• 日本語は細めのウェイトで軽く見せる
• 本文は行間を広く（2.0前後）とり、短い行で改行する
• 強調語は青文字＋下線
• 流れる巨大文字は塗らず細い輪郭線だけにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は左見出し・右説明の 2 カラムが基本
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しの上に短い青い細線を置き、見出しとリードを左右に並べる
• 職種カードは左に文字、右にコラージュパネル（SP は縦積み）
• 流れる巨大文字は画面端まではみ出させる
• 余白は多めにとって情報を詰め込まない

Elevation & Depth

• カードはごく薄い影か影なしにし、白地と青灰地の差で浮かせる
• ピル型ボタンには薄い影をつける
• 写真に強い影はつけない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形、またはカプセル型の枠。人物は切り抜きでコラージュにする
• セクション境界: 直線で色を切り替える
• ボタン・タグはピル型
• カードは小さめの角丸
• 写真の一部をカプセル型で切り抜く

Components

• 応募CTA（button-entry）: 幅広の角丸長方形で、左にラベル、右に＋アイコンを置く
• 白ピルボタン（button-pill-light）: 白地に黒文字のピル型。左に点、右に矢印を置く
• 黒ピルボタン（button-pill-dark）: カード内の「詳しく見る」に使う黒いピル
• 職種カード（job-card）: 白いカード。番号バッジ、欧文大見出し、青い日本語、短い説明、タグ、ボタンを並べ、右にコラージュパネルを置く
• キーワードタグ（tag-chip）: 細い線の小さなピル型タグ。行の中で折り返して並べる
• 番号バッジ（number-badge）: カード左上に置く小さな色付きの楕円と2桁番号
• 流れる巨大文字（marquee-outline）: 輪郭線だけの巨大な日本語を横に流し、途中にカプセル写真を挟む
• セクション見出し（section-head）: 短い青線、点付きの日本語見出し、右に2行のリード
• 括弧囲みコピー（bracket-copy）: 大きな薄青の丸括弧で中央のコピーを左右から挟む

Do's and Don'ts

Do - 人物と都市・機材の切り抜きを組み合わせたコラージュを主役にする - 欧文の大見出しと日本語のサブ見出しを必ずセットで使う - 群青の帯は特集の導線にまとめて使う - ボタンには点と矢印をつけて統一する - 余白を広くとり、細い線で区切る

Don't - 暖色の背景やグラデーションは使わない - 緑を応募以外に使わない - 太くて重い日本語見出しを多用しない - 影の強いカードや立体的なボタンにしない - 本文を長く詰めて組まない

Page Structure

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

1. ヘッダー（サイト内の移動）: 白地に小さなテキストのメニューとピル型ボタンを並べ、上端に青い細線を引く
2. ファーストビュー（世界観を伝える）: 左上に細い大キャッチ、中央に人物と街の切り抜きコラージュを大きく置く
3. お知らせ（更新情報）: 日付と1行の小さなテキスト
4. メッセージ（企業の思いを伝える）: 左に散らした写真3枚、右に強調語を青＋下線にした短い行の文章
5. 問いかけコピー（コンセプトの提示）: 中央に3行のコピーを大きな括弧で挟み、下に白ピルボタンを置く
6. タグ検索（関心からコンテンツを探してもらう）: 群青帯の中に明るい青のパネルを置き、タグのピルを並べる
7. 人とプロジェクト（社員・事業の紹介）: 流れる巨大文字、全幅の動画枠、番号付きの欧文見出しと写真・白ピルボタンを3項目繰り返す
8. 職種紹介（仕事の系統を示す）: 流れる巨大文字のあと、白い職種カードを5枚縦に並べる
9. 会社・環境（企業情報への導線）: 全幅のオフィス写真に白カードを重ね、2段のリンク一覧を置く
10. 採用情報（募集要項とFAQへの導線）: 左に青い欧文見出し、右にサムネイル付きのリスト型リンク
11. CTA（インターン参加・応募）: 青と緑の幅広ボタンを横に並べる

Imagery

• スーツや作業着の若手社員を白背景で切り抜き、ビルや機材、ロボット、車の切り抜きと重ねる
• コラージュには青い四角、ドットグリッド、細い線グラフを小さく散らす
• 写真は自然光で明るく、青空やガラスのオフィスなど寒色寄りに
• インタビュー写真はガラス越しなど抜け感のある構図にする
• 写真の一部をカプセル型に切り抜き、流れる文字の間に挟む
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では左右2カラムを縦積みにし、見出し→リード→写真の順にする
• 職種カードは文字を上、コラージュを下に置く
• 欧文の大見出しは約34px、流れる巨大文字は約64pxに縮める
• 応募とインターンのCTAは下部に固定するか、縦に2つ並べる
• ヘッダーのメニューはハンバーガーにまとめる

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