DESIGN.md — 白×深紅の縦書き見出し 新卒・キャリア採用LP（Crimson Vertical Typography Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、クール・先進的、シンプル・ミニマル
• キーワード: 縦書き見出し・深紅アクセント・白×ライトグレー交互・アイソメ線画・横スライダー・余白多め
• 地の質感: フラットな単色面。グラデーションや影はほぼ使わない
• 形: カードは角丸なしか極小、CTAはピル型、ENTRYボタンは大きめの角丸四角
• 温度感: クールで知的。赤のアクセントで熱量を足す

Colors

• 地は白とライトグレーをセクションごとに交互に使う
• 赤はラベル見出し・CTA・ENTRY・矢印丸アイコン・職種名に限定する
• 新卒は赤、キャリアはグレーで区分する
• グレー地には白カード、白地にはグレーカードを置く
• イラストはグレーの濃淡に赤を1点だけ差す
• 写真以外で黒・グレー・赤以外の色は使わない

Typography

• 大見出しは縦書きで画面右側に寄せ、2〜3列で組む
• 大見出しの右隣に欧文の縦ラベルを小さく添える
• 本文は字間を広めにとり、行間は1.9前後にする
• 人名は大きく、下に欧文の小さなローマ字表記を添える
• ロゴ風タイトルは細長い斜体のコンデンス欧文にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは2列グリッドか横スライダーにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 14px（375px 幅換算）
• 左右の余白は約20px
• セクション冒頭は左に小ラベル、右に縦書き見出しを置く
• リード文は見出しの下に左揃えで置く
• スライダーは右端のカードを見切らせ、横スクロールできることを示す
• スライダーの下は、左に丸い前後矢印、右にピル型CTAを並べる

Elevation & Depth

• 影は使わず、フラットな面と細い線だけで階層をつける
• ページトップボタンだけ赤丸で固定表示する

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は白背景の切り抜き。カード内は四角くトリミングし、角丸なし
• セクション境界: 直線で地色を切り替える。区切りは細い横線
• カード・バナーは角丸なしの四角
• CTAとタグはピル型
• ENTRYボタンは角丸16pxの正方形に近い形
• 矢印アイコンは丸の中に小さな山形

Components

• ピル型CTA（button-primary）: 右寄せの赤いピル型。右端に白丸の矢印を付ける
• 採用区分エントリー枠（entry-box）: 細線の四角枠の中に区分名、下線、テキストリンク2つを置き、右に赤い角丸のENTRYボタンを配置する
• 固定2分割ボタン（sticky-tabs）: 画面幅いっぱいを左右に分け、左を赤、右をグレーにする。小見出しと本ラベルの2段組み
• 赤下線の小ラベル（section-label）: 左端から伸びる赤い下線の上に、赤文字で短いラベルを置く
• ハッシュタグフィルター（filter-tag）: グレーのピル型タグ。選択中は赤地に白文字
• 社員インタビューカード（profile-card）: 上部にキャッチ文と吹き出し線、中央に人物の切り抜き、下に所属と名前を置く
• イラスト付き制度カード（illust-card）: 赤い見出し、線画イラスト、2行の説明、右下の赤丸矢印で構成する。2列で並べる
• 左右分割バナー（banner-split）: 片側を赤地のイラストや画像、もう片側を白地のテキストにし、赤い細枠で囲む
• お知らせ区分バッジ（news-badge）: 日付の横に置く小さな角丸ラベル。白抜き赤枠、グレー地、赤地の3種

Do's and Don'ts

Do - 見出しは縦書きで大きく、右寄せにする - 赤は要所だけに使い、地は白とグレーで保つ - イラストはグレーの線画に赤を一点だけ差す - スライダーの次のカードを見切らせる - セクションごとに地色を交互に切り替える

Don't - 赤以外の強い色を使わない - カードに影や大きな角丸を付けない - 見出しを横書きの中央揃えにしない - グラデーションや装飾的なテクスチャを使わない - 本文の行間を詰めない

Page Structure

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

1. ファーストビュー（企業の顔と採用サイトであることを示す）: 屋外で見上げる人物写真の下部に、赤い斜体のコンデンス欧文ロゴを重ねる
2. お知らせ（最新情報を伝える）: 赤い欧文見出しの下に、日付・区分バッジ・1行のテキストを3件並べる
3. 採用区分エントリー（新卒とキャリアの入口に分ける）: 細枠の箱を2つ縦に並べる。新卒は赤、キャリアはグレーのENTRYボタン
4. コンセプト（企業の挑戦の姿勢を伝える）: グレー地に縦書き大見出しを置き、動画サムネイルのイラスト、リード文、事業カード2枚を続ける
5. プロジェクト検索バナー（関心のある仕事へ誘導する）: 左が赤地イラスト、右が白地の斜体欧文の分割バナー
6. 社員インタビュー（多様な人材を見せる）: タブとハッシュタグで絞り込み、人物カードを横スライダーで見せる
7. クロストーク（社員同士の本音を伝える）: グレーのカードに2人の写真を並べ、赤文字の『部署×部署』を添えてスライダーにする
8. 入社前後バナー（入社前後のギャップ情報へ誘導する）: 左右分割バナー。一部の文字を赤丸で囲んで強調する
9. 働き方・制度（成長支援と制度を伝える）: グレー地に縦書き見出しと長めの本文を置き、イラストカードを2列×3段で並べる
10. 職種紹介（職種の種類を示す）: カテゴリ見出し付きのカードに、イラスト・赤い職種名・職種タグを入れてスライダーにする
11. 関連リンク（方針・メッセージ・メディアへ誘導する）: 左が画像、右が赤地に白文字の横長バナーを3本縦に並べる

Imagery

• アイソメトリックの線画イラストを使う。グレーの濃淡に赤を差し色にする
• 人物は白背景で自然な笑顔のバストアップ。切り抜きか白壁の前で撮る
• 対談写真は職場で撮った自然なスナップを2枚並べる
• ファーストビューは緑の屋外で、ローアングルから明るく撮った人物写真
• 動画サムネイルはイラストの中央に赤丸の再生ボタンを置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは本文を左、縦書き見出しを右に置く2カラム構成にする
• PCではお知らせを横並びの1行表示にし、エントリー枠2つも横に並べる
• 制度カードはPCで3列×2段にする
• PCではインターン・キャリア登録の固定ボタンを左端の縦タブにする
• スライダーはPCで4枚程度を同時に表示する

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