--- version: alpha name: Electric Indigo Corporate Recruit LP description: 淡い青灰の地と濃い群青の帯セクションを交互に置いた新卒採用サイト。人物とビル・機材を切り抜いて組んだコラージュ、ワイドな欧文見出し、白抜きの巨大文字が横に流れる演出で、先進性と誠実さを両立させている。 colors: primary: '#07008C' background: '#EEF3F7' surface: '#FEFEFE' background-alt: '#EEF3F7' secondary: '#132296' text: '#1A1A1A' accent-1: '#1A2FD0' button-dark: '#1C1D1D' cta: '#00C41A' on-cta: '#FFFFFF' accent-2: '#0022CC' line: '#C1D1CE' on-dark: '#F3F6FF' marker: '#E0186C' cta-accessible: '#008912' marker-accessible: '#D91769' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Syne fontSize: 34px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Zen Kaku Gothic New fontSize: 64px fontWeight: 300 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px button-pill-light: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-pill-dark: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px job-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 480px tag-chip: backgroundColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px number-badge: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 14px marquee-outline: textColor: '{colors.line}' typography: '{typography.accent}' height: 160px section-head: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 60px bracket-copy: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 140px --- # DESIGN.md — 群青×淡グレーの通信企業採用 LP（Electric Indigo Corporate Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、信頼・誠実、シンプル・ミニマル - **キーワード**: 群青・コラージュ・ワイド欧文・細線・余白・流れる巨大文字 - **地の質感**: フラットで無地。細い罫線とドット・グリッド柄を小さく散らす - **形**: 角丸小さめのカード、ピル型の小ボタン、カプセル型の写真枠 - **温度感**: クールで澄んだ寒色寄り ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#07008C` | ブランド群青・帯セクション地 | 20% | 画素の実測 | | `background` | `#EEF3F7` | ページ基本地の淡い青灰 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | カード・ヘッダー地 | 20% | 画素の実測 | | `background-alt` | `#EEF3F7` | コラージュ背景パネル | 5% | 画素の実測 | | `secondary` | `#132296` | 帯内の明るい青パネル | 2% | 画素の実測 | | `text` | `#1A1A1A` | 見出し・本文の黒 | 3% | 推定 | | `accent-1` | `#1A2FD0` | 強調語・日本語サブ見出しの青 | 1% | 推定 | | `button-dark` | `#1C1D1D` | | 1% | 画素の実測 | | `cta` | `#00C41A` | エントリー主CTAの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#0022CC` | インターン用の青ボタン | 1% | 画素の実測 | | `line` | `#C1D1CE` | 罫線・巨大アウトライン文字 | 2% | 画素の主要色に補正 | | `on-dark` | `#F3F6FF` | 群青地上の白文字 | 1% | 画素の実測 | | `marker` | `#E0186C` | 番号バッジのピンク | 0% | 推定 | | `cta-accessible` | `#008912` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#D91769` | AA を満たす補正値（計算） | | 計算 | - 地は淡い青灰と白を基本にし、中盤の特集群を群青の全幅帯で包む - 群青帯の上は白文字・白ピル型ボタンのみ - 強調したい語は鮮やかな青文字＋下線で示す - 緑は応募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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦組み風キャッチ | ゴシック | Zen Kaku Gothic New | 300 | 40px | 1.2 | 0.02em | | `headline-lg` | セクションの欧文大見出し | 欧文サンセリフ | Syne | 500 | 34px | 1.1 | 0.02em | | `headline-md` | 中央の問いかけコピー | ゴシック | Noto Sans JP | 400 | 24px | 1.6 | 0.05em | | `headline-sm` | 欧文見出し下の日本語サブ見出し | ゴシック | Noto Sans JP | 500 | 13px | 1.5 | 0.05em | | `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.05em | | `note` | タグ・日付・注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `accent` | 横に流れる巨大アウトライン文字 | ゴシック | Zen Kaku Gothic New | 300 | 64px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.05em | - 大見出しは横に広いワイドな欧文、その下に小さな日本語を添える - 日本語は細めのウェイトで軽く見せる - 本文は行間を広く（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 ```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-b289f7af`（元 LP の URL から採番） - **元 LP**: https://www.ntt-west-recruiting.jp/gradu/nttwest/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。