--- version: alpha name: Airy Sky Gradient Corporate Recruit LP description: 淡い水色を地にした採用LP。シアンのぼかしグラデーションと青みのモノクロ写真を組み合わせる。見出しは細い明朝、英字ラベルとCTAはオレンジで差す。余白を広くとり、知的で静かな成長感を出している。 colors: background: '#D9EAF1' primary: '#30C5D9' text: '#112A3E' text-body: '#47505F' text-muted: '#8FA4AD' cta: '#FB5D1C' on-cta: '#F6FAFB' accent-1: '#BF723E' surface: '#ECF4F6' tint-1: '#C4DCE4' background-alt: '#FFFFFF' accent-2: '#14B6A1' dark-section: '#112A3E' cta-accessible: '#CF3F04' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.04em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Cormorant Garamond fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Montserrat fontSize: 12px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-circle-arrow: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 56px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 72px news-card: textColor: '{colors.text-body}' typography: '{typography.note}' height: 180px member-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 220px job-list-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 48px category-tabs: textColor: '{colors.text-muted}' height: 160px entry-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.display}' height: 240px concept-diagram: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 300px --- # DESIGN.md — 淡い水色グラデの静かで知的な採用 LP（Airy Sky Gradient Corporate Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、上品・高級、清潔・爽やか、シンプル・ミニマル - **キーワード**: 淡い水色の地・シアンのぼかしグラデーション・細い明朝見出し・青みモノクロ写真・オレンジの差し色・丸い矢印ボタン - **地の質感**: 地はフラットな淡い水色。ヒーローと一部のセクションに、粒子ノイズ入りのぼかしグラデーション（シアン・グリーン・オレンジ）を敷く - **形**: 写真とカードは角丸なしの矩形。ボタンは正円とピル型。ヒーローと帯状セクションの境界はゆるい波形 - **温度感**: 寒色寄りで涼しい。オレンジを少しだけ効かせて温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#D9EAF1` | ページ全体の地色（淡い水色） | 40% | 画素の実測 | | `primary` | `#30C5D9` | ブランドを表すシアン。グラデーション帯の主色 | 7% | 画素の主要色に補正 | | `text` | `#112A3E` | 見出しと主要テキストの濃紺 | 3% | 画素の主要色に補正 | | `text-body` | `#47505F` | 本文の灰紺 | 2% | 画素の主要色に補正 | | `text-muted` | `#8FA4AD` | 選択されていないタブ・補足の青灰 | 1% | 画素の実測 | | `cta` | `#FB5D1C` | エントリーのピルボタン | 0% | 画素の実測 | | `on-cta` | `#F6FAFB` | CTA上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#BF723E` | 英字ラベル・番号・アクティブタブのオレンジ | 0% | 画素の実測 | | `surface` | `#ECF4F6` | 職種リストのカード面 | 4% | 画素の実測 | | `tint-1` | `#C4DCE4` | 丸い矢印ボタンの塗り | 1% | 画素の実測 | | `background-alt` | `#FFFFFF` | エントリー枠の白い面 | 3% | 画素の実測 | | `accent-2` | `#14B6A1` | グラデーション内のミントグリーン | 2% | 画素の実測 | | `dark-section` | `#112A3E` | 写真セクションの暗い青灰トーン | 8% | 画素の主要色に補正 | | `cta-accessible` | `#CF3F04` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ全面を淡い水色1色にする。白はエントリー枠など限られた面だけに使う - シアンからグリーンのぼかしグラデーションは、ヒーローと特集帯の2〜3か所だけに使う - オレンジは英字ラベル・番号・CTAだけ。面積は1%未満に抑える - 見出しは濃紺、本文は灰紺。黒い文字は使わない - 写真は彩度を落とした青みモノクロにして、地色となじませる - 丸ボタンは地色より一段濃い水色で塗り、矢印は濃紺にする - `button-entry` は文字 `#F6FAFB` × 背景 `#FB5D1C` のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CF3F04`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローの大きなキャッチ | 明朝 | Shippori Mincho | 400 | 36px | 1.4 | 0.04em | | `headline-lg` | セクション見出し（2行） | 明朝 | Shippori Mincho | 400 | 22px | 1.6 | 0.08em | | `headline-sm` | カード・リストの小見出し | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.04em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 日付・キャプション・フッターリンク | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.04em | | `accent` | 英字ラベル（縦書き・小）と大きな番号 | 欧文セリフ | Cormorant Garamond | 400 | 28px | 1.2 | 0.04em | | `label-button` | ボタンとリンクの文字 | 欧文サンセリフ | Montserrat | 600 | 12px | 1.2 | 0.06em | - 見出しは細い明朝。字間を広めにとり、2行に改行する - 本文はゴシックの細字。行間を1.9前後と広くとる - 英字のセクションラベルは小さなオレンジのセリフ体。見出しの左に縦書きで添える - 番号（01〜05）は大きな細いセリフ体にする。写真に重ねるときは半透明のグレー - ヒーローのキャッチだけを大きくし、ほかの見出しは控えめにそろえる - 太字の強調はほぼ使わない。強調は色と余白で表す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは横スクロールか1列に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの間は広く空け、余白で区切る - 見出しは左揃え。左に縦書きの英字ラベルを置く - フルブリード写真のパートを縦に続けて、物語のように見せる - 見出しの直後に写真、その下に丸ボタンとリンク文字を置く - 職種リストはタブと縦積みカードで組む - PC版では右上のメニューとEntryボタンを固定表示する ## Elevation & Depth - 影はほぼ使わない。フラットな面で構成する - 職種カードは地色との明度差だけで浮かせる - 写真の上の文字は暗めのトーンで読みやすくする（影は付けない） ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。人物は胸から上の縦長、風景は横長のワイド - **セクション境界**: ヒーローとグラデーション帯の上下はゆるい波形。それ以外は余白で区切り、線は引かない - 主なボタンは正円の矢印ボタンにして、右にリンク文字を添える - CTAは小さめのオレンジのピル型 - カードの角はほぼ直角 - ぼかしグラデーションは有機的な曲線の塊として配置する ## Components - **エントリーピルボタン**（`button-entry`）: オレンジのピル型。左にEntry、右に＋か矢印を置く。画面の右下に固定する - **丸い矢印ボタン**（`button-circle-arrow`）: 直径56px前後の淡い水色の正円に小さな三角矢印。右に「〜をみる」のテキストリンクを添える - **縦英字ラベル付き見出し**（`section-heading`）: 左に縦書きの小さなオレンジの英字、右に2行の明朝見出し - **お知らせカード**（`news-card`）: 横長のサムネイルの下に、オレンジの日付と2〜3行の本文。PCは4列 - **社員カード**（`member-card`）: モノクロの人物写真の左上に大きな番号を重ねる。下にオレンジの小ラベルと2行のコピー - **職種リスト行**（`job-list-item`）: 淡い面の横長カード。左にオレンジの番号と職種名、右端に丸い矢印 - **職種カテゴリタブ**（`category-tabs`）: 縦に並ぶ英字のセリフ体テキスト。選択中はオレンジで横に矢印、ほかは青灰 - **エントリーパネル**（`entry-panel`）: グラデーションの地の上に白い大きな枠。中央にセリフ体の大見出し、下に丸ボタン付きリンクを2つ - **事業の円形相関図**（`concept-diagram`）: 半透明の円を5つ環状に重ね、中央に中核事業を置く。細い線で放射状につなぐ ## Do's and Don'ts **Do** - 地色は淡い水色1色で通し、余白を広くとる - 写真は青みのモノクロか低彩度で統一する - オレンジは小さな英字・番号・CTAだけに使う - 見出しは細い明朝で、2行に改行して静かに見せる - リンクは丸い矢印ボタンとテキストのセットにそろえる - ぼかしグラデーションは粒子ノイズを入れて柔らかくする **Don't** - 原色や高彩度の色を広い面に塗らない - 太いゴシックの大見出しにしない - ドロップシャドウや立体的なボタンを使わない - カラー写真をそのまま並べない - 四角いベタ塗りの大きなCTAボタンを置かない - オレンジを見出しや背景の面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢を象徴するキャッチで印象づける）: シアン・グリーン・オレンジのぼかしグラデーションに、白い明朝の大きなキャッチと小さな英文。下端は波形 2. **ステートメント（写真の連続）**（理念を短い文で段階的に伝える）: 青みのフルブリード写真を3枚縦に並べる。左上に白い短文、右下にEntryボタン 3. **採用メッセージ導線**（トップメッセージへ誘導する）: グラデーション文字のキャッチと、丸い矢印ボタン付きのリンク 4. **企業理念**（目指す社会像を示す）: 縦英字ラベル付き見出しと、抽象的な青いリボンのビジュアル 5. **お知らせ**（最新の動きを見せる）: サムネイル付きカードを4列。右上に一覧へのリンク 6. **事業紹介**（事業の全体像を理解してもらう）: 左に円形の相関図、右に見出しと本文と丸ボタン 7. **プロジェクト紹介**（具体的な仕事を見せる）: シアンの波形グラデーション帯に、モノクロ写真と大きなオレンジの番号付き説明 8. **社員の成長ストーリー**（多様なキャリアを示す）: 番号付きのモノクロ人物カードを4列、下に横長の集合写真を1枚 9. **募集職種**（職種を探して詳細へ進んでもらう）: 左に縦タブ、右に淡いカードを縦に積んだ職種リスト 10. **制度・キャリア**（働く環境を伝える）: モノクロ写真カードを3列。英字ラベルと名前と丸ボタン 11. **社員インタビュー導線**（外部のインタビューへ誘導する）: 横長写真の右にサービスロゴと丸ボタン 12. **エントリーCTA**（応募と職種一覧へ導く）: グラデーションの地に白い大枠。セリフ体の見出しと丸ボタンのリンクを2つ 13. **フッター**（サイト全体へのナビゲーション）: グラデーションの地にカテゴリ別の小さなリンク一覧。右下にEntryボタン ## Imagery - 高層ビルを見上げる構図と人物の後ろ姿の写真。寒色寄りで低彩度に仕上げる - 社員のポートレートは白黒。無地の背景で胸から上を撮る - 仕事の場面（ホワイトボード・手元）は白黒で寄りに撮る - ぼかしグラデーションはシアン・ミント・オレンジ。粒子ノイズを入れる - 抽象的な青いリボンや半透明の円で、循環と連携を表す - アイコンは極小の三角矢印やリンクマークなど線の細いものに限る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅およそ80%の中央寄せ。SPは左右16px余白の1カラムにする - お知らせはPCで4列、SPでは横スクロールか1列にする - 社員カードはPCで4列、SPでは2列にする - 制度カードはPCで3列、SPでは1列に縦積みにする - 職種タブはPCで左に縦並び、SPでは上部の横スクロールタブにする - Entryボタンは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-e42dafce`（元 LP の URL から採番） - **元 LP**: https://www.intloop.com/recruit/career/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。