--- version: alpha name: Monochrome Photo-Grid Recruit Site description: 白地に黒文字だけで組み、色は写真に任せた新卒採用サイト。細い欧文サンセリフの大見出し、写真の下端に重ねた白いラベル帯、矢印リンクを繰り返して、ギャラリーのように見せる。 colors: background: '#FFFFFF' primary: '#10100F' text-body: '#1F1C1D' text-muted: '#8A8A8A' line: '#33393C' background-alt: '#F5F5F5' surface: '#FFFFFF' dark-section: '#23262D' on-dark: '#FFFFFF' accent-1: '#1E9E6A' accent-2: '#9AFEFD' typography: display: fontFamily: Jost fontSize: 44px fontWeight: 300 lineHeight: 1.05 headline-lg: fontFamily: Inter fontSize: 19px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.01em headline-md: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Inter fontSize: 12px fontWeight: 500 lineHeight: 1.4 label-button: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 12px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' photo-label-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 60px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px entry-link: backgroundColor: '{colors.background}' textColor: '{colors.primary}' height: 60px news-item: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 72px contents-index: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 70px giant-type-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 800px vertical-copy: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 420px gradient-bar: backgroundColor: '{colors.accent-1}' height: 10px --- # DESIGN.md — 白×黒の写真グリッド型新卒採用 LP（Monochrome Photo-Grid Recruit Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: シンプル・ミニマル、クール・先進的、上品・高級 - **キーワード**: 写真主役・モノクロ文字・細字欧文・余白・矢印リンク・グリッド - **地の質感**: フラットな白地。影も質感も使わない。写真のボケや柔らかい光が奥行きを出す。 - **形**: 角丸なしの長方形だけで組む。写真と白いラベル帯を直角で重ねる。 - **温度感**: 温度はニュートラル。写真の自然光と笑顔が温かさを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページの地 | 45% | 画素の実測 | | `primary` | `#10100F` | 見出し・ロゴタイプの黒 | 3% | 画素の実測 | | `text-body` | `#1F1C1D` | 本文・ニュース文 | 2% | 画素の主要色に補正 | | `text-muted` | `#8A8A8A` | 英字ラベル（グレー） | 0% | 推定 | | `line` | `#33393C` | ニュースの区切り線 | 0% | 画素の主要色に補正 | | `background-alt` | `#F5F5F5` | 縦書きコピー用の薄グレー面 | 3% | 画素の実測 | | `surface` | `#FFFFFF` | 写真に重ねる白ラベル帯 | 4% | 画素の実測 | | `dark-section` | `#23262D` | 暗い写真の上に置く巨大タイポ面 | 4% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗い面の上の白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#1E9E6A` | FV下の緑〜水色グラデ帯（始点） | 0% | 推定 | | `accent-2` | `#9AFEFD` | グラデ帯の終点の水色 | 0% | 画素の実測 | - 地は白、文字は黒だけ。ブランド色は面に塗らない。 - 色は写真に任せ、UI に有彩色は使わない。 - 有彩色を使うのは FV 直下の細い緑〜水色のグラデーション帯だけ。 - 英字ラベルはグレー、日本語の見出しは黒の太字にして階層を分ける。 - 縦書きコピーを置くブロックだけ、薄グレーの面を敷く。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のロゴタイプ型大見出し・巨大英字 | 欧文サンセリフ | Jost | 300 | 44px | 1.05 | 0.0em | | `headline-lg` | セクション英字見出し | 欧文サンセリフ | Inter | 600 | 19px | 1.3 | -0.01em | | `headline-md` | 縦書きコピー | ゴシック | Noto Sans JP | 400 | 28px | 1.5 | 0.08em | | `headline-sm` | 目次の日本語見出し | ゴシック | Noto Sans JP | 700 | 12px | 1.5 | 0.02em | | `body-md` | ニュース文・ラベル帯のコピー | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.02em | | `accent` | グレーの英字ラベル・日付 | 欧文サンセリフ | Inter | 500 | 12px | 1.4 | 0.0em | | `label-button` | 写真ラベル帯の英字リンク | 欧文サンセリフ | Inter | 400 | 12px | 1.4 | 0.02em | | `note` | 職種名などの小さな注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.4 | 0.02em | - 英字見出しの下に短い黒の横線を引き、その下に日本語のサブ見出しを置く。 - 大見出しは極細の欧文。単語を途中で切り、ハイフンでつないで画面幅いっぱいに組む。 - 日本語の本文は小さめにして余白を多く取る。 - 縦書きのコピーは 1 か所だけに使い、アクセントにする。 - 英字ラベルはすべて大文字にする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。目次だけ 2 カラム。 - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 90px、基本単位 8px、カード内 12px（375px 幅換算） - 左右に約 20px の余白を取り、写真もその幅に揃える。 - 写真同士は隙間なく縦に積む。 - 写真の下端に白いラベル帯を重ねる。帯は右端を少し短くする。 - セクション見出しは左揃え。サブ見出しの右に長い矢印線を添える。 - ニュースは日付・本文・下線の 3 段で組む。 ## Elevation & Depth - 影は一切使わない。 - 奥行きは写真と白帯の重なりだけで出す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 正方形に近い長方形で、角は丸めずに裁ち落とす - **セクション境界**: 直線の余白で区切る。FV の下だけ細いグラデ帯を入れる - 角丸は禁止。 - 矢印は細い線の →。 - ハンバーガーメニューは 2 本の太めの横線。 ## Components - **写真＋白ラベル帯カード**（`photo-label-card`）: 写真の下端に白帯を重ねる。左に職種、縦線、右に 2 行のコピー、右端に矢印を置く。 - **英字見出し＋短線＋矢印**（`section-heading`）: 太字の英字の下に短い黒線を引き、日本語のサブ見出しと長い矢印線を添える。 - **エントリーリンク帯**（`entry-link`）: 白地の中央に英字テキストだけを置くエントリーへの導線。 - **ニュース行**（`news-item`）: 日付、本文、下線の順に並べる。 - **2 カラム目次**（`contents-index`）: グレーの英字ラベルと矢印の下に、日本語の太字見出しを置く。 - **巨大タイポパネル**（`giant-type-panel`）: 暗い写真の上に、極細の白い欧文を単語の途中で折り返して大きく載せる。 - **縦書きコピー面**（`vertical-copy`）: 薄グレーの正方形に、日本語の縦書きコピーを右寄せで置く。 - **グラデ帯**（`gradient-bar`）: FV 直下に、緑から水色へのグラデーション帯を約 10px で入れる。 ## Do's and Don'ts **Do** - 写真を大きく、隙間なく並べて主役にする。 - 文字は黒とグレーの 2 色に絞る。 - リンクには細い矢印を必ず添える。 - 英字見出しと日本語の小見出しをペアで使う。 - 写真には自然光の笑顔や手元のカットを混ぜる。 **Don't** - ボタンに色面や角丸を使わない。 - 影やグラデーションの装飾を多用しない。 - 派手なアイコンやイラストを使わない。 - 文字を詰めた情報過多の構成にしない。 - 写真に枠線や余白を付けない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの印象づけ）: 人物写真の上に、極細の欧文ロゴタイプを 4 行で重ねる。右上にメニューを置く。 2. **エントリー導線**（応募ページへ誘導）: 写真と写真の間の白帯に、英字リンクを中央揃えで置く。 3. **ニュース**（お知らせの掲載）: 英字見出しの下に、日付と下線付きの行を並べる。 4. **目次**（サイト内の全体像を示す）: 英字ラベルと日本語見出しを 2 カラムで並べる。 5. **会社紹介**（企業理解）: 写真ラベル帯カードを縦に 4 枚積む。 6. **職種紹介**（職種の告知）: 暗い写真の上に巨大な欧文タイポを載せる。 7. **社員インタビュー**（働く人の魅力を伝える）: 人物写真と、職種＋コピーのラベル帯を連続で並べる。途中に縦書きコピー面を挟む。 8. **エントリー／フッター**（応募と回遊）: 大きな英字のエントリーリンクに下線を引く。その下にロゴタイプとサイトマップを置く。 ## Imagery - 自然光で撮った社員の笑顔。浅い被写界深度で背景をぼかす。 - 手元や足元などのクローズアップに、ブレや動きを残す。 - オフィスの緑、桜などの季節感のある風景を混ぜる。 - 色鮮やかな抽象写真をアクセントに入れる。 - 写真の加工は控えめにし、明るくやや低彩度に仕上げる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は、左に約 14% 幅の見出し列、右に 3 列の写真グリッドを置く。 - PC の FV は横長で、左右 2 枚の写真を並べる。 - ニュースと目次は、PC では左見出し・右コンテンツの 2 列にする。 - 巨大タイポは、PC では横 2 列幅に広げる。 - 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-79131f55`（元 LP の URL から採番） - **元 LP**: https://careers-ffis.fujifilm.com/graduated/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。