--- version: alpha name: Mincho Orange Gradient Recruiting LP with Illustrated Portraits description: 白地に黒い帯とオレンジのグラデーションを差し込んだ企業の採用 LP。明朝体の中央揃えの語り文で、同じ読みの言葉を並べて言葉遊びを見せる。劇画風イラストと実写を交互に置き、各コンテンツは「見出し＋サブコピー＋MORE 矢印」の短い入口で次のページへ送る。 colors: primary: '#F48C1C' background: '#FFFFFF' text: '#16181D' dark-section: '#000000' on-dark: '#E8E8E7' cta: '#F56442' on-cta: '#FFF6E8' accent-1: '#EF623F' tint-1: '#FFE4D3' surface: '#FFFFFF' secondary: '#D9573C' line: '#16181D' text-muted: '#D0CCC7' cta-accessible: '#D7320B' typography: display: fontFamily: Yuji Syuku fontSize: 56px fontWeight: 700 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho B1 fontSize: 44px fontWeight: 800 lineHeight: 1.2 headline-md: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 2.4 letterSpacing: 0.08em accent: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' more-link: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 96px kanji-headline: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 70px content-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 56px news-bar: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 56px staff-loupe: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 320px vs-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 800px label-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 40px --- # DESIGN.md — 黒×橙グラデの明朝体採用サイト LP（Mincho Orange Gradient Recruiting LP with Illustrated Portraits） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、和風、親しみ・手作り感、上品・高級 - **キーワード**: 明朝体・オレンジグラデ・黒帯・劇画風イラスト・言葉遊び・余白多め - **地の質感**: 白い地が中心。上部だけ肌色からオレンジへの淡いグラデを敷き、黒いベタ面で締める。筆の掠れや手描き文字を写真の上に重ねる。 - **形**: 角丸は小さめで、写真の角を少し丸める程度。虫眼鏡の円形フレームと、ピル型の日付バッジを使う。 - **温度感**: 暖色寄り。墨の黒とオレンジで熱量を出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F48C1C` | 強調語・見出しの一文字目・矢印丸 | 2% | 画素の実測 | | `background` | `#FFFFFF` | ページの地 | 46% | 画素の実測 | | `text` | `#16181D` | 見出し・本文 | 4% | 画素の主要色に補正 | | `dark-section` | `#000000` | 黒帯・フッター | 10% | 画素の実測 | | `on-dark` | `#E8E8E7` | 黒地上の文字 | 1% | 画素の実測 | | `cta` | `#F56442` | 中途採用ボタンのグラデ（赤橙→橙） | 1% | 画素の実測 | | `on-cta` | `#FFF6E8` | CTA ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#EF623F` | 大見出しの赤寄りの色 | 0% | 画素の実測 | | `tint-1` | `#FFE4D3` | ABOUT セクション上部の肌色グラデ | 4% | 画素の実測 | | `surface` | `#FFFFFF` | 新卒採用の白カード | 1% | 画素の実測 | | `secondary` | `#D9573C` | 英字見出しやラベルの赤橙文字 | 0% | 推定 | | `line` | `#16181D` | MORE の下線 | 0% | 画素の主要色に補正 | | `text-muted` | `#D0CCC7` | 背景に敷く英字の透かし | 0% | 画素の主要色に補正 | | `cta-accessible` | `#D7320B` | AA を満たす補正値（計算） | | 計算 | - 地は白にする。セクションの区切りや人物紹介の受け皿には黒のベタ帯を使う。 - オレンジは見出しの一文字目、本文中のキーワード、MORE の丸だけに使う。 - 大見出しは赤橙からオレンジへのグラデーション文字にする。 - 主 CTA は赤橙→橙の横グラデ。対になる副 CTA は白の面にする。 - 黒地に置く文字は白にし、強調語だけオレンジにする。 - ファーストビュー直下は肌色から白へ溶けるグラデにする。 - `button-cta` は文字 `#FFF6E8` × 背景 `#F56442` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D7320B`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの手書き風キャッチ | 手書き・筆 | Yuji Syuku | 700 | 56px | 1.2 | 0.0em | | `headline-lg` | セクション大見出し（漢字＋かな） | 明朝 | Shippori Mincho B1 | 800 | 44px | 1.2 | 0.0em | | `headline-md` | コンテンツ見出し | 明朝 | Shippori Mincho | 700 | 22px | 1.4 | 0.08em | | `headline-sm` | 見出し下のサブコピー | 明朝 | Shippori Mincho | 700 | 14px | 1.5 | 0.05em | | `body-md` | 中央揃えの語り文 | 明朝 | Noto Serif JP | 500 | 13px | 2.4 | 0.08em | | `accent` | 背景に敷く英字の透かし見出し | 欧文セリフ | Cormorant Garamond | 500 | 40px | 1.0 | 0.02em | | `label-button` | MORE ボタンと英字ラベル | 欧文セリフ | Cormorant Garamond | 600 | 11px | 1.0 | 0.05em | | `note` | ニュースの日付・役職などの注記 | 明朝 | Noto Serif JP | 400 | 10px | 1.6 | 0.05em | - 全体を明朝体で統一し、ゴシック体は使わない。 - 大見出しは漢字を大きく、送りがなを小さくして段差をつける。 - 大見出しの背後に、白またはグレーの大きな英字を透かしで重ねる。 - 本文は短く改行し、中央揃えで行間を広く取る。 - 強調語はかぎ括弧で囲み、オレンジで一回り大きくする。 - 見出しは一文字目だけオレンジにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は画像とテキストを左右交互に並べる 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - コンテンツブロックは「画像→見出し→サブコピー→MORE」の順に組む。 - 画像は片側を画面端まで寄せ、反対側だけ余白を残す。 - 語り文のブロックは中央揃えで、段落ごとに 32px 程度空ける。 - 黒帯は画像の下半分に重ねて敷き、人物を浮かせて見せる。 ## Elevation & Depth - 影はほぼ使わず、平面で構成する。 - ニュースバーだけ白地に軽い影を付けて浮かせる。 - 奥行きは写真と黒帯の重なりで出す。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸 8px の長方形を基本にする。人物紹介だけは虫眼鏡型の円形フレームで切り抜く。 - **セクション境界**: 直線で区切る。黒帯や淡いグラデへ切り替えて境界を示す。 - MORE は「下線＋オレンジの丸に矢印」の形にする。 - ニュースバーは左上と左下を大きく丸める。 - CTA カードは角丸なしの長方形にする。 ## Components - **MORE 矢印リンク**（`more-link`）: 英字の MORE に下線を引き、右端にオレンジの丸と矢印を重ねる。 - **採用エントリーボタン**（`button-cta`）: 幅いっぱいの長方形。上に小さな英字ラベル、下に大きな和文を置く。新卒は白地、中途はグラデ地。 - **漢字＋かなの大見出し**（`kanji-headline`）: 漢字を大きく、かなを小さくしたグラデ文字。背後に英字の透かしを重ねる。 - **コンテンツ見出し**（`content-heading`）: 一文字目がオレンジの明朝見出し。下にサブコピーを置く。 - **ニュースティッカー**（`news-bar`）: 白い横長のバー。オレンジの日付とタイトルを 2 行並べ、右端に上下の矢印を置く。 - **社員紹介カルーセル**（`staff-loupe`）: 虫眼鏡フレームに人物写真を入れ、黒帯の上に並べる。入社年のピル型バッジ、イニシャル、役職を添える。 - **対比バナー**（`vs-banner`）: 明るい写真と暗い写真を上下に分け、大きな縦書き文字と×印で対比させる。 - **黒帯コピー**（`label-band`）: 写真の上に重ねる黒い帯。白い文字で短いコピーを入れる。 ## Do's and Don'ts **Do** - 見出しは明朝体にし、一文字目をオレンジにする。 - 同じ読みの言葉を並べ、かぎ括弧とオレンジで強調する。 - コンテンツの導線はすべて MORE 矢印リンクにそろえる。 - 劇画風イラストと実写を交互に配置する。 - 黒帯を写真の下に重ね、メリハリを付ける。 **Don't** - ゴシック体で本文を組まない。 - オレンジを広い面の塗りに使わない（CTA のグラデは除く）。 - 角丸の大きいカードや強い影を多用しない。 - 本文を左揃えでぎっしり詰めない。 - 青や緑などの寒色アクセントを足さない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（社風を印象づける）: 縦に分割した人物イラストを並べ、筆文字の大きなキャッチと金色の筆の掠れを重ねる。背後に英字を透かす。 2. **お知らせ**（最新情報を伝える）: ファーストビューの下端に、白いニュースバーを重ねて置く。 3. **会社の想い**（企業の歴史と理念を語る）: 肌色のグラデ地に大見出しを置き、中央揃えの長い語り文を続ける。最後に MORE を置く。 4. **数字で知る**（データへ誘導する）: 円形に切り抜いたインフォグラフィックのイラストの下に、見出しと MORE を置く。 5. **企業情報**（会社概要へ誘導する）: 店舗写真とイラストをコラージュし、下に黒帯を敷いて白文字の見出しを載せる。 6. **仕事紹介**（新人とベテランの対比で仕事を伝える）: 大見出しの下に、明暗 2 枚の写真で作った対比バナーを置く。 7. **社員インタビュー**（人物の魅力を伝える）: 虫眼鏡フレームの社員カルーセルを黒帯の上に並べる。 8. **研修・キャリア**（成長環境を伝える）: 漫画風イラストに吹き出しとセリフを入れ、下に見出しと MORE を置く。 9. **福利厚生・カルチャー**（制度を伝える）: 大見出しの後に、縦書きコピー入りのイラストを置く。 10. **フォトギャラリー**（日常の様子を見せる）: 写真 3 枚を横に連結し、上に白文字のコピーを重ねる。 11. **よくある質問**（疑問への入口を作る）: 上下を写真で挟み、大きな引用符付きのキャッチと MORE を置く。 12. **エントリー CTA**（応募へ誘導する）: 暗くした店舗写真の上に大見出しを置く。新卒（白）と中途（グラデ）の大ボタンを並べる。 13. **フッター**（サイトマップと SNS への導線）: 黒地にロゴマークの大きな線画を透かし、右下にページトップを置く。 ## Imagery - 写真をもとにした劇画風の人物イラストを使う。厚塗りで陰影を強くする。 - イラストには手書きの吹き出し文字を添える。 - 実写は白手袋で商品を扱う手元や、笑顔の社員を写す。明るい店内で撮る。 - インフォグラフィックは等角投影図にし、オレンジ・紺・ベージュでまとめる。 - 金色の筆の掠れやカエルのシルエットなど、和のモチーフを小さく散らす。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は画像とテキストを左右交互に配置する 2 カラムにする。 - PC は上部ナビを横並びにし、右上に新卒と中途の 2 つのボタンを置く。 - PC の対比バナーは左右に分割し、中央に縦書き文字を重ねる。 - PC の社員カルーセルは 3 人を横に並べる。 - PC のフッターはサイトマップを 4 列にする。 ## 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-a2b1a2dd`（元 LP の URL から採番） - **元 LP**: https://www.e-daikoku.com/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。