--- version: alpha name: Aqua Geometric Manufacturing Recruit LP description: シアン〜水色のグラデーションに半透明の菱形・三角形を重ねた幾何学背景が特徴の製造業の採用サイト。現場の写真を大きく使い、白地のセクションは写真に三角形の白い切り欠きを重ねて見出しを置く。黄色はキャッチの強調とエントリーボタンにだけ使う。 colors: primary: '#59CBD6' secondary: '#019AC4' background: '#FFFFFF' background-alt: '#FFFFFF' tint-1: '#E6F6FB' tint-2: '#D8FFFA' cta: '#FBEF9C' on-cta: '#1A8FC0' accent-1: '#FFE98A' text: '#353535' text-body: '#535E69' line: '#F0F4F4' on-primary: '#FFFFFF' dark-section: '#2F6FB5' on-cta-accessible: '#15739A' secondary-accessible: '#017899' primary-accessible: '#22828B' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 30px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.65 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 6px lg: 12px 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-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-more: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px heading-bilingual: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px photo-notch: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 330px interview-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 600px number-diamond: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 48px link-card-overlay: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 300px menu-button: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' height: 64px --- # DESIGN.md — 水色の菱形グラデーションの製造業採用 LP（Aqua Geometric Manufacturing Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、クール・先進的 - **キーワード**: シアングラデーション・菱形パターン・現場写真・白い三角の切り欠き・黄色の強調・英字ラベル - **地の質感**: 半透明の菱形を何層も重ねたガラスのような光沢のあるグラデーション。白地のセクションにも薄い水色の三角形を淡く散らす - **形**: 菱形・三角形・ピル型ボタン・丸い矢印アイコン。写真は角丸の小さい長方形 - **温度感**: 涼しげで明るい。誠実で前向きな印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#59CBD6` | ブランドのシアン。グラデーション地と見出しの英字ラベル | 14% | 画素の実測 | | `secondary` | `#019AC4` | 英字ラベルと矢印アイコンの濃い青 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 白いページ地 | 40% | 画素の実測 | | `background-alt` | `#FFFFFF` | インタビュー一覧のごく薄いグレー地 | 7% | 画素の実測 | | `tint-1` | `#E6F6FB` | サブボタンの淡い水色の地 | 1% | 画素の実測 | | `tint-2` | `#D8FFFA` | 白地に重ねる淡いミントの三角形装飾 | 4% | 画素の実測 | | `cta` | `#FBEF9C` | エントリーボタンの淡い黄色 | 1% | 画素の実測 | | `on-cta` | `#1A8FC0` | エントリーボタンの文字色 | 0% | 推定 | | `accent-1` | `#FFE98A` | キャッチの強調語に使う黄色 | 0% | 推定 | | `text` | `#353535` | 見出しの濃いグレー | 1% | 画素の実測 | | `text-body` | `#535E69` | 本文・インタビュー見出しのグレー | 2% | 画素の主要色に補正 | | `line` | `#F0F4F4` | カード内の区切り線 | 0% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | グラデーション地・写真の上の白文字 | 1% | 画素の主要色に補正 | | `dark-section` | `#2F6FB5` | 写真カードに重ねる青のオーバーレイ | 5% | 推定 | | `on-cta-accessible` | `#15739A` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#017899` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#22828B` | AA を満たす補正値（計算） | | 計算 | - ファーストビュー・メッセージ・エントリーはシアンのグラデーションに半透明の菱形を重ねた地にする - コンテンツ紹介とインタビューは白か薄いグレーの地にし、淡いミントの三角形を端に散らす - 黄色はキャッチの強調語と主 CTA にだけ使う - 英字ラベル・矢印アイコン・サブボタンの文字は濃い青で統一する - 写真カードには青い半透明のオーバーレイをかけ、白文字を載せる - 本文はグレーにして、真っ黒の文字は使わない - `button-entry` は文字 `#1A8FC0` × 背景 `#FBEF9C` のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#15739A`、4.54:1）を使う。 - `button-more` は文字 `#019AC4` × 背景 `#E6F6FB` のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#017899`、4.57:1）を使う。 - `number-diamond` は文字 `#FFFFFF` × 背景 `#59CBD6` のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#22828B`、4.53:1）を使う。 - `menu-button` は文字 `#FFFFFF` × 背景 `#59CBD6` のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#22828B`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ（白文字で、強調語を黄色にして大きくする） | ゴシック | Zen Kaku Gothic New | 500 | 30px | 1.5 | 0.04em | | `accent` | 大きな英字のセクション名 | 欧文サンセリフ | Montserrat | 600 | 30px | 1.2 | 0.05em | | `headline-lg` | セクションの和文見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.05em | | `headline-sm` | 見出し下の小さい英字ラベル | 欧文サンセリフ | Montserrat | 700 | 11px | 1.4 | 0.05em | | `headline-md` | インタビューカードの見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.65 | 0.04em | | `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.06em | | `note` | 社員のイニシャル・部署・入社年 | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.03em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.08em | - 見出しは和文の大見出しのすぐ下に、小さい英字の大文字ラベルを置く - メッセージの章だけは英字を大きく出して、和文見出しの代わりにする - 本文は行間 2.0 と広めの字間で、ゆったり読ませる - リード文は 2〜3 行の中央揃えにし、鉤括弧で問いかけを入れる - キャッチは 3 行に分け、強調語だけ黄色で一回り大きくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。最初の写真だけ 2 枚を横に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は画面端から 8px 程度の余白でほぼ全幅に置く - インタビューカードは左右 26px の余白を取って縦に並べる - 写真の下端に白い三角形を食い込ませ、その中に見出しを中央揃えで置く - サブボタンは見出しブロックの中央に置く - 写真カードの右下に丸い矢印ボタンを置く ## Elevation & Depth - 影はほぼ使わず、フラットに作る - 奥行きは半透明の菱形を重ねて表現する - 写真の上にかける青いオーバーレイで、文字を読めるようにする ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 角丸 4〜6px の長方形。人物は胸から上か膝上の縦長 - **セクション境界**: 斜めの境界と、写真に食い込む白い三角形（山形） - 装飾は菱形・三角形に限る - ボタンはピル型にし、右端に円形の矢印アイコンを付ける - 番号バッジは横長の菱形にする - 円や波線は使わない ## Components - **エントリーボタン**（`button-entry`）: 淡い黄色のピル型。青文字で、右端に青い円の白矢印を付ける - **詳しく見るボタン**（`button-more`）: 淡い水色のピル型。濃い青の文字と円形の矢印を付ける - **和英の二段見出し**（`heading-bilingual`）: 濃いグレーの和文見出しの下に、青い小さな英字ラベルを置く - **三角の切り欠き付き写真**（`photo-notch`）: 全幅の写真の下部に白い三角形を重ね、そこに見出しを置く - **社員インタビューカード**（`interview-card`）: 縦長の人物写真、見出し 2 行、区切り線、イニシャルと所属の順に並べる - **菱形の番号バッジ**（`number-diamond`）: 写真の左上にはみ出して置く。水色グラデーションの菱形に白い英数字 - **写真リンクカード**（`link-card-overlay`）: 青いオーバーレイをかけた写真に白い見出し・英字・説明文を載せ、右下に丸い矢印を置く - **ハンバーガーメニュー**（`menu-button`）: 右上に置く。シアンの正方形に白い 3 本線 ## Do's and Don'ts **Do** - 幾何学模様は、半透明の菱形を重ねたシアンのグラデーションで作る - 現場で働く社員の自然な写真を大きく使う - 見出しには必ず英字ラベルを添える - 黄色は CTA と強調語だけに絞る - 白地のセクションにも淡い三角形を置き、統一感を出す **Don't** - 暖色系やビビッドな赤を使わない - ボタンを角張った四角にしない - 濃い影や立体的なボタンにしない - 黒ベタの背景は使わない - 装飾に円や手書きのイラストを混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（仕事の価値を感情に訴えて伝える）: 作業中の社員写真の下半分を、菱形グラデーションで覆う。白い 3 行キャッチの強調語を黄色にし、縦書きの SCROLL を添える 2. **メッセージ**（会社の考え方と求める人物像を伝える）: シアンのグラデーション地に大きな英字見出しを置き、白い本文を 5 段落並べる 3. **写真ギャラリー**（職場の雰囲気を見せる）: 現場と事務の写真 2 枚を横に並べる 4. **会社紹介**（会社の特徴を短時間で伝え、下層ページへ誘導する）: 工場の全景写真に三角の切り欠きを入れ、見出し・リード文・詳しく見るボタンを置く 5. **仕事紹介**（部署と職種を案内する）: 会社紹介と同じ型で、作業する人物の写真を使う 6. **社員インタビュー**（働く人の声で共感を生む）: 左揃えの見出しとリード文のあと、番号付きの人物カードを 5 枚縦に並べる 7. **キャリアプラン・採用情報**（詳しい情報へ誘導する）: 青いオーバーレイをかけた写真リンクカードを 2 枚並べる 8. **エントリー**（応募を促す）: シアンのグラデーション地に白い見出しとメッセージを中央揃えで置き、黄色のピル型ボタンを置く ## Imagery - 工場や事務所の明るく自然な光の中で、作業服の社員を撮る - 人物は笑顔か真剣な表情。背景を少しぼかした胸から上の縦長写真にする - インタビュー写真は露出を明るめにし、白っぽいハイキーな色調にする - 装飾はシアン〜ミントの半透明の菱形・三角形を、重なり合うように配置する - リンクカードの写真には、青系のカラーオーバーレイをかける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューのキャッチを 2 行にし、写真の左下に置く - PC のメッセージは左にテキスト、右に写真を並べる 2 カラム - PC では、会社紹介と仕事紹介の三角の切り欠きを左右交互に配置する - PC のインタビューカードは 3 列＋2 列の中央揃え - PC のキャリアプランと採用情報は横に 2 枚並べる - 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-b6221ad8`（元 LP の URL から採番） - **元 LP**: https://daishinsk.co.jp/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。