DESIGN.md — グレージュ×木肌ベージュの大工採用 LP（Warm Greige Craftsman Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ナチュラル、やさしい・柔らかい、シンプル・ミニマル、信頼・誠実
• キーワード: グレージュ地・木肌ベージュ・大きな角丸写真・工具の線画・語りかけコピー・英字ラベル
• 地の質感: フラットな無地。半透明の白パネルと木材写真の背景で素材感を出す
• 形: 写真は大きな角丸(約20px)、ボタンは細い線のピル型、見出しは四角いベージュラベル
• 温度感: やや暖かいニュートラル

Colors

• 地はグレージュ1色で統一し、白はカードやパネルだけに使う
• セクション見出しの英字ラベルはベージュの面に白文字で入れる
• 番号や小見出しの英字は焼き色ブラウンで小さく入れる
• CTA は濃いチャコールの面に白文字。それ以外のボタンは線だけのピル型
• 暗い色はフッターだけに使い、ページを締める
• 原色は使わない。彩度の高い色は写真に任せる
• section-label は文字 #FEFBF2 × 背景 #E4C3A4 のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A16630、4.55:1）を使う。
• vertical-tag は文字 #FEFBF2 × 背景 #E4C3A4 のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A16630、4.55:1）を使う。

Typography

• 和文は字間を広め(0.05〜0.08em)にとり、ゆったり見せる
• コピーは短い文節ごとに改行し、詩のように縦に並べる
• 見出しのすぐ上に英字ラベルを置く
• 引用の前後に大きな白い引用符を飾りとして置く
• 本文は行間を2.0前後にして余白を多くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューの顔写真だけ 3 列に並べる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約30pxにそろえ、本文は左寄せ
• 写真は本文と同じ幅で、角丸の矩形にする
• ファーストビューの写真は右に次の写真が少しのぞくカルーセルにする
• インタビュー部分は左上だけを大きく丸めた色付きパネルで囲む
• エントリー部分は木材写真の全面背景に半透明の白カードを重ねる

Elevation & Depth

• 写真の下側にグレーの薄い面を少しずらして重ね、浮いて見せる
• カードに強い影はつけず、ほぼフラットにする
• トップへ戻るボタンだけ白丸に淡い影をつける

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 大きめの角丸矩形。YouTube カードは写真の上端を弧状に切り抜く
• セクション境界: 直線で切り替える。インタビューのパネルだけ片側の角を大きく丸める
• ラベルは角丸なしの四角
• ボタンは細線の枠のピル型
• 写真の角丸はおよそ20pxで統一する

Components

• 英字ラベル（section-label）: ベージュの四角に白い英字。セクション見出しの上に置く
• 線のピル型ボタン（button-outline）: 細いチャコールの枠に英字と右矢印を入れる
• エントリーボタン（button-primary）: チャコールの面に白い英字と矢印を入れたピル型
• 番号つきリンクリスト（numbered-link-list）: ブラウンの番号、項目名、右端の矢印を1行に並べ、細い線で区切る
• 引用コピー（quote-block）: 前後に白い大きな引用符を置いたグレー文字のコピー
• 写真つき紹介カード（photo-card）: 角丸の写真の下に、ブラウンの英字番号、太字の見出し、2行の説明を置く
• 応募パネル（entry-panel）: 写真背景に半透明の白カードを重ね、ボタン、電話番号、補足を点線で区切る
• 縦書き英字タグ（vertical-tag）: ファーストビューの左端に置く、ベージュの縦長帯と白い英字
• トップへ戻るボタン（back-to-top）: 白丸の中に上矢印と英字を入れる

Do's and Don'ts

Do - 地はグレージュで通し、余白を広くとる - 写真は角丸にして、自然光の現場写真を使う - 工具の白い線画を写真や見出しの端に散らす - 英字ラベルと和文見出しをいつもセットで使う - コピーは短い問いかけや語りかけで改行する

Don't - 鮮やかな原色を広い面に使わない - 太い影や立体的なボタンを使わない - 本文を中央寄せにしない(応募パネルだけは例外) - 写真を角丸なしの直角で置かない - 文字を詰めて情報量を多く見せない

Page Structure

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

1. ヘッダー（ロゴとサイト名を示す）: 左にロゴと小さなサイト名、右にハンバーガーメニュー。背景は地色と同じ
2. ファーストビュー（仕事の価値を言い切る）: 太字ゴシック3行のコピー、左端の縦書き英字タグ、角丸写真のカルーセル、工具の線画
3. メッセージ（未経験でも挑戦できると伝える）: 引用符で囲んだリードコピーの後に、短い段落を左寄せで並べ、角丸写真のスライダーを置く
4. 育成制度の紹介（育成の仕組みに導く）: 英字ラベル、見出し、サブコピー、番号つきリンクリスト3行、MORE ボタン、写真
5. 先輩の声（社員の実感を伝える）: 片側を大きく丸めた色付きパネルに、問いかけを3行並べ、顔写真を3列に置く
6. 会社紹介（会社・家づくり・制度を紹介する）: 写真カードを3枚縦に並べ、各カードに英字番号、見出し、説明をつける
7. 保護者向けメッセージ（保護者や教員の信頼を得る）: 引用コピー、長めの本文、右寄せの署名、代表者の角丸写真
8. エントリー（応募と問い合わせを促す）: 木材写真の全面背景に半透明の白カードを重ね、ボタン、電話番号、高校生向けの案内を入れる
9. 動画チャンネル（動画で職場の雰囲気を伝える）: 白いカードにロゴ、説明、線のボタンを置き、下に弧で切り抜いた写真を入れる
10. フッター（サイト内のリンクと応募への導線を置く）: チャコールの地に白いロゴとリンク、木目調のピル型エントリーボタン、黒帯にコピーライト

Imagery

• 建築現場で働く若手とベテランを、自然光で明るく撮る
• 木の柱や梁の淡い木肌色を写真の主なトーンにする
• 人物はヘルメットと作業着で、笑顔や真剣な表情を見せる
• ノミ、カンナ、金づち、定規などの工具を白い細線で描く
• 色温度は暖かめにし、彩度は抑えて柔らかく仕上げる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに横並びのナビと円形のエントリーボタンを置く
• PC のコピーは1行を長くして中央寄せにする
• PC は写真とテキストを左右2カラムに並べ、配置を交互に入れ替える
• 会社紹介のカードは PC で3列に並べる
• 応募パネルは PC でボタンと電話番号を左右に並べる
• 動画カードは PC で左に文章、右に写真の横長カードにする

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