--- version: alpha name: Retro Pop Grid Recruitment Drama LP description: 方眼紙の白地に、紫・黄・ミントのレトロポップな幾何学タイルとウィンドウ風の写真枠を重ねた採用ブランディング LP。中央に細い 1 カラムを置き、宇宙や惑星のオブジェクトを浮かべている。前半はドラマ仕立てで遊び、後半は企業の濃紺で採用情報へ誠実に着地させる。 colors: primary: '#00549A' background: '#FDFEFE' background-alt: '#ECF5FC' secondary: '#A64BE8' accent-1: '#F2F55A' accent-2: '#4FD8C8' accent-3: '#D44BE0' text: '#222222' text-body: '#08589C' line: '#F1F5F9' cta: '#025494' on-cta: '#FFFFFF' on-primary: '#FFFFFF' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Montserrat fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.04em accent: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em rounded: sm: 0px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' window-frame: backgroundColor: '{colors.background}' textColor: '{colors.text}' height: 200px section-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 32px label-inverse: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 24px char-tiles: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.accent}' height: 20px drama-carousel: backgroundColor: '{colors.background}' textColor: '{colors.text}' height: 240px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 100px link-card: textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 56px footer-navy: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 150px --- # DESIGN.md — 方眼紙×紫黄ポップの採用ドラマ LP（Retro Pop Grid Recruitment Drama LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、レトロ、クール・先進的、信頼・誠実 - **キーワード**: 方眼紙・レトロ OS ウィンドウ・幾何学タイル・惑星オブジェクト・ドラマ仕立て・濃紺の企業色 - **地の質感**: 白地に薄いグレーの方眼グリッド。写真には黒い細線の枠と、ずらした色ベタの影を付ける。 - **形**: 四角を基本に、円・四分円・三角の幾何学パネルを組む。ウィンドウ上部に3つのドットを付ける。 - **温度感**: 前半はビビッドで賑やか、後半は淡いブルーグレーで落ち着いたクールな印象。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00549A` | 企業の濃紺（ヘッダー・フッター・ラベル） | 4% | 画素の実測 | | `background` | `#FDFEFE` | ページの地 | 60% | 画素の実測 | | `background-alt` | `#ECF5FC` | 見出し帯・カードの淡いブルーグレー | 6% | 画素の実測 | | `secondary` | `#A64BE8` | ポップな紫（タイル・写真の影） | 4% | 推定 | | `accent-1` | `#F2F55A` | レモンイエローのタイル・影 | 3% | 推定 | | `accent-2` | `#4FD8C8` | ミント／ターコイズのタイル・見出し文字 | 3% | 推定 | | `accent-3` | `#D44BE0` | マゼンタの手書き風見出し | 1% | 推定 | | `text` | `#222222` | 本文の濃い文字 | 2% | 推定 | | `text-body` | `#08589C` | 後半の紺系本文 | 1% | 画素の主要色に補正 | | `line` | `#F1F5F9` | 方眼グリッド・枠線 | 3% | 画素の主要色に補正 | | `cta` | `#025494` | 外部リンクの丸アイコン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | アイコン上の白 | 0% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 濃紺上の白文字 | 0% | 画素の主要色に補正 | - 地は白と方眼グリッドにする。セクション見出しの帯だけ淡いブルーグレーを敷く。 - 紫・黄・ミントは装飾タイルと写真のずらし影に限って使う。本文の色には使わない。 - 企業の濃紺はヘッダー、フッター、見出しラベル、リンクアイコンに集中させる。 - 前半のドラマパートはビビッド、後半の採用パートは濃紺と淡色にして、トーンを切り替える。 - 手書き風の大見出しはマゼンタかミントで書き、白フチを付ける。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風のタイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.0em | | `headline-lg` | 斜体の手書き風キャッチ見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 26px | 1.2 | 0.02em | | `headline-md` | 英字のセクション見出し | 欧文サンセリフ | Montserrat | 700 | 15px | 1.4 | 0.08em | | `headline-sm` | 紺ベタ反転のラベル見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.6 | 0.04em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.08em | | `note` | 注釈・フッター | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.04em | | `accent` | 1文字ずつ色マスに入れたラベル | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.2 | 0.1em | | `label-button` | リンクカードの文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.5 | 0.04em | - 英字見出しは大文字にし、字間を広げる。左右に小さなアイコンを添える。 - 日本語本文は字間を広めにとり、短い行で改行を多くする。後半は中央揃えにする。 - キャッチ見出しは斜体のディスプレイ書体で書き、白フチと影を付ける。 - 「あらすじ」などの短いラベルは、1文字ずつ色違いの四角マスに入れる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC も中央の細い 1 カラム（約 340px 幅）にし、左右は装飾背景にする。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - コンテンツ列の左右に細い縦の罫線を引き、方眼地の列として見せる。 - セクションの頭に、全幅で淡色の英字見出し帯を置く。 - 写真は列からはみ出させて斜めに重ね、リズムを作る。 - 惑星などのオブジェクトは列の端にまたがるように浮かべる。 ## Elevation & Depth - 影はぼかさない。紫や黄のベタを右下へ 8〜12px ずらして敷く。 - ウィンドウ枠は 1px の黒線のみにする。 - 惑星オブジェクトだけは立体的なリアル表現でよい。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角に切り抜き、上部に 3 ドット付きのタイトルバーを付けたウィンドウ枠に入れる。動画は縦長 9:16 にする。 - **セクション境界**: 直線の罫線と、淡色の見出し帯で区切る。 - カードの角は直角を基本にする。角の一部を折り返しや斜めのカットにしてもよい。 - 背景には円・四分円・三角を組み合わせた幾何学タイルを使う。 - 外部リンクカードだけは大きめの角丸にする。 ## Components - **ウィンドウ風写真枠**（`window-frame`）: 黒い細線の枠の上部に、3 ドット付きのタイトルバーを付ける。写真を入れ、色ベタのずらし影を付ける。 - **英字見出し帯**（`section-band`）: 全幅の淡色の帯の中央に、大文字の英字見出しと左右の小アイコンを置く。 - **紺ベタ反転ラベル**（`label-inverse`）: 見出しの文字を行ごとに紺ベタで敷き、白抜きにする。 - **色マス文字ラベル**（`char-tiles`）: 1 文字ずつ黄・ミント・紫のマスに入れ、階段状に並べる。 - **縦長動画カルーセル**（`drama-carousel`）: 9:16 のウィンドウ枠を 3 枚並べ、下にドットのページネーションを付ける。 - **注意書きボックス**（`notice-box`）: 細い黒枠の中に注釈を書き、右上に黄色い「!」アイコンを付ける。 - **外部リンクカード**（`link-card`）: グラデーション地の上に白い角丸カードを置き、太字ラベルと紺の丸い外部リンクアイコンを入れる。 - **濃紺フッター**（`footer-navy`）: 濃紺のベタに白いロゴとポリシー類のリンクを中央揃えで置く。 ## Do's and Don'ts **Do** - 方眼紙の地とウィンドウ枠でレトロ OS 風の世界観を統一する。 - 写真には色ベタのずらし影を付けて、ポップさを出す。 - ポップな色は装飾に使い、本文は濃色で読みやすく保つ。 - 後半の採用情報は濃紺と淡色に切り替えて信頼感を出す。 - 惑星などの立体オブジェクトを列の端に散らし、浮遊感を出す。 **Don't** - ぼかしの大きいドロップシャドウを使わない。 - ボタンをピル型や派手なグラデーションにしない。 - ポップな色を本文や長い文章の地色に使わない。 - コンテンツ列を広げすぎない。中央の細い列の構成を守る。 - 採用パートにまでポップな装飾を詰め込まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（運営企業の明示と告知）: 白地の左にロゴを置き、中央の濃紺帯に告知を流す。右にメニューアイコンを置く。 2. **ファーストビュー**（作品の世界観を一目で伝える）: 流れる文字のテロップと幾何学タイルを背景にする。ロゴ風タイトルを置き、ウィンドウ枠の写真を複数重ねる。 3. **ショートドラマ**（動画コンテンツへ誘導する）: 英字見出し帯と話数ラベルの下に、縦長動画のカルーセルと注意書きボックスを置く。 4. **イントロダクション**（あらすじと舞台設定を伝える）: 角を折ったカードにラベルと人物の切り抜きを入れ、本文を添える。周りに惑星を浮かべる。 5. **キャッチ＋場面写真**（ワクワク感を高める）: 斜体の手書き風見出しと、ずらし影付きの写真を左右交互に配置する。 6. **登場人物**（キャラクターを紹介する）: サムネイルを横に並べて切り替え、色付きの名前見出し・人物写真・説明文を見せる。 7. **スペシャルコンテンツ**（社員ドキュメンタリーへ誘導する）: 紺ベタのラベル、中央揃えの本文、ウィンドウ枠の縦長動画を淡色トーンで並べる。 8. **採用メッセージ**（応募を呼びかける）: 淡色のカードに紺ベタ反転の見出し、仕事風景の写真、短い本文を入れる。 9. **採用リンク・フッター**（採用サイトへ送客する）: グラデーション地に白い角丸のリンクカードを置き、その下に濃紺のフッターを置く。 ## Imagery - カラフルな衣装の人物を、ネオンやビビッドなカフェ空間で撮る。 - 1990〜2000年代風のポップでレトロなスタイリングにし、表情を大きく見せる。 - 人物を切り抜いて、ポーズの写真を重ねる。 - 仕事のシーンは寒色系で落ち着いたドキュメンタリートーンにする。 - 装飾には、立体的な惑星、星型のオブジェ、飛行機や宇宙のアイコンを使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 340px の列を固定し、左右を幾何学タイルとテロップの装飾背景で埋める。 - SP では列を画面の 88〜100% に広げ、装飾タイルはファーストビューだけに残す。 - 動画カルーセルは SP では 1 枚表示のスワイプにする。 - 惑星オブジェクトは 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-2d6d3243`（元 LP の URL から採番） - **元 LP**: https://www.ihi.co.jp/recruit/career/aerospace/special-contents/curious/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（4/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。