DESIGN.md — 海の青と白の地方士業求人 LP（Coastal Blue Professional Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、上品・高級、情報量多め・訴求型
• キーワード: 地方移住・海辺の街・ブルー基調・明朝見出し・数値訴求・誠実
• 地の質感: 写真が主役。淡い三角形の幾何学パターンを背景にうっすら敷き、フラットな白カードを重ねる
• 形: 角丸はほぼ使わない。四角いカードと表、円形の写真やアイコン、矢羽根型のステップラベル
• 温度感: やや寒色で清涼感があり、落ち着いている

Colors

• 地は白と淡いブルーグレーを交互に使い、セクションを分ける
• 強調色は青系のみにする。赤は注意書きの 1 行だけに使う
• 待遇の数字だけは青→ターコイズのグラデ帯に置き、白カードで浮かせる
• 表の項目欄は中明度の青に白文字、値欄は白地に濃いグレー文字にする
• 見出しの下には短い青のラインを中央に入れる

Typography

• 見出しは明朝で中央揃えにし、上に欧文のイタリックラベル、下に短い青のラインを置く
• キャッチは手書き風の書体にして、写真の上に白文字で載せる
• 本文はゴシックで字間を広めにとり、左揃えにする
• 数字は明朝の太字で大きく、単位は小さく添える
• 強調したい語は青文字にして二重下線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。待遇の数値カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは見出しブロック（欧文ラベル・明朝見出し・ライン・リード文）で始める
• 特長の写真は画面幅いっぱいに置き、番号と縦線で次の本文につなげる
• スタッフ紹介は左に写真、右に名前の白カードを並べる横長カード
• 会社概要と募集要項は左の項目欄・右の値欄の 2 列の表にする
• フォームはラベルを上、入力欄を全幅に置き、区切り線で区切る

Elevation & Depth

• カードには薄い影（0 2px 6px rgba(0,0,0,.08)）を付ける
• スタッフカードは右下に淡い影を出して浮かせる
• 表やフォームは影を付けず、線だけで区切る

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 基本は四角。ビフォーの小さな写真は円形でアフター写真の角に重ねる
• セクション境界: 直線で区切る。背景に淡い三角形の幾何学模様を敷く
• ボタンとカードはほぼ角丸なしにする
• フローのアイコンは青い円の中に白い線画で描く
• ステップのラベルは右端が矢羽根になった帯にする

Components

• セクション見出し（section-heading）: 欧文イタリックのラベル、明朝の見出し、短い青ラインを中央に縦に積む
• ビフォーアフターカード（before-after-card）: 左にアフター写真と円形のビフォー写真、右に淡いグレー面と二重下線付きの見出しを置く
• 待遇の数値カード（stat-card）: グラデ帯の上に置く白カード。線画アイコン、ラベル、大きな明朝の数字で構成する
• 年次ラベル（stat-label）: 数字の上に置く青い帯。中は白文字
• スタッフカード（staff-card）: 左に写真と左上の青バッジ、右に白地でローマ字名と明朝の氏名を置く
• FAQアコーディオン（faq-item）: 白い行の先頭に明朝のQ、右端に青い四角とシェブロンを置く
• 募集要項の表（spec-table）: 左は青地に白文字の項目欄、右は白地の値欄。罫線で区切る
• 採用フロー（flow-steps）: 矢羽根型のSTEPラベル、青い円のアイコン、点線のつなぎを 4 つ並べ、下に枠線付きの補足ボックスを置く
• 必須バッジ（required-badge）: フォームのラベルの横に置く、紺の小さな四角に白文字
• 送信ボタン（button-primary）: 青→ターコイズの横グラデで、角丸の小さい大きなボタン

Do's and Don'ts

Do - 地域の海や街の写真を大きく使い、青で統一する - 数字の訴求は大きな明朝の数字と線画アイコンで見せる - 見出しは毎回同じ型（欧文ラベル・明朝・ライン）で揃える - 白と淡いブルーグレーの地を交互にしてリズムを作る - 表とフォームは線を細くして、余白を広めにとる

Don't - 暖色の派手な色やピル型のボタンを使わない - 見出しをゴシックの極太にしない - 影を強くしたり、立体的な装飾を入れたりしない - 赤を注意書き以外に使わない - 数値カードに写真を入れて情報を詰め込みすぎない

Page Structure

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

1. ファーストビュー（地方で働く価値観を一瞬で伝える）: 海と街を見下ろす写真を全面に敷き、白い手書き風のキャッチ、下線付きのリード、白い帯の地域ラベルを重ねる
2. 悩みの提起とメリット（都会の不満と地方の解決策を対比する）: 明朝の問いかけ見出しの下に、ビフォーアフターカードを 3 つ縦に並べ、それぞれに短い本文を付ける
3. 地域紹介（移住への不安をやわらげる）: 港の写真の上に白い縦長カードを置き、手書き風の見出しと本文を入れる。その下に食べ物と人物の写真帯を続ける
4. 待遇（年収・残業・休日を数字で示す）: 青→ターコイズのグラデ帯に、年収 3 段の大カードと 2×2 の数値カードを置く
5. 特長（職場の良さを 2 点で語る）: 全幅の職場写真、番号と縦線、明朝の 2 行見出し、本文を 2 回繰り返す
6. スタッフ紹介（一緒に働く人を見せる）: 淡い幾何学模様の地に、横長のスタッフカードを縦に並べ、最後に集合写真を置く
7. 事務所紹介（オフィスの品質と基本情報を伝える）: 左右がのぞくスライダーとドットのページャーの下に、2 列の会社概要表を置く
8. よくある質問（応募前の疑問に答える）: 淡い地の上にアコーディオンを 5 つ並べる
9. 募集要項（条件を詳しく示す）: 青い項目欄の 2 列の表を長く続ける
10. 採用の流れ（応募のハードルを下げる）: 淡い写真の地の上に、4 ステップの円アイコンと、枠線で囲んだ補足を置く
11. 応募フォーム（応募を受け付ける）: 中央揃えのリード文と赤い注意 1 行、必須バッジ付きの入力欄、チェックボックスのリスト、グラデの送信ボタン
12. フッター（締めくくりとページトップへの導線）: ページトップへ戻る山形の矢印と、中明度の青い帯に白いコピーライトを置く

Imagery

• 地域の海・港・街並みを高い所から撮り、青みを強めに補正する
• スーツの社員が明るいオフィスで働く自然な写真を使う。黄色い椅子など、差し色が少しあってよい
• ビフォーは小さな円形の写真、アフターは大きな四角い写真にする
• アイコンは青い細線の線画で統一する
• 背景には淡いブルーの三角形を幾何学的に重ねた模様を敷く
• 写真の端は白へフェードさせて、次のセクションになじませる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のFVは会議室などの写真にし、キャッチを中央に置く。ヘッダーにナビを横並びで出す
• PC ではメリットカードを 3 列、待遇の数値は年収カードと 2×2 のグリッドを横に並べる
• PC の特長は写真と本文を左右交互に配置する
• PC のスタッフカードは 2 列のグリッドで、写真を上・名前を下にした縦型にする
• PC の会社概要表は 2 列に分け、フォームはラベルを左・入力欄を右に置く
• PC の本文幅は約 1000px の中央寄せにする

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