--- version: alpha name: Monochrome Tech Recruiting LP with Iridescent Ribbons description: 白地と黒・チャコールを基調に、虹色の流体リボンとモノクロのビル群写真でテクノロジーの未来感を出す、エンジニア向け採用 LP。大きな欧文見出しと黒いピル型ボタン、カラフルなバナーカードでコンテンツへ誘導する。 colors: background: '#FEFFFE' primary: '#000000' cta: '#010101' on-cta: '#FDFDFD' dark-section: '#2B2B2B' on-dark: '#FAFCF9' secondary: '#777D80' accent-1: '#1A8CBF' accent-2: '#21BAD9' accent-3: '#FDD324' text-body: '#2B2B2B' line: '#2B2B2B' accent-1-accessible: '#177DAB' accent-2-accessible: '#177F94' typography: display: fontFamily: Montserrat fontSize: 56px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.15em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 400 lineHeight: 2.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Klee One fontSize: 40px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2em rounded: sm: 0px md: 0px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 76px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px link-underline: textColor: '{colors.primary}' typography: '{typography.body-md}' height: 32px heading-en: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px video-banner: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 200px circle-label: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 96px banner-card: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 340px nav-grid: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 150px hashtag-list: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 30px --- # DESIGN.md — 白黒×虹色リボンの技術系採用 LP（Monochrome Tech Recruiting LP with Iridescent Ribbons） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、シンプル・ミニマル、力強い・インパクト - **キーワード**: 白黒基調・虹色流体リボン・モノクロ都市写真・巨大欧文見出し・未来の技術・バナーグリッド - **地の質感**: 白い余白の多いフラットな面に、光沢のある 3D リボンと CG 合成画像を重ねる - **形**: 角のない四角い写真・バナーと、ピル型ボタン、円形アイコンボタンの組み合わせ - **温度感**: ややクールだが虹色アクセントで明るく前向き ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFFFE` | ページの地色 | 43% | 画素の実測 | | `primary` | `#000000` | ロゴ・見出しの墨黒 | 5% | 画素の実測 | | `cta` | `#010101` | 主ボタンの黒 | 2% | 画素の実測 | | `on-cta` | `#FDFDFD` | ボタン上の白文字 | 1% | 画素の実測 | | `dark-section` | `#2B2B2B` | メニューグリッド・フッター | 8% | 画素の実測 | | `on-dark` | `#FAFCF9` | 濃色上の白文字 | 1% | 画素の実測 | | `secondary` | `#777D80` | ロゴの灰色・サブ文字 | 3% | 画素の主要色に補正 | | `accent-1` | `#1A8CBF` | ロゴの一字・手書きコピー・ハッシュ記号の青 | 1% | 画素の実測 | | `accent-2` | `#21BAD9` | 研修バナーのシアン面 | 4% | 画素の実測 | | `accent-3` | `#FDD324` | 質問バナーの黄色 | 3% | 画素の実測 | | `text-body` | `#2B2B2B` | 本文の濃灰 | 2% | 画素の主要色に補正 | | `line` | `#2B2B2B` | 下線リンク・ボタン枠 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#177DAB` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#177F94` | AA を満たす補正値（計算） | | 計算 | - 地は白、文字とボタンは黒・チャコールのモノトーンで統一する - 彩りは虹色リボン画像とバナー画像に任せ、UI 部品には有彩色を使わない - 青はロゴの一字・手書き風コピー・ハッシュ記号など点で使う - 後半は夜空風の濃紺〜黒グラデーション地にカラフルなバナーを並べる - ナビグリッドとフッターはチャコール地に白文字 - `circle-label` は文字 `#1A8CBF` × 背景 `#FEFFFE` のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#177DAB`、4.6:1）を使う。 - `banner-card` は文字 `#FAFCF9` × 背景 `#21BAD9` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#177F94`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション名の巨大欧文 | 欧文サンセリフ | Montserrat | 400 | 56px | 1.1 | 0.05em | | `headline-lg` | 動画バナーの見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.05em | | `headline-sm` | 欧文見出し下の和文サブ見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.15em | | `body-lg` | 理念の中央揃えリード文 | ゴシック | Noto Sans JP | 400 | 16px | 2.4 | 0.05em | | `body-md` | 事業説明などの本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.05em | | `accent` | FV の手書き風強調語 | 手書き・筆 | Klee One | 400 | 40px | 1.2 | 0.0em | | `label-button` | ボタン・ナビの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em | | `note` | SCROLL 表記・フッター欧文 | 欧文サンセリフ | Montserrat | 500 | 11px | 1.4 | 0.2em | - セクション見出しは細めの巨大欧文＋小さな太字和文の 2 段構成 - 本文は行間 2.0 前後で広く取る - リード文は中央揃え、事業説明は左揃え - 強調語だけ手書き風の青文字にして遊びを入れる - 欧文小文字ラベルは字間を広く取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、ナビのみ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 余白を大きく取り、画像とテキストを交互に配置する - 白い本文パネルを写真の上に重ねてずらす - バナーは横幅 76% 程度で縦に詰めて並べる - ナビグリッドは細い白線で 4 分割 - インタビューは横スクロールのカルーセル ## Elevation & Depth - 影はほぼ使わずフラット - 白パネルを写真に重ねることで奥行きを出す - カルーセルの中央カードを大きく、左右を小さくぼかして遠近感を出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 写真・バナーは角丸なしの長方形、CG 素材は切り抜きで白地に配置 - **セクション境界**: モノクロのビル群シルエットや虹色リボンで切り替え、直線で区切る - ボタンはピル型（黒塗りまたは黒枠の白） - 矢印付きの円形アイコンボタンをバナー右下に置く - 事業分野は細線円のラベルを引き出し線でつなぐ ## Components - **黒ピル型主ボタン**（`button-primary`）: 黒地に白太字の 2 行テキスト、右端に細い矢印、左にはみ出す円形アイコン - **黒枠ピル型ボタン**（`button-outline`）: 白地に黒細枠、中央に 2 行テキストと右矢印 - **下線矢印リンク**（`link-underline`）: テキストの下に細い黒線を引き右端に矢印 - **巨大欧文見出し**（`heading-en`）: 細身の大きな欧文の下に小さな太字和文 - **動画メッセージバナー**（`video-banner`）: 写真に白太字見出しと白円の再生ボタンを重ねる - **分野ラベル円**（`circle-label`）: 白地に色付き細線の円、中に分野名と小さな山括弧 - **コンテンツバナー**（`banner-card`）: シアン・黄色・写真など色違いの長方形バナー、右下に円形矢印ボタン - **ナビグリッド**（`nav-grid`）: チャコール地 2×2 の白線区切り、白文字と白円矢印 - **ハッシュタグ**（`hashtag-list`）: 青い＃記号と黒文字の職種タグを中央に縦並び ## Do's and Don'ts **Do** - 白黒モノトーンの UI に虹色リボン画像で彩りを足す - 見出しは大きな細身の欧文を主役にする - 余白は広く、本文行間はゆったり取る - ボタンはピル型か円形に統一する - 後半は濃色地にカラフルなバナーを並べてメリハリを付ける **Don't** - ボタンや見出しに有彩色の塗りを使わない - カードに影や大きな角丸を付けない - 本文を詰めた行間にしない - 明朝や丸ゴシックを混ぜない - 写真を多色フィルターで加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業ロゴと未来志向の世界観を示す）: 灰色の大きなロゴ、中央揃えの短いコピーと手書き風強調語、ロボット・車・ロケットの CG 合成画像 2. **ビジュアル帯**（技術の未来感を演出し SNS へ誘導）: 虹色リボンとモノクロビル群の画像、右に円形の SNS バッジ 3. **理念・リード**（会社の想いを伝える）: 中央揃えの短い文を広い行間で 5 行、下に黒ピル型主ボタン 4. **職場写真**（働く人の雰囲気を見せる）: 全幅のオフィス写真 5. **トップメッセージ動画**（代表の言葉へ誘導）: 写真に白太字見出しと円形再生ボタンを重ねたバナー 6. **事業紹介**（事業領域と技術力を伝える）: 写真に重ねた白パネルに巨大欧文見出し・本文・下線リンク、分野ラベル円付きの CG 画像 7. **社員インタビュー**（社員の人柄と職種を紹介）: 縦長ポートレートのカルーセル、矢印、ハッシュタグ、黒枠ピルボタン 8. **コンテンツバナー群**（研修・Q&A・福利厚生・家族向け情報へ誘導）: 夜空グラデーション地に色違いの長方形バナーを縦に並べる 9. **ナビグリッド**（理念・FAQ・募集要項などへ案内）: チャコール地 2×2 グリッド、白文字と白円矢印 10. **エントリー CTA**（応募を促す）: 白地に短いコピーと巨大欧文、黒円矢印ボタン、両端に虹色リボン 11. **フッター**（ロゴで締める）: チャコール地に白ロゴと字間広い欧文ラベル ## Imagery - 光沢のある虹色の 3D 流体リボンを画面端から流し込む - 高層ビル群はモノクロ写真で地平線として使う - ロボット・スポーツカー・ロケット・PC などの CG を切り抜き合成 - 社員写真は明るいオフィスで自然な表情、彩度控えめ - 研修バナーはアイソメトリックのフラットイラスト - 背景に星空〜地球のような濃紺グラデーション - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV で合成画像とビル群を横長に一体化し、ロゴを全幅に - PC の事業紹介は左に本文、右に CG 画像の 2 カラム - PC のバナー群は 2 列グリッドで研修バナーを縦 2 段分の大きさに - PC のナビグリッドは 4 列横並び - 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-92724815`（元 LP の URL から採番） - **元 LP**: https://tamadic-recruit.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。