--- version: alpha name: Coastal Blue Professional Recruitment LP description: 海と街の青い写真に手書き風の見出しを重ねたFVから始まる、士業の採用LP。白と淡いブルーグレーの地を交互に敷き、待遇の数字はブルー→ターコイズのグラデ帯の上に白カードで見せる。明朝の見出しと欧文の小見出しで、誠実で落ち着いた印象にまとめている。 colors: primary: '#2A5FA3' secondary: '#658ECA' cta: '#236CA9' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#ECEFF6' surface: '#F1F4FA' accent-1: '#52AAB5' accent-2: '#4886B3' text: '#444D54' text-muted: '#7A8590' line: '#C1CED4' marker: '#466890' accent-3: '#E01E1E' typography: display: fontFamily: Yomogi fontSize: 34px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em accent: fontFamily: Kalam fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em headline-sm: fontFamily: Noto Serif JP fontSize: 32px fontWeight: 700 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.06em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 2px md: 4px lg: 6px 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}' section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 100px before-after-card: backgroundColor: '{colors.surface}' textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 95px stat-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 85px stat-label: backgroundColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px staff-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 125px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px spec-table: backgroundColor: '{colors.secondary}' typography: '{typography.note}' height: 40px flow-steps: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px required-badge: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 18px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 46px --- # DESIGN.md — 海の青と白の地方士業求人 LP（Coastal Blue Professional Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、上品・高級、情報量多め・訴求型 - **キーワード**: 地方移住・海辺の街・ブルー基調・明朝見出し・数値訴求・誠実 - **地の質感**: 写真が主役。淡い三角形の幾何学パターンを背景にうっすら敷き、フラットな白カードを重ねる - **形**: 角丸はほぼ使わない。四角いカードと表、円形の写真やアイコン、矢羽根型のステップラベル - **温度感**: やや寒色で清涼感があり、落ち着いている ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2A5FA3` | ブランドの青（見出し下線・バッジ・ステップの円） | 4% | 画素の実測 | | `secondary` | `#658ECA` | 表の項目欄・FAQの開閉ボタン・フッター | 5% | 画素の実測 | | `cta` | `#236CA9` | 送信ボタン（青→ターコイズのグラデ） | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の地 | 44% | 画素の実測 | | `background-alt` | `#ECEFF6` | FAQ・スタッフ紹介の淡い地 | 10% | 画素の実測 | | `surface` | `#F1F4FA` | 悩みカードの右側の淡いグレー面 | 3% | 画素の実測 | | `accent-1` | `#52AAB5` | 待遇セクションのグラデ帯（ターコイズ側） | 6% | 画素の実測 | | `accent-2` | `#4886B3` | 数値の見出しラベルの青 | 2% | 画素の主要色に補正 | | `text` | `#444D54` | 見出し・本文の濃いグレー | 3% | 画素の主要色に補正 | | `text-muted` | `#7A8590` | ローマ字名・注釈 | 0% | 推定 | | `line` | `#C1CED4` | 表やフォームの区切り線 | 1% | 画素の主要色に補正 | | `marker` | `#466890` | 強調語の青い文字と二重下線 | 0% | 画素の実測 | | `accent-3` | `#E01E1E` | 営業お断りなどの注意の赤字 | 0% | 推定 | - 地は白と淡いブルーグレーを交互に使い、セクションを分ける - 強調色は青系のみにする。赤は注意書きの 1 行だけに使う - 待遇の数字だけは青→ターコイズのグラデ帯に置き、白カードで浮かせる - 表の項目欄は中明度の青に白文字、値欄は白地に濃いグレー文字にする - 見出しの下には短い青のラインを中央に入れる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVと写真上の手書き風キャッチ | 手書き・筆 | Yomogi | 700 | 34px | 1.4 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 500 | 22px | 1.5 | 0.08em | | `headline-md` | 特長の小見出し・カードの見出し | 明朝 | Noto Serif JP | 500 | 17px | 1.6 | 0.08em | | `accent` | 見出し上の欧文ラベル・番号 | 欧文スクリプト | Kalam | 400 | 11px | 1.4 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.08em | | `headline-sm` | 待遇カードの大きな数字 | 明朝 | Noto Serif JP | 700 | 32px | 1.1 | 0.0em | | `note` | 表の中身・注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.06em | | `label-button` | ボタン・バッジ | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.1em | - 見出しは明朝で中央揃えにし、上に欧文のイタリックラベル、下に短い青のラインを置く - キャッチは手書き風の書体にして、写真の上に白文字で載せる - 本文はゴシックで字間を広めにとり、左揃えにする - 数字は明朝の太字で大きく、単位は小さく添える - 強調したい語は青文字にして二重下線を引く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。待遇の数値カードは 2 列のグリッド - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは見出しブロック（欧文ラベル・明朝見出し・ライン・リード文）で始める - 特長の写真は画面幅いっぱいに置き、番号と縦線で次の本文につなげる - スタッフ紹介は左に写真、右に名前の白カードを並べる横長カード - 会社概要と募集要項は左の項目欄・右の値欄の 2 列の表にする - フォームはラベルを上、入力欄を全幅に置き、区切り線で区切る ## Elevation & Depth - カードには薄い影（0 2px 6px rgba(0,0,0,.08)）を付ける - スタッフカードは右下に淡い影を出して浮かせる - 表やフォームは影を付けず、線だけで区切る ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。 - **写真の切り抜き**: 基本は四角。ビフォーの小さな写真は円形でアフター写真の角に重ねる - **セクション境界**: 直線で区切る。背景に淡い三角形の幾何学模様を敷く - ボタンとカードはほぼ角丸なしにする - フローのアイコンは青い円の中に白い線画で描く - ステップのラベルは右端が矢羽根になった帯にする ## Components - **セクション見出し**（`section-heading`）: 欧文イタリックのラベル、明朝の見出し、短い青ラインを中央に縦に積む - **ビフォーアフターカード**（`before-after-card`）: 左にアフター写真と円形のビフォー写真、右に淡いグレー面と二重下線付きの見出しを置く - **待遇の数値カード**（`stat-card`）: グラデ帯の上に置く白カード。線画アイコン、ラベル、大きな明朝の数字で構成する - **年次ラベル**（`stat-label`）: 数字の上に置く青い帯。中は白文字 - **スタッフカード**（`staff-card`）: 左に写真と左上の青バッジ、右に白地でローマ字名と明朝の氏名を置く - **FAQアコーディオン**（`faq-item`）: 白い行の先頭に明朝のQ、右端に青い四角とシェブロンを置く - **募集要項の表**（`spec-table`）: 左は青地に白文字の項目欄、右は白地の値欄。罫線で区切る - **採用フロー**（`flow-steps`）: 矢羽根型のSTEPラベル、青い円のアイコン、点線のつなぎを 4 つ並べ、下に枠線付きの補足ボックスを置く - **必須バッジ**（`required-badge`）: フォームのラベルの横に置く、紺の小さな四角に白文字 - **送信ボタン**（`button-primary`）: 青→ターコイズの横グラデで、角丸の小さい大きなボタン ## Do's and Don'ts **Do** - 地域の海や街の写真を大きく使い、青で統一する - 数字の訴求は大きな明朝の数字と線画アイコンで見せる - 見出しは毎回同じ型（欧文ラベル・明朝・ライン）で揃える - 白と淡いブルーグレーの地を交互にしてリズムを作る - 表とフォームは線を細くして、余白を広めにとる **Don't** - 暖色の派手な色やピル型のボタンを使わない - 見出しをゴシックの極太にしない - 影を強くしたり、立体的な装飾を入れたりしない - 赤を注意書き以外に使わない - 数値カードに写真を入れて情報を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（地方で働く価値観を一瞬で伝える）: 海と街を見下ろす写真を全面に敷き、白い手書き風のキャッチ、下線付きのリード、白い帯の地域ラベルを重ねる 2. **悩みの提起とメリット**（都会の不満と地方の解決策を対比する）: 明朝の問いかけ見出しの下に、ビフォーアフターカードを 3 つ縦に並べ、それぞれに短い本文を付ける 3. **地域紹介**（移住への不安をやわらげる）: 港の写真の上に白い縦長カードを置き、手書き風の見出しと本文を入れる。その下に食べ物と人物の写真帯を続ける 4. **待遇**（年収・残業・休日を数字で示す）: 青→ターコイズのグラデ帯に、年収 3 段の大カードと 2×2 の数値カードを置く 5. **特長**（職場の良さを 2 点で語る）: 全幅の職場写真、番号と縦線、明朝の 2 行見出し、本文を 2 回繰り返す 6. **スタッフ紹介**（一緒に働く人を見せる）: 淡い幾何学模様の地に、横長のスタッフカードを縦に並べ、最後に集合写真を置く 7. **事務所紹介**（オフィスの品質と基本情報を伝える）: 左右がのぞくスライダーとドットのページャーの下に、2 列の会社概要表を置く 8. **よくある質問**（応募前の疑問に答える）: 淡い地の上にアコーディオンを 5 つ並べる 9. **募集要項**（条件を詳しく示す）: 青い項目欄の 2 列の表を長く続ける 10. **採用の流れ**（応募のハードルを下げる）: 淡い写真の地の上に、4 ステップの円アイコンと、枠線で囲んだ補足を置く 11. **応募フォーム**（応募を受け付ける）: 中央揃えのリード文と赤い注意 1 行、必須バッジ付きの入力欄、チェックボックスのリスト、グラデの送信ボタン 12. **フッター**（締めくくりとページトップへの導線）: ページトップへ戻る山形の矢印と、中明度の青い帯に白いコピーライトを置く ## Imagery - 地域の海・港・街並みを高い所から撮り、青みを強めに補正する - スーツの社員が明るいオフィスで働く自然な写真を使う。黄色い椅子など、差し色が少しあってよい - ビフォーは小さな円形の写真、アフターは大きな四角い写真にする - アイコンは青い細線の線画で統一する - 背景には淡いブルーの三角形を幾何学的に重ねた模様を敷く - 写真の端は白へフェードさせて、次のセクションになじませる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC のFVは会議室などの写真にし、キャッチを中央に置く。ヘッダーにナビを横並びで出す - PC ではメリットカードを 3 列、待遇の数値は年収カードと 2×2 のグリッドを横に並べる - PC の特長は写真と本文を左右交互に配置する - PC のスタッフカードは 2 列のグリッドで、写真を上・名前を下にした縦型にする - PC の会社概要表は 2 列に分け、フォームはラベルを左・入力欄を右に置く - PC の本文幅は約 1000px の中央寄せにする ## 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-11a8d827`（元 LP の URL から採番） - **元 LP**: https://frontier-recruit-iturn.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。