--- version: alpha name: Sky Blue Corporate Recruiting LP description: 淡い空色のグラデーション地に紺の欧文大見出しを置いた、士業法人の採用 LP。都市の写真と社員のポートレートを大きく使う。白いカードと斜めの空色帯を重ねて、誠実で先進的な印象にまとめている。 colors: primary: '#115089' background: '#FFFFFF' background-alt: '#DAF2FD' tint-1: '#ECF7FB' secondary: '#87BCD1' accent-1: '#5BA8D6' cta: '#0E6AAC' on-cta: '#FFFFFF' dark-section: '#135886' text: '#14191D' text-muted: '#8A8F96' accent-2: '#3FAE8A' surface: '#FDFEFE' typography: display: fontFamily: Montserrat fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Dancing Script fontSize: 48px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Montserrat fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 48px link-arrow: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 180px course-tile: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 160px overlap-textbox: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 240px person-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 320px icon-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px entry-banner: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 110px button-qa: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' height: 56px --- # DESIGN.md — 空色グラデと紺の士業採用サイト LP（Sky Blue Corporate Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的 - **キーワード**: 空色グラデーション・紺の欧文見出し・社員ポートレート・都市景観・白カードの重なり・細い円形矢印 - **地の質感**: 質感のないフラットな面に、淡いグラデーションと半透明の写真を重ねる。 - **形**: 角丸は小さめのカードと、斜めや曲線の空色帯。ボタンは文字と細線の丸い矢印だけで組む。 - **温度感**: やや寒色寄りの爽やかなトーン。人物の笑顔で冷たさを和らげる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#115089` | 欧文大見出し・ブランド紺 | 6% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#DAF2FD` | 淡い空色のセクション地 | 8% | 画素の実測 | | `tint-1` | `#ECF7FB` | ごく淡い空色のグラデ終端 | 3% | 画素の実測 | | `secondary` | `#87BCD1` | メッセージ帯の空色 | 7% | 画素の主要色に補正 | | `accent-1` | `#5BA8D6` | 強調語・水色のアクセント | 1% | 推定 | | `cta` | `#0E6AAC` | エントリー帯の青 | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | エントリー帯の白文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#135886` | 法人情報の紺の写真オーバーレイ | 7% | 画素の主要色に補正 | | `text` | `#14191D` | 見出しの和文・本文の濃色 | 2% | 画素の実測 | | `text-muted` | `#8A8F96` | ボタン矢印の円・補足のグレー | 0% | 推定 | | `accent-2` | `#3FAE8A` | 地図イラストの緑 | 0% | 推定 | | `surface` | `#FDFEFE` | 影付きの白カード | 6% | 画素の実測 | - 地は白と、淡い空色のグラデーション（#DCF2FC〜#F0F8FB）を交互に使う。 - 欧文の大見出しはすべて紺 #135886 で統一する。 - 強調したい和文の語だけを水色にして、文字を大きくする。 - 濃い面は、紺を半透明で重ねた写真セクションとエントリー帯の 2 か所に限る。 - エントリー帯は青のグラデーションに白文字。暖色は使わない。 - カードは白地に薄い影をつけ、空色の地から浮かせる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション名の欧文大見出し | 欧文サンセリフ | Montserrat | 400 | 40px | 1.1 | 0.02em | | `headline-lg` | ファーストビューのコピーと大きな和文見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.05em | | `headline-md` | セクション内の和文リード | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.05em | | `headline-sm` | 欧文見出し横の和文ラベル | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.05em | | `note` | 日付・キャプション・補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `accent` | 背景に敷く筆記体の装飾文字 | 欧文スクリプト | Dancing Script | 400 | 48px | 1.0 | 0.0em | | `label-button` | テキストリンクのボタン文字 | 欧文サンセリフ | Montserrat | 500 | 14px | 1.0 | 0.05em | - 欧文の大見出しは細めのウェイトで、和文の小ラベルを右か下に添える。 - 背景に巨大な欧文をごく淡い色で敷き、透かしにする。 - 本文は行間 2.0 前後で、字間をやや広めにとる。 - 和文の見出しは太字にして、強調語だけ水色で大きくする。 - ボタンは文字と丸い矢印の組み合わせにして、塗りは使わない。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 1〜2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は画面端まで寄せ、テキストの白ボックスを写真に半分重ねる。 - 写真とテキストの左右配置を、セクションごとに入れ替える。 - コースの案内は写真の上に色を重ねた 3 列のタイルにする（SP は縦積み）。 - 社員紹介は横スクロールのカルーセルにする。 - 環境紹介は 2×2 のアイコンカードにする。 - 最後は Q&A へのボタンとエントリー帯で締める。 ## Elevation & Depth - 白カードには薄い影（0 4px 16px rgba(0,0,0,.08)）をつける。 - 写真に重ねる白ボックスは影なしのフラットにする。 - 影を強くしたり、何重にも重ねたりしない。 ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形。人物写真はポートレートで大きくトリミングし、ヒーローの下端は斜めにカットする。 - **セクション境界**: 斜めの直線や緩い曲線で切り替え、空色の斜め帯を背景に差し込む。 - 矢印アイコンは細線の正円にする。 - カード左上に紺の短い縦線を入れることがある。 - タグは白地に紺文字の小さな四角にする。 ## Components - **欧文＋和文の見出し**（`section-heading`）: 紺の細い欧文を大きく置き、横に小さな和文ラベルを添える。 - **Learn more リンク**（`link-arrow`）: 欧文の文字の右に、細線の丸と矢印を並べる。 - **お知らせカード**（`news-card`）: 白カードにバナーを並べ、日付・カテゴリタグ・一行タイトルのリストを載せる。 - **コース選択タイル**（`course-tile`）: 写真に青緑〜紺を重ね、アイコン・欧文ラベル・和文タイトル・丸矢印を中央に置く。 - **写真重ねテキストボックス**（`overlap-textbox`）: 写真の端に白いボックスを重ね、見出し・リード・本文・リンクを入れる。 - **社員インタビューカード**（`person-card`）: 空色の地に縦長の人物写真を置き、入社区分のタグ、番号、イニシャルを添える。 - **制度紹介カード**（`icon-card`）: 白カードに、丸い空色地のイラスト・欧文タイトル・和文の小見出しを並べる。 - **エントリー帯**（`entry-banner`）: 青のグラデーション地に、白の欧文 ENTRY・補足・丸矢印リンクを置く。 - **Q&A ボタン**（`button-qa`）: 写真の上に白い長方形を置き、紺文字と右端に丸矢印を入れる。 ## Do's and Don'ts **Do** - 欧文の大見出しは細めの Montserrat 系にし、紺で統一する。 - 写真の上に白ボックスを重ね、奥行きを出す。 - 空色の淡いグラデーションと斜め帯を地に使う。 - 人物は笑顔のスーツ姿で、自然な仕事風景を撮る。 - ボタンは丸矢印付きのテキストリンクにして、軽く見せる。 - セクションの余白は広めにとる。 **Don't** - 赤や橙などの暖色をボタンや面に使わない。 - 角丸の大きいポップなカードにしない。 - 太い黒ゴシックの欧文見出しは使わない。 - 写真に派手な枠や装飾をつけない。 - 文字を詰めた情報過多のレイアウトにしない。 - ピル型の塗りボタンを多用しない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コンセプトと働く人の印象を伝える）: 社員の写真をコラージュし、空色のグラデーションを重ねる。中央に白の欧文コピーと和文サブコピーを置き、下端は斜めにカットする。 2. **お知らせ**（最新情報とタイアップを伝える）: 白カードにバナーを横に並べ、日付付きのニュースリストを載せる。 3. **代表メッセージ**（理念と想いを伝える）: 空色の地に都市の写真を薄く重ね、筆記体の装飾を敷く。左に見出し、右に本文を置く。 4. **成長環境**（未経験からでも成長できると訴える）: 写真を 2 枚並べ、曲線で白地に切り替える。大きな欧文見出しを置き、円グラフとイラストで業務の幅を図解する。 5. **コース紹介**（経歴別の入口を示す）: 色を重ねた写真タイルを 3 つ並べ、アイコンと丸矢印を付ける。 6. **会社を知る**（数字と動画で会社を理解してもらう）: 淡い空色の地に、インフォグラフィックと動画への導線カードを 2 枚置き、その下に CM 動画を 2 本並べる。 7. **事業・仕事内容**（仕事の中身と強みを伝える）: 大きな写真に白のテキストボックスを重ね、左右を入れ替えて 2 ブロック並べる。 8. **社員インタビュー**（働く人のリアルを見せる）: 縦長ポートレートのカードを横スクロールで並べ、新卒・中途のタブを付ける。 9. **働く環境**（研修・福利厚生を伝える）: 写真の横に 2×2 のイラストアイコンカードを置き、背景に空色の斜め帯を入れる。 10. **法人情報・拠点**（規模と拠点を示す）: 都市写真に紺を重ね、白の欧文見出しを置く。下に白カードを重ね、地図のイラストで拠点を示す。 11. **Q&A・エントリー**（応募へ導く）: 社員の後ろ姿の写真に白の Q&A ボタンを載せ、最後に青のグラデーションのエントリー帯を置く。 ## Imagery - スーツ姿の社員が笑顔で働く自然光の写真を使う。オフィスや和室など、場面には幅を持たせる。 - 高層ビルや都市の景観を、青みに寄せて背景に使う。 - 写真には空色〜紺の半透明オーバーレイをかける。 - 制度や業務は、青系の線画に淡い彩色をした人物イラストで説明する。 - 円グラフなどの図解は青のグラデーションで描く。 - 背景には、淡い色の巨大な欧文や筆記体を装飾として敷く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では写真とテキストを左右に並べる。SP では写真を上、白ボックスを下に縦積みし、少し重ねる。 - コースのタイルは、PC の 3 列から SP では縦 3 段にする。 - 制度紹介カードは SP でも 2×2 を保つか、1 列にする。 - 欧文の大見出しは、PC の 60px 前後から SP では 36〜40px に縮める。 - 社員カードは SP では 1.2 枚が見える横スクロールにする。 - エントリー帯は SP では全幅にし、文字とリンクを縦に積む。 ## 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-1a4cc93b`（元 LP の URL から採番） - **元 LP**: https://landmark.work/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。