DESIGN.md — 紺の墨絵とパステル地の採用サイト LP（Navy Ink Illustration Pastel Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、力強い・インパクト、情報量多め・訴求型
• キーワード: 濃紺の墨絵・パステル地の切り替え・コンデンス欧文・透かし文字・白カード・インフォグラフィック
• 地の質感: フラットな淡色の面に、筆の掠れや飛沫が残る墨絵イラストを重ねる。影はほぼなく紙のように軽い。
• 形: 角の小さい白カードと細い線囲みが基本。ピル型の小ボタンと、円形のQバッジ・アイコンでアクセントを付ける。
• 温度感: やや寒色寄り。紺と水色で誠実さを出し、ミントや生成りでやわらかさを足す。

Colors

• 地色はセクションごとに水色→ミント→ラベンダー→生成りと切り替え、章の区切りを色で示す。
• 文字・イラスト・ボタンはすべて濃紺 1 色に揃え、黒は使わない。
• 章の扉は白地に濃紺の巨大欧文の帯にする。
• パープル・スカイブルー・黄緑はグラフとアイコンだけに使う。
• 透かし欧文は地色より少し明るい白（不透明度 50〜60%）で入れる。
• カードは白地にして、地色の上で浮かせる。

Typography

• 見出しは大きな英字と小さな和文を上下に重ねた二段組みにする。
• 英字見出しの背後に、同じ語の巨大な透かし欧文を斜め上に重ねる。
• 数字は縦長のコンデンス書体を極太で見せ、単位は小さく添える。
• キャッチとリード文だけを明朝にし、それ以外はゴシックで組む。
• 文字色はすべて濃紺系に揃える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 1 列か 2 列で並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• 章の頭は、全幅の帯欧文を横にはみ出させて区切る。
• 見出しは左寄せにし、透かし欧文は右側にずらして重ねる。
• 墨絵イラストは見出しの右や余白に大きくはみ出させて配置する。
• 数字の紹介は白い丸角ラベルの下に大きな数字を置き、縦線で区切る。
• FAQ は縦に積んだアコーディオンでカテゴリ別に並べる。

Elevation & Depth

• 影は基本的に使わず、白カードと地色の差で階層を出す。
• カードには細い薄紺の枠線か、極薄の影（0 2px 6px 程度、紺 8%）だけを使う。
• 写真の帯は全幅のフラットな面として置く。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は縦長の角型。風景・現場写真は全幅の横長帯か、モザイク状のグリッドにする。
• セクション境界: 直線で切り替える。章の扉には全幅の白帯に巨大欧文を入れる。
• ボタンとラベルはピル型にする。
• Q マークやアイコンは円で囲む。
• 理念は大きな三角形の線画の中に図示する。
• ビジョン本文は吹き出し形の白い面に入れる。

Components

• 章扉の帯欧文（section-band）: 白地の全幅帯に、濃紺の巨大なコンデンス欧文を繰り返して並べ、左右にはみ出させる。
• 透かし付き二段見出し（heading-watermark）: 英字見出しと和文サブの二段組み。背後に同じ語の巨大な白い透かし文字を重ねる。
• 詳細ボタン（button-primary）: 濃紺地に白文字のピル型小ボタン。矢印アイコンを添える。
• エントリーボタン（button-entry）: 右上に固定する、濃紺の細線で囲んだ英字ボタン。
• 数字ブロック（stat-block）: 白いピル型ラベルの下に、アイコンと極太のコンデンス数字を並べる。円グラフや棒グラフも添える。
• 白カード（card-info）: 白地のカード。上にアイコンと見出し、下に本文、最下部に細線で区切った名称を置く。
• プロジェクト紹介カード（story-card）: 濃紺のピル型ラベル、太字の見出し、写真と人物紹介の枠、本文、続きを読む丸ボタンで構成する。
• FAQ アコーディオン（faq-item）: 白地に薄紺の枠線。左に濃紺の円形 Q バッジ、右に丸い＋アイコンを置く。
• 募集要項タブ（tab-recruit）: 上部に 3 つのタブ、下に枠線付きのスクロール領域を置き、要項を表示する。

Do's and Don'ts

Do - 濃紺 1 色の墨絵風イラストを、各章に躍動感のあるポーズで大きく配置する。 - セクションごとに淡いパステル地を切り替える。 - 英字見出し・和文サブ・透かし文字の三層見出しを全章で統一する。 - 数字は大きなコンデンス書体で、インフォグラフィックとして見せる。 - カードは白地で、余白を均等に取る。

Don't - 黒や彩度の高い原色を地色に使わない。 - グラフ用のアクセント色を見出しやボタンに使わない。 - 濃い影や光沢のあるボタンを使わない。 - 丸ゴシックや手書き書体を混ぜない。 - イラストを多色にしない。

Page Structure

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

1. ファーストビュー（理念を印象づける）: 淡い水色地に墨絵の群像イラストを置き、太い明朝の 2 行キャッチを大小 2 回重ねる。下に明朝のリード文を続ける。
2. お知らせ（最新情報と SNS への誘導）: 四角いサムネイルを横に並べ、下に SNS への白いピル型ボタンを置く。
3. 企業理念（使命と価値観を伝える）: 空の写真帯と章扉の帯欧文で始める。三角形の線画の中に使命を書き、価値観を 4 つの漢字の枠で並べる。
4. ビジョン（求める人物像を示す）: ミント地に吹き出し形の白い面を置き、番号付きの箇条書きで人物像を並べる。
5. 数字で見る会社（規模と働きやすさを数字で示す）: ラベンダー地に 2 列の数字ブロックを並べ、円グラフ・ドーナツグラフ・アイコンを組み合わせる。
6. 技術紹介（事業の先進性を示す）: 生成り地に横スライドする白カードを置き、左右に丸い矢印を付ける。
7. 職種紹介（仕事の種類を理解させる）: 水色地にアイコン付きの白カードを 3 列と 2 列で並べる。
8. プロジェクトストーリー（具体的な仕事を物語で伝える）: 白い大カードを縦に積み、ラベル・写真・人物紹介枠・本文を入れる。
9. 社員インタビュー（人柄を伝える）: 縦長の人物写真カードを横スクロールで並べ、下に写真モザイクを置く。
10. 働く環境・福利厚生（制度の充実を示す）: 生成り地にアイコン付きの白カードを 2 列で並べ、研修スケジュールを表で示す。
11. 募集要項（応募情報を示す）: 動画への導線カードを 2 つ置き、その下にタブ付きのスクロール要項を置く。
12. よくある質問（不安を解消する）: カテゴリ見出しごとに、Q バッジ付きのアコーディオンを縦に並べる。

Imagery

• 人物は墨・筆で描いた濃紺単色のイラストにし、走る・跳ぶなど躍動感のあるポーズにする。掠れや飛沫を残す。
• 現場写真は青みのある寒色トーンで、作業着の人物やビルの設備を写す。
• 社員の写真は明るい背景の前で上半身を撮り、自然な笑顔にする。
• 空や窓辺の写真を全幅の帯にして、章の区切りに使う。
• アイコンは紺・パープル・黄緑を使ったシンプルなフラット線画にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左に縦のナビゲーションを固定し、右上にエントリーボタンを置く。SP ではハンバーガーメニューにする。
• PC の数字ブロック・カードは 2〜3 列。SP では 1〜2 列に落とす。
• 帯欧文と透かし文字は SP でも画面からはみ出させ、迫力を保つ。
• スライダーは SP では 1 枚ずつスワイプで送る。
• 墨絵イラストは SP では幅 80% 程度に縮め、見出しの近くに配置する。

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