DESIGN.md — ライム地×原稿用紙グリッドの出版社採用 LP（Lime Manuscript Grid Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、レトロ、シンプル・ミニマル
• キーワード: ライムグリーン・原稿用紙の枠・明朝体・活字コラージュ・黒の細線・黄色マーカー
• 地の質感: うっすら紙のざらつきがあるフラットなライム地。FV には白地に黒インクの古い印刷物を並べる
• 形: 角丸なしの四角いマスと細い罫線が基本。丸いのは矢印アイコンとスクロールバーだけ
• 温度感: 明るく軽快で、どこか知的なやや暖かめの色温度

Colors

• 地は 2〜3 段階のライムだけで作り、セクションごとに明るさを変えて区切る
• 文字と線は黒 1 色。グレーの本文は使わない
• 白は文字マス・カード・紙面画像の地にだけ使う
• 黄色マーカーは小見出しの下半分にだけ引く
• 英字の大見出しは地より少し明るいライムで、背景になじませる
• 黒い面はキャプション帯・ハンバーガーメニュー・フッターに限る
• 赤は準備中の告知だけに使う

Typography

• 見出しはすべて明朝体。本文と日付はゴシック体
• セクション見出しは 1 文字ずつ白いマスに入れ、黒の細線で囲む
• マス見出しの下に、同じ意味の英字を極太サンセリフで添える
• 日付は太字のゴシック体で本文の上に置く
• キャプションは明朝体で字間を広めに取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは横スクロールで見せる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 19px で、全セクション揃える
• リンク一覧は上下を黒い 1px 線で区切り、右端に丸い矢印を置く
• プロジェクトカードは左右に交互にずらし、番号の枠を写真に重ねる
• セクション上部の余白は約 70px と広めに取る
• FV は約 75px の正方形マスを並べたグリッド

Elevation & Depth

• 影はほぼ使わずフラットにする
• 日記カードだけ、右下にずらした淡いオリーブ色のベタ影を付ける
• 番号ラベルは写真の上に白いボックスとして重ねる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの横長長方形。商品を色付きの背景紙に並べて真上から撮った写真
• セクション境界: 直線で切り替え、地のライムの明るさを変えて区切る
• 角丸は使わない
• 丸いのは矢印アイコンとスクロールバーのつまみだけ
• 線は黒の 1px
• カード上辺にはリングのような短い縦線を付け、メモ帳風に見せる

Components

• 原稿用紙マスの見出し（heading-grid）: 白いマスに明朝の 1 文字ずつを入れ、黒線で区切って横に並べる。PC では縦に並べる
• 英字ゴースト見出し（heading-en-ghost）: マス見出しの下に置く、地より少し明るいライムの極太英字
• マーカー小見出し（heading-marker）: 明朝の小見出しで、下半分に黄色のマーカーを引く
• 罫線リンク行（link-row）: 上下を黒線で区切った行。左に明朝のラベル、右に丸囲みの矢印を置く
• 分野の写真カード（photo-card）: 全幅の色背景の物撮り写真。下にラベルと丸い矢印を付ける
• プロジェクトストーリーカード（story-card）: 写真の角に白い番号ボックスを重ね、下に黒帯で白文字のキャプションを入れる
• メモ帳風カード（diary-card）: 白いカードに黒枠とリング線を付け、中央に丸い写真を置く。ずらしたベタ影付きで、横スクロールで見せる
• エントリーボタン（button-entry）: ライム色の四角いボタンを点線で 2 つに分け、マイページとエントリーを並べる
• 横スクロールバー（scroll-bar）: 細い黒線の上に、黒いピル型のつまみを置く

Do's and Don'ts

Do - 見出しは必ず原稿用紙マスと英字ゴースト見出しを組で使う - 地色はライムの濃淡だけで、セクションごとに切り替える - 罫線は黒 1px に統一し、リンクには丸囲みの矢印を付ける - 商品写真は色付きの背景紙の上で真上から撮る - FV は活字の紙面コラージュとライムのマスを交互に並べる

Don't - 角丸やピル型のボタンを使わない（スクロールバーのつまみは除く） - グラデーションや強いドロップシャドウを使わない - ライム以外の色を地の面に使わない - 見出しを丸ゴシックやポップ書体にしない - 黄色マーカーを本文に乱用しない

Page Structure

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

1. ファーストビュー（企業の思想を一言で印象づける）: マスのグリッドにキャッチを 1 文字ずつ入れる。重要な語は特大にし、他のマスに多言語の古い活字の紙面画像を埋める。右上は黒いメニューボタン
2. 新着情報（最新のお知らせを伝える）: マス見出しと一覧リンクを置き、太字の日付と本文を罫線で区切って並べる
3. 仕事紹介（事業の分野ごとの仕事を見せる）: マス見出し・英字見出し・マーカー小見出しを重ね、リンク行の後に分野ごとの写真カードを縦に並べる
4. プロジェクトストーリー（具体的な仕事の事例を見せる）: 明るいライム地に、番号ボックスと黒帯キャプション付きの写真を左右交互に配置する
5. 内定者紹介（同世代の声を届ける）: リンク行の後に、メモ帳風カードを横スクロールで並べ、下に黒いスクロールバーを置く
6. 会社紹介（働く環境を見せる）: マーカー小見出しの下に建物の全幅写真と短い説明文を置く
7. 採用情報（募集要項・日程・FAQ へ案内する）: 罫線で区切ったリンク行を 3 つ並べる
8. エントリー CTA（応募へ誘導する）: 暗く落とした写真の上に白い欧文見出しを置き、2 分割のライムのボタンを配置する
9. フッター（ロゴを表示する）: 黒地に白のロゴと欧文のサイト名を置く

Imagery

• 多言語の古い活字印刷や手書き原稿の紙面を、白黒のまま四角く切り抜いて並べる
• 書籍・雑誌は単色の背景紙（緑・ベージュ・水色・ピンク・赤）に並べて真上から撮る
• 人物は顔を出さず、作業中の手元や机の上を撮る
• 写真がないときは灰色の丸と赤い欧文の準備中表示で代える
• エントリー CTA の背景写真は暗く落として文字を読みやすくする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV のグリッドを横に広げ、左上にロゴとナビゲーション・ボタンの列を置く
• PC ではマス見出しを縦書きにして左に置き、英字見出しを右に大きく出す
• PC では分野の写真カードを 2 列のグリッドにする
• PC ではストーリー番号を縦書きのラベルにする
• PC では日記カードを 3 枚並べ、エントリー CTA を横長の帯にしてボタンを右端に寄せる

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