--- version: alpha name: Bright Yellow Anniversary Corporate SaaS LP description: 鮮やかなレモンイエローを主役に、白と淡いクリーム地を交互に敷いた周年記念の特設 LP。極太ゴシックの大見出しの一部だけを黄色にして目を引く。黄色い太枠の円形ビジュアルと大きな透かし番号でコンテンツを順番に並べる。明るく前向きで、BtoB らしい信頼感もある。 colors: primary: '#FFE606' background: '#FFFFFF' background-alt: '#FFF9D5' tint-1: '#FFFDE8' tint-2: '#FFFFFE' cta: '#FDE504' on-cta: '#3A3A2A' text: '#121210' text-body: '#333333' accent-1: '#167DE2' accent-2: '#E0C75E' dark-section: '#131313' accent-1-accessible: '#1577D6' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Archivo fontSize: 26px fontWeight: 700 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Archivo Black fontSize: 72px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: Archivo fontSize: 10px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.03em rounded: sm: 8px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px badge-pill: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 26px circle-visual: backgroundColor: '{colors.primary}' rounded: '{rounded.full}' height: 145px watermark-number: textColor: '{colors.tint-2}' typography: '{typography.accent}' height: 80px message-panel: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 740px link-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.background}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 130px footer-yellow: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 500px pagetop: backgroundColor: '{colors.dark-section}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 鮮黄×白の周年記念 HR SaaS LP（Bright Yellow Anniversary Corporate SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、力強い・インパクト、シンプル・ミニマル、信頼・誠実 - **キーワード**: 鮮黄・周年・極太見出し・円形ビジュアル・透かし番号・光の放射 - **地の質感**: フラットな単色面が中心。FV だけ金色の光が放射する写真で華やかにする - **形**: 大きな角丸のパネル、黄色い太枠の正円、ピル型ボタン - **温度感**: 暖色寄りで明るい。文字は黒〜墨色で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFE606` | ブランドの鮮黄。メッセージパネル・フッター・円の枠に使う | 26% | 画素の実測 | | `background` | `#FFFFFF` | 白の地 | 26% | 画素の実測 | | `background-alt` | `#FFF9D5` | 奇数番コンテンツの淡いクリーム地 | 20% | 画素の実測 | | `tint-1` | `#FFFDE8` | バナー帯のごく淡いクリーム地 | 5% | 画素の実測 | | `tint-2` | `#FFFFFE` | 透かし番号の色。地色より少し明るい／淡い黄 | 2% | 画素の実測 | | `cta` | `#FDE504` | READ MORE ボタンの黄 | 1% | 画素の実測 | | `on-cta` | `#3A3A2A` | ボタン上の文字色 | 0% | 推定 | | `text` | `#121210` | 見出しと本文の黒 | 3% | 画素の実測 | | `text-body` | `#333333` | 説明文の墨色 | 2% | 推定 | | `accent-1` | `#167DE2` | 関連サービスバナーの青 | 2% | 画素の実測 | | `accent-2` | `#E0C75E` | FV の光ビジュアルの金 | 6% | 画素の主要色に補正 | | `dark-section` | `#131313` | ページトップへ戻るボタンの黒 | 0% | 画素の実測 | | `accent-1-accessible` | `#1577D6` | AA を満たす補正値（計算） | | 計算 | - 地は白とクリームを交互に置き、セクションの区切りにする - 鮮黄はメッセージパネル・フッター・円の枠・ボタンだけに使う - 大見出しはキーワードだけを黄色にし、残りは黒にする - 黄の面に置く文字は必ず黒。白文字は使わない - 青は関連サービスへのバナーだけに限定する - 透かし番号は地色よりわずかに明るい色で控えめにする - `link-banner` は文字 `#FFFFFF` × 背景 `#167DE2` のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1577D6`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー。キーワードだけ拡大して黄色にする | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.0em | | `headline-lg` | 英字のセクション見出し（2 行目は細字にする） | 欧文サンセリフ | Archivo | 700 | 26px | 1.1 | 0.0em | | `headline-md` | メッセージパネルの見出し（引用符付き） | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | 各コンテンツの日本語小見出し | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.05em | | `body-md` | 中央揃えの本文。メッセージ部は太字にする | ゴシック | Noto Sans JP | 500 | 11px | 1.9 | 0.03em | | `accent` | 番号の透かしと横に流れる英字コピー | 欧文サンセリフ | Archivo Black | 900 | 72px | 1.0 | -0.02em | | `label-button` | READ MORE ボタン | 欧文サンセリフ | Archivo | 700 | 10px | 1.0 | 0.08em | | `note` | フッターのリンク | ゴシック | Noto Sans JP | 700 | 10px | 2.0 | 0.03em | - 見出しは極太にし、字間を詰めて塊に見せる - FV コピーは重要語だけを 1.5 倍ほどに大きくし、黄色にする - 英字見出しは 1 行目を Bold、2 行目を Light にしてリズムを付ける - 本文は中央揃えにし、短い行で改行する - 英字の大きな透かし文字は画面端で切れてよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラムの中央揃え。PC は画像とテキストを左右交互に並べる 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 各コンテンツ帯は全幅の色面にし、上下の余白を約 50px 取る - 円形ビジュアル → 小見出し → 英字見出し → 説明 → ボタンの順に縦へ並べる - 番号の透かしは帯の左上と右上に交互に置く - メッセージパネルは画面幅いっぱいに近い黄色パネルにし、本文を中央に置く ## Elevation & Depth - 影はほぼ使わずフラットにする - ボタンだけに薄い影（0 4px 8px rgba(0,0,0,.1)）を付ける - バナーカードは影なしにし、色面で区別する ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 正円に切り抜き、6px ほどの黄色い太枠で囲む - **セクション境界**: 直線の色面で切り替える。FV の下端は黄色い弧、フッターの上は大きな角丸にする - メッセージパネルとフッターの上角は大きく丸める - ボタンはすべてピル型にする - バナーは角丸 12px の横長カードにする ## Components - **READ MORE ボタン**（`button-primary`）: 黄色のピル型ボタン。英字ラベルの右に矢印を付け、薄い影を落とす - **FV のピル型タグ**（`badge-pill`）: FV 写真の右上に重ねる黄色の小さなピル型リンク。2 つを縦にずらして置く - **黄色い枠の円形ビジュアル**（`circle-visual`）: 直径約 145px の正円写真を太い黄色の枠で囲む - **透かし番号**（`watermark-number`）: 帯の角に置く巨大な 2 桁の番号。白または淡い黄色で、端は切れてよい - **メッセージパネル**（`message-panel`）: 全幅に近い黄色の角丸パネル。引用符付きの見出しと太字の中央揃え本文を載せる - **関連サービスバナー**（`link-banner`）: 横長の角丸カード。大きな見出し、小さなピル型ラベル、右側のデバイス画像で構成する。淡い青版と濃い青版を並べる - **黄色フッター**（`footer-yellow`）: 上角を大きく丸めた黄色の面。ロゴと黒丸付きのリンク一覧を載せる - **ページトップボタン**（`pagetop`）: 黒い正円の中に白い上向き矢印 ## Do's and Don'ts **Do** - 黄色は面で大胆に使い、文字は黒で引き締める - コンテンツは番号付きで同じ型を繰り返す - 白とクリームの帯を交互に置いて区切る - 円形ビジュアルには必ず黄色の太枠を付ける - 英字見出しと日本語小見出しを必ずセットで置く **Don't** - 黄色の上に白文字を載せない - 赤や緑など別の強い色を足さない - 写真を四角いまま並べない - 見出しに明朝体を使わない - 濃い影やグラデーションのボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（記念の世界観と主メッセージを伝える）: 白地に極太の 2 行コピーを置き、要所だけ黄色にする。下に黄色い弧で縁取った光の写真を置き、巨大な英字コピーを横切らせ、右上にピル型タグを重ねる 2. **メッセージ**（記念の想いと決意を語る）: 黄色の大きな角丸パネルに、引用符付きの見出しと短く改行した太字の中央揃え本文を載せる 3. **コンテンツ導入**（企画の一覧へ誘導する）: 白地に英字 2 行（Bold と Light）の見出しと短い中央揃えのリード文を置く 4. **企画コンテンツ一覧**（各企画を紹介して詳細へ送る）: 番号付きの帯をクリームと白で交互に並べる。各帯は円形ビジュアル、日本語小見出し、英字見出し、説明、READ MORE ボタンで構成する 5. **近日公開**（次の企画への期待を持たせる）: 同じ帯の型を使い、円形ビジュアルと英字の告知だけを置く 6. **関連サービスバナー**（本業のサービスサイトへ送客する）: 淡いクリーム地に、青系の横長角丸バナーを 2 枚縦に並べる 7. **フッター**（会社情報と SNS・採用ページへのリンクを置く）: 上角を丸めた黄色の面にロゴを置き、黒丸付きのリンクをグループごとに並べる ## Imagery - FV は金色の光が中央から放射する宇宙的なビジュアルにする - オフィス写真は明るく自然光で撮り、円形に切り抜く - 企画ロゴやキービジュアルは円の中に収め、太い黄色の枠で囲む - 格子模様や同心円など、シンプルな幾何学のグラフィックを添える - バナーには PC・スマホのデバイスモック画像を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV コピーを中央に大きく置き、光の写真を巨大な正円で見せる - PC の企画帯は、円形画像とテキストを左右交互に並べる 2 カラムにする - PC のバナーは 2 枚を横並びにする - PC のフッターはリンクを 3 列に並べ、ページトップボタンを右に置く - メッセージ本文は PC では 1 行を長くし、改行を減らす ## 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-adc0a291`（元 LP の URL から採番） - **元 LP**: https://hcm-jinjer.com/10th-anniversary/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。