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

• 地は白とクリームを交互に置き、セクションの区切りにする
• 鮮黄はメッセージパネル・フッター・円の枠・ボタンだけに使う
• 大見出しはキーワードだけを黄色にし、残りは黒にする
• 黄の面に置く文字は必ず黒。白文字は使わない
• 青は関連サービスへのバナーだけに限定する
• 透かし番号は地色よりわずかに明るい色で控えめにする
• link-banner は文字 #FFFFFF × 背景 #167DE2 のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1577D6、4.52:1）を使う。

Typography

• 見出しは極太にし、字間を詰めて塊に見せる
• 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。