DESIGN.md — 紺×淡青のひし形モチーフ建築求人LP（Calm Navy Architectural Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、上品・高級、シンプル・ミニマル、清潔・爽やか
• キーワード: ひし形コラージュ・紺と淡青・明朝見出し・数値訴求・建築写真・余白多め
• 地の質感: フラットで紙のように静か。淡い水彩風の青い地や、うっすらした波形の境界で柔らかさを足す
• 形: ひし形のタイル・角丸ほぼなしの四角カード・円形アイコン・ゆるい波形の境界
• 温度感: やや寒色寄りで落ち着いている。人物写真の自然光で温かみを補う

Colors

• 白と淡いブルーグレーのセクションを交互に置き、境界はゆるい波形にする
• 紺は面積を絞り、CTAボタン・番号バッジ・データカードの片面だけに使う
• 数値と本文中の強調語は水色で書き、太字だけに頼らない
• 赤や黄などの暖色の強調は使わない
• 写真の上の淡い白グラデーションで文字の読みやすさを確保する

Typography

• 見出しは明朝体でセンター揃え、字間を広めに取る
• 本文はゴシック体の細めのウェイトで、行間を広く取る
• FVコピーの下に小さな英字の大文字サブコピーを添える
• 数値は大きなセリフ数字にし、単位は小さく添える
• 見出しの一部の語だけ水色にして強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せで、2カラムのチェックリストや3列カードを使う
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツ幅を狭めに保ち、左右に大きな余白を残す
• データカードは写真/紺の面とデータ表を左右に分ける
• お客様の声の吹き出しは左右交互にずらして置く
• 利用の流れは中央の縦線と円アイコンを軸に、左右へ交互に説明を出す
• CTAは人物写真の帯の中央に円形の白い窓を作って置く

Elevation & Depth

• カードは薄い影か1pxの細い線だけで浮かせる
• 吹き出しは下側にごく薄い影を付ける
• 強いドロップシャドウは使わない

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: FVは写真をひし形に切り抜いてコラージュする。求人カードは横長の四角。CTA帯は人物写真を左右に置き、中央を円形の白い窓にする
• セクション境界: ゆるい波形の曲線、または直線で白とブルーグレーを切り替える
• ボタンは角丸2〜4pxの横長の長方形にする
• 番号バッジは紺のひし形の中に白い数字を入れる
• アイコンは紺の円の中に白い線画で描く
• 装飾に淡い青のひし形を散らす

Components

• 会員登録CTA（button-primary）: 紺地に白文字の横長ボタン。中央に配置する
• 悩みのチェックリスト（check-list）: 紺のチェックボックスアイコンと短文を、細い下線で区切って2列に並べる
• 番号ひし形バッジ（diamond-badge）: 特長カードの上に置く紺のひし形。中に01などの番号を入れる
• 特長カード（feature-card）: 白地に線画アイコン、明朝の見出し、紺のドットを付けた箇条書き
• 数値データカード（stat-card）: 片側は紺の面か写真に大きな数字、もう片側は細罫線の割合表。外側を細い線で囲む
• お客様の声の吹き出し（voice-bubble）: 紺のラベル（年齢・性別・地域）を付けた淡青の帯状吹き出し。左右交互に置く
• 利用ステップ（flow-step）: 中央の縦線上に紺の円アイコン。白いカードに番号付きの見出しと説明
• 求人例カード（job-card）: 建築写真、事務所名、水色の条件テキスト、右下にピンアイコン付きの地域名

Do's and Don'ts

Do - 余白を広く取り、静かで知的な印象を保つ - 数値は大きな水色の数字で見せ、出典の注釈を添える - アイコンは細い線画に統一する - ひし形のモチーフをFV・番号・装飾で繰り返す - CTAは同じ紺のボタンを数か所に繰り返し置く

Don't - 原色の赤・黄色の強調やセール風の装飾を入れない - 大きな角丸や丸いピル型ボタンにしない - 太いゴシックで見出しを詰めて組まない - 写真の彩度を上げすぎない - 影を強くしない

Page Structure

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

1. ヘッダー（ロゴと登録導線を常に見せる）: 白地の細いバー。右端に紺の小さな登録ボタンを置く
2. ファーストビュー（職種に合った生き方を提案する）: 左にひし形の写真コラージュ、右に大きなコピー、英字サブ、短い説明、CTA
3. 悩みの提起（求職者の不満に共感する）: 明朝の問いかけ見出しと、8項目の2列チェックリスト。下に悩む人物のイラストと一言
4. 解決・特長（サービスの3つの強みを示す）: 淡青の地に白いカード。上段に大きな1枚、下段に2枚。番号ひし形と線画アイコンを付ける
5. 数字で知る（実績データで信頼を出す）: 紺の面・写真と割合表を組み合わせたデータカードを3段、左右交互に置く
6. 中間CTA（登録を促す）: 人物写真の帯の中央に円形の白い窓。中にコピーとボタン
7. 動画紹介（サービスを動画で伝える）: 淡い青のひし形を散らした地の中央に動画を埋め込む
8. 利用者の属性（どんな人が使っているかを示す）: アイコンと大きな%の数値、細罫線の内訳表を2ブロックに分ける
9. 内定率（成果を強調する）: 特大の水色の数字を中央に置き、下に期間別の内訳を3列で並べる
10. 求人例（具体的な求人を見せる）: 建築写真付きのカードを3列に並べる
11. お客様の声（成功体験で後押しする）: ラベル付きの淡青の吹き出しを6件、左右交互にずらして並べる
12. 利用の流れ（登録から入社までの手順を示す）: 中央の縦線上に円アイコンを置き、6ステップを左右交互に配置する
13. 最終CTA（行動を後押しする）: 人物写真の上に円形の白い窓を重ね、力強い一言とボタンを置く
14. フッター（運営情報とリンク）: 濃いグレーの地にロゴと白い小さな文字のリンク

Imagery

• 自然光で撮った、落ち着いた服装の若手社会人の人物写真（PC作業や図面を見る場面）
• 白い外壁やコンクリート、木を使った現代建築の外観・内観写真
• 写真はやや青みのある低彩度に寄せ、淡い白のフェードで背景になじませる
• 淡い青〜水色のひし形を、グラデーションの濃淡で散らした装飾
• 紺一色の細い線画アイコン（人物、虫眼鏡、吹き出し、書類、握手など）
• 素朴な紺一色の人物イラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは全セクションを1カラムにし、FVはひし形コラージュを上、コピーを下に置く
• チェックリストと特長カードは縦に1列で並べる
• データカードは写真や紺の面を上、表を下に積む
• 利用の流れは縦線を左端に寄せ、説明を右側にそろえる
• 求人カードは横スクロールにするか、1列で縦に並べる
• CTAボタンは横幅を約80%に広げ、高さ48px程度にする

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