--- version: alpha name: Sports Career Media Grid Magazine description: くすんだグレージュ地に、ターコイズのヘッダー、ネオンイエローのグラデ帯、黒の動画帯を挟むスポーツ業界の求人メディア。極太の幾何学欧文見出しと写真カードのグリッドで、雑誌のようなリズムを作る。 colors: primary: '#10B0C0' background: '#DAD7D0' background-alt: '#C6C6CE' tint-1: '#CDD2C9' surface: '#FEFEFE' dark-section: '#000000' on-dark: '#FFFFFF' accent-1: '#E6FC34' marker: '#E7EBA4' text: '#020000' text-muted: '#7C7974' cta: '#020101' on-cta: '#F7F6F3' line: '#BBAB9B' text-muted-accessible: '#787570' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Unbounded fontSize: 30px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Unbounded fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px marquee-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' height: 32px article-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 300px company-logo-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 120px tag-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px related-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px search-field: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px mascot-bubble: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px --- # DESIGN.md — ターコイズ×ネオン黄のスポーツ求人メディア LP（Sports Career Media Grid Magazine） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、力強い・インパクト、情報量多め・訴求型、スポーティ - **キーワード**: ウェブマガジン・極太幾何学ロゴ・写真カードグリッド・色帯でセクションを切り替える・ネオンアクセント - **地の質感**: フラットな単色面。影はほぼ使わず、細い区切り線とグレージュの面でカードを分ける - **形**: 角丸なしの四角いカード、ピル型の小ボタン、黒い丸の矢印アイコン - **温度感**: 中間。グレージュの温かさに、ターコイズとネオン黄の冷たく鋭い色を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#10B0C0` | ヘッダー・ファーストビューの地 | 6% | 推定 | | `background` | `#DAD7D0` | ページの基本地（グレージュ） | 30% | 画素の実測 | | `background-alt` | `#C6C6CE` | 関連サイト帯の地（グレー） | 12% | 画素の実測 | | `tint-1` | `#CDD2C9` | イベント帯の地（セージ） | 7% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | カードの地 | 9% | 画素の実測 | | `dark-section` | `#000000` | 動画帯・フッターの黒 | 14% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の文字 | 2% | 画素の実測 | | `accent-1` | `#E6FC34` | シリーズ帯のネオンイエロー | 4% | 画素の実測 | | `marker` | `#E7EBA4` | ヘッダーのナビ・帯テロップの淡いイエロー | 2% | 画素の主要色に補正 | | `text` | `#020000` | 見出し・本文の文字 | 4% | 画素の実測 | | `text-muted` | `#7C7974` | 肩書き・日付など補足 | 1% | 画素の実測 | | `cta` | `#020101` | 一覧へのボタン（黒ピル） | 1% | 画素の実測 | | `on-cta` | `#F7F6F3` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `line` | `#BBAB9B` | カード間の区切り線 | 1% | 画素の主要色に補正 | | `text-muted-accessible` | `#787570` | AA を満たす補正値（計算） | | 計算 | - 基本地はグレージュ。セクションごとにセージ・グレー・ネオン黄・黒の帯を切り替えてリズムを作る - ターコイズはヘッダーとファーストビューだけで使い、ブランドの入口にする - ネオンイエローは連載の帯とテロップだけに使う。グラデで白に抜く - 黒は動画帯とフッターで使い、ページの終わりを締める - カードは明るいオフホワイトにして、地から浮かせる - ボタンは黒地に白文字に統一する。色付きのボタンは作らない - `search-field` は文字 `#7C7974` × 背景 `#FEFEFE` のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#787570`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大見出し・フッターの巨大ロゴ | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.0 | -0.02em | | `headline-lg` | セクションの英字見出し | 欧文サンセリフ | Unbounded | 800 | 30px | 1.1 | 0.02em | | `headline-sm` | 英字見出しの下に添える和文の小見出し | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.05em | | `headline-md` | 記事カードのタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em | | `body-md` | 説明文・概要 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 肩書き・日付・タグ | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 繰り返して流れる英字テロップ | 欧文サンセリフ | Unbounded | 700 | 14px | 1.2 | 0.04em | | `label-button` | 一覧ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.05em | - セクション見出しは、極太の英字と小さな和文の 2 段組にして中央に置く - 和文はすべてゴシックにする。明朝は使わない - 記事タイトルは太字で 2〜3 行まで。肩書きは小さい灰色の文字にする - 英字テロップは帯の中で横に繰り返し、流れる演出にする - 巨大ロゴはフッターで横幅いっぱいに置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カルーセルは 1.3 枚が見える状態で横スクロールさせる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - セクションは帯の色の切り替えで区切る - 見出しは中央に置き、下に 24px あける - 各セクションの最後に「一覧へ」の黒ピルボタンを中央に置く - 記事一覧は細い線で区切るグリッドにする - 関連サイトは左にサムネ、右に文と矢印を置く横長のリストにする ## Elevation & Depth - 影は基本的に使わない - カードは地の色との明度差と細い線だけで区切る - カルーセルの矢印は小さな丸ボタンにする ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。記事は 4:3、イベントは 16:9 で切り抜く - **セクション境界**: 直線で色帯を切り替える。英字テロップの帯を挟む - カード・写真は角を立てる - ボタンとタグだけピル型にする - 矢印は黒い丸の中に白い矢印を入れる ## Components - **一覧へボタン**（`button-more`）: 黒いピル型に白文字。右端に丸い矢印を付ける - **英字＋和文の見出し**（`section-heading`）: 極太の幾何学英字の下に、小さな和文の説明を中央揃えで置く - **英字テロップ帯**（`marquee-band`）: 同じ英単語を横に繰り返す細い帯。上下に線を入れる - **記事カード**（`article-card`）: 写真、太字のタイトル、灰色の肩書き、ピル型のタグを縦に並べる - **企業ロゴカード**（`company-logo-card`）: 白い四角の中央にロゴを置き、下に社名と箇条書きを添える。横スクロールで見せる - **タグ**（`tag-pill`）: 細い枠線のピル型に小さな文字を入れる - **関連サイト行**（`related-row`）: 左にサムネ、中央にタイトルと説明、右に黒い丸の矢印を置く行。行の間を線で区切る - **キーワード検索**（`search-field`）: 白いピル型の入力欄で、右に虫眼鏡アイコンを置く - **マスコット吹き出し**（`mascot-bubble`）: 黒い鳥のシルエットに、ネオン黄の小さな吹き出しを添える ## Do's and Don'ts **Do** - セクションごとに地の色を変え、雑誌のようなリズムを出す - 見出しは極太の英字＋小さな和文で統一する - 写真は人物が中心のものを角丸なしで使う - 各セクションの最後に黒ピルの一覧ボタンを置く - ネオン黄は帯とアクセントだけに限定する **Don't** - カードに大きな角丸や強い影を付けない - ターコイズやネオン黄を本文の地に広く使わない - 明朝や手書きの書体を混ぜない - 見出しを左寄せの和文だけにしない - ボタンを色付きのグラデーションにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー・ファーストビュー**（メディアの顔を見せ、注目記事を提示する）: ターコイズ地に人物写真のスライダーを置き、極太の巨大ロゴを重ねる。上部にピル型のナビを置く 2. **英字テロップ帯**（おすすめのセクションを予告する）: グレージュ地に英字を横に繰り返し、上下に線を入れる 3. **おすすめ記事**（主力のインタビューへ誘導する）: 3 列 × 2 段の記事カードを線で区切って並べる 4. **求人ピックアップ**（スポーツ関連の企業求人を見せる）: 英字見出しとマスコットを置き、企業ロゴカードの横スクロールと黒ピルボタンを並べる 5. **新着コンテンツ**（最新記事の一覧と検索）: 小さなサムネ付きの行を 3 列のグリッドで並べ、下に注目タグと検索欄を置く 6. **連載**（テーマ別の企画を見せる）: ネオン黄から白へのグラデ帯に、縦長のバナーをカルーセルで並べる 7. **動画**（動画コンテンツへ誘導する）: 黒地に大きな動画サムネと、小さなサムネを 4 列で並べる 8. **イベント**（転職イベントを告知する）: セージ地に、16:9 のバナーと日時・会場を 3 列で並べる 9. **関連サイト**（外部の特設ページへ送客する）: グレー地に、サムネ・説明文・丸い矢印を並べた横長の行を縦に積む 10. **フッター**（サイト内の回遊と運営者の表記）: ネオン黄のテロップの下に、黒地と横幅いっぱいの巨大ロゴ、リンク群、SNS アイコンを置く ## Imagery - スポーツ業界で働く人物を、職場や競技場で自然な笑顔で撮る - 記事サムネの下部に、色帯に企画名を入れた細いラベルを重ねる - イベントバナーは鮮やかな色面と太字の文字のグラフィックにする - マスコットは黒い鳥のシンプルなシルエットにする - 英字の幾何学的な大きなタイポを装飾として使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はカードを 3 列、SP は 1 列か横スクロールのカルーセルにする - 新着の 3 列リストは、SP では 1 列の行リストにする - 巨大ロゴは SP でも横幅いっぱいに置き、文字サイズは画面幅に合わせて縮める - ナビは SP ではハンバーガーメニューにまとめる - 関連サイトの行は、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-01bc8565`（元 LP の URL から採番） - **元 LP**: https://dodasports.doda.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。