--- version: alpha name: Clean Red Accent Corporate Recruit LP description: 白地に淡い水色〜ピンクのぼかしグラデーションを敷き、見出しの頭文字やキーワードだけを鮮やかな赤で強調するIT企業の採用サイト型。角丸の写真カードに白文字ラベルと円形の矢印ボタンを重ね、「〜を知る」型の見出しでコンテンツへ誘導する。最後は赤い面のフッターで締める。 colors: primary: '#DC0206' dark-section: '#E40011' accent-1: '#FA6056' background: '#FEFFFE' background-alt: '#F1F2F6' tint-1: '#E3F5F7' tint-2: '#FAE6E8' surface: '#E9E9E9' text: '#1F1E22' text-muted: '#90A0AF' accent-2: '#141414' line: '#DED7D7' on-dark: '#FCFDFE' accent-1-accessible: '#E81507' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Inter fontSize: 22px fontWeight: 700 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 2.1 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Inter fontSize: 12px fontWeight: 500 lineHeight: 1.5 rounded: sm: 8px md: 16px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' photo-link-card: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 260px icon-link-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 180px circle-arrow: textColor: '{colors.text}' rounded: '{rounded.full}' height: 44px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 44px job-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 24px view-more-circle: textColor: '{colors.text}' rounded: '{rounded.full}' height: 56px apply-list: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 100px media-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 440px footer-top-button: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' rounded: '{rounded.sm}' height: 36px --- # DESIGN.md — 白×赤アクセントの水色グラデIT採用LP（Clean Red Accent Corporate Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、清潔・爽やか、信頼・誠実、シンプル・ミニマル - **キーワード**: 白地・赤の一点強調・水色のぼかしグラデ・角丸写真カード・円形矢印ボタン・巨大な透かし英字 - **地の質感**: フラットな面に、大きく淡いブラー状のグラデーション（水色・薄ピンク）を背景に流す。影はほぼ使わない。 - **形**: 16px前後の角丸カード、円形の矢印アイコンボタン、波状の曲線でゆるく区切るセクション境界 - **温度感**: やや寒色寄りで、赤のアクセントが熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DC0206` | 見出し強調語・頭文字・ブランド赤 | 2% | 画素の実測 | | `dark-section` | `#E40011` | フッターの赤い面 | 4% | 画素の実測 | | `accent-1` | `#FA6056` | フッター内のボタン帯・アイコン円 | 1% | 画素の実測 | | `background` | `#FEFFFE` | 基本の地 | 30% | 画素の実測 | | `background-alt` | `#F1F2F6` | 淡いグレーの区画地・小カード地 | 10% | 画素の実測 | | `tint-1` | `#E3F5F7` | 水色グラデ背景 | 12% | 画素の実測 | | `tint-2` | `#FAE6E8` | 淡いピンクのぼかし | 3% | 画素の実測 | | `surface` | `#E9E9E9` | 事業紹介内の薄グレーカード | 2% | 画素の実測 | | `text` | `#1F1E22` | 見出し・本文の黒 | 4% | 画素の実測 | | `text-muted` | `#90A0AF` | インタビューの経歴補足 | 0% | 画素の実測 | | `accent-2` | `#141414` | 職種ラベルの黒帯 | 0% | 画素の実測 | | `line` | `#DED7D7` | 円形ボタンの細線・カード枠 | 0% | 画素の主要色に補正 | | `on-dark` | `#FCFDFE` | 写真・赤面上の白文字 | 1% | 画素の実測 | | `accent-1-accessible` | `#E81507` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレー#F1F1F6を交互に使い、所々に水色〜ピンクの大きなぼかしを流す。 - 赤は見出しの頭文字・キーワード・本文中の一語・リンク文字に限定して使う。 - 見出しは「赤のキーワード＋黒の述語」の2色構成にする。 - 写真カードは下部に暗いグラデをかけ白文字を載せる。 - ページ末尾だけを赤の面にし、内側のボタンは明るい朱色で示す。 - アイコン円は朱色の花形・角丸面に白アイコン。 - `footer-top-button` は文字 `#FCFDFE` × 背景 `#FA6056` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E81507`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー（白帯の上に2行） | ゴシック | Noto Sans JP | 700 | 34px | 1.5 | 0.04em | | `headline-lg` | 「〜を知る」型のセクション見出し | ゴシック | Noto Sans JP | 700 | 30px | 1.4 | 0.02em | | `accent` | 英字ラベル見出し・透かし巨大英字 | 欧文サンセリフ | Inter | 700 | 22px | 1.2 | 0.0em | | `headline-md` | メッセージのリード見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.6 | 0.04em | | `headline-sm` | カード名・インタビュータイトル | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.02em | | `body-lg` | メッセージ本文（太め・行間広め） | ゴシック | Noto Sans JP | 700 | 14px | 2.1 | 0.06em | | `body-md` | セクション説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.04em | | `note` | カード下の英字サブラベル・経歴 | 欧文サンセリフ | Inter | 500 | 12px | 1.5 | 0.0em | - 見出しは和文太ゴシックで、強調語だけ赤にする。 - 英字見出しは頭文字1字だけ赤にする。 - カードは和文タイトルの下に小さな英字ラベルを添える。 - 本文は短く改行し、行間は1.9〜2.1にする。 - FVの背景に、画面からはみ出す巨大英字を淡い青紫の透かしで置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は見出し左・カード右の2カラム、写真カード3列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 左右余白は約16px、カードは全幅に近い。 - セクションは見出し→説明文→カード群の順。 - カードは縦に12px程度の間隔で積む。 - インタビューは横スクロールカルーセルで、次のカードを端に少し見せる。 - 一部のセクションは白い大きな角丸パネルで包む。 ## Elevation & Depth - 影はほぼなく、面の色差と角丸で区切る。 - 写真カードは下部に暗いグラデーションをかけて文字を読ませる。 - 募集要項のリストは白パネルを写真の上に重ねて浮かせる。 ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸16〜20pxの長方形。FVは縦長の角丸写真を3枚並べ、メッセージは大小2枚を重ねる - **セクション境界**: 基本は直線で地の色を切り替える。所々に水色の緩い波カーブを入れる - 矢印ボタンは直径約44pxの円で、細線または白線にする。 - 外部リンクには円の中に外部リンクアイコンを入れる。 - アイコンは朱色の花形の面に白い線画アイコンを置く。 - 「もっと見る」リンクは手描き風の赤い楕円で囲む。 ## Components - **写真リンクカード**（`photo-link-card`）: 全幅の角丸写真。左下に白い和文タイトルと英字ラベル、右下に白線の円形矢印ボタンを置く - **アイコン付きグレーカード**（`icon-link-card`）: 淡いグレーの角丸カード。右上に朱色の花形アイコン、左にタイトルと英字、右下に円形矢印を置く - **円形矢印ボタン**（`circle-arrow`）: 細いグレーの線で描いた円の中に黒い矢印を入れる。写真の上では白線・白矢印にする - **2色の「〜を知る」見出し**（`section-heading`）: キーワードを赤、続く述語を黒にした大きな太字見出し - **職種ラベル**（`job-label`）: 黒地に白文字の小さな帯。インタビュー写真の下に置く - **手描き楕円リンク**（`view-more-circle`）: 英字の「もっと見る」と矢印を、赤い手描き風の楕円線で囲む - **募集要項リスト**（`apply-list`）: 白い角丸パネルに、赤い太字の項目名と外部リンクの円ボタンを細線区切りで縦に並べる - **外部メディアカード**（`media-card`）: 白カードの中に、ロゴ見出し・ロゴ画像枠・タイトル・説明文・外部リンクボタンを置く - **フッターのTOPボタン**（`footer-top-button`）: 赤地の上に置く朱色の角丸横長バー。白い英字を左寄せで入れる ## Do's and Don'ts **Do** - 赤は強調語・頭文字だけに絞る。 - 写真カードはすべて角丸にし、円形矢印で遷移を示す。 - 背景には淡い水色とピンクの大きなぼかしを流す。 - 和文タイトルには必ず英字ラベルを添える。 - 社員写真は自然光のオフィスで、笑顔の会話シーンを使う。 **Don't** - 赤で広い面や段落全体を塗らない（フッター以外）。 - 濃い影や立体的なボタンを使わない。 - 角の立った写真を混ぜない。 - 暖色系のベージュなどを地に使わない。 - 見出しに装飾書体や明朝を使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢を短いコピーで伝える）: 白帯に2行の太字コピーを置き、2行目を赤にする。下に縦長の角丸写真3枚と巨大な透かし英字を配置し、スライダーのインジケーターを付ける 2. **メッセージ**（企業の理念を語る）: 頭文字が赤の英字見出し、2行のリード、大小2枚の重ね写真、行間の広い太字本文。最後の一語を赤にする 3. **会社を知る**（トップメッセージ・会社紹介・文化へ誘導する）: 2色見出しと説明文のあと、写真リンクカードを3枚縦に積む 4. **事業を知る**（事業内容を紹介する）: 白い大きな角丸パネルの中に、見出し・説明・グレーのロゴカードを入れる 5. **仕事を知る**（職種紹介へ誘導する）: グレー地に見出し・説明・写真リンクカード1枚 6. **働く環境**（文化・福利厚生へ誘導する）: 朱色の花形アイコン付きグレーカードを2枚 7. **社員インタビュー**（人柄と仕事を伝える）: 水色グラデ地で横スクロール。角丸のポートレート、黒の職種ラベル、経歴、太字のタイトル。手描き楕円の「もっと見る」と左右の矢印を付ける 8. **外部メディア**（公式ブログ等へ誘導する）: グレー地に白い角丸カードを2枚。それぞれロゴ枠と外部リンクボタンを持つ 9. **選考の流れ**（応募までの流れを示す）: 白から水色への波カーブで区切り、写真リンクカード1枚を置く 10. **募集要項CTA**（応募ページへ送る）: 集合写真の角丸パネルに白い見出しと説明を重ね、下部に白い募集リストのパネルを重ねる 11. **フッター**（サイトを締める）: 赤の全面にTOPバーと白いロゴ、英字のサイト名を置く ## Imagery - 明るいオフィスで社員同士が自然に会話する様子を、浅い被写界深度で撮る。 - インタビューは胸から上の正面ポートレートにし、背景はガラス窓のぼけにする。 - 高層ビルを見上げた青空の写真で、先進性を表す。 - 写真の下部は暗くし、白文字を載せられるようにする。 - 背景に大きくぼかした水色・ピンクの抽象的なグラデーションを置く。 - アイコンは単色の線画を、朱色の花形の面に乗せる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは見出し＋説明を左、カードを右に置く2カラムにする。 - PCは写真リンクカードを3列に並べる。 - PCのインタビューは4枚を横に並べ、左右の矢印でスライドする。 - 外部メディアカードはPCで2列にする。 - 募集要項はPCで左下に白いリストを置き、右に集合写真を見せる。 - FVの透かし英字はPCで横長に1行で流す。 ## 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-46316a17`（元 LP の URL から採番） - **元 LP**: https://www.motex.co.jp/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。