--- version: alpha name: Pop Comic Multicolor Recruiting LP description: 黄・赤・水色・緑・紫の原色を太い黒線でまとめた、コミック調の新卒採用 LP。うねる波形の帯、市松模様、方眼の地、目のついたキャラクターのイラストで、エンタメらしい遊び心と熱量を出している。 colors: primary: '#FFCC00' secondary: '#FF5733' background: '#FFFFFF' text: '#000000' cta: '#010101' on-cta: '#FBFDFA' accent-1: '#5BC3EC' accent-2: '#9C79DF' accent-3: '#5EA07F' dark-section: '#010001' on-dark: '#FBFDFB' line: '#FEFCFE' text-muted: '#BEBEBE' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 1.15 headline-lg: fontFamily: Archivo Black fontSize: 40px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Dela Gothic One fontSize: 17px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 900 lineHeight: 2.0 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Archivo Black fontSize: 12px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 18px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px badge-deadline: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px card-arch: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 300px speech-bubble: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 220px card-info: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 230px heading-outline: textColor: '{colors.background}' typography: '{typography.headline-lg}' height: 50px marquee-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 22px header-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 56px --- # DESIGN.md — 黄×赤×水色のポップコミック新卒採用 LP（Pop Comic Multicolor Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、力強い・インパクト、レトロ、情報量多め・訴求型 - **キーワード**: 原色ポップ・太い黒フチ・市松模様・うねる波帯・キャラクターイラスト・コミック吹き出し - **地の質感**: ベタ塗りのフラットな面に方眼や市松のパターンを重ねる。グラデーションは使わない - **形**: 上が半円のアーチ型カード、ギザギザ円や雲形の吹き出し、角丸の大きいパネル、ピル型の黒いボタン - **温度感**: 暖色寄りの高彩度。黄と赤が主役で、水色・緑・紫を差し色にして賑やかにする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFCC00` | メインの黄（パネル・フッター地） | 20% | 画素の実測 | | `secondary` | `#FF5733` | 朱赤のセクション地 | 15% | 画素の実測 | | `background` | `#FFFFFF` | 白いカード・メッセージ地 | 16% | 画素の主要色に補正 | | `text` | `#000000` | 見出し・本文・輪郭線の黒 | 9% | 画素の実測 | | `cta` | `#010101` | 黒いピル型ボタン | 1% | 画素の実測 | | `on-cta` | `#FBFDFA` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#5BC3EC` | 水色の波帯・吹き出し | 7% | 画素の実測 | | `accent-2` | `#9C79DF` | 紫のリンクセクション地 | 9% | 画素の実測 | | `accent-3` | `#5EA07F` | 緑の波帯・円形パネル | 5% | 画素の主要色に補正 | | `dark-section` | `#010001` | 黒いヘッダー・市松 | 6% | 画素の実測 | | `on-dark` | `#FBFDFB` | ヘッダー上の白文字 | 0% | 画素の実測 | | `line` | `#FEFCFE` | 方眼の薄いグレー線 | 2% | 画素の主要色に補正 | | `text-muted` | `#BEBEBE` | 見出し下の小さなカナ | 0% | 画素の実測 | - セクションごとに地の色を黄・赤・紫と切り替え、境目には水色・緑・白・赤の波帯を重ねる - 面や文字には必ず 3〜4px の黒フチを付けて、色同士をはっきり分ける - ボタンは黒地に白文字のピル型で統一し、多色の中で目立たせる - 白いカードや白い吹き出しの中に本文を置き、読みやすさを確保する - 締切バッジだけは赤地に黒文字の小さなラベルにする - 中間色やグラデーションは使わず、ベタ塗りの原色だけで構成する ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦組み風キャッチ | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 1.15 | 0.0em | | `headline-lg` | 英字セクション見出し（白文字＋黒フチ） | 欧文サンセリフ | Archivo Black | 900 | 40px | 1.1 | 0.02em | | `headline-md` | 和文のセクション見出し・カードのラベル | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.3 | 0.02em | | `headline-sm` | カード見出し・吹き出しの問い | ゴシック | Dela Gothic One | 400 | 17px | 1.4 | 0.02em | | `body-lg` | メッセージ文（中央揃え） | ゴシック | Zen Kaku Gothic New | 900 | 16px | 2.0 | 0.05em | | `body-md` | カード説明文・リード文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.04em | | `note` | フッターリンク・コピーライト | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | | `label-button` | ボタンの英字ラベル | 欧文サンセリフ | Archivo Black | 900 | 12px | 1.0 | 0.08em | - 見出しは極太のディスプレイ書体にし、白文字に黒フチと黒い影を付ける - 英字の大見出しの下には、薄いグレーの小さなカナを添える - 背景には巨大な文字を半透明でループ配置し、装飾として使う - 縦の帯には英字コピーを繰り返し流し、マーキーのように見せる - 本文は中央揃えで、太めのゴシックをゆったりした行間で組む - 見出しの中の強調語は色を変える（水色・黄・緑） - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 2 列のグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 18px（375px 幅換算） - 職種カード・情報カードは SP でも 2 列に並べる - メッセージは方眼地の白パネルに入れ、四辺を黄の太枠で囲む - アンケートは吹き出しを左右交互に重ね、コラージュ風に並べる - ボタンは中央に配置し、幅は画面の約 40% - キャラクターのイラストを枠からはみ出させて、躍動感を出す ## Elevation & Depth - 影はぼかさない。黒のベタ影を右下に 4〜6px ずらす - カードや吹き出しは黒フチ＋ベタ影で浮かせる - ドロップシャドウのような柔らかい影は使わない ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 上が半円のアーチ型に切り抜き、中を市松模様の地にする - **セクション境界**: 多色の太いうねり波帯、市松模様の帯、上だけ角丸のパネル - 吹き出しはギザギザの円形・雲形・角丸の四角を混ぜて使う - 輪郭線は 3〜4px の黒で統一する - セクションの上端は大きな角丸（32px 程度）にする - 情報カードは白地の角丸 16px に、右下へ黒い矢印のピルを置く ## Components - **黒ピルボタン**（`button-primary`）: 黒地に白い英字ラベルと右矢印。中央に置く - **エントリーボタン**（`button-entry`）: 黒地に白フチの大きなピル。上に赤い締切バッジを重ねる - **締切バッジ**（`badge-deadline`）: 赤地に黒文字の小さなラベル。ボタン上端にかぶせる - **アーチ型職種カード**（`card-arch`）: 色違いの太枠に市松地の人物イラスト。下部に黒フチの太い見出しを置く - **アンケート吹き出し**（`speech-bubble`）: 紫・水色・赤・緑の吹き出しに問いを書き、白い小箱に回答を入れる - **情報カード**（`card-info`）: 白地に黒フチ。見出し、アイコンのイラスト、説明文、右下の矢印ピルの順に並べる - **フチ付き英字見出し**（`heading-outline`）: 白または赤の極太英字に黒フチと黒い影。下に小さなカナを添える - **英字ループ帯**（`marquee-band`）: 縦横の細い帯に、英字コピーを黒地や水色地で繰り返し流す - **固定ヘッダー**（`header-bar`）: 黒地。左にロゴ、右にエントリー・マイページ・ハンバーガーメニューを縦線で区切って並べる ## Do's and Don'ts **Do** - 原色はベタ塗りにし、すべての面に黒の太い輪郭線を付ける - セクションの境目は波帯や市松模様で賑やかに区切る - 目と手足の付いた小物キャラクターを各所に散らす - 数字は極太の大きな文字で見せ、横に小さく単位を添える - 黒ピルボタンでページ全体のボタンを統一する **Don't** - グラデーションや写真のリアルな質感を使わない - 細い線や淡いパステル調だけの配色にしない - ぼかした影や半透明のガラス表現を使わない - 本文を色付きの柄の上に直接置かない（白い箱に入れる） - 明朝体のような上品な書体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（エントリー導線を常に見せる）: 黒の帯にロゴ、締切付きのエントリー、マイページ、メニューを並べる 2. **ファーストビュー**（世界観とキャッチを一目で伝える）: 多色の波紋が同心円状に広がる中央に白い雲形を置き、極太のキャッチを入れる。周りを人物とキャラクターで囲み、下端を市松の帯にする 3. **メッセージ**（採用への思いを伝える）: 黄の太枠で囲んだ方眼地の白パネルに、中央揃えの短文を 6 行。左右の縦帯に英字を流す 4. **職種紹介**（職種の幅を見せ、インタビューへ誘導する）: 赤地に、4 色のアーチ型カードを 2×2 で並べ、下に黒ピルボタンを置く 5. **装飾の帯**（セクション間に変化をつける）: 巨大なキャッチ文字を背景に流し、キャラクターを上に乗せる 6. **新入社員アンケート**（社員のリアルな声を数字と言葉で伝える）: 黄の方眼パネルに、色と形の違う吹き出しを重ね、数字・円グラフ・回答の抜粋を見せる 7. **インフォメーション**（会社概要・募集要項などへ誘導する）: 波紋の背景に、白い情報カードを 2×2 で並べ、それぞれにアイコンのイラストを入れる 8. **関連リンク**（外部メディアや過去の特設サイトへ誘導する）: 紫地に、黒フチのバナーを並べる。下に大きな英字を透かして置く 9. **フッター**（サイト内の導線と最終 CTA）: 黄地の角丸パネル。ロゴ、Instagram の赤ピル、2 列のリンク、エントリー・マイページの黒ピル、規約リンクを並べる ## Imagery - 人物は太い黒の主線とフラットなベタ塗りで描く、90 年代コミック調のイラストにする - 人物の背景は、パステルの市松模様をアーチ型の中に敷く - マイク・スピーカー・ゲーム機などの小物に、目と手足を付けたキャラクターにする - アイコンは、ビル・カバン・カレンダーなどを多色のフラットイラストで描く - 星・音符・きらめきの小さな装飾を余白に散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では職種カードを 4 列に並べる - PC ではアンケートの吹き出しを 3 列のコラージュに広げる - PC では情報カードを 4 列に並べる - PC ではフッターのリンクを横並びにし、ボタンを右端に縦に積む - FV は 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-61ac3a5d`（元 LP の URL から採番） - **元 LP**: https://saiyo.sme.co.jp/graduate/26/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。