DESIGN.md — 金×朱×生成りの江戸粋 新卒採用 LP（Edo Iki Gold Red Silhouette Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 和風、レトロ、力強い・インパクト、親しみ・手作り感
• キーワード: 江戸モダン・和柄テクスチャ・人物シルエット・朱赤アクセント・二重線フレーム・採用ブランディング
• 地の質感: 市松・青海波・網点などのハーフトーン和柄を平面イラストに重ねる。雲や街並みの縁は手で切り抜いたような形。
• 形: ボタンは角丸なしの長方形。枠は細い二重線。顔写真は円形に切り抜く。街並みシルエットでセクションを区切る。
• 温度感: 温かい。金と生成りに朱が効いた、祭りのようなにぎわい。

Colors

• 地の色は生成り・白・金・薄グレーを交互に切り替え、セクションの区切りを色で見せる。
• 朱赤はボタン、欧文見出しの下段、シルエット、日の丸に限って使う。
• 金の地には白抜きの文字を置き、強調語の下に朱の太い下線を引く。
• 欧文見出しは2段で組み、上段を白抜きの縁取り文字、下段を塗りつぶしにする。
• 1枚のイラストに使う色は金・朱・生成り・墨の4色まで。
• 写真に色を足さず、写真のまわりを色面と枠で囲んで世界観をそろえる。
• button-gold は文字 #FEFCF3 × 背景 #CAA846 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8A7128、4.57:1）を使う。
• marker-statement は文字 #FEFCF3 × 背景 #CAA846 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8A7128、4.57:1）を使う。

Typography

• 和文見出しのかぎ括弧は大きく組み、括弧内のキーワードを大きく、助詞を小さくして大小の差をつける。
• 本文は字間を広く、行間を2倍前後にして、ゆったり組む。
• 英字ラベルは Montserrat の太字で、縁取りと塗りの2段にする。
• 強調語には傍点（文字上のドット）や朱の下線を使う。
• ボタンのラベルは英字の大文字とし、右端に丸囲みの矢印アイコンを置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物カードだけ 2 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文は左寄せで左右に約30pxの余白を取り、見出しの左端をそろえる。
• パネルは画面の端から約10pxの位置に二重線の枠を置き、写真帯だけは枠を越えて全幅に広げる。
• CTAボタンは幅約130pxの中央配置で、各ブロックの最後に置く。
• イラストのブロックは全幅で配置し、文字ブロックの間に挟む。
• 人物カードは細い十字トンボ風の線で囲み、2列＋中央1枚で並べる。

Elevation & Depth

• 影は使わず、すべてフラットにする。
• 立体感は色面の重なりと二重線の枠で出す。
• 写真の上には暗いオーバーレイを敷き、白文字と赤文字を載せる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は横長の矩形、人物の顔写真は円形に切り抜く。家紋風の円形に写真をマスクする使い方もある。
• セクション境界: 街並みのシルエットに網点を重ねたギザギザの境界、霞雲、市松帯で区切る。
• ボタン・カード・枠はすべて角丸なしにする。
• 丸は顔写真・日の丸・家紋風モチーフ・矢印アイコンに限って使う。
• 雲は角の丸い横長の帯を重ねた形で描く。

Components

• 朱赤の長方形CTA（button-primary）: 英字大文字のラベルと、右端の白い丸矢印を組み合わせたボタン。
• 金のサブボタン（button-gold）: 金の枠で囲んだパネルの中で使う、金地のボタン。
• 二重線フレームのパネル（double-frame-panel）: 白地を朱または金の細い二重線で囲むパネル。中には英字ラベル、見出し、本文、写真帯を入れる。
• 2段の英字ラベル（outline-label）: 上段は縁取りの白抜き文字、下段は塗りつぶしの文字にした見出しラベル。
• かぎ括弧の見出し（bracket-heading）: 大きなかぎ括弧で語を囲み、助詞を小さく組む和文見出し。上に金色の英字キッカーを置く。
• 朱線付きの金地ステートメント（marker-statement）: 金地に白文字を3行で中央に並べ、各行の下に朱の太線を引く。
• 社員カード（person-card）: 円形の顔写真、所属、名前、入社年、赤いリンク文字と丸矢印で構成するカード。四隅の線が伸びた細い枠で囲む。
• アイコン付きの写真タイル（icon-photo-tile）: 写真に白い線画アイコンと英字ラベルを重ねたタイルを、横一列に並べる。
• 写真帯の見出し（photo-banner-title）: 横長の写真の中央に、赤い英字と白い和文の見出しを重ねる。

Do's and Don'ts

Do - 金・朱・生成り・墨の4色を厳守する。 - 和柄の網点テクスチャと人物シルエットで世界観を作る。 - セクションごとに英字2段ラベル＋和文見出し＋本文＋CTAの順で組む。 - ボタンは角丸なしの朱赤長方形にそろえる。 - 強調語は、かぎ括弧と文字サイズの差、朱の下線で目立たせる。

Don't - ピル型ボタンや大きな角丸を使わない。 - 青や緑などの寒色をアクセントにしない。 - ドロップシャドウやグラデーションのボタンを使わない。 - 写真イラストのリアルな3D表現を混ぜない。 - 本文を詰めて組まず、行間を狭くしない。 - 朱赤を広い背景色として使わない。

Page Structure

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

1. ファーストビュー（企業の世界観を一目で伝える。）: 金と生成りの和柄イラストに、朱の人物シルエット・提灯・日の丸を描く。中央には白い縦長カードを置き、家紋とキャッチを入れる。下端にはお知らせ帯を置く。
2. コンセプト説明（キーワードの意味を説明する。）: 生成り地に、金の英字キッカー、かぎ括弧の見出し、行間の広い本文を置く。間に桜の枝のイラストを挟む。
3. 企業らしさ・仕事観（会社の考え方を伝える。）: 見出しと本文の後に朱の人物シルエットのイラストを置き、もう1組の見出しと本文を続ける。
4. ステートメント（メッセージを印象づける。）: 街並みシルエットの境界から金地に切り替え、白文字3行に朱の下線を引く。
5. 特集コンテンツ（プロジェクトストーリーへ誘導する。）: 朱の二重線パネルに英字2段ラベル、見出し、全幅の集合写真を置き、赤いCTAで締める。
6. トピックス（まちづくりの実績を紹介する。）: 淡い金色のアイソメトリックな街イラストに金地の見出しボックスを重ね、下に白カードで本文とCTAを置く。
7. 採用動画（映像で理解を深めてもらう。）: 金地に動画プレイヤーと白文字の説明を置き、エントリーCTAを添える。下端は街並みシルエットにする。
8. 社員紹介（働く人の姿を見せる。）: 暗い写真帯の見出しの下に、生成り地の円形顔写真カードを並べる。
9. リアルな声（給与や休暇などの実態を伝える。）: 金の二重線パネルに、アイコン付きの写真タイルを横一列に並べ、金のボタンを置く。
10. 会社案内・働く環境・採用情報（詳細ページへの導線を並べる。）: 薄グレーのパネルに、家紋型にマスクした写真と、写真帯の見出し＋本文＋赤CTAを縦に並べる。
11. クロージングCTA（エントリーを促す。）: 上端を市松帯にした金地に、動画のサムネイル、見出し、エントリーボタンを置く。

Imagery

• イラストは江戸の町と現代のビルを混ぜたフラットな平面表現にする。人物は朱一色のシルエットで描く。
• 背景には市松・青海波・麻の葉などを網点風の細かいパターンで敷く。
• 装飾には桜や梅の白い花びら、横長の霞雲、日の丸、提灯を使う。
• 写真は明るく自然光の、社員の自然な笑顔やオフィス・街並みを選ぶ。
• アイコンは白い線画で、温泉や書類などの記号的なモチーフにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは横長の全景イラストにし、中央のカードは小さくする。
• PCでは見出しと本文をイラストの左右に振り分け、ジグザグに配置する。
• 金地のステートメントは、PCでは1行に収める。
• 社員カードはPCで3列、写真タイルは5列に広げる。
• 会社案内ブロックは、PCでは文字と写真を左右2カラム、働く環境と採用情報を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 行書くと起動時に読み込まれる。