DESIGN.md — 生成り地×朱色モザイクの食品メーカー採用 LP（Warm Cream Mosaic Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ナチュラル、信頼・誠実
• キーワード: 生成り地・朱色モザイク・手書き風キャッチ・大きな欧文見出し・細枠の白カード・スパイス素材
• 地の質感: 紙のようなクリーム地。一部に細かいドット網点がある。影はほとんど使わない
• 形: 四角いモザイクタイルと角丸カードの組み合わせ。CTA は角丸の長方形、矢印は円形
• 温度感: 暖色寄り。朱色とクリームで温かく、緑・水色をアクセントにする

Colors

• 地は生成りのクリーム。真っ白はカードの中だけに使う
• 朱色はファーストビューのモザイク・キャッチ・帯に集中して使う
• セクション内の導線ボタンは、セクションごとにオレンジ・緑と色を変える
• 職種タグは緑・オレンジ・山吹・水色のベタ塗りで色分けする
• カードの枠線は黒ではなく細い茶色にして柔らかく見せる
• ベージュ帯はカード群の下半分に敷いて段差をつくる
• button-primary は文字 #FEF6EE × 背景 #F67436 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C74609、4.56:1）を使う。
• button-secondary は文字 #FEF6EE × 背景 #75B554 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4E7C36、4.61:1）を使う。
• tag-badge は文字 #FEF6EE × 背景 #75B554 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4E7C36、4.61:1）を使う。

Typography

• 各セクションは大きな欧文見出しと小さな日本語見出しを 2 段で置く
• 欧文見出しの左に縦長のスプーン線画をつける
• 本文は行間 2.0 前後で、字間を少し広げる
• 項目名の頭に黒い丸の点をつけ、下に小さな欧文ラベルを添える
• キャッチだけ手書き風の朱色にし、他はゴシックでそろえる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。社員カードだけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 22px
• 見出しは左寄せ。募集要項の見出しだけ中央寄せ
• カード同士の間隔は 12〜16px
• ベージュ帯はカード群の中ほどから下に敷く
• ボタンは横幅いっぱいで、高さ約 64px

Elevation & Depth

• 影はほぼ使わず、細い枠線で区切る
• カードは白い面と茶色の 1px 枠で浮かせる
• 募集要項はぼかした写真の上に白カードを重ねる

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 14px の長方形。社員写真は縦長で、カードの上部に置く
• セクション境界: 直線で切り替える。ベージュ帯は角を大きく丸め、上部にはドットの網点を入れる
• CTA は角丸 8px の長方形にし、右端に白い円の矢印を置く
• リスト行の右には色付きの円形矢印を置く
• タグはピル型。ベタ塗りと枠線の 2 種類
• 装飾のモザイクは角丸なしの正方形

Components

• 一覧ボタン（button-primary）: オレンジのベタ塗りで、白文字を左寄せ、右に白い円の矢印
• セクション導線ボタン（button-secondary）: 緑のベタ塗りで、作りは一覧ボタンと同じ
• 欧文＋和文見出し（section-heading）: 左にスプーン線画、大きな欧文、その下に太字の日本語
• 社員カード（people-card）: 縦長写真、所属文、色付きタグと枠線タグを白い枠付きカードにまとめる
• 職種タグ（tag-badge）: 小さなピル型のタグ。職種ごとに色を変える
• リンクリスト行（list-link）: 白地に茶枠。左に黒丸と項目名、右に水色の円の矢印
• 吹き出しラベル（speech-label）: 黒地に白文字のピル型で、下に尻尾がつく。カードの上辺に重ねる
• アイコン付き案内カード（icon-card）: 白カードの左に灰とピンクの線画アイコン、右に項目名と欧文ラベル
• おすすめスライダー（pickup-slider）: 朱色の帯の上に白カードを置き、丸いページ送りの点をつける

Do's and Don'ts

Do - 生成りの地と白カードの対比で、柔らかく整理する - 見出しは欧文と和文の 2 段構成を全セクションで守る - ファーストビューにはモザイクタイルと人物写真をコラージュする - 導線は横幅いっぱいのボタンかリスト行で示す - アクセントの色は面積を小さく、点として散らす

Don't - 濃い影や光沢のあるグラデーションを使わない - 地を真っ白にしない - 枠線を黒の太線にしない - 明朝体で堅い印象にしない - 朱色を本文の文字色に使わない

Page Structure

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

1. ファーストビュー（企業の理念と温かさを伝える）: 中央に手書き風の 3 行キャッチを置き、細い線の楕円で囲む。周りにスパイス素材を添え、上下に写真とモザイクをコラージュする
2. おすすめコンテンツ（注目のページへ誘導する）: 朱色の帯に白カードのスライダーを置き、黒い吹き出しラベルを重ねる
3. 企業紹介（会社の想いを伝える）: 見出しとリード文の下に、角丸の写真バナーを置き、白文字で項目名を載せる
4. 社員紹介（働く人を見せる）: 見出しとオレンジのボタンの下に、2 列の社員カードを並べ、背後にベージュ帯を敷く
5. 制度と風土（育成制度を伝える）: イラストの下に見出し・本文・緑ボタンを置き、写真カードを縦に並べる
6. 採用について（採用関連ページへ誘導する）: 写真の下に、角を大きく丸めたベージュの面を敷き、リスト行を 3 つ置く
7. 募集要項（エントリーや FAQ へ誘導する）: ぼかした写真を全面に敷き、白抜きの欧文見出しの下にアイコンカードを 3 枚並べる

Imagery

• 人物写真は明るい自然光で撮り、笑顔の社員を胸から上で写す
• スパイスや木のスプーンなど食材の切り抜き素材を散らす
• 朱・山吹・オレンジの正方形モザイクに、ストライプやドット柄を混ぜる
• 人物イラストは顔を描かないフラットなもので、緑の不定形の背景を敷く
• アイコンは灰とピンクの 2 色の線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではファーストビューの左右にコラージュを広げ、キャッチを中央に置く
• PC では見出しを左、リード文を右に並べる 2 カラムにする
• 社員カードは PC で 4 列を横に並べる
• 制度カードは PC で 3 列、案内カードも 3 列の正方形にする
• 採用セクションは PC で写真を左、リストを右に置く

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