DESIGN.md — 桜色と手描き線のやさしい保育士採用 LP（Soft Sakura Pink Handdrawn Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、かわいい、ナチュラル
• キーワード: 桜色・手描き線・楕円写真・ドット模様・波形の区切り・保育
• 地の質感: 紙のようなマットな淡色の面に、ドットやかすれストロークの手描き模様を散らす
• 形: いびつな楕円やもこもこ雲形の写真、細い輪郭線つきのピル型ボタン、波形のセクション境界
• 温度感: 暖かい。ピンクベージュとクリームでぬくもりを出す

Colors

• 地は桜色・クリーム・生成りの 3 色をセクションごとに入れ替え、波形でつなぐ
• 文字と線画はすべてこげ茶。純黒は使わない
• くすみピンクは矢印ボタンの丸や小さな強調だけに使う
• 英字ラベルは明るいピンクで、日本語見出しの上に小さく置く
• 黄緑・水色・薄紫・黄はアイコン円や雲形などの装飾に少量だけ使う
• 金額など数字の強調だけ濃いピンクにする
• banner-sticky は文字 #E05258 × 背景 #CAECEC のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#C7242B、4.5:1）を使う。

Typography

• 見出しは細めの丸ゴシックで字間を広くとり、太字にしない
• 英字ラベルは丸みのあるサンセリフで、日本語見出しの上に左寄せか中央寄せで置く
• 本文は行間 1.9 前後でゆったりさせる
• 手書きスクリプト体はロゴ風の装飾 1 か所だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントは写真と文章を左右交互にずらして縦に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 16px
• ポイント同士はこげ茶の点線カーブでつなぐ
• セクション見出しは英字ラベル＋日本語見出しの 2 段
• 各セクションの最後に輪郭線つきピルボタンを 1 つ置く
• 画面下に期間限定バナーと 2 分割ナビを固定する

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• カードは影ではなく細いこげ茶の輪郭線で浮かせる
• 固定バナーだけ薄いピンクの枠線で区切る

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真はいびつな楕円・円・もこもこ雲形に切り抜き、輪郭はゆがませる
• セクション境界: ゆるい波形カーブで地の色を切り替え、境界にドットやかすれ線模様を添える
• ボタンは完全なピル型で 1px のこげ茶輪郭
• 矢印はピンクの丸の中に細い→を入れる
• POINT 番号は黄色の円に細い輪郭線
• 白カードは角丸 16〜24px

Components

• 輪郭線ピルボタン（button-outline-pill）: 淡ピンクの面に 1px のこげ茶輪郭。中央に文字、右端に細い→
• 応募ピルボタン（button-entry）: 白い大きなピル型。左に色つきの円アイコン、右にピンクの丸矢印
• 丸矢印テキストリンク（link-arrow）: こげ茶の文字の右にピンクの丸＋→
• POINT 番号バッジ（badge-point）: 淡黄の円に小さな英字 POINT と大きな数字。写真の左上に重ねる
• 英字ラベル付き見出し（section-heading）: ピンクの英字の小見出しの下に、細い丸ゴシックの日本語大見出し
• 追従キャンペーンバナー（banner-sticky）: 淡ピンクの面に点線で挟んだ小見出しと濃ピンクの金額。左に人物イラスト、右上に閉じるボタン
• 写真付き横長リンクカード（card-photo-link）: ピル型カードの左に円形写真、右に見出しと丸矢印
• イラスト円付きリストカード（card-icon-list）: 白い角丸カードに、パステルの円で囲んだ線画イラストとラベルを縦に並べる

Do's and Don'ts

Do - 写真は必ず楕円か雲形に切り抜き、横に手描きの線画を添える - 地色はセクションごとに淡色を切り替え、波形でつなぐ - 文字・線はすべてこげ茶で統一する - ボタンには細い輪郭線と→をつける - 余白を広めにとり、ゆったり見せる

Don't - 彩度の高い原色の大きな面を使わない - 四角い写真をそのまま置かない - 太いゴシックで見出しを強く打ち出さない - 濃い影やグラデーションのボタンを使わない - 黒い背景のセクションを作らない

Page Structure

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

1. ファーストビュー（職場の雰囲気とコンセプトを伝える）: 2 行のコピーの下に大きな楕円写真。鳥や家の線画と白い雲形を重ねる
2. 特典バナー（応募特典を知らせる）: 白いピル型帯に黄緑の多角形バッジと金額、右にピンクの雲形と→
3. コンセプト（大切にしている考えを説明）: 英字ラベル＋見出し＋本文。円形写真 3 枚を三角に配置し、中央に花の線画
4. 特長（4 つのポイント）（働く魅力を 4 点で示す）: 楕円写真と POINT バッジを左右交互に置き、点線カーブでつなぐ。各項目に丸矢印リンク
5. データ・動画への導線（数字や動画で理解を深める）: クリーム地に黄・黄緑の雲形、手で持つ紙や旗飾りの線画看板、下にピルボタン
6. 勤務地（エリアと通いやすさを伝える）: 生成り地に本文とピルボタン。下に黄緑の線画地図、拠点はピンクで塗る
7. インタビュー（先輩職員の声）: 桜色地に傾いた線枠つきの写真カードスライダー、左右に矢印
8. お知らせ（最新情報）: 左にサムネイルと黄緑の PICK UP 円バッジ、右にタイトルと抜粋のリスト
9. よくある質問（疑問を解消する）: クリーム地に見出しと 2 行リード、ピルボタンへ誘導
10. 採用情報・見学（詳細ページへ誘導）: 円形写真つきの大きなピル型リンクカードを 2 枚
11. CTA（Entry）（応募・資料請求・相談）: 子どもと先生の線画が並ぶ波形の上部、濃ピンク地に白抜き英字見出し、大ピルボタン 2 つ、白カードのリスト、LINE 誘導
12. フッター（サイト内リンクと会社情報）: 桜色地に 2 列のリンク一覧（区切り線）、バナー、ロゴ、SNS 丸アイコン、住所

Imagery

• 自然光で明るく撮った、保育中の職員と子どもの笑顔の写真
• 写真はいびつな楕円・円に切り抜き、輪郭はやわらかく
• こげ茶の細い線画イラスト（鳥・家・積み木・人物）に淡ピンクを少し塗る
• 黄・ピンクの細かいドットの群れや、縦のかすれストロークを余白に散らす
• 白・黄・黄緑のもこもこ雲形を写真の後ろに敷く
• 地図や看板も手描き線のイラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV で左にコピーと小写真、右に大きな楕円写真を置く 2 カラム
• 4 つのポイントは PC で横 4 列に並べ、点線でつなぐ
• データ・動画の 2 つの導線は PC で横 2 列
• インタビューは PC で 3 枚並べて表示する
• Entry の小カード群は PC でアーチ型カードを横 4 列
• フッターは PC でロゴ・リンク・バナーの 3 列

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