--- version: alpha name: Pastel Prism Gradient Recruiting LP description: 水色・黄緑・クリームの淡いグラデーション地に、パステルの多面体片を散らした採用サイト。白い角丸カードと濃紺グレーのピル型ボタンで全体を引き締める。見出しは太い丸みのあるゴシック。文字の一部を多色の線で彩り、「色」をテーマにしたブランドらしさを出す。 colors: primary: '#3A4656' on-primary: '#E9EFF7' cta: '#3A4656' on-cta: '#F3F7F9' background: '#F5F8DC' background-alt: '#E0F3F9' surface: '#FEFEFE' text: '#1E1F26' text-body: '#444855' text-muted: '#D9EAEE' background-alt-2: '#F8F8F8' line: '#F8F8F8' accent-1: '#FECBDA' accent-2: '#F7EE7A' accent-3: '#296390' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 60px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Lato fontSize: 58px fontWeight: 300 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 10px full: 999px spacing: unit: 8px card: 26px section: 16px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px content-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 520px section-label: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 20px watermark-en: textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 70px photo-grid: rounded: '{rounded.sm}' height: 200px menu-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 46px footer-accordion: textColor: '{colors.text}' typography: '{typography.body-md}' height: 60px --- # DESIGN.md — パステル多面体×濃紺ボタンの採用サイト LP（Pastel Prism Gradient Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、クール・先進的、信頼・誠実 - **キーワード**: パステルグラデーション・ローポリ多面体・白カード・濃紺ピルボタン・余白多め・多色アクセント文字 - **地の質感**: 透明感のある淡いグラデーション地。半透明の三角片が浮遊する - **形**: 角丸カード、ピル型ボタン、鋭角の三角形装飾 - **温度感**: やや涼しめ。水色寄りのニュートラル ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3A4656` | ボタン・見出し文字の濃紺グレー | | 画素の実測 | | `on-primary` | `#E9EFF7` | ボタン上の白文字 | | 画素の実測 | | `cta` | `#3A4656` | エントリーボタン | | 画素の実測 | | `on-cta` | `#F3F7F9` | エントリーボタン文字 | | 画素の実測 | | `background` | `#F5F8DC` | グラデーション地の基調（淡い黄緑） | | 画素の実測 | | `background-alt` | `#E0F3F9` | グラデーション地の水色側 | | 画素の実測 | | `surface` | `#FEFEFE` | コンテンツカード | | 画素の実測 | | `text` | `#1E1F26` | 見出し文字 | | 画素の実測 | | `text-body` | `#444855` | 本文文字 | | 画素の主要色に補正 | | `text-muted` | `#D9EAEE` | 背景の英字透かし | | 画素の主要色に補正 | | `background-alt-2` | `#F8F8F8` | フッター地 | | 画素の実測 | | `line` | `#F8F8F8` | フッターメニュー区切り線 | | 画素の主要色に補正 | | `accent-1` | `#FECBDA` | 多色アクセント：ピンク | | 画素の実測 | | `accent-2` | `#F7EE7A` | 多色アクセント：黄 | | 推定 | | `accent-3` | `#296390` | ロゴ周りの青 | | 画素の実測 | - 地は黄緑→クリーム→水色の淡い斜めグラデーションにする - コンテンツは白カードに載せ、地との対比で区切る - ボタンはすべて濃紺グレー1色にし、白文字と白い丸の再生アイコンを付ける - ピンク・黄・水色・緑・紫は装飾の三角片と見出しの差し色だけに使う - フッターは薄いグレー地にして、グラデーション帯とはっきり分ける - 本文は純黒にせず、濃紺グレーで柔らかくする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大キャッチ | ゴシック | Zen Kaku Gothic New | 900 | 60px | 1.4 | 0.02em | | `headline-lg` | カード内の大見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.04em | | `headline-sm` | 見出し上の小ラベル | ゴシック | Noto Sans JP | 500 | 10px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 11px | 2.0 | 0.05em | | `accent` | 背景の英字透かしコピー | 欧文サンセリフ | Lato | 300 | 58px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | - メインコピーは太いゴシック。数文字の一画だけをパステル多色に置き換える - メッセージ本文は中央揃えにし、短く改行して詩のように並べる - 各セクション本文は左揃えにし、行間は2.0 - 見出しの上に小ラベルを置き、多色の三角片を重ねる - 英字は細いウェイトで大きく置き、淡色の透かしにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内に写真を 2〜3 列のグリッドで並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 16px、基本単位 8px、カード内 26px（375px 幅換算） - カードは左右 18px 程度の余白で中央に置き、縦に連ねる - カード同士の間隔は狭め（12〜48px）にする - カード内の順番は「ラベル→見出し→写真→本文→ボタン」で統一する - 後半のセクションはカードを外し、グラデーション地に直接載せる - ボタンは中央に置き、幅はカードの 70〜85% ## Elevation & Depth - カードに影はほぼ付けない。白地とグラデーションの対比で浮かせる - ボタンも影なしのフラット - PCでは写真カード背面に淡い紫グラデーションの板を重ね、奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 10px。ボタンはピル型。 - **写真の切り抜き**: 角丸4〜8pxの長方形。グリッド写真はサイズを少しずつずらして並べる - **セクション境界**: 直線の区切りは使わない。グラデーション地を連続させ、カード境界で区切る - ナビゲーション系ボタンは完全なピル型にする - エントリーボタンは角丸8pxの太い長方形にする - 装飾には鋭角の三角形とローポリ多面体を使う - メニューボタンは濃紺の正円 ## Components - **詳細ピルボタン**（`button-pill`）: 濃紺のピル型。中央に白文字、右端に白丸の再生アイコンを置く - **エントリーボタン**（`button-entry`）: 全幅の角丸長方形を 2 つ縦に並べ、右端に再生アイコンを置く - **白コンテンツカード**（`content-card`）: グラデーション地に浮かぶ角丸の白カード - **三角片付き小ラベル**（`section-label`）: 小さな日本語ラベルの左下に、2色のパステル三角片を重ねる - **英字透かし**（`watermark-en`）: 画面幅をはみ出す細い英文を淡い水色で置く - **写真グリッド**（`photo-grid`）: 業務写真を 3 列で上下にずらして並べる - **円形メニューボタン**（`menu-circle`）: 右上に固定する濃紺の円。中に白い三本線を置く - **フッターアコーディオン**（`footer-accordion`）: 細線で区切った項目リスト。右端に＋を置く ## Do's and Don'ts **Do** - 地はパステルグラデーションを全体でつなげる - 三角片を画面端に半分はみ出させて散らす - ボタン色は濃紺1色に統一する - セクションの型（ラベル→見出し→写真→本文→ボタン）を繰り返す - 写真は明るく、青みのある自然光で揃える **Don't** - 原色のベタ塗り面を使わない - ボタンを多色にしない - 濃い影や太い枠線を付けない - 見出しを明朝体にしない - 装飾の三角片を本文の上に重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（テーマの世界観を提示する）: パステルのローポリ背景に、巨大な太字コピーを2行で置く。一部の画は多色にする 2. **メッセージ**（採用の想いを伝える）: 英字透かしの下に白カードを置く。中央揃えの詩的な本文とピルボタンを入れる 3. **会社紹介**（事業領域を伝える）: 白カードにラベル・見出し・3列の写真グリッド・本文・ボタンを並べる 4. **仕事と人**（職種の多様性を示す）: 白カードの中に、ずらし配置の人物写真グリッドを入れる 5. **成長機会**（研修・キャリアを示す）: 白カードに全幅写真を1枚、本文とボタンを入れる 6. **働く環境**（職場の雰囲気を示す）: カードなしでグラデーション地に直接置く。角丸写真とボタンを並べる 7. **紹介動画**（動画で理解を促す）: ラベル・見出しの下に、角丸の埋め込み動画を置く 8. **採用情報**（募集要項へ誘導する）: 見出し・後ろ姿の写真・短い本文・ピルボタンを並べる 9. **エントリーCTA**（応募へ導く）: 短い見出しの下に、新卒・キャリアの2ボタンを縦に並べる 10. **クロージングビジュアル**（世界観で締める）: ローポリ帯の上に、FVと同じ大コピーを再掲する 11. **フッター**（回遊させる）: 薄グレー地にロゴ・アコーディオンメニュー・エントリーボタンを置き、右下に固定のエントリーバナーを出す ## Imagery - 写真は明るい自然光で撮り、青み・白みの強いクリーンな色調に揃える - 被写体はオフィス・工場・研究室で働く若手社員。笑顔の会話や後ろ姿 - 業務写真は製品・素材・研究器具を寄りで撮る - 装飾はパステル多色の半透明ローポリ多面体と三角片 - 三角片は斜めに傾けてランダムに散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVを横長の帯にし、コピーを左寄せで2行に組む - PCではメッセージを中央の白カードにまとめ、幅を約45%にする - PCの各セクションは、左に文字・右に写真グリッドの2カラム。左右は交互に入れ替える - PCではエントリーボタンを横2列に並べる - PCのフッターはメニューを4列グリッドで展開する ## 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-b7a3fffa`（元 LP の URL から採番） - **元 LP**: https://www.inx.co.jp/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。