--- version: alpha name: Pop Collage Zine Recruit LP description: 明るいグレー地に、人物や雑貨の切り抜き写真をコラージュして並べた雑誌風の採用LP。人物の周りには太い蛍光色の縁取りを入れる。セクション見出しは白抜きアウトラインの欧文と縦書き和文の組み合わせ。後半の募集要項とFAQは、角丸の白カードに細い黒線を引いた静かな作りに切り替える。 colors: background: '#FFFFFF' surface: '#FFFFFF' background-alt: '#FAFAFA' primary: '#000000' cta: '#000101' on-cta: '#FFFFFF' text-body: '#333333' line: '#54494D' accent-1: '#E9559A' accent-2: '#F2D634' accent-3: '#A88BD8' tint-1: '#9BD9F4' tint-2: '#4CC45A' dark-section: '#010101' typography: display: fontFamily: Montserrat fontSize: 40px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Montserrat fontSize: 10px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Klee One fontSize: 24px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Montserrat fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px heading-outline-en: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px collage-card: backgroundColor: '{colors.surface}' typography: '{typography.note}' height: 200px label-ticker: backgroundColor: '{colors.surface}' typography: '{typography.note}' height: 20px badge-black: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 22px info-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 500px schedule-pill: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px faq-item: backgroundColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px floating-banner: backgroundColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 80px --- # DESIGN.md — 切り抜きコラージュのポップな新卒採用LP（Pop Collage Zine Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、シンプル・ミニマル - **キーワード**: 切り抜きコラージュ・蛍光色の縁取り・アウトライン欧文・縦書き見出し・雑誌・ZINE風・モノクロ線 - **地の質感**: わずかにノイズのある明るいグレー地。破った紙や方眼紙の切れ端を重ね、手作りのスクラップ感を出す。 - **形**: 人物は不規則な多角形で切り抜き、太い色線で縁取る。色面は丸・半円・星・吹き出し形。カードは大きめの角丸。 - **温度感**: にぎやかで温かい前半と、白黒で冷静な後半の対比 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページ地のライトグレー | 45% | 画素の実測 | | `surface` | `#FFFFFF` | 中央コンテンツ帯とカードの白 | 30% | 画素の実測 | | `background-alt` | `#FAFAFA` | 情報カードの淡いグレー地 | 12% | 画素の実測 | | `primary` | `#000000` | 見出し・ボタン・線のブラック | 3% | 画素の実測 | | `cta` | `#000101` | エントリーボタン地 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文の濃グレー | 4% | 推定 | | `line` | `#54494D` | 枠線・区切り線 | 0% | 画素の主要色に補正 | | `accent-1` | `#E9559A` | 蛍光ピンクの色面・縁取り | 2% | 推定 | | `accent-2` | `#F2D634` | イエローの色面 | 2% | 画素の実測 | | `accent-3` | `#A88BD8` | パープルの縁取り・色面 | 1% | 推定 | | `tint-1` | `#9BD9F4` | ライトブルーの円形パネル | 1% | 画素の実測 | | `tint-2` | `#4CC45A` | グリーンの縁取り | 1% | 推定 | | `dark-section` | `#010101` | フッター直上の黒帯 | 0% | 画素の実測 | - 地はライトグレー、中身は白で、黒の細線で囲む - 強調色はピンク・黄・紫・緑・青。写真の縁取りと色面だけに使う - 文字とボタンは黒と白の2色に限る - 情報セクションには蛍光色を使わず、モノトーンで読ませる - 蛍光色は写真の周りに散らし、1か所に固めない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション英字見出し（白抜きアウトラインとベタの混在） | 欧文サンセリフ | Montserrat | 600 | 40px | 1.0 | 0.02em | | `headline-lg` | 縦書きの和文見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.2 | 0.05em | | `headline-md` | 手書き線を添えた問いかけ見出し・リード | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.08em | | `headline-sm` | カード見出し・FAQの質問 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.08em | | `note` | 注釈・ローマ字の氏名 | 欧文サンセリフ | Montserrat | 500 | 10px | 1.5 | 0.05em | | `accent` | 写真上に重ねるキャッチ（白縁付き）・手書き英字 | 手書き・筆 | Klee One | 600 | 24px | 1.4 | 0.1em | | `label-button` | ボタン・ラベル | 欧文サンセリフ | Montserrat | 600 | 14px | 1.0 | 0.1em | - 英字見出しは2行に分け、1行を白抜きアウトライン、もう1行をベタにする - 英字の一部の文字にウムラウト風の点の飾りを付ける - 和文見出しは縦書きにし、横にジグザグの細線を添える - 横書き見出しの下には手書き風の曲線を引く - 本文は小さめにし、行間を広く取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード群はジグザグに互い違いで配置する - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算） - 中央の白帯を左右の黒い細線で囲み、ページ全体を貫く - 見出しは左右交互に配置する - 写真カードは上下左右にずらして散らし、リズムを作る - 後半の情報部は角丸カードを縦に積む - 上部に英字のティッカー帯を1本入れる ## Elevation & Depth - 影はほぼ使わず、線と色面の重なりで奥行きを出す - 切り抜き写真に白フチを付けて浮かせる - カードは影なしで、1pxの黒枠のみ ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物は不規則な多角形の切り抜きに太い色線の縁取り。メンバー写真は円形と矩形の組み合わせ - **セクション境界**: 黒い細線の水平罫で区切る - 写真カードの下に部署名が流れるラベル帯を付け、黒い小丸のつまみを置く - 装飾は星・三角・円・吹き出しを散らす - FAQの項目は白い角丸ボックスで、右端に黒丸の＋を置く ## Components - **エントリーボタン**（`button-entry`）: 黒地に白い英字を載せた横長ピル型 - **アウトライン英字見出し**（`heading-outline-en`）: 白抜きアウトラインとベタの2段の英字に、縦書き和文を添える - **コラージュ人物カード**（`collage-card`）: 色線で縁取った人物の切り抜きに、雑貨の写真と色面を重ねる。下に部署名のラベル帯 - **流れるラベル帯**（`label-ticker`）: 白地を黒線で挟み、同じ文言を繰り返し並べる - **黒ラベル**（`badge-black`）: 小さな黒地に白い英字でセクション名を示す。白枠の和文見出しの上に重ねる - **情報カード**（`info-card`）: 淡いグレー地に黒枠の角丸カード。見出しの下に罫線を引き、●の小見出しと本文を並べる - **日程ピル**（`schedule-pill`）: 黒いピルに日付を入れ、縦線でつないだタイムラインにする - **FAQアコーディオン**（`faq-item`）: 白い角丸ボックスに質問文を置き、右端に黒丸の＋を付ける - **追従バナー**（`floating-banner`）: 右下に固定する吹き出し型の小バナー。閉じるボタン付き ## Do's and Don'ts **Do** - 人物写真は切り抜いて色線で縁取り、雑貨と重ねる - 英字見出しはアウトラインとベタを混ぜる - 情報部は白黒に絞り、余白を広く取る - 要素を少し傾けたり重ねたりして、手作り感を出す - ボタンとラベルは黒で統一する **Don't** - グラデーションやドロップシャドウを多用しない - 蛍光色を文字色やボタン色に使わない - 写真を整然としたグリッドに並べない - 情報カードに装飾を入れすぎない - 明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（社風の楽しさを一瞬で伝える）: 社員と商品の切り抜きを全面にコラージュし、白縁付きのキャッチを2行で斜めに重ねる 2. **ティッカー帯**（採用年度を印象づける）: 英字を繰り返し流す細い帯 3. **会社紹介**（企業理念を説明する）: 縦の英字見出しに問いかけ見出しと本文を添え、右と下に写真コラージュを置く 4. **仕事紹介**（職種の幅を見せる）: 職種ごとに人物コラージュカードをジグザグに配置する 5. **プロジェクト紹介**（具体的な取り組みを紹介する）: 左右交互に写真カードと人物の切り抜きを並べる 6. **社員紹介**（人柄を伝える）: 円形の人物カードに氏名・ローマ字・所属を添え、風船や星の色面で飾る 7. **代表メッセージ**（トップの想いを伝える）: 大きな写真を雑貨と色面で囲み、縦の英字見出しを添える 8. **メッセージ・CTA**（応募の後押しをする）: アウトラインの大きな数字、中央寄せの短文、手の写真で挟んだ青い円、黒いピル型ボタン 9. **採用情報**（制度と募集要項を示す）: 黒ラベル付きの見出しの下に、角丸の情報カードを縦に積む。日程はタイムラインで見せる 10. **よくある質問**（応募前の不安を解消する）: カードの中にアコーディオンを8項目並べる 11. **フッター**（サイト内を回遊させる）: パンくず、リンク一覧、ロゴ、コピーライト ## Imagery - 社員は自然な笑顔で、商品や小物を持った全身〜半身を撮り、背景を抜く - 雑貨はぬいぐるみ・服・文具などを俯瞰で撮って切り抜く - 切り抜きには蛍光ピンク・緑・紫・青で太い縁取りを付ける - 破れた紙、方眼紙、星・三角・円・吹き出しの色面を散らす - 黒の手描き線（下線・ジグザグ・矢印）を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に白帯を置き、左右にグレー地を残す。SPでは白帯を全幅にする - PCのジグザグの3列配置は、SPでは1列で互い違いに寄せる - 縦書き見出しはSPでも維持し、文字は小さくする - 情報カードはSPでほぼ全幅、余白は20px - 追従バナーはSPでは小さくし、右下に置く ## 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-19db6a48`（元 LP の URL から採番） - **元 LP**: https://www.felissimo.co.jp/company/recruit2025/recruit2025_cy.html - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。