DESIGN.md — 黒×橙グラデの明朝体採用サイト LP（Mincho Orange Gradient Recruiting LP with Illustrated Portraits）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、和風、親しみ・手作り感、上品・高級
• キーワード: 明朝体・オレンジグラデ・黒帯・劇画風イラスト・言葉遊び・余白多め
• 地の質感: 白い地が中心。上部だけ肌色からオレンジへの淡いグラデを敷き、黒いベタ面で締める。筆の掠れや手描き文字を写真の上に重ねる。
• 形: 角丸は小さめで、写真の角を少し丸める程度。虫眼鏡の円形フレームと、ピル型の日付バッジを使う。
• 温度感: 暖色寄り。墨の黒とオレンジで熱量を出す。

Colors

• 地は白にする。セクションの区切りや人物紹介の受け皿には黒のベタ帯を使う。
• オレンジは見出しの一文字目、本文中のキーワード、MORE の丸だけに使う。
• 大見出しは赤橙からオレンジへのグラデーション文字にする。
• 主 CTA は赤橙→橙の横グラデ。対になる副 CTA は白の面にする。
• 黒地に置く文字は白にし、強調語だけオレンジにする。
• ファーストビュー直下は肌色から白へ溶けるグラデにする。
• button-cta は文字 #FFF6E8 × 背景 #F56442 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D7320B、4.51:1）を使う。

Typography

• 全体を明朝体で統一し、ゴシック体は使わない。
• 大見出しは漢字を大きく、送りがなを小さくして段差をつける。
• 大見出しの背後に、白またはグレーの大きな英字を透かしで重ねる。
• 本文は短く改行し、中央揃えで行間を広く取る。
• 強調語はかぎ括弧で囲み、オレンジで一回り大きくする。
• 見出しは一文字目だけオレンジにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は画像とテキストを左右交互に並べる 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツブロックは「画像→見出し→サブコピー→MORE」の順に組む。
• 画像は片側を画面端まで寄せ、反対側だけ余白を残す。
• 語り文のブロックは中央揃えで、段落ごとに 32px 程度空ける。
• 黒帯は画像の下半分に重ねて敷き、人物を浮かせて見せる。

Elevation & Depth

• 影はほぼ使わず、平面で構成する。
• ニュースバーだけ白地に軽い影を付けて浮かせる。
• 奥行きは写真と黒帯の重なりで出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 8px の長方形を基本にする。人物紹介だけは虫眼鏡型の円形フレームで切り抜く。
• セクション境界: 直線で区切る。黒帯や淡いグラデへ切り替えて境界を示す。
• MORE は「下線＋オレンジの丸に矢印」の形にする。
• ニュースバーは左上と左下を大きく丸める。
• CTA カードは角丸なしの長方形にする。

Components

• MORE 矢印リンク（more-link）: 英字の MORE に下線を引き、右端にオレンジの丸と矢印を重ねる。
• 採用エントリーボタン（button-cta）: 幅いっぱいの長方形。上に小さな英字ラベル、下に大きな和文を置く。新卒は白地、中途はグラデ地。
• 漢字＋かなの大見出し（kanji-headline）: 漢字を大きく、かなを小さくしたグラデ文字。背後に英字の透かしを重ねる。
• コンテンツ見出し（content-heading）: 一文字目がオレンジの明朝見出し。下にサブコピーを置く。
• ニュースティッカー（news-bar）: 白い横長のバー。オレンジの日付とタイトルを 2 行並べ、右端に上下の矢印を置く。
• 社員紹介カルーセル（staff-loupe）: 虫眼鏡フレームに人物写真を入れ、黒帯の上に並べる。入社年のピル型バッジ、イニシャル、役職を添える。
• 対比バナー（vs-banner）: 明るい写真と暗い写真を上下に分け、大きな縦書き文字と×印で対比させる。
• 黒帯コピー（label-band）: 写真の上に重ねる黒い帯。白い文字で短いコピーを入れる。

Do's and Don'ts

Do - 見出しは明朝体にし、一文字目をオレンジにする。 - 同じ読みの言葉を並べ、かぎ括弧とオレンジで強調する。 - コンテンツの導線はすべて MORE 矢印リンクにそろえる。 - 劇画風イラストと実写を交互に配置する。 - 黒帯を写真の下に重ね、メリハリを付ける。

Don't - ゴシック体で本文を組まない。 - オレンジを広い面の塗りに使わない（CTA のグラデは除く）。 - 角丸の大きいカードや強い影を多用しない。 - 本文を左揃えでぎっしり詰めない。 - 青や緑などの寒色アクセントを足さない。

Page Structure

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

1. ファーストビュー（社風を印象づける）: 縦に分割した人物イラストを並べ、筆文字の大きなキャッチと金色の筆の掠れを重ねる。背後に英字を透かす。
2. お知らせ（最新情報を伝える）: ファーストビューの下端に、白いニュースバーを重ねて置く。
3. 会社の想い（企業の歴史と理念を語る）: 肌色のグラデ地に大見出しを置き、中央揃えの長い語り文を続ける。最後に MORE を置く。
4. 数字で知る（データへ誘導する）: 円形に切り抜いたインフォグラフィックのイラストの下に、見出しと MORE を置く。
5. 企業情報（会社概要へ誘導する）: 店舗写真とイラストをコラージュし、下に黒帯を敷いて白文字の見出しを載せる。
6. 仕事紹介（新人とベテランの対比で仕事を伝える）: 大見出しの下に、明暗 2 枚の写真で作った対比バナーを置く。
7. 社員インタビュー（人物の魅力を伝える）: 虫眼鏡フレームの社員カルーセルを黒帯の上に並べる。
8. 研修・キャリア（成長環境を伝える）: 漫画風イラストに吹き出しとセリフを入れ、下に見出しと MORE を置く。
9. 福利厚生・カルチャー（制度を伝える）: 大見出しの後に、縦書きコピー入りのイラストを置く。
10. フォトギャラリー（日常の様子を見せる）: 写真 3 枚を横に連結し、上に白文字のコピーを重ねる。
11. よくある質問（疑問への入口を作る）: 上下を写真で挟み、大きな引用符付きのキャッチと MORE を置く。
12. エントリー CTA（応募へ誘導する）: 暗くした店舗写真の上に大見出しを置く。新卒（白）と中途（グラデ）の大ボタンを並べる。
13. フッター（サイトマップと SNS への導線）: 黒地にロゴマークの大きな線画を透かし、右下にページトップを置く。

Imagery

• 写真をもとにした劇画風の人物イラストを使う。厚塗りで陰影を強くする。
• イラストには手書きの吹き出し文字を添える。
• 実写は白手袋で商品を扱う手元や、笑顔の社員を写す。明るい店内で撮る。
• インフォグラフィックは等角投影図にし、オレンジ・紺・ベージュでまとめる。
• 金色の筆の掠れやカエルのシルエットなど、和のモチーフを小さく散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は画像とテキストを左右交互に配置する 2 カラムにする。
• PC は上部ナビを横並びにし、右上に新卒と中途の 2 つのボタンを置く。
• PC の対比バナーは左右に分割し、中央に縦書き文字を重ねる。
• PC の社員カルーセルは 3 人を横に並べる。
• PC のフッターはサイトマップを 4 列にする。

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