DESIGN.md — 赤青紫桃黄のステッカーコラージュ採用 LP（Pop Collage Sticker Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的
• キーワード: ステッカー・コラージュ・斜め配置・原色ブロック・紙の質感・大きな英字見出し
• 地の質感: 和紙やクラフト紙のようなざらつきを色面と地に薄く乗せる。WORKS の背景は方眼紙。
• 形: 角丸なしの長方形の帯を数度傾けて重ねる。人物写真だけ正円で切り抜く。
• 温度感: 高彩度で明るく熱量が高い。黒文字で全体を引き締める。

Colors

• 地は白か紙の色にする。セクションごとに紫・桃・黄・方眼の色面を順番に切り替える。
• 5 色（赤・青・紫・桃・黄）は均等に使い、グラデーションは使わない。
• 文字は原則として黒。黒い帯の上だけ白にする。
• セクションの色面の背後に、別の色の帯を少しはみ出させて重ねる。
• 主 CTA は赤のピル型にして、他の四角いラベルと形で区別する。

Typography

• 英字見出しは幾何学サンセリフを大きく置き、右下に和文の小見出しを添える。
• 本文は字間を広くし、行間を 2 倍以上にする。
• 帯の上の文字は帯と同じ角度で傾ける。
• 縦書きの見出しに矢印を添えてリンクにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績カードとカテゴリ帯だけ 2〜3 列にする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションの色面は全幅にして、数度傾けた四角で区切る。
• 見出しは左上、リンクボタンは右下に置く。
• ファーストビューは画面全体に帯を散らすコラージュにする。
• ニュースは日付と本文の 2 段にし、右端に＋を置く。

Elevation & Depth

• 影は使わない。奥行きは色面の重なりで表す。
• 写真は色付きの太いフレームに入れてカード状にする。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 基本は長方形。対談の人物写真だけ正円。
• セクション境界: 斜めに傾いた色面と、背後から少しはみ出す別色の帯
• 角丸は付けない。ただし主 CTA と番号ボタンは例外。
• 帯は ±5〜15° 傾ける。
• ページ送りの番号は正円にする。

Components

• ステッカー帯（sticker-band）: 原色の長方形に黒い太字を乗せ、傾けて重ねる帯
• 英字大見出し（section-heading）: 大きな英字の右下に和文の小見出しを添える
• ラベル型ボタン（button-label）: 色帯か黒帯に文字と→を置いたボタン。少し傾ける
• 募集要項 CTA（button-primary）: 赤いピル型に黒文字と→を置く
• ニュース一覧（news-list）: 紫の面に日付・タイトル・＋を並べる
• 色枠写真リンク（photo-frame）: 桃色の太枠に写真を入れ、縦書きのリンク文を添える
• 円形人物カード（circle-portrait）: 正円の写真に英字の職種名と色付きタグを重ねる
• 縦書きカテゴリ帯（vertical-category）: 紫・黄・青の縦長の帯に縦書きの見出しと→を置く
• 番号ページャー（pager-dot）: 白い正円の番号。選択中だけ青にする

Do's and Don'ts

Do - 帯は少しずつ傾け、重ねて手貼りの感じを出す。 - セクションごとに地の色か柄を切り替える。 - 英字見出しは大きく、余白を十分に取る。 - 紙のテクスチャを薄く敷く。

Don't - グラデーションや影は使わない。 - ボタンやカードに角丸を付けない（CTA は除く）。 - 淡いくすみ色やパステル寄りの低い彩度にしない。 - 要素をすべて水平に整列させない。

Page Structure

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

1. ファーストビュー（スローガンで印象付ける）: 白地に 5 色の帯を大量に散らし、中央にスローガンの帯と英字タイトルの黄帯を置く
2. メッセージ（企業の想いを伝える）: 白地に字間の広い本文を置き、最後に赤帯のスローガンを添える
3. お知らせ（最新情報を伝える）: 傾けた紫の面の背後に赤い帯を重ね、日付付きのリストを並べる
4. 会社紹介（会社理解への導線）: 黄色の英字帯を背景一面に貼り、その上に桃枠の写真リンクを 2 つ置く
5. 職種と対談（働く人を紹介する）: しわ紙の地に円形の人物写真を並べ、職種タグとラベルボタンを付ける
6. プロジェクト（仕事の事例を見せる）: 桃の面に大きな写真と白帯の見出しを置き、番号ページャーで切り替える
7. 実績（施工・制作の実績を見せる）: 方眼紙の地に写真カードを横に並べ、黒ラベルのボタンを置く
8. 働き方（制度への導線）: 縦書きの英字を繰り返し、紫・黄・青の縦帯リンクを置く
9. 募集要項 CTA（応募へ誘導する）: 写真を傾けて重ねたコラージュの上に、白帯の英字見出しと赤ピルのボタンを置く
10. フッター（サイトマップを示す）: 紙の地に英字と和文の 2 段リンクを並べ、ロゴと規約リンクを置く

Imagery

• 社員や職場をフィルム調で撮ったスナップ。粒子感があり、手前に物を入れてボカす。
• 人物は自然な表情の 2 人組を撮り、円形に切り抜く。
• 実績写真は照明の効いた空間の写真。
• 写真同士を傾けて重ね、コラージュにする。
• 背景には紙・しわ紙・方眼紙のテクスチャを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では帯のコラージュを横に広げ、密度を上げる。
• PC ではメッセージ本文を中央寄せの細い列にする。
• PC では実績カードを 3 列以上の横スクロールにする。
• PC ではボタンを見出しの横に並べる。
• 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 行書くと起動時に読み込まれる。