DESIGN.md — 朱色フレーム×紺ブロックの新卒採用 LP（Orange Frame Navy Block Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、信頼・誠実、親しみ・手作り感、力強い・インパクト
• キーワード: 朱色フレーム・紺ブロック・生成り地・線画イラスト・モノクロ人物写真・角ばった四角ボタン
• 地の質感: フラットな単色面が中心。生成り地にうっすら筆跡のような模様を置き、手描きの線画イラストで温かみを足す。
• 形: 基本は角丸なしの矩形ブロックとボタン。採用情報のカードだけ角丸 12px 前後にしている。斜線の装飾もある。
• 温度感: 朱色で暖かく、紺で締めた中間からやや暖色寄りの温度感。

Colors

• 画面の左右と上に朱色の太いフレーム（約14px）を通し、中のコンテンツは生成りの地に置く
• コンセプトとインタビューは紺の大きなブロックにし、白文字で読ませる
• 主ボタンは紺の地に白文字。朱地の上でも紺のまま使う
• 小見出し・英字見出し・ラベルは朱にして、紺と対比させる
• 後半の採用情報は朱の全面地にし、中に生成りのカードを置く
• 人物写真はモノクロにし、上に蛍光色の折れ線を一本だけ重ねる
• label-tag は文字 #FFFFFE × 背景 #E94707 のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D54106、4.57:1）を使う。
• line-box は文字 #FFFFFE × 背景 #E94707 のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D54106、4.57:1）を使う。

Typography

• 英字の大見出しと、その下の小さな和文サブ見出しをセットにする
• 和文キャッチは 2〜3 行に意図的に改行し、太字にする
• キャッチの各行に白い帯を敷き、マーカーのように見せる
• 英字ラベルは 90 度回転させ、ブロック左端に縦向きで置く
• 本文は短い文で改行を多めにし、行間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューと採用情報のカードだけ 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 外周を朱フレームで囲み、その内側にコンテンツを置く
• 紺ブロックは内側に余白を取ったうえで、写真をはみ出すように配置する
• 番号付きの特長は 2×2 グリッドにし、それぞれに線画を添える
• 各セクションの末尾にボタンを 1 つ、中央に置く
• 会社情報は表形式にし、下に地図を全幅で置く

Elevation & Depth

• 影はほぼ使わず、色面の重なりで奥行きを出す
• 白カードが朱地にはみ出して重なる構成で、段差を作る

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は基本矩形で切り抜く。PC ではアイキャッチ写真だけ大きな円形にする
• セクション境界: 直線で色面を切り替える。インタビュー部には斜めの細線を装飾として入れる
• ボタンは角丸なしの矩形にし、右に矢印か丸矢印アイコンを付ける
• 採用情報のリンクカードだけ角丸にする
• 手描き楕円の囲みや矢印の線画を、写真の上に重ねる

Components

• 紺の矩形ボタン（button-primary）: 幅 約 190px。白文字の後ろに朱の丸矢印アイコンを付ける
• 白の矩形ボタン（button-white）: 紺地の上で使う白地のボタン。黒文字に朱の丸矢印を付ける
• 朱の見出しタグ（label-tag）: 朱の矩形に白文字を入れ、セクションの種類を示す
• 白帯キャッチ（marker-heading）: キャッチの各行の背後に白帯を敷く
• 番号付き特長（number-feature）: 紺の丸数字と太字の短い見出しの下に、線画イラストを置く
• 社員カード（interview-card）: 上からモノクロ写真＋蛍光の折れ線、テラコッタのグラデに白文字の一言、焦げ茶帯に入社年と職種の順に重ねる
• 採用情報カード（link-card）: 生成りの角丸カード。紺の小さな見出しと、オレンジ系の線画アイコンを入れる
• LINE 相談枠（line-box）: 朱地に白の細枠を引き、見出し・本文と緑の LINE ボタンを入れる

Do's and Don'ts

Do - 朱フレーム・紺ブロック・生成り地の 3 色の構成を、ページ全体で守る - 人物写真はモノクロにし、色付きの折れ線を重ねる - 特長やリンクには手描き風の線画イラストを添える - 英字見出しと和文サブ見出しをセットで使う - ボタンは角丸なしの矩形にする

Don't - ボタンをピル型にしたり、グラデーションにしたりしない - 朱と紺以外のブランド色を足さない（LINE の緑は例外） - ドロップシャドウを強くかけない - カラー写真の人物をインタビューカードに使わない - 本文を長い一段落で詰めて書かない

Page Structure

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

1. ファーストビュー（社員の集合写真で、会社の雰囲気を伝える）: 全幅の集合写真の左上にロゴを置き、右上に朱のハンバーガーメニューを置く。手描き楕円で囲んだ短いコピーを写真に重ねる
2. お知らせ（最新の採用情報を知らせる）: 白地に日付と一行タイトルを並べ、紺のボタンを置く
3. コンセプト（仕事観を語る）: 紺ブロックの中に朱の小見出し、白の太字キャッチ、写真、白文字の本文を順に置く。左端に縦向きの英字ラベルを付ける
4. カルチャー（働き方の価値観を示す）: 白帯キャッチの下に、番号付き 4 項目を線画とともに 2×2 で並べる。最後に本文とボタンを置く
5. 社員インタビュー（先輩社員の声を紹介する）: 紺地に朱の英字見出しを置き、社員カードを 2×2 で並べる。斜線の装飾を入れ、白ボタンで締める
6. 仕事紹介（事業内容を説明する）: 朱タグと太字見出しの下に、オフィス写真と白カードを置く。本文は朱文字にする
7. 採用情報（データ・募集要項・FAQ へ誘導する）: 朱の全面地に紺の英字見出しを置き、生成りの角丸カードとアイコンを並べる
8. LINE 相談（気軽に問い合わせてもらう）: 白の細枠の中に、見出し・本文と緑のボタンを入れる
9. 会社情報（所在地と連絡先を示す）: 生成り地にロゴ、表形式の会社情報、地図、紺のボタン 2 つを順に置く

Imagery

• 人物は自然光のオフィスや屋外で撮る。笑顔で会話している場面にする
• インタビュー写真はモノクロにし、黄緑やマゼンタの折れ線を斜めに重ねる
• 線画イラストは黒の手描き線にする。オレンジとグレーを部分的に塗る
• 矢印や人物の線画を、写真の端からはみ出して配置する
• 生成りの地に、うっすら筆跡のような模様を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では上部にグローバルナビを横並びで置く
• PC のファーストビューは朱地の上に写真を右寄せで重ねる
• PC のコンセプトは円形写真と紺ブロックを左右に並べ、互い違いに配置する
• インタビューカードは PC で 4 列、採用情報カードは 3 列にする
• PC の LINE 枠は横長にし、ボタンを右に置く
• PC の会社情報はオフィス写真と情報を 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 行書くと起動時に読み込まれる。