DESIGN.md — 空色グラデと藍紫の製造業採用 LP（Sky Blue Gradient Manufacturing Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実
• キーワード: 空色グラデーション・藍紫パネル・シアンの手書き英字・円形・アーチ形の写真・色材テクスチャ・半透明カード
• 地の質感: 空色の地に白いぼかし光をふんわり重ねる。藍紫パネルには細かいドットの波模様を薄く敷く。
• 形: 大きな角丸パネル、円形の写真、ピル型ボタン、白い角丸カード
• 温度感: クールで透明感がある。人物写真の笑顔で親しみを足す

Colors

• 地は空色のグラデーションを基本に、白い光のぼかしを散らす。
• 会社紹介とエントリーは藍紫の角丸パネルで目立たせる。
• シアンは手書き英字と短い強調語だけに使う。
• ピンクはキャッチの1語だけ。商品の色を連想させる差し色にする。
• 主ボタンは藍紫から空色へのグラデのピル型にする。
• 白いカードの上の文字は濃紺にする。

Typography

• 和文は太めのゴシック。字間は少し広めにとる。
• 大見出しは主語を大きく、助詞を小さくして大小差をつける。
• 見出しの背景に、薄い白の大きな英字を透かして置く。
• 手書き英字は斜めに置き、写真やパネルの角に少し重ねる。
• 色地の上の本文は白で、行間を広めにとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューは横スライダー
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• パネルは左右に約 4% ずつ余白を残して浮かせる。
• 藍紫パネルは下側を大きな角丸にし、空色の地に重ねる。
• ナビ型リストは、行ごとに線と右端の丸矢印アイコンをつける。
• 写真の帯は余白なしで横に並べ、区切りに使う。

Elevation & Depth

• 影はほぼ使わない。半透明の面とぼかした光で奥行きを出す。
• 円形の写真の周りに白い光のグローをつける。
• 白いカードは影なしのフラットにする。

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 円形、アーチ形、斜めに切った形、角丸の長方形
• セクション境界: 角丸パネルの縁で切り替える。直線と写真帯も使う
• 主ボタンとタグはピル型にする。
• 問い合わせ・エントリーのボタンは角丸 8px の白いカードにする。
• スライダーの矢印は藍紫の円にする。
• 所属名は口紅を塗ったようなブラシストロークの上に載せる。

Components

• グラデのピル型ボタン（button-primary）: 藍紫→空色のグラデ。白文字と右端に矢印をつける。
• 半透明のニュースカード（news-card）: 淡い空色の角丸カード。行ごとに日付、ピル型タグ、タイトルを並べ、線で区切る。
• 〇〇を知るナビリスト（nav-list-panel）: 藍紫パネルに大きな見出しを並べ、右端に丸矢印をつける。
• 社員インタビューのスライダー（interview-slider）: 白い角丸カードに人物写真を載せ、所属名をブラシストロークの上に置く。下に入社年と一言を添える。
• エントリーカード（entry-card）: 白い角丸カード。左に矢印、中央に大きな区分名、その下に小さな補足を置く。
• 手書き英字の装飾（script-accent）: シアンの筆記体英字を、パネルや写真の角に斜めに重ねる。
• 丸ドット付きの見出し（dot-heading）: 左に小さな丸を置いた見出し。
• フッターのアウトラインボタン（footer-pill）: 白地にグレー線のピル型ボタン。2 つを横に並べる。

Do's and Don'ts

Do - 空色のグラデの地にぼかした光を重ね、透明感を保つ。 - 写真は円・アーチ・角丸で切り抜く。 - シアンの手書き英字を各セクションに 1 つずつ添える。 - 藍紫パネルで内容の区切りをはっきり見せる。 - 化粧品テクスチャの写真を余白に小さく散らす。

Don't - 暖色や黒の面を大きく使わない。 - ピンクを何か所にも使わない。 - 写真を四角いまま並べすぎない（写真帯は例外）。 - 強い影や太い枠線をつけない。 - 明朝体で硬い印象にしない。

Page Structure

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

1. ファーストビュー（仕事の魅力を一言で伝える）: 空色の地に白い太字キャッチを置き、1 語だけピンクにする。アーチ形・斜め切りの現場写真を並べ、シアンの手書き英字と英字ラベルを添える。
2. お知らせ（採用ニュースを見せる）: 半透明の角丸カードに 4 件を並べ、グラデのピル型ボタンで一覧へつなぐ。
3. メッセージ（読み手への呼びかけ）: 白の太字で数行の呼びかけを置き、強調語をシアンにする。グローつきの円形写真と、透かしの英字を背景に置く。
4. 会社を知る（会社・製品・仕事の下層ページへ案内する）: 藍紫の角丸パネルに短い説明と写真を載せ、その下に 3 行のナビリストを並べる。
5. 社員インタビュー（働く人の人柄を伝える）: 透かしの英字の上に見出しを置く。人物カードの横スライダーにブラシストロークの所属名をつける。
6. 写真帯（現場の雰囲気を伝える）: 研究・製造の写真を余白なしで横に並べる。
7. 問い合わせ導線（疑問を解消する）: 白い見出しを置き、白い角丸ボタンを 2 つ縦に並べる。
8. エントリー（応募へ誘導する）: 藍紫→空色のグラデパネルに手書き英字を重ね、新卒・キャリアの白いカードを 2 つ置く。
9. フッター（ロゴとリンクを置く）: 白地にロゴ、ピル型のリンク 2 つ、コピーライトを置く。

Imagery

• 白衣や作業着の人物を、明るく清潔な研究室・工場で撮る。
• 笑顔のポートレートは白い背景で、胸から上を写す。
• アイシャドウや口紅を砕いたテクスチャ写真を装飾に使う。
• 所属ラベルは口紅をのばしたようなブラシストロークにする。
• 背景には白い光の玉を大きくぼかして置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにグローバルナビとエントリーボタンを横に並べる。
• PC のファーストビューは、アーチ形の写真を横一列に並べる。
• PC のメッセージは文と円形写真を左右に分けて置く。
• PC の会社パネルは、左に写真、右にナビリストの 2 カラムにする。
• PC のインタビューは中央のカードを大きくし、両側を小さく見せる。
• PC の問い合わせボタンとエントリーカードは横 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 行書くと起動時に読み込まれる。