DESIGN.md — 新聞紙面風×金網点の採用サイト LP（Newspaper Editorial Recruit LP with Gold Halftone Tiles）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、レトロ
• キーワード: 新聞紙面・縦書き明朝・モノクロ写真・金の網点・バナータイル・日付表示
• 地の質感: 暗い写真に半透明の黒を重ね、明るい面にはドットの網点やグレーのドット地を敷いて印刷物の質感を出す
• 形: 角丸なしの四角形が基本。罫線の枠と細い線で紙面を区切る
• 温度感: 上部は黒と褐色の重く熱い印象、下部はクリーム・金・グレーで明るく軽い印象

Colors

• 上部の主役エリアは墨色と褐色を重ねた暗いトーンで統一する
• 下部のナビ部分は白地に、クリーム・ベージュ・グレーのバナーを並べる
• 金はバナーの縁取り帯・網点・タブ文字だけに使う
• ニュース枠とフッターは薄いグレー地で区切る
• 鮮やかな色は使わない。色を足すのはコーポレートの紺ロゴだけ
• tab-recruit は文字 #C9A75A × 背景 #5A5A5B のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• メインのコピーは極太明朝の縦書きにし、画面の半分以上を占めさせる
• 小見出しは白い四角の上に黒い明朝を置き、見出しの切り抜き風にする
• 紙面風の本文は明朝の縦書きを多段組みにし、詰めて配置する
• バナー見出しは英字の太いサンセリフに和文の副題を添える
• 日付は大きなゴシックの数字と小さな単位文字の組み合わせにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、バナーは 2 列と全幅を交互に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• ファーストビューは左右の余白なしで全幅に広げる
• バナー同士の間隔は 16〜24px
• 2 列バナーは縦長の比率 4:5 程度
• 全幅バナーは横長の比率 16:9 前後
• ニュース枠は左右 16px の余白を取ったグレーの箱にする

Elevation & Depth

• 影は使わず、平らな面と罫線だけで構成する
• 写真の上には半透明の黒を重ねて文字を読ませる
• バナーは右辺か下辺の金帯で立体感を出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。人物は四角に切り抜いて網点地に重ねる
• セクション境界: 直線で切り替える。白とグレーの面の差で区切る
• 角丸は一切使わない
• 枠線は 1px の細い罫線にする
• 見出し帯は白い長方形の切り抜き風にする
• 矢印は小さな黒の三角にする

Components

• 題字ヘッダー（masthead）: 新聞の題字風に極太の英字ロゴを置き、左下に日付と曜日の枠、右に黒帯のスローガンを並べる
• 紙面風ファーストビュー（editorial-hero）: 暗くしたモノクロ写真の上に、縦書きの大コピーと明朝の多段組み本文、人物の署名を重ねる
• 採用区分タブ（tab-recruit）: グレーのグラデーションの面を 3 等分し、金色の太字で区分名を入れる
• ニュース一覧（news-box）: グレーの箱に「＋NEWS」の見出しを置き、日付・媒体名・太字タイトル・右端の三角を一行ずつ並べる
• 網点バナータイル（banner-tile）: クリーム地に金の網点を敷き、大見出し・説明文・右下の MORE▶ を入れる。辺の一つを金帯にする
• 写真バナー（photo-banner）: 全幅写真の左下に白い帯を置き、英字見出しと和文の副題を入れる。右辺は金帯にする
• MORE リンク（more-link）: 太い英字に下線と小さな黒三角を付け、カードの右下に置く
• 日付ブロック（date-block）: 年・大きな月日・枠で囲んだ曜日・時刻を縦に積み、中央に揃える

Do's and Don'ts

Do - ファーストビューは新聞の一面のように文字の量で迫力を出す - コピーは縦書きの極太明朝で大きく組む - バナーには必ず網点か金帯のどちらかを入れる - 各バナーの右下には MORE▶ を統一して置く - 写真はモノクロ寄りか、落ち着いた色に寄せる

Don't - 角丸のボタンやピル型のボタンを使わない - パステルや鮮やかな色を主役にしない - 影の強いカード表現を使わない - ファーストビューに余白を大きく取りすぎない - 金をベタ塗りの広い面に使わない

Page Structure

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

1. 題字ヘッダー（紙面の世界観を最初に示す）: 白地に黒の極太英字ロゴと日付枠、黒帯のスローガンを置く
2. ファーストビュー（企業の姿勢を強く打ち出す）: 暗い写真に縦書きの大コピーと、役員の言葉を多段組みで重ねる
3. 採用区分タブ（応募の入口へ振り分ける）: グレーの面を 3 分割し、金色の文字で区分名を入れる
4. カルチャー訴求（社風を伝える）: 白抜きの明朝見出し帯と、黒地に大きな横書き見出し、写真を組み合わせる
5. ニュース（最新情報を伝える）: グレーの箱に日付と太字タイトルを 3 件並べる
6. コンテンツバナー群（理念・成長・職種・社員紹介などへ誘導する）: 網点や写真のバナーを 2 列と全幅で交互に並べる
7. よくある質問誘導（疑問の解消先へ導く）: 金の網点ブロックに大きな英字見出しと説明文を入れる
8. 日付と理念（企業の考え方で締める）: 大きな日付表示の下に、和英の理念文を太字で中央寄せに並べる
9. フッター（SNS・掲載実績・ロゴを示す）: グレーのドット地に SNS アイコン、雑誌の書影 3 点、ロゴを並べる

Imagery

• 人物とオフィスの写真を低彩度にし、暗い層を重ねて報道写真風にする
• スーツ姿の社員は四角に切り抜き、網点地に配置する
• 金のハーフトーンのドットは、グラデーションで濃淡をつけて装飾に使う
• オフィス写真は広角で天井や緑を入れ、開放感を出す
• 掲載実績は雑誌の表紙を小さく並べて信頼の証にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを全幅の紙面風にし、左右に多段組みの記事を増やして新聞の一面を再現する
• PC のニュースは 3 件を横一列に並べる
• PC はバナーを 4 列ほどのグリッドに詰めて配置する
• PC は日付と理念のブロックを右側のサイドカラムに固定する
• SP はタブとバナーを縦に積み、2 列を基本にする

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