DESIGN.md — 青い流線と白地の技術系採用 LP（Clean Blue Wave Engineering Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、クール・先進的
• キーワード: 白地・青い流線・明朝見出し・英字ラベル・社員写真・余白多め
• 地の質感: フラットな白とごく薄いベージュの面に、半透明の水色の曲線リボンを背景に流す
• 形: 角丸は小さめ。円形の矢印ボタンと、葉の形をした小さなラベルアイコン
• 温度感: やや寒色寄り。ベージュとオレンジでほんの少し温かみを足す

Colors

• 白地と薄ベージュのカード面を交互に置き、セクションの区切りを色で示す
• 紺はラベルのアイコンや ENTRY 見出しなど、ブランドを示す要所だけに使う
• オレンジはヘッダーの ENTRY と応募ボタンの丸矢印だけに使う
• 水色の流線は背景装飾にして、文字の可読性を落とさない淡さに留める
• 本文は黒に近い灰色にして、色付き文字はリンクやタグだけにする
• header-entry は文字 #FFFFFF × 背景 #FF9422 のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B65E00、4.58:1）を使う。

Typography

• 和文見出しの上に、葉形アイコン付きの英字ラベルを必ず添える
• 和文見出しは細めの明朝で品よく、太字は使わない
• 本文の行間は 2.0 前後にして、ゆったり読ませる
• インタビューカードのキャッチは白帯の上に黒文字で置き、行ごとに帯を区切る
• 英字は大文字にして、字間を少し広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューのみ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• コンテンツカードは画面幅いっぱいの薄ベージュ帯にして、中の写真は端まで広げる
• VIEW MORE はカードの外に出し、右寄せと左寄せを交互にする
• 写真スライダーは左右がはみ出す横並びにする
• 下層への導線ブロックは細い横線で区切って縦に並べる

Elevation & Depth

• 影はほぼ使わない。インタビュー写真のみごく弱い影を付ける
• 奥行きは、背景の流線と巨大な英字ロゴタイプを重ねて出す

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 8〜12px の長方形。FV は画面幅いっぱいの角なし
• セクション境界: 直線。ベージュ帯の切り替えと 1px の灰色線で区切る
• VIEW MORE の矢印は青い線の正円にする
• 応募ボタンはオレンジの細枠と白地の角丸長方形にし、右端にオレンジの丸矢印を置く
• タグは青い細枠の角丸なし小矩形にする

Components

• 英字ラベル見出し（section-label）: 紺の葉形アイコンに英字ラベルを続け、その下に明朝の和文見出しを置く
• VIEW MORE リンク（button-view-more）: 英字テキストの右に、青い細線の円で囲んだ右矢印を置く
• 応募ボタン（button-primary）: 白地にオレンジの細枠。和文ラベルは濃い青で、右にオレンジの丸矢印を置く
• ヘッダーENTRY（header-entry）: 右上に置くオレンジの正方形ボタン。隣にハンバーガーメニューを並べる
• ベージュのコンテンツカード（content-card）: 英字ラベル、見出し、写真、短い説明文を縦に積んだ薄ベージュの帯
• 社員インタビューカード（interview-card）: 縦長の人物写真に縦書きの英字番号と白帯のキャッチを重ね、その下にタグ・名前・下線を並べる
• 入社区分タグ（tag-type）: 青い細枠に青文字の小さなタグ
• FV白帯キャッチ（fv-caption）: 写真の左下に、行ごとに白帯を敷いた明朝のキャッチを置く

Do's and Don'ts

Do - 見出しは毎回、英字ラベルと明朝の和文見出しの 2 段で組む - 背景には水色の流線を斜めに流して、軽さと先進感を出す - 人物写真は作業着とスーツの社員が明るく写ったものにそろえる - オレンジは応募導線だけに絞って目立たせる - 余白を大きめにとり、1 セクションの情報量を抑える

Don't - 見出しを太いゴシックにしない - オレンジを装飾や見出しに広げない - 濃い色の面を大きく使わない - 強い影やグラデーションのボタンを使わない - セクション背景にパターン柄を入れない

Page Structure

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

1. ファーストビュー（企業の印象を一目で伝える）: 空を背景にした社員の全面写真。左下に白帯の明朝キャッチ、上部にロゴとオレンジの ENTRY を置く
2. メッセージ（仕事の価値と想いを伝える）: 英字ラベル、ゴシックの大見出し、長めの本文を流線背景の上に組む
3. 写真スライダー（職場の雰囲気を見せる）: 角丸写真を横に並べ、左右をはみ出させる
4. 会社データ導線（会社の概要へ誘導する）: ベージュのカードに見出し・写真・説明を入れ、外に VIEW MORE を置く
5. 仕事紹介導線（業務内容へ誘導する）: 同じ型のベージュカード。VIEW MORE を左寄せにする
6. 社員インタビュー（働く人のリアルを見せる）: 巨大な薄色英字の下に 2 列 × 3 段のインタビューカードを並べる
7. 外部口コミ導線（第三者の評価を示す）: 枠で囲んだバナーと、リンク付きの短文を中央揃えで置く
8. 座談会（経営層と社員の距離感を伝える）: ベージュのカードに集合写真と説明文を入れる
9. キャリア・福利厚生（制度面の安心感を伝える）: 線で区切ったブロックを縦に並べる。見出し下に青線、右に VIEW MORE
10. エントリー（応募へ誘導する）: 水色地に大きな紺の ENTRY と短文を置き、白い応募ボタンを 2 つ縦に並べる
11. フッター（会社情報とサイト内リンクを示す）: ロゴ、所在地、丸矢印付きのリンク一覧、コピーライト

Imagery

• 現場の作業着姿の社員を、明るい曇り空やオフィス街を背景にあおり気味で撮る
• インタビューは白壁と観葉植物を背景にしたバストアップで、明るく柔らかな光にする
• 業務写真は計測機器や制御盤の手元をクローズアップで撮る
• 背景装飾は水色の半透明な曲線リボンを複数重ねて描く
• 巨大な英字ロゴタイプを薄いピーチ色で横いっぱいに敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツカードを写真と文章の 2 カラムにし、左右の配置を交互に入れ替える
• PC のインタビューは 3 列グリッドにする
• PC のヘッダーはグローバルナビを横並びにし、右端にオレンジの ENTRY を置く
• PC のキャリアと福利厚生は 2 カラムに並べる
• PC の ENTRY は見出しと文章を横並びにし、応募ボタンも 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 行書くと起動時に読み込まれる。