--- version: alpha name: Sky Blue Ribbon Trust Partner LP description: 白地に空色の大きな面と、水彩風のリボン曲線を組み合わせた外国人材受け入れ支援の LP。白い角丸カード、青い番号タブ、オレンジのピル型 CTA で、誠実さと親しみやすさを両立させている。 colors: primary: '#1572DB' secondary: '#33A4EA' cta: '#FE7B45' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#EEF9FF' surface: '#F4F4F4' tint-1: '#C7EAFE' text: '#181818' text-muted: '#808080' line: '#C4E2F1' accent-1: '#2C86D9' on-primary: '#EBFEFE' cta-accessible: '#D74001' primary-accessible: '#1570D6' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Roboto fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px pill-heading-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px number-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 28px service-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 95px testimonial-card: backgroundColor: '{colors.background}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 240px worry-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 70px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 37px required-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px compare-table: backgroundColor: '{colors.background}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 300px step-indicator: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 66px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1572DB` | ブランドの青（見出しの強調・番号タブ・必須バッジ） | 3% | 画素の実測 | | `secondary` | `#33A4EA` | 空色の大きなセクション面 | 20% | 画素の実測 | | `cta` | `#FE7B45` | 主 CTA ボタン・安心ラベル | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 36% | 画素の実測 | | `background-alt` | `#EEF9FF` | 淡い水色のパネル（声・メッセージ・フッター） | 12% | 画素の実測 | | `surface` | `#F4F4F4` | 薄グレーのコラム・FAQ 面 | 10% | 画素の実測 | | `tint-1` | `#C7EAFE` | 外国人の声セクションの水色面 | 5% | 画素の実測 | | `text` | `#181818` | 見出し・本文の文字 | 4% | 画素の実測 | | `text-muted` | `#808080` | サブコピー・注釈 | 2% | 画素の実測 | | `line` | `#C4E2F1` | 区切り線・カード枠 | 2% | 画素の主要色に補正 | | `accent-1` | `#2C86D9` | 英字ラベル・キャッチの青文字 | 0% | 推定 | | `on-primary` | `#EBFEFE` | 青面の上の白文字 | 1% | 画素の実測 | | `cta-accessible` | `#D74001` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#1570D6` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本に、水色パネル・薄グレー面・空色面を交互に置いてセクションを区切る - 悩み〜理由のブロックは空色の大きな角丸面で包み、中に白カードを並べる - オレンジは主 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー | ゴシック | Noto Sans JP | 900 | 34px | 1.5 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-md` | 理由・カードの小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `headline-sm` | 青い短いキャッチ（2行） | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `accent` | 英字のセクションラベル | 欧文サンセリフ | Roboto | 700 | 10px | 1.4 | 0.05em | | `note` | 注釈・フォームの補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `label-button` | ボタン・ピルラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 見出しはゴシックの太字だけを使い、明朝は使わない - 見出しの上に小さな英字ラベル（青）を置き、日本語見出しと二段で組む - 本文は行間 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-8937a706`（元 LP の URL から採番） - **元 LP**: https://shokusaiseikatsu.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。