DESIGN.md — 赤×白の斜め面構成エンジニア採用 LP（Red Diagonal Engineer Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、信頼・誠実、シンプル・ミニマル、力強い・インパクト
• キーワード: 朱赤の斜め面・太い欧文見出し・白カード・丸矢印リンク・人物ポートレート・手書きコピー
• 地の質感: フラットな単色面。影はほぼ使わず、薄いグレーと白の面の差で奥行きを出す
• 形: 直角の矩形と斜めにカットした多角形が基本。ボタンだけはピル型
• 温度感: 赤で熱量を出しつつ、白とグレーで冷静な印象にした中間の温度

Colors

• 地は白と#F7F7F7を交互に使い、朱赤はセクション背後の斜めの大きな面として敷く
• 赤い面の上に白カードを重ねて、カードの角から赤がはみ出して見えるように置く
• 強調色は朱赤 1 色だけにする。矢印・数字・小見出しラベル・アイコンも赤にそろえる
• 見出しは純黒ではなくチャコール#434349にする
• 多色はブログのカテゴリタグだけに限る
• button-primary は文字 #FFFFFF × 背景 #E4433B のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E13027、4.51:1）を使う。
• category-tag は文字 #FFFFFF × 背景 #34CC8C のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#21855B、4.59:1）を使う。

Typography

• 見出しは大きな欧文と小さな和文ラベルの 2 段構成にする
• 欧文見出しの上には細い縦線を 1 本置く
• 数字は赤のMontserrat Boldで大きく見せる
• 和文の字間はやや広げ（0.05em）、行間は広め（1.9）にする
• ファーストビューのコピーは手書き風。赤い丸囲みと下線で一部を強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PICK UP のみ横スライダー）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 16px の余白で中央に置き、背後の赤い面を画面端まで伸ばす
• リンクリストは文字を左、赤い丸矢印を右にそろえ、細い線で区切る
• セクション末尾に下線付きのテキストリンクを中央寄せで置く
• 斜めにカットした白いラベルを写真の下端に重ねる

Elevation & Depth

• 基本は影なしのフラット
• 白カードは細いグレー枠と赤い背面で浮かせる
• 外部リンクのピルボタンだけは右下に灰色のずらし影を付ける
• 斜めラベルの右下に赤い L 字の縁を付けて立体感を出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。人物写真は無地背景の正方形に近い形でグリッドに並べる
• セクション境界: 斜めの直線で切った赤やグレーの多角形の面
• カード・写真は角丸 0
• 丸アイコン（赤丸に白矢印）とピル型ボタンだけ丸くする
• ラベルは右端を斜めにカットした形にする

Components

• 欧文＋和文見出し（section-title）: 細い縦線、大きな欧文、小さな和文の 3 段を中央に積む
• 丸矢印リンク行（arrow-list-item）: 太字の項目名と右端の赤丸白矢印を並べ、下を線で区切る
• 斜めカットラベル（slant-label）: 写真に重ねる白ラベル。右端は斜めで、赤い縁が付く
• 赤ピルボタン（button-primary）: 赤地に白文字の小さなピル型ボタン
• 下線テキストリンク（underline-link）: 中央寄せの文字に赤い細矢印を添え、下に灰色の線を引く
• 白カード（content-card）: 細枠の白カード。写真、リスト、リンクの順に並べる
• カテゴリタグ（category-tag）: 色付き矩形に白い小さな太字
• 外部サイトのピルボタン（external-pill）: 白いピルに黒枠と灰色のずらし影。右端に別窓アイコンを付ける
• アイコン付き案内行（icon-info-row）: グレー地に赤い線アイコン、見出し、説明文を横に並べる

Do's and Don'ts

Do - 朱赤の大きな斜めの面を背景に敷き、白カードを重ねる - 見出しは必ず欧文と和文の 2 段にする - リンクには赤丸の矢印をそろえて付ける - 人物は明るい無地背景で撮った上半身にする - 余白を広く取り、1 セクションのテーマは 1 つにする

Don't - 赤以外の強調色を見出しやボタンに使わない - カードや写真に大きな角丸やドロップシャドウを付けない - グラデーションや装飾的な柄を入れない - 見出しを明朝体や丸ゴシックにしない - 赤い面を細かく分散させない

Page Structure

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

1. ファーストビュー（多様な社員像と手書きのメッセージで共感を呼ぶ）: 人物写真をタイル状に並べ、間に手書きコピーを置く。赤い斜めの面を添える
2. 導入ナビ（会社紹介と募集要項への導線）: 左に赤い面、右に白い面の 2 分割。赤ピルボタンを置く
3. ピックアップ（説明会など旬の情報を見せる）: グレー地に横スライダー。丸い矢印とドットで操作する
4. お知らせ（最新ニュース）: グレー枠のボックスに日付とタイトルを 1 件表示
5. 業界紹介（事業領域の説明）: 赤い面の上に白抜きの欧文見出しと写真。斜めラベルでリンクする
6. 特長（数字と仕事内容で会社を知ってもらう）: 赤い数字とグレーのアイコンを散らしたパネル、写真パネル。それぞれに斜めラベルを付ける
7. キャリア（成長のイメージを伝える）: 赤い背面の上の白カード。人物写真、矢印リスト、下線リンクの順
8. サポート制度（福利厚生で安心感を与える）: キャリアと同じカードの型を繰り返す
9. ブログ（社内の雰囲気を伝える）: 写真、カテゴリタグ、太字タイトル、右寄せ日付の記事を 3 件並べる
10. エントリー（応募への最終導線）: アイコン付き案内のボックスと、卒業年別の外部ピルボタン群

Imagery

• 社員を明るいグレーの無地背景で撮る。上半身で、仕事道具を持たせる
• オフィスの写真は自然光で明るく、笑顔や握手などの交流場面にする
• 仕事内容は CAD 画面などの技術的なカットで見せる
• アイコンは赤またはグレーの単色線画
• ブログにはゆるい動物キャラクターのイラストを混ぜてもよい
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューの人物写真を横一列に並べ、コピーを重ねる
• PC のピックアップは 6 枚程度を同時に見せる
• PC の業界紹介・特長は写真とテキストを左右に並べる
• PC のカードは左にリスト、右に写真の 2 カラムにする。選択中の行は赤く強調する
• PC のブログは 3 カラム、エントリーのボタンは 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 行書くと起動時に読み込まれる。