DESIGN.md — 空色リボンと白カードの人材支援団体 LP（Sky Blue Ribbon Trust Partner LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 空色・水彩リボン・白カード・番号タブ・オレンジCTA・多文化の共生
• 地の質感: 白と淡い水色のフラットな面に、水彩のかすれがある半透明のリボン曲線が背景を横切る
• 形: 角丸 8〜16px のカードとセクション、ピル型のラベルとボタン、左上の四分円の番号タブ
• 温度感: やや涼しげで清潔。オレンジの差し色で人のぬくもりを足す

Colors

• 地は白を基本に、水色パネル・薄グレー面・空色面を交互に置いてセクションを区切る
• 悩み〜理由のブロックは空色の大きな角丸面で包み、中に白カードを並べる
• オレンジは主 CTA と安心ラベルだけに使う
• 見出しの一語だけを青グラデーション文字にして強調する
• 番号タブ・必須バッジ・FAQ の Q とプラスアイコンは primary の青で統一する
• 背景のリボンは水色の半透明で、文字の可読性を邪魔しない濃さにする
• button-primary は文字 #FFFFFF × 背景 #FE7B45 のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D74001、4.54:1）を使う。
• step-indicator は文字 #1572DB × 背景 #EEF9FF のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1570D6、4.54:1）を使う。

Typography

• 見出しはゴシックの太字だけを使い、明朝は使わない
• 見出しの上に小さな英字ラベル（青）を置き、日本語見出しと二段で組む
• 本文は行間 1.9 前後で字間を少し広げ、読みやすくする
• FV のコピーは2行に分け、一語だけを青グラデーションにする
• ピルラベル見出しは白文字を青地またはオレンジ地に乗せ、下に吹き出しの三角をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サービス要約カードのみ 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 大きなセクション面は左右 8px ほどの余白を残した角丸ボックスにする
• 理由ブロックは「写真→青キャッチ→見出し→本文→区切り線」の繰り返し
• お客様の声は横スライダーで、左右に隣のカードを少し見せる
• スライダーの下に進捗バーを置く
• 写真は左右にずらして重ね、リボン曲線とともに動きを出す

Elevation & Depth

• カードは影をほぼつけず、白地と背景色の差や細い水色枠で浮かせる
• FV のピン型マップカードなど情報パネルに薄い影を使う
• スライダーの矢印ボタンは白い丸に薄い影をつける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸 8〜10px の長方形。FV では大小の写真を互い違いに配置する
• セクション境界: 空色面の上辺をゆるい弧にし、大きな角丸ボックスで区切る。背景の水彩リボンがセクションをまたいで流れる
• 番号タブは写真やカードの左上に置いた四分円の青い面と白数字
• CTA・ラベル・バッジは全てピル型
• 入力欄は角丸 4px のグレー塗りで、枠線はつけない

Components

• オレンジのピル CTA（button-primary）: フォーム送信用の横幅いっぱいのピル型ボタン
• 吹き出しピルラベル（pill-heading-label）: セクション見出しの上に置く短いラベル。下に三角
• 四分円の番号タブ（number-tab）: カードや写真の左上角にある 01〜04 の番号
• 線画アイコンカード（service-card）: 青い線画アイコンと短い名称を中央に配した白カード（2×2）
• 声のスライダーカード（testimonial-card）: 水色枠の白カード。地域バッジ、丸いイラストアバター、見出し、本文、オレンジのハッシュタグ
• 悩みの円形吹き出し（worry-bubble）: 人物イラストの周りに置く白い円の吹き出し 4 つ
• FAQ アコーディオン（faq-item）: 青い Q と質問文、右端に青い丸のプラス、下に区切り線
• 必須・任意バッジ（required-badge）: フォーム項目名の横の小さなピル。任意は白抜き
• 比較表（compare-table）: 青のヘッダー、水色の行見出し、細い青罫の 3 列表
• フォームステップ（step-indicator）: 入力・確認・完了を線でつないだ 3 つの丸。現在地を青にする

Do's and Don'ts

Do - 白・水色・空色の 3 段階の面でセクションのリズムを作る - 見出しは英字ラベル＋日本語の太字ゴシックで統一する - 特長は番号タブつきの写真と線画アイコンで、番号ごとに対応させる - 人物の写真は笑顔で現場感のあるものを使う - 背景に半透明の水彩リボンを流して、やわらかさを出す

Don't - オレンジを見出しや装飾に多用しない - 濃い影や立体的なボタンを使わない - 黒や紺のベタ面のセクションを入れない - 明朝体や手書き書体を混ぜない - 角丸を外した直角カードと混在させない

Page Structure

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

1. ファーストビュー（双方をつなぐ存在であることを一目で伝える）: 白地に水彩リボン、現場の写真 3〜4 枚をずらして配置。「A×B」のピル 2 つと 2 行の大きなコピー
2. お客様の声（企業）（早い段階で導入企業の満足を示す）: 淡い水色の角丸パネルの中に横スライダーのカード、下に進捗バー
3. 私たちについて（団体の概要と拠点を伝える）: 集合写真と作業写真を重ね、英字ラベル＋2 行見出し＋短い本文
4. 悩みの提起（採用担当者の不安を代弁する）: 空色面に白見出し、人物イラストの周りに円形の吹き出しを 4 つ
5. 解決の提示とサービス要約（支援内容を 4 つに要約する）: オレンジの安心ラベル、下線つきの団体名、2×2 の線画アイコンカード
6. 選ばれる理由（4 つの支援を詳しく説明する）: 空色面の中の白い大きなボックス。番号タブつき写真、青キャッチ、見出し、本文、薄いアイコン透かし
7. 制度解説コラム（制度の違いを教えて信頼を得る）: グレー地に左に青い縦線のついた白カード 2 枚と、3 列の比較表
8. 理念（団体の想いを伝える）: 白地に長めの本文、写真 2 枚をずらして配置、リボン曲線
9. 代表メッセージ（代表者の顔と言葉で安心させる）: 水色パネルに見出しと本文、角丸の代表写真の右下に青い肩書きプレート
10. お客様の声（実習生）（働く側の満足も示す）: 水色の面に白カードのスライダー、イラストのアバターと職種ピル
11. よくある質問（疑問を解消する）: グレーの角丸パネルに Q とプラスのアコーディオン 8 行
12. アクセス（拠点の所在地を示す）: 青の縦線つき拠点名、ピンや電車・車のアイコンつき項目、地図埋め込み
13. お問い合わせフォーム（問い合わせを受ける）: 空色面に白い角丸フォームボックス、ステップ表示、グレーの入力欄、オレンジ CTA
14. フッター（拠点情報とリンク）: 淡い水色地にロゴ、住所、区切り線つきリンクリスト、丸いトップへ戻るボタン

Imagery

• 工場・農場・介護などの現場で働く多国籍の若者を、明るい自然光で撮る
• 面談や会議の様子を、手元や横からの距離の近い構図で撮る
• 人物イラストは青と肌色中心のフラットなもので、丸い白背景に入れる
• アイコンは青一色の線画。大きく薄くして見出しの右に透かしても使う
• 背景には水色〜白の水彩かすれのリボン曲線を大きく流す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにナビ、電話番号、右上にオレンジの問い合わせボタンを置く
• PC の FV はコピーを中央にして、写真を左右の端に散らす
• PC のサービス要約カードは 4 列 1 行にする
• PC の理由ブロックは左に写真、右に文章の 2 カラムにする
• PC の代表メッセージ・アクセスは文章と写真（地図）の 2 カラム
• 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 行書くと起動時に読み込まれる。