DESIGN.md — グレージュ×深紅の雑誌風キャリア採用 LP（Editorial Taupe and Crimson Corporate Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 上品・高級、信頼・誠実、クール・先進的
• キーワード: 雑誌エディトリアル・大きな明朝・斜めの切り抜き・グレージュ・深紅のアクセント・社員インタビュー
• 地の質感: 平らな単色面だけで構成。グレージュは濃淡 2〜3 段の多角形を重ね、光が差すような斜めの面を作る
• 形: 写真は傾けた四辺形で切り抜く。細い線の枠を写真からずらして重ね、ボタンは角丸なしの長方形
• 温度感: やや暖かいニュートラル。落ち着いていて大人っぽい

Colors

• 地の色は白とグレージュの 2 系統だけにする。グレージュ地では明暗の多角形を斜めに重ねる
• 深紅は面には使わず、見出しの文字・カテゴリラベル・CTA の文字と枠に絞る
• 白地のボタンはグレージュの面に白文字。グレージュ地のボタンは白い面に深紅の文字と深紅の枠
• 大コピーは白地なら黒、グレージュ地なら白
• 写真以外に彩度の高い色を足さない
• button-view-more-light は文字 #FFFEF9 × 背景 #AC9C84 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#837259、4.6:1）を使う。

Typography

• 大コピーは字間を詰めた明朝で組み、行ごとに左右の位置をずらしてリズムを作る
• 助詞などは小さく、名詞は大きく組んでサイズに差をつける
• 英字見出しはセリフ体の大文字と、イタリックのコンデンス体を使い分ける
• 長い本文は置かず、コピーと VIEW MORE ボタンだけで構成する
• ラベルとボタンは小さなゴシックか欧文サンセリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストを左右交互に重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面の端まではみ出させ、テキストを写真に重ねる
• インタビューは左寄せと右寄せを交互にする
• VIEW MORE はコピーの真下に置き、左右どちらかに寄せる
• 絞り込みボタンは 2 列のグリッドに並べる
• メディア紹介は 3 列のサムネイルにする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の傾きと、ずらして重ねた線の枠で出す
• 絞り込みボタンにはごく薄い影か縁取りを付ける

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は 3〜8 度傾けた不規則な四辺形で切り抜き、線の枠を少し回転させて重ねる
• セクション境界: セクションの境目は斜めの直線か三角形の面で区切る
• 角丸は基本使わず、直角の長方形にする
• 写真は水平な長方形にせず、clip-path で斜めに切る
• 背景には大きな三角形や多角形を重ねる

Components

• 白地用の VIEW MORE ボタン（button-view-more-light）: グレージュの長方形に白い英字と右矢印を入れる
• グレージュ地用の VIEW MORE ボタン（button-view-more-dark）: 白い面に深紅の 1px 枠を付け、深紅の英字と矢印を入れる
• 職種カテゴリのラベル（category-label）: 深紅の帯に白い小さなゴシックを入れ、INTERVIEW 番号の下に置く
• 職種の絞り込みボタン（filter-button）: 明るいグレーの長方形。右端に縦の区切り線と下向き矢印を付ける
• 傾けた写真と線の枠（tilted-photo-frame）: 斜めに切り抜いた写真に、回転させた細い線の枠をずらして重ねる
• インタビュー番号（interview-number）: INTERVIEW と番号を白い斜体の英字で、ラベルの上に置く
• 英字の見出し（section-title-en）: 深紅のセリフ英字で大きく組み、日本語の小見出しを添える
• 求人一覧への CTA（joblist-cta）: 深紅の極太斜体英字で見出しを置き、右に深紅の面に白文字のボタンを並べる

Do's and Don'ts

Do - 大コピーは極太の明朝で、字間を詰め、文字サイズに差をつけて組む - 写真は必ず傾けて切り抜き、線の枠を重ねる - グレージュ地は濃淡の多角形を斜めに重ねる - 深紅は文字・ラベル・枠などの小さな面に絞って使う - インタビューは写真とコピーを左右交互に置く

Don't - 角丸ボタンやピル型ボタンを使わない - 深紅を背景の大きな面に使わない - 丸ゴシックやポップなイラストを使わない - 写真を水平な長方形のまま整列させない - 本文を長く載せて雑誌風の余白を潰さない - グラデーションや影を強くかけない

Page Structure

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

1. ファーストビュー（求める人物像を一言で宣言する）: 白地に黒の極太明朝を 6 行前後で置き、行ごとに位置とサイズを変える
2. トップメッセージ（経営者の言葉へ誘導する）: 傾けた人物写真に線の枠を重ね、深紅のセリフ英字の見出しとグレージュのボタンを置く
3. 経営戦略（会社の方向性を示す）: 深紅の明朝見出しの横に、傾けた都市の空撮写真を置く
4. 数字で見る会社（規模や制度をデータで伝える）: 線画に赤とグレージュを差したイラストを傾けて置き、明朝見出しとボタンを添える
5. インタビュー一覧の入口（職種で絞り込めるようにする）: グレージュの斜め地に白い日英見出しを置き、絞り込みボタンを 2 列に並べる
6. 社員インタビュー（5 件）（社員の声で入社後のイメージを持たせる）: 傾けた写真の上に番号・深紅のラベル・白い明朝コピー・白ボタンを重ね、左右交互に配置する
7. メディア紹介（外部記事や動画で信頼感を補う）: 斜めの境目から白地に戻し、深紅のセリフ見出しの下にサムネイルを 3 列並べる
8. 求人一覧 CTA（応募先の一覧へ誘導する）: 区切り線の下に深紅の極太斜体英字と、深紅の長方形ボタンを置く
9. シェア・フッター（SNS で拡散してもらう）: SNS アイコンを並べ、線の下に小さなコピーライトを置く

Imagery

• 社員の写真はオフィスや屋外で撮った自然光のスナップ。立ち姿や視線を外したポーズにする
• 写真はガラスや金属、緑が映るモダンな建築を背景にする
• 都市の空撮は夕景の暖かいトーンにする
• イラストは細い線画の人物群。グレージュの塗りと赤いネクタイなどの差し色を入れる
• どの写真も傾けた多角形で切り抜き、細い線の枠を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅に収め、写真とコピーを左右 2 カラムで交互に重ねる
• PC の絞り込みボタンは見出しの右に 3 列で並べる
• PC の大コピーは中央寄せの塊にして、相対的に小さく組む
• PC の VIEW MORE ボタンは幅を詰めてコピーの右下に置く
• 斜めの背景面は 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 行書くと起動時に読み込まれる。