DESIGN.md — 六角形×紺ピンクグラデの化学メーカー採用 LP（Hexagon Gradient Chemical Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、やさしい・柔らかい
• キーワード: 六角形モチーフ・分子構造・ピンク→紺グラデ・淡いブルー地・白衣・作業着の人物写真・余白多め
• 地の質感: フラットな面に、半透明の淡色六角形を重ねてガラスのような透明感を出す
• 形: 六角形（写真切り抜き・ボタン・装飾）と、左右が尖った細長い六角ボタン
• 温度感: 寒色寄り。ピンクを少し混ぜて温かみを足す

Colors

• 地は白と淡い水色 #F4F9FE をセクションごとに交互に敷く
• ブランドグラデはピンク #F2849E→紫→紺 #1E2D6E の左から右。大見出しの英字とボタン枠線に使う
• 英字セクション見出しと見出し前の六角アイコンはブランド紺の単色にする
• 日本語見出しと本文はチャコール〜グレーにして、紺と役割を分ける
• 装飾の六角形は水色・ピンク・薄紫を不透明度 30〜60% で重ねる
• 塗りボタンはエントリーだけ。新卒はピンク、キャリアは紺で塗り分ける

Typography

• セクション見出しは、六角アイコンと英字大文字を並べ、その下に日本語見出しを置く
• 大英字見出しは文字にグラデーションをかける（background-clip:text）
• メッセージ本文は中央揃えにし、行間を広く取る
• リード見出しは 2 行程度の左揃えにする
• 本文は左揃えで行間 2 前後にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストを左右に交互配置する 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 20px
• セクションの上下余白は約 70〜90px
• 見出し→写真→リード見出し→本文→ボタンの順に縦に積む
• ボタンは中央寄せで幅約 240px。複数あるときは間隔 16px で縦に並べる
• 背景の六角形はコンテンツの裏で画面端からはみ出させる

Elevation & Depth

• 影はほぼ使わずフラットにする
• 奥行きは半透明の六角形を重ねて出す
• 写真カードには影をつけない

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 正六角形・横長の六角形で切り抜く。人物の一覧写真だけ四角
• セクション境界: 直線で背景色を切り替える。境界に斜めの六角形の面を重ねることもある
• ボタンは左右端が尖った細長い六角形にする
• 角丸は使わず、角はシャープにする
• 装飾も六角形に統一する
• 職種リンクは横長六角形の写真に、白抜き文字と矢印を重ねる

Components

• 六角アウトラインボタン（button-outline-hex）: 白地で細い枠線にピンク→紺のグラデをかけ、中央に紺の太字ラベル、右端に細い矢印を置く
• エントリーボタン（button-entry）: 横長六角形の塗りボタン。2 行の大きなラベルに小さな補足を添える。ピンクと紺の 2 色で用意する
• 英字セクション見出し（section-label）: 紺の六角リングアイコンと、紺の英字大文字を並べる
• 六角写真リンク（hex-photo-link）: 横長六角形の写真に淡い紫のオーバーレイをかけ、中央に白の太字職種名、右に矢印を置く
• 募集要項カード（info-hex-card）: グラデ枠の六角カードに、紺の線画アイコンと 2 行の紺太字、矢印を入れる
• 社員インタビュースライダー（interview-slider）: 四角い人物写真の左下に、グラデの六角ラベル（入社年・職種）を重ねる。左右に六角矢印、下にドットを置く
• ニュース行（news-item）: 上下に罫線を引き、日付・淡紫のカテゴリラベル・1 行に省略したタイトルを並べる
• 背景六角形（hex-decoration）: 淡い水色・ピンクの半透明の六角形を、大小ばらばらに配置する

Do's and Don'ts

Do - 写真と装飾は六角形で統一する - グラデは英字大見出しと枠線に限って使う - 白と淡い水色のセクションを交互に置く - 人物は白い作業着・実験着で自然な笑顔のものを使う - 余白を広く取って清潔感を保つ

Don't - 角丸ボタンやピル型ボタンを使わない - 濃い色を背景一面に塗らない - 暖色を主役にしない（ピンクは差し色にとどめる） - 強い影や立体表現を使わない - 本文を中央揃えにしない（メッセージ部分は除く）

Page Structure

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

1. ファーストビュー（企業の志を一言で伝える）: 左上に 2 行のキャッチ（一部の文字にグラデ）。研究者・街並みの写真を六角形で大小コラージュし、淡い六角形を重ねる
2. メッセージ（仕事の意義と想いを伝える）: グラデの大英字見出しの下に、中央揃えの紺文字を段落ごとに並べる。最後に六角ボタンを置く
3. 会社紹介（事業の概要を伝える）: 社屋・図表・実験器具を組み合わせた六角形のビジュアル。リード見出しと本文の後に、ボタンを 3 つ縦に並べる
4. 仕事紹介（職種ごとの理解を深める）: 水色地。六角写真とリード・本文の下に、職種ごとの横長六角写真リンクを 3 つ並べる
5. 社員インタビュー（働く人の顔を見せる）: 写真のスライダーにグラデのラベルを重ね、下に一覧ボタンを置く
6. 社員座談会（職場のリアルを伝える）: 横長の集合写真に、紺の小見出し・大見出しと詳細ボタンを添えて 2 本並べる
7. 工場紹介（設備と生産体制を伝える）: 水色地。六角形の集合写真、リード見出し、本文、ボタンの順に置く
8. 社風・福利厚生（働きやすさを伝える）: 空を背景にした人物写真を六角形で切り抜き、リード・本文・ボタンを続ける
9. お知らせ（最新情報を伝える）: 水色地に罫線区切りのニュース行を並べ、一覧ボタンを置く
10. 募集情報（募集要項・FAQ へ誘導する）: アイコン付きの六角カードを 3 つ縦に並べる
11. エントリー（応募へ導く）: 淡いピンクと水色の大きな六角形の背景に、グラデの英字見出しと、ピンク・紺のエントリーボタン 2 つを置く

Imagery

• 白衣・作業着の若手社員が実験・検査をしている明るい写真
• 青い手袋、ビーカー、フラスコなど理系らしい小物を写し込む
• 全体を寒色寄りの明るいトーンに補正する
• 線画アイコンは紺の単色で、太めの線にする
• 背景装飾は分子を思わせる半透明の六角形にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビを横に並べ、右上にエントリーボタンを 2 つ常に表示する
• PC は写真とテキストを左右に交互配置する 2 カラムにする
• PC の職種リンクは六角形を 3 つ横に、少しずらして並べる
• PC のインタビューは写真 4 枚を横並びのスライダーにする
• PC の募集情報カードは正六角形 3 つを横並びにする
• SP はハンバーガーメニュー。ボタンは画面幅の約 65% にする

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