DESIGN.md — クリーム地×緑のイラスト採用サイト LP（Illustrated Literary Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 親しみ・手作り感、上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: 線画イラスト・クリーム地・ミントグリーン・明朝見出し・波形の境界・文芸的
• 地の質感: フラットな単色面。カード背景にだけ薄い方眼パターンを敷く
• 形: ピル型ボタン、角丸なしのカード＋ずらした影、波形の境界
• 温度感: 暖かい（クリーム）に、爽やかな緑と青のアクセント

Colors

• 白とクリームを交互に置いてセクションを分ける
• 強い面色は緑（特集）と青（フッター）の 2 区間だけ
• ボタン・アイコン・タブの下線・吹き出し枠はすべて緑で統一する
• 黄は波形とイラストの差し色だけに使う
• 文字はほぼ黒の 1 色。強調は緑の文字を使う
• button-primary は文字 #EBFEFF × 背景 #1ABEA2 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#12816E、4.59:1）を使う。
• quote-balloon は文字 #18BFA1 × 背景 #FFFFFF のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#11846F、4.61:1）を使う。
• footer-pill-link は文字 #18BFA1 × 背景 #FFFFFF のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#11846F、4.61:1）を使う。

Typography

• 見出しは『欧文セリフの小ラベル＋明朝の和文』の 2 段で組む
• 長文メッセージは明朝にし、行間を 2.4 前後まで広く取る
• UI 要素（ボタン・カード名・リスト）は太字のゴシックにする
• 手書き書体は FV のキャッチだけに使う
• 日付は欧文セリフの数字で小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は 2 カラム（見出しを左、一覧を右）や 3 枚並びのカード
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 30px で一定にする
• セクションの境目にはイラストを重ね、地色をまたいで置く
• ニュースとリンク一覧は上下の細線で区切るリストにする
• カードは中央寄せで縦に積み、カード同士の間は約 30px 空ける
• 写真は画面幅いっぱいか、片側に寄せてはみ出すように置く

Elevation & Depth

• カードには影色（濃い緑やベージュ）の板を右下へ 10px ずらして重ねる。ぼかしは使わない
• ボタンは右下に薄いグレーの影を少しだけ付ける
• それ以外の要素は影なしで平面にする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの四角。人物は白背景の切り抜き写真を方眼の背景に置く
• セクション境界: ゆるい波形の曲線。緑・黄・青の波を重ねる
• ボタンは完全なピル型
• カードと写真は角を立てる
• アイコンは円形の線で囲んだペン先の矢印
• 吹き出しは線だけの枠で、上に小さな三角を付ける

Components

• ピル型 CTA（button-primary）: 緑のピル型。左に白い太字、右端に白い丸に入ったペン先アイコン
• 2 段見出し（section-heading）: 欧文セリフの小ラベルの下に明朝の大見出しを置く
• 特集カード（feature-card）: 白いカードに方眼背景のイラストを載せる。下にタイトルと円形矢印、右下にずらした影の板
• 線区切りのリンク項目（link-list-item）: 太字タイトルと説明文、右に緑の円形矢印。上下を細線で区切る
• お知らせ行（news-item）: 日付を小さな欧文で、本文を太字ゴシックで書き、下線で区切る
• カテゴリタブ（tab-underline）: 太字の小さな文字に緑の下線を引いたタブを横に並べる
• 線の吹き出し（quote-balloon）: 緑の線の枠に上向きの三角。中に緑の太字キャッチを入れる
• リングノート風カード（notebook-card）: 上辺にリング金具を描いた白いカード。ベージュの影を付ける
• フッターのリンクボタン（footer-pill-link）: 青地に置く白いピル型。緑の文字と右端のアイコン

Do's and Don'ts

Do - イラストは各セクションの境目に重ねて、ページに動きを出す - クリック先のあるものには必ず緑の円形ペン先アイコンを付ける - 大見出しは明朝にし、余白を広く取る - カードの影は単色の板をずらして作る

Don't - グラデーションやぼかしの影を使わない - 緑・青・黄以外の強い面色を増やさない - 角丸のカードにしない（ピル型はボタンだけ） - 本文を詰めて組まない

Page Structure

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

1. ファーストビュー（世界観とキャッチを伝える）: クリーム地に人物や家具の多色線画を散らし、中央に手書きキャッチと欧文サブを置く
2. メッセージ（企業の理念を語る）: 白地に明朝の長文を広い行間で組み、最後にピル型 CTA を置く
3. お知らせ（最新情報を示す）: クリーム地に、日付と本文の行を細線で区切ったリスト。最後に一覧ボタン
4. 特集（読み物コンテンツへ誘導する）: 緑の面にずらし影の白カードを縦に積む
5. 社内ギャラリー（職場の雰囲気を見せる）: 写真を横並びの帯にし、その下に見出し・説明・円形矢印
6. 職種紹介（仕事の全体像を見せる）: リングノート風カードに説明文とピル型 CTA
7. 社員インタビュー（人を見せる）: 下線タブと、方眼背景の人物写真カルーセル。下に線の吹き出しでキャッチ
8. 採用情報リンク（応募関連のページへ導く）: 大きな写真の下に、線で区切ったリンク項目を 4 つ並べる
9. 会社について（会社概要へ誘導する）: 写真、明朝見出し、説明文、ピル型 CTA の順に置く
10. フッター（関連リンクと SNS）: 建物イラストと波形を境に青の面。白いピル型リンクを並べる

Imagery

• 黒の均一な線画に、ベタ塗りの多色（緑・黄・ピンク・紫・水色・オレンジ）を塗る
• モチーフは本・植物・椿・猫・カメラ・窓など、読書や創作を連想させるもの
• 人物写真は白背景で切り抜き、自然な笑顔やポーズで撮る
• オフィス写真は明るく、木と緑のある空間を写す
• カード背景には薄いピンクの方眼を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横並びのグローバルナビとエントリーボタンを置く
• PC のメッセージは本文を左、イラストを右に配置する
• PC のお知らせは見出しを左、リストを右の 2 カラムにする
• PC の特集カードは 3 枚を高さをずらして横に並べる
• PC のインタビューは写真カードを横に 4〜5 枚並べる
• 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 行書くと起動時に読み込まれる。