DESIGN.md — 生成り×朱赤の観光系新卒採用 LP（Warm Illustrated Travel Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ナチュラル、ポップ・元気
• キーワード: 生成り地・朱赤アクセント・水彩コラージュ・角丸白カード・アーチ背景・地域・観光
• 地の質感: 生成りの紙のような無地。イラストにはかすれた水彩テクスチャを使う
• 形: 角丸カード、円形の矢印ボタン、大きなアーチ型・楕円の背景、不定形の水彩ブロブ
• 温度感: 暖かい。赤みのある茶とピーチ系に、ティールの差し色

Colors

• 地は生成りで統一する。白は角丸カードだけに使う
• 朱赤は大見出し・英字サブ見出し・ENTRY ボタン・職種カードの面に限る
• 文字は黒ではなくこげ茶を使う
• 特集セクションだけ桜色をアーチ形状で敷き、ページにリズムをつける
• ティールと青はイラストと装飾ブロブだけに使い、文字には使わない
• button-entry は文字 #FEF8F3 × 背景 #DE3C15 のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D53914、4.51:1）を使う。

Typography

• 和文見出しは字間を 0.1em ほど広げてゆったり組む
• 大見出しの直下に朱赤の英字斜体ラベルを必ず置く
• サブ見出しの横には /English/ の形で小さな英字を添える
• 本文の行間は 2 以上にして読みやすさを確保する
• 背景に大きな朱赤の英字を画面幅をはみ出させて流し、装飾にする
• 特集の見出しは、数字を立体の手書き風にした大きな装飾文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種紹介はカルーセルで横に送る
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 34px（375px 幅換算）
• 左右の余白は約 19px
• 見出し、英字ラベル、リード文、カード群の順に並べる
• カードの外側右下に「詳しくみる」と丸矢印を置く
• 風景写真は全幅で敷き、白カードを重ねる
• 特集セクションの上端はアーチ状にする

Elevation & Depth

• カードは影なしのフラットにする。地色との差だけで浮かせる
• 写真付きカードは、白いテキストボックスを写真に少し重ねてずらす
• 動画カードは少し傾けて配置し、カードらしさを出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形。社員紹介ではイラスト背景から人物の切り抜きをはみ出させる
• セクション境界: 大きなアーチ・半楕円。News 欄は右側を丸めた形にする
• ボタンの角丸は 8px 程度に抑え、ピル型にはしない
• 矢印アイコンは円形にする
• 水彩の不定形ブロブを背景の装飾に使う

Components

• エントリーボタン（button-entry）: 朱赤の面に、白い小見出しと大きな英字斜体を載せる。右端に白丸の矢印を置く
• 詳しくみるリンク（link-more）: こげ茶の小さな文字の右に、こげ茶の円形矢印を置く。カードの右下外側に配置する
• セクション見出し（heading-section）: 朱赤の和文の大見出しと、その下に朱赤の英字斜体ラベルを組み合わせる
• 白角丸カード（card-content）: 上部に角丸の写真、下にタイトルと説明文を置く
• 職種カルーセルカード（card-business）: 上半分が写真、下半分が朱赤の面に白文字。左右に円形の送りボタンを置く
• 傾き動画カード（card-video）: 白い縁取りのポラロイド風カードを傾けて並べる。写真の上にハッシュタグ、下に所属を入れる
• 採用職種カード（card-recruit）: 左半分が白地に職種名、右半分が写真の横長カード。準備中の職種はこげ茶で覆う
• お知らせ枠（news-box）: 右側を大きく丸めた白い面。日付は英字斜体、本文は 1 行で並べる

Do's and Don'ts

Do - 地色は生成りを保ち、白はカード部分だけに使う - 見出しには必ず英字の斜体ラベルを添える - 人物写真と水彩イラストを組み合わせ、明るく親しみやすくする - カードの右下に、丸矢印付きの回遊リンクを統一して置く - 特集はアーチ型の桜色背景と立体文字で目立たせる

Don't - 真っ黒な文字や純白の背景を全面に使わない - 朱赤を本文や広い面に使いすぎない - カードに強いドロップシャドウを付けない - 直線的で硬いセクション区切りにしない - 寒色だけでまとめた無機質な配色にしない

Page Structure

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

1. ファーストビュー（企業の世界観と採用テーマを伝える）: 大きな和文コピーの周りに、水彩の乗り物・人物・花のイラストを配置する。中央に社員写真を置き、下にエントリーボタンを置く
2. お知らせ（採用の最新情報を伝える）: 右側を丸めた白い面に、日付と見出しを 2 件ほど並べる
3. 動画・メッセージ（勤務地の魅力と求める人物像を伝える）: 巨大な朱赤の英字の上に角丸の動画を重ねる。続けて行間の広いリード文と、水彩の地域マップを置く
4. 会社を知る（企業概要への入口をつくる）: 全幅の風景写真の下に、白角丸カードを 3 枚縦に並べる
5. 特集 1（短尺動画）（社員の声を気軽に見せる）: 桜色のアーチ背景に立体数字の見出しを置き、傾けた動画カードを並べる
6. 仕事を知る（事業や職種の内容を伝える）: 朱赤の下地を持つカードを、左右の円形ボタンで送るカルーセルにする
7. 特集 2（エピソード）（仕事のやりがいを感情に訴えて伝える）: 桜色の背景に、大小のエピソード文と小さな写真を横に流すテキストマーキーを置く
8. 働く仲間を知る（社員紹介と座談会への入口をつくる）: イラスト背景から切り抜き人物をはみ出させたスライダー（ページ番号付き）と、写真カードの下に番号ラベルを付けた座談会カードを置く
9. 働く環境を知る（人材育成や福利厚生の制度を伝える）: 写真に白いテキストカードを少しずらして重ねる
10. 採用情報（職種ごとの募集要項へ誘導する）: 左に職種名、右に写真を置いた横長カードを 3 枚並べる。準備中の職種はこげ茶で覆う

Imagery

• イラストは紙テクスチャ入りの水彩・切り絵風にする。モチーフは電車・船・ロープウェイ・花・人物
• 人物写真は自然光の明るい職場で撮り、笑顔の社員を写す
• 社員紹介は人物を切り抜き、パステル調の風景イラストに重ねる
• 風景写真は青空と自然が映える彩度高めの全幅写真にする
• 装飾にはティールの不定形ブロブと小鳥のイラストを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左にコピー、右にイラストと写真の構成にする
• PC の見出しは、左に見出し、縦線を挟んで右にリード文の 2 列にする
• PC のカードは 3〜4 列のグリッドにする
• PC の動画カードは 4 枚を横に並べる
• SP ではすべて 1 カラムに積み、カルーセルで横に送る

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