--- version: alpha name: Corporate Blue Gradient Technical School LP description: 白地を基本に、鮮やかな青のグラデーション面と濃紺の数値セクションを交互に置く企業内訓練校の採用・案内 LP。大きな欧文見出しと和文見出しを組み合わせ、実写の人物写真で温かみを出す。丸い矢印ボタンとテキストリンクで詳細ページへ誘導する。 colors: primary: '#026ACD' background: '#FFFFFF' secondary: '#86C3F5' dark-section: '#214263' on-dark: '#FDFEFD' cta: '#015DBA' on-cta: '#FFFFFF' text: '#080808' text-body: '#444444' accent-1: '#0273DB' line: '#D9DBD9' surface: '#3E3E3E' background-alt: '#FFFFFF' surface-accessible: '#797979' typography: display: fontFamily: Inter fontSize: 44px fontWeight: 600 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Inter fontSize: 52px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.02em headline-sm: fontFamily: Inter fontSize: 10px fontWeight: 600 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-circle-arrow: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px button-circle-outline: textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 56px slider-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 420px stat-row: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 200px thumb-link: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 64px footer-nav-grid: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 44px --- # DESIGN.md — 青グラデと紺の企業内技能校 LP（Corporate Blue Gradient Technical School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的 - **キーワード**: 青グラデーション・大きな欧文見出し・実写人物・数値訴求・余白多め・コーポレート - **地の質感**: フラットな単色面と、青から水色への滑らかなグラデーション。濃紺面は写真をうっすら透かす - **形**: 四角い写真とセクション。ボタンは正円の矢印ボタンが中心 - **温度感**: 爽やかで少しクール。人物の笑顔で温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#026ACD` | ブランドの青。セクション面・丸ボタン | 20% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地色 | 30% | 画素の実測 | | `secondary` | `#86C3F5` | グラデーション上端の水色 | 6% | 画素の実測 | | `dark-section` | `#214263` | 数値で語る特長セクションの濃紺 | 12% | 画素の主要色に補正 | | `on-dark` | `#FDFEFD` | 青・紺面上の文字 | 3% | 画素の実測 | | `cta` | `#015DBA` | 円形矢印ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の矢印 | 0% | 画素の主要色に補正 | | `text` | `#080808` | 見出し文字 | 2% | 画素の実測 | | `text-body` | `#444444` | 本文・日付 | 3% | 画素の主要色に補正 | | `accent-1` | `#0273DB` | 欧文ラベル・小見出しの青文字 | 0% | 画素の主要色に補正 | | `line` | `#D9DBD9` | お知らせ一覧の区切り線 | 0% | 画素の主要色に補正 | | `surface` | `#3E3E3E` | フッターのダークグレー | 7% | 画素の実測 | | `background-alt` | `#FFFFFF` | ページ外周・ヘッダー周辺の淡いグレー | 4% | 画素の実測 | | `surface-accessible` | `#797979` | AA を満たす補正値（計算） | | 計算 | - 白→青グラデ→白→濃紺→青グラデ→ダークグレーの順に地色を切り替えてリズムを作る - 青面は左上が濃い青、右下へ明るくなる斜めグラデーション - 濃紺面は人物や建物写真を薄く透かして奥行きを出す - 強調は色ではなく文字サイズで行い、アクセント色は青1色に絞る - 白地では欧文ラベルだけを青文字にし、見出しは黒 - 暖色は使わず、写真の肌色・木目で温度を補う - `slider-card` は文字 `#080808` × 背景 `#3E3E3E` のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `surface-accessible`（`#797979`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクションの大きな欧文見出し | 欧文サンセリフ | Inter | 600 | 44px | 1.1 | -0.02em | | `headline-lg` | 和文セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.02em | | `headline-md` | リード見出し（2行） | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.03em | | `accent` | 特長の大きな数値 | 欧文サンセリフ | Inter | 700 | 52px | 1.0 | -0.02em | | `headline-sm` | 欧文小ラベル（セクション名の上） | 欧文サンセリフ | Inter | 600 | 10px | 1.4 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.04em | | `note` | 数値の注釈・日付 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.02em | | `label-button` | 下線付きテキストリンク | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.03em | - セクション頭は小さな欧文または和文ラベル→大見出し→2行リード→本文の4段構成 - 欧文見出しは字間を詰め、和文より大きく置く - 数値は巨大に、単位は小さく右に添え、右寄せにする - 本文は小さめで行間を広く取る - リンク文字は太字＋下線、上に小さな欧文ラベルを置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、サムネイル一覧のみ写真＋テキストの横並び - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 左右余白は約19px - 見出しは左揃え、詳細リンクは中央寄せ - 数値行は横線で区切り、ラベル左・数値右 - 写真は本文幅いっぱいか画面幅いっぱい - インタビュー写真は大小2枚をずらして重ねる ## Elevation & Depth - 影はほぼ使わずフラット - スライダーカードは後ろに白い紙を重ねたような段差で奥行きを出す - 写真の重なりで立体感を作る ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。人物はバストアップ、建物は縦長 - **セクション境界**: 直線で色面を切り替える。濃紺面は左右少し内側に入れる - 主要ボタンは正円の矢印アイコン - 資料DLなどのサブボタンは細枠のピル型 - お知らせの矢印は小さな円の淡色ボタン ## Components - **円形矢印ボタン＋リンク**（`button-circle-arrow`）: 青い正円に白矢印、右に小さな欧文ラベルと下線付きリンク文字 - **白線の円形ボタン**（`button-circle-outline`）: 青面上で使う白い細枠の円と矢印 - **欧文ラベル付き見出し**（`section-label`）: 小さな青い欧文ラベルの下に大きな和文見出し - **お知らせ一覧**（`news-list`）: 日付＋カテゴリ、太字タイトル、右端に小矢印、細線で区切る - **特長スライダーカード**（`slider-card`）: 写真の上に番号を重ね、下に白カードで見出しと本文。左右に矢印 - **数値実績行**（`stat-row`）: 短い横線、見出し、ラベル、右寄せの巨大数値と注釈 - **サムネイル付きリンク**（`thumb-link`）: 左に横長写真、右に欧文ラベルと下線和文、右端に矢印 - **フッター2列ナビ**（`footer-nav-grid`）: ダークグレー地に細線で区切った2列のリンク格子 ## Do's and Don'ts **Do** - 青は1系統にまとめ、グラデーションは斜め方向で使う - 大きな欧文見出しと和文見出しを必ずセットにする - 数値は巨大に右寄せで見せ、注釈を添える - 人物は自然光で笑顔の実写を使う - 詳細への導線は円形矢印＋下線リンクで統一する **Don't** - 赤やオレンジなどの暖色アクセントを入れない - 角丸の大きいポップなカードを使わない - 強い影や立体ボタンを使わない - 本文を中央揃えで長く組まない - イラスト主体にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューへの導線）: 白地にロゴ左、青い3本線メニュー右 2. **ファーストビュー**（未来志向のメッセージ提示）: 人物写真全面、下部を青グラデで覆い白の大きな欧文コピーを左下に 3. **お知らせ**（最新情報の告知）: 白地、日付付きリスト3件と一覧リンク 4. **概要**（学校の位置づけを伝える）: 青グラデ面に大欧文見出し、リード、本文、番号付き特長スライダー 5. **学校案内**（施設・環境の紹介）: 白地に見出し、本文、縦長の建物写真、円形矢印ボタン 6. **カリキュラム**（学びの内容を紹介）: 写真に暗いオーバーレイで見出し、下にサムネイルリンク3件 7. **特長（数値）**（実績を数字で証明）: 濃紺面に4つの巨大数値を横線区切りで並べる 8. **インタビュー**（修了生の声で共感）: 水色→青グラデ面、大欧文見出し、大小写真の重ね配置 9. **座談会**（職場での活躍イメージ）: 青面に写真、参加者の所属と名前を線区切りで列挙 10. **写真帯**（雰囲気の余韻）: 3枚の写真を横に並べる帯 11. **フッター**（ナビと連絡先）: ダークグレー地に2列ナビ、ロゴ、住所、ピル型資料DLボタン ## Imagery - 作業着や制服姿の若者の自然な笑顔を自然光で撮る - 工場・実習機械の手元をクローズアップで撮る - 青空と建物外観を見上げる構図で撮る - 写真の上に青の半透明グラデーションを重ねて統一感を出す - 装飾イラストは使わず、写真と色面だけで構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は左に縦書きロゴ帯、上部に横並びナビ、右に固定の資料請求ボタン - PC はコンテンツ幅を約84%にし、色面セクションも左右に余白を取る - PC の見出しとリード・本文は左右2カラムに分ける - 数値実績は PC で2×2グリッド - インタビューは PC で写真を左右に散らし本文を中央に置く - カリキュラムのサムネイルは PC で3列横並び ## 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-b59a43be`（元 LP の URL から採番） - **元 LP**: https://gakuen.toyota-shokki.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。