DESIGN.md — シアン×生成りのイラスト採用 LP（Cyan Illustrated Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、シンプル・ミニマル、親しみ・手作り感、清潔・爽やか
• キーワード: 線画イラスト・シアン一色の差し色・細い欧文見出し・紙の質感・白地に薄い家電アイコン柄・墨色の角ボタン
• 地の質感: FV は生成りの紙のざらつき。本文は白地に薄いグレーの家電線画を敷き詰めた柄。
• 形: ボタンは角ばった長方形。最後の CTA だけピル型。FV の下端は大きな弧。
• 温度感: 明るく爽やか。少しだけ暖かい。

Colors

• 地は白と生成りの 2 色だけを使う。FV とメッセージ部分だけを生成りにする。
• シアンはイラストと全幅の帯 1〜2 か所に限って使う。
• 通常のボタンは墨色の面に白文字で、色は付けない。
• 濃紺と青のピル型ボタンは最後の CTA にだけ使う。
• 見出し下の短い線はいつもシアン。
• 人物写真の背景はピーチ、タグは灰茶色にして暖かさを足す。
• button-sub-pill は文字 #F3FAFE × 背景 #018BDC のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0176BB、4.62:1）を使う。
• hashtag-badge は文字 #F5F6EF × 背景 #8E7B70 のコントラスト比が 3.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#7E6D64、4.53:1）を使う。

Typography

• 大見出しは極細の幾何学欧文で大きく組み、その下に小さな和文ラベルを添える。
• 和文の見出しは太字にし、下に長さ 28px のシアンの線を引く。
• 本文は左揃えで行間を広くとる。
• FV のメッセージ文だけは中央揃えにする。
• 人物カードのキャッチは縦書きで右上に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。社員カードは横スクロールのカルーセル。
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 37px で、左端をそろえる。
• 1 ブロックは「見出し → 文 → ボタン → イラスト」の順に並べる。
• イラストは右寄せにして、文と少し重ねる。
• ニュースは上下を細い線で区切ったリストにする。
• 環境の項目はアイコンとラベルを 2 列のグリッドに並べる。

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる。
• 最後の CTA は白いパネルにのせ、シアンの帯の上に浮かせる。
• フッターの TOP ボタンにだけ薄い影を付ける。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 8px の長方形。人物は切り抜いてピーチの角丸カードにのせる。
• セクション境界: FV の生成り地の下端を大きな下向きの弧で切る。それ以外は直線で切り替える。
• 通常のボタンは角丸 0 の長方形にし、右端に細い矢印を付ける。
• 最後の CTA だけピル型にする。
• タグは角丸 0 の小さな四角にする。

Components

• 墨色の角ボタン（button-dark）: 墨色の長方形に白い欧文と右矢印を入れた、もっと見る用のボタン。
• エントリーのピルボタン（button-entry）: 濃紺のピル型ボタン。中央に文字、右に矢印を置く。
• 説明会のピルボタン（button-sub-pill）: 青のピル型ボタン。エントリーボタンの下に縦に並べる。
• 欧文大見出しと和訳（section-title）: 細い欧文を大きく置き、その下に小さな和文ラベルを付ける。
• シアン下線付きの小見出し（subhead-underline）: 太字の和文見出しの下に、短いシアンの線を引く。
• 社員カード（person-card）: ピーチ地に切り抜いた人物を置き、右上に縦書きのキャッチを入れる。下に名前・経歴・タグを並べる。
• ハッシュタグのバッジ（hashtag-badge）: 灰茶色の地に白い太字。縦に積んで並べる。
• 写真のリンクカード（photo-link-card）: 角丸の写真の右下に、墨色のラベルと矢印を重ねる。
• ニュース一覧（news-list）: 日付とタイトルを 2 段で書き、上下に細い線を引く。
• CTA パネル（cta-panel）: シアンの帯の上に白い角丸パネルを置き、ピルボタンを 3 つ縦に並べる。両脇にジャンプするキャラを配置する。

Do's and Don'ts

Do - イラストは黒い線画とシアン一色の塗りで統一する。 - 白地には薄いグレーで、業種に関係するモチーフのアイコン柄を敷く。 - セクションの頭には、必ず細い欧文の大見出しと和訳ラベルを置く。 - ボタンは墨色の角型で統一する。 - 余白を大きくとり、1 画面に置く要素を少なくする。

Don't - シアン以外の鮮やかな色をイラストに増やさない。 - 通常のボタンを色付きやピル型にしない。 - 欧文見出しを太字にしない。 - 影やグラデーションを多用しない。 - 写真を角丸なしで全面に並べすぎない。

Page Structure

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

1. ファーストビュー（スローガンで世界観を示す）: 生成りの紙地。左上に細い欧文 3 行と和文の副題を置き、下にジャンプする社員イラストを配置する。縦書きの SCROLL を添える。
2. メッセージ（企業の姿勢を伝える）: 中央揃えの短文を 2 段にする。小さなロゴの下に旗を持つキャラを置き、地の下端を弧で切る。
3. 会社を知る（トップメッセージ）（トップの考えを紹介する）: 欧文の大見出し、小見出し、本文、角ボタンの順に並べ、下に店舗の線画を置く。
4. ポイント紹介の帯（魅力の数を示して興味を引く）: シアンの全幅帯に中央揃えの文とボタンを置き、旗を掲げた集合イラストを入れる。
5. お知らせ（最新情報を出す）: 欧文の見出しと角ボタンの下に、線で区切ったリストを 3 件並べる。
6. 社員紹介（人の魅力を伝える）: ピーチ地の人物カードを横スクロールで見せ、タグバッジと SCROLL の案内を付ける。
7. 座談会（社員同士の会話記事へ誘導する）: 角丸の写真カードを 2 枚縦に並べ、墨色のラベルを重ねる。
8. ビル写真の区切り（場面を切り替える）: 青空とビルの写真を全幅で入れる。
9. 仕事を知る（キャリアと 1 日の流れを紹介する）: 文とボタンのブロックに、右寄せのシアン線画（階段・カレンダー）を組み合わせる。
10. 環境を知る（データや社内情報への入口を示す）: 墨色の太いピクトアイコンの下に角ラベルを付け、グリッドに並べる。
11. エントリー CTA（応募へ誘導する）: シアンの帯に白いパネルを置き、ピルボタンを 3 つ並べる。両脇にキャラを配置する。
12. フッター（締めくくる）: スローガンの欧文を大きく再掲し、ロゴと TOP ボタンを置く。

Imagery

• 人物は黒の均一な線画にし、制服をシアンでベタ塗りする。顔は簡略化した漫画調にする。
• モチーフ（家電・旗・階段・カレンダー）も線画にシアン 1 色で描く。
• 背景の柄は、業種のアイテムを薄いグレーの線で描いて散らす。
• 写真は明るいオフィスで撮った自然な笑顔のスーツ姿にする。
• 人物写真は切り抜いて、ピーチ色の面にのせる。
• アイコンは墨色のベタ塗りで、太い形のピクトにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では見出しの欧文と和訳ラベルを横に並べる。
• PC では FV のイラストを右半分に置き、ロゴを左に置く。
• PC では本文とイラストを左右 2 カラムに分ける。
• 社員カードは PC で 3 枚並べる。
• PC の CTA ボタンは横に 3 つ並べる。右端には縦書きの固定エントリータブを付ける。
• 環境の項目は PC で 3 列にする。

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