--- version: alpha name: Pastel Section Cards Illustrated Recruiting LP description: 淡いグレーの地に、角丸の大きなセクションカードを積み重ねる構成。カードごとに水色・薄緑・クリームとパステル色を変える。鮮やかな青を主色にして、太い青枠のリンクカード、点線の区切り、線画イラストで親しみやすさと誠実さを両立させた採用サイト型。 colors: primary: '#285AE1' on-primary: '#FFFFFF' background: '#F1F3F9' surface: '#FFFFFF' tint-1: '#D6ECF7' tint-2: '#DCF3D6' background-alt: '#FDF5D0' cta: '#E6002E' on-cta: '#FFFFFF' text: '#1A1A2E' accent-1: '#1E2A5A' accent-2: '#7E9CE8' accent-3: '#F6C5DB' marker: '#FEFB6E' typography: display: fontFamily: Lexend fontSize: 56px fontWeight: 500 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 2.1 letterSpacing: 0.02em note: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 1.5 accent: fontFamily: Lexend fontSize: 10px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 rounded: sm: 8px md: 14px lg: 22px full: 999px spacing: unit: 8px card: 16px section: 10px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' card-link-illust: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 190px button-arrow: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 30px section-heading-numbered: textColor: '{colors.primary}' typography: '{typography.display}' height: 180px list-link: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 60px badge-go: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 90px date-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 70px menu-button: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.md}' height: 50px --- # DESIGN.md — 青線×パステル面のイラスト新卒採用 LP（Pastel Section Cards Illustrated Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、やさしい・柔らかい、ポップ・元気、清潔・爽やか - **キーワード**: パステル面の切り替え・太い青の角丸枠・点線区切り・線画イラスト・大きな欧文見出し・丸い矢印ボタン - **地の質感**: フラットで影がない。ベタ塗りのパステル面と白い面だけで作る - **形**: 角丸 16〜24px の大きなカード、楕円の矢印ボタン、ギザギザ円の番号バッジ - **温度感**: 明るく爽やか。青の冷たさをパステルの暖色で和らげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#285AE1` | 主色。見出し・枠線・矢印ボタン・導入セクションの面 | 13% | 画素の実測 | | `on-primary` | `#FFFFFF` | 青い面の上の白文字 | 2% | 画素の主要色に補正 | | `background` | `#F1F3F9` | ページ全体の淡いグレーの地 | 13% | 画素の実測 | | `surface` | `#FFFFFF` | 白いカード面・ラベルの地 | 15% | 画素の実測 | | `tint-1` | `#D6ECF7` | コンテンツ 01 セクションの水色の面 | 11% | 画素の実測 | | `tint-2` | `#DCF3D6` | コンテンツ 02 セクションの薄緑の面 | 10% | 画素の実測 | | `background-alt` | `#FDF5D0` | コンテンツ 03 セクションのクリーム色の面 | 10% | 画素の実測 | | `cta` | `#E6002E` | エントリーボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | エントリーボタンの白文字 | 0% | 画素の主要色に補正 | | `text` | `#1A1A2E` | 本文の濃紺に近い黒 | 1% | 推定 | | `accent-1` | `#1E2A5A` | イラストの紺（スーツ・髪） | 3% | 画素の実測 | | `accent-2` | `#7E9CE8` | イラスト背景の淡い青紫の円 | 4% | 推定 | | `accent-3` | `#F6C5DB` | イラスト背景のピンクの面 | 3% | 画素の実測 | | `marker` | `#FEFB6E` | イラストの階段などに使う黄色 | 2% | 画素の実測 | - 地は淡いグレーにし、その上に大きな角丸セクションを置く。 - セクションの面は白・青・水色・薄緑・クリームの順に変えて、内容の区切りを見せる。 - 見出し・枠線・矢印ボタンは主色の青 1 色でそろえる。 - 赤はエントリーボタンにだけ使う。 - イラストの背景はピンク・青紫・黄の柔らかい形で囲む。 - 本文は黒、ラベルとリンク名は青にする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大きな英字見出し | 欧文サンセリフ | Lexend | 500 | 56px | 1.1 | 0.0em | | `headline-lg` | ファーストビューのサイト名 | ゴシック | Zen Kaku Gothic New | 500 | 32px | 1.4 | 0.02em | | `headline-md` | 英字見出しの下に添える和文の見出し、青い面の上の見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.02em | | `headline-sm` | リンクカードのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.4 | 0.0em | | `body-md` | リード文と本文 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 2.1 | 0.02em | | `note` | カードの小見出し・コピーライト | ゴシック | Zen Kaku Gothic New | 500 | 12px | 1.5 | 0.0em | | `accent` | 番号バッジの上の弧状の英字ラベル | 欧文サンセリフ | Lexend | 500 | 10px | 1.0 | 0.1em | | `label-button` | リスト形式のリンク名・エントリーボタン | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.0em | - セクションの見出しは、大きな英字 1 語の下に和文の小見出しを添える 2 段構成にする。 - 英字は丸みのある幾何学的なサンセリフ体を使う。 - 本文は中央揃えで短く改行し、行間を 2 前後と広くとる。 - リンクカードのタイトルは、小見出しと大見出しの 2 行にする。 - 見出しの文字色は青にする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦に積む - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 10px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは左右 3% ほどの余白をとった角丸ブロックにし、ブロック同士は 8〜10px 空ける。 - セクションの内側は上下 60〜80px と余白を広くとる。 - 関連するリンクカードは点線でつなげ、ひとまとまりのリストに見せる。 - カード名の白ラベルはカードの左下に置き、イラストに少し重ねる。 - 矢印ボタンはカードの右側中央に置く。 ## Elevation & Depth - 影は使わない。 - 奥行きは、太い線と面の色の差だけで表す。 ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 22px。ボタンはピル型。 - **写真の切り抜き**: 写真は太い青枠で囲んだ角丸に収め、左上の角だけロゴ用に切り欠く。イラストは枠からはみ出させてよい - **セクション境界**: 角丸ブロックの間に地のグレーをすき間として見せる。カード同士の区切りは青の点線 - リンクカードは青い 3px 枠の角丸 14px にする。 - 矢印ボタンは青で塗った横長の楕円にする。 - 番号はギザギザ円の線で囲む。 - ラベルは白い角丸 8px の面にする。 ## Components - **イラスト付きリンクカード**（`card-link-illust`）: 青枠の角丸カード。線画イラストを全面に置き、左下に白ラベルで 2 行のタイトル、右側に矢印ボタンを置く。 - **楕円の矢印ボタン**（`button-arrow`）: 青で塗った横長の楕円に白い矢印を描く。外部リンクの場合は斜め矢印にする。 - **番号付きセクション見出し**（`section-heading-numbered`）: 弧状の英字ラベルとギザギザ円の番号を置き、その下に大きな英字と和文の小見出しを続ける。 - **点線区切りのリンクリスト**（`list-link`）: 白い青枠ボックスの中に、項目名と楕円の矢印ボタンを横に並べ、項目の間を点線で区切る。 - **白い楕円のバッジ**（`badge-go`）: パステル面の行に置く短い英字の白バッジ。 - **エントリーボタン**（`button-entry`）: リンクリストの最下段に置く赤い全幅の帯。左に白文字、右に手のアイコンを置く。 - **日付バッジ**（`date-badge`）: ファーストビューに置く青い円形バッジに日付を入れ、横にメッセージ帯を並べる。 - **ハンバーガーボタン**（`menu-button`）: 右上に固定する青い角丸の正方形に、白い 2 本線を描く。 ## Do's and Don'ts **Do** - セクションごとにパステルの面の色を変え、角丸ブロックとして独立させる。 - 線と矢印は青 1 色に統一する。 - 人物は線画イラストで描き、表情を明るくする。 - 関連するカードは点線でつないで 1 組にまとめる。 - 英字の大見出しと和文の小見出しをセットで使う。 **Don't** - ドロップシャドウやグラデーションのボタンを使わない。 - 赤をエントリー以外に使わない。 - 濃い面を何度も使わない（濃い面は青の導入部 1 か所だけ）。 - 明朝体や細すぎる書体を使わない。 - カードを四角い角のままにしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（職場の雰囲気と日付入りのメッセージで第一印象をつくる）: 青枠の角丸に社員の集合写真を収め、英字のサイト名を流れる帯として重ねる。左下に日付バッジを置く。 2. **キービジュアル**（スローガンとサイト名を伝える）: 白い角丸ブロックに青のコピーを置き、前を向く人物や階段を上る人物のイラストを散らす。 3. **導入メッセージ**（サイトの目的と、読者が抱く疑問を提示する）: 青のベタ面に白文字で見出しと本文を置き、最下部に基礎情報へのリンクカードを入れる。 4. **コンテンツ 01**（グループのつながりを伝える記事へ誘導する）: 水色の面に番号付き見出しとリードを置き、イラスト付きリンクカード 4 枚を点線でつないで並べる。 5. **コンテンツ 02**（社風や文化を伝える）: 薄緑の面に番号付き見出しを置き、リンクカードを 1 枚入れる。 6. **コンテンツ 03 採用情報**（募集要項・選考・FAQ へ誘導する）: クリームの面に、点線区切りの白いリンクリストを置く。 7. **各社サイトへの誘導・CTA**（各社の採用サイトとエントリーへ誘導する）: 青枠ボックスの行をパステル色で塗り分け、それぞれに白いバッジを付ける。最下段に赤いエントリー帯を置く。 8. **フッター**（コピーライトを表示する）: 白い角丸ブロックに小さな文字で入れる。 ## Imagery - 人物はスーツやオフィスカジュアル姿の線画イラストにする。黒い主線に紺・水色・ベージュでフラットに着色する。 - 人物の背後には、ピンク・青紫・黄・水色の不定形な丸い面を敷く。 - 階段・電球・トロフィーなどのモチーフで、成長や挑戦を表す。 - 写真は明るいオフィスで撮った自然な集合写真を 1 枚だけ使い、青枠で囲む。 - イラストはカード枠から少しはみ出させて動きを出す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、以下は推奨。 - PC では最大幅 1100px ほどで中央に寄せ、角丸ブロックの構成はそのまま保つ。 - リンクカードは 2〜3 カラムのグリッドにする。 - 英字の大見出しは 96px 前後に拡大する。 - ファーストビューは写真を横長にし、メニューは上部に横並びで出す。 ## 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-9fac5159`（元 LP の URL から採番） - **元 LP**: https://www.mizuho-fg.co.jp/saiyou/group/index.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。