DESIGN.md — ライトグレー地×多色カードのポップな配信事務所LP（Pop Multicolor Card Livestreaming Agency LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、クール・先進的、情報量多め・訴求型
• キーワード: 多色カード・3D小物・縦書き・巨大英字透かし・ピル型ボタン・ライブ配信
• 地の質感: マットな単色面。カードにうすい影をつけ、写真は明るく彩度が高い
• 形: 角丸大きめのカード、円形の人物写真、ピル型ボタン、斜めにカーブする赤い帯
• 温度感: 明るく賑やか。地のグレーで全体を引き締めている

Colors

• 地は#F4F4F4で統一し、カードの色で区切る
• 特徴カードは紫→水色→ターコイズ→赤→ピンクの順に毎回色を変える
• カード内の見出し・バッジ・マーカーは、地の色に対して目立つ補色系の1色にそろえる（紫には黄、ターコイズにはマゼンタなど）
• 強調語は見出しと同じ色のマーカー帯の上に地の色の文字で置く
• ボタンは黒地に白文字。矢印の丸だけブランドの赤
• 白抜きの巨大英字を地に透かしとして繰り返す
• feature-card は文字 #F7E71F × 背景 #9C84C4 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7554AD、4.52:1）を使う。

Typography

• 見出しの上に小さな英字ラベルを置き、2段組にする
• コンセプト文は縦書きにして、英字の縦書きを添える
• 本文も太字で、行間はゆったり取る
• 特徴カードの見出しは極太・2行・最後に「！」をつけて大きく見せる
• 日付は大きな数字の下に小さな英字の月を置く
• 巨大英字は白でスクロール帯のように画面からはみ出させる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。クリエイターは横スクロール
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 14px（375px 幅換算）
• カードは左右に約6%の余白をとって中央に置く
• カード同士の間隔は約10px
• 写真はカード上部に内側の余白つきで置き、下に文字を置く
• セクションの終わりに誘導用の黒いピル型ボタンを置く
• 画面下にメニューボタンと相談バーを固定する

Elevation & Depth

• カードとヘッダーにはうすく広い影（0 4px 16px rgba(0,0,0,.08)）
• 3D小物はカードの外へはみ出させて浮遊感を出す
• 人物の円形写真にはうすい影

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: カード内は角丸の長方形、クリエイターは円形
• セクション境界: 区切り線なし。赤い帯の斜めカーブと透かし文字でつなぐ
• カードの角丸は大きめで統一
• バッジ・タグは角丸の小さな長方形
• ボタンは完全なピル型で、右端に赤い円を置く

Components

• 黒ピル誘導ボタン（button-primary）: 黒地に白の太字。右端に赤い丸と白い矢印
• 多色の特徴カード（feature-card）: 単色の地に写真、番号バッジ、太い見出し、マーカーで強調した説明文。3D小物を添える
• 番号バッジ（feature-badge）: 英字と番号の小さな角丸ラベル
• 英字ラベル付き見出し（section-heading）: 小さな英字の下に大きな和文見出し。左揃え
• 記事カード（article-card）: 色地に写真、大きな日付、太字タイトル、白いタグを並べる
• 円形プロフィール（creator-circle）: 大きな円形写真の下に名前と所属をグレーで添え、横スクロールで並べる
• 浮いたヘッダー（header-card）: 白い角丸カードにロゴ・サイト名・ハンバーガー
• 固定の相談バー（sticky-bar）: 画面下に白い角丸のメニューボタンと相談への誘導を並べる

Do's and Don'ts

Do - 特徴カードは毎回違う色にし、文字色はその地色に合わせて変える - 3D小物（風船・ギフト・ヘッドホン等）をカードの角に散らす - 白い巨大英字の透かしをセクションの背後に繰り返す - 強調語にはマーカー帯を敷く - 余白を多くとり、カードを中央に並べる

Don't - 地を色付きにしない（グレーで統一する） - カードの色を同じ色で続けない - 細い書体や明朝体は使わない - ボタンをカラフルにしない（黒＋赤い丸に限る） - 角の尖った四角いカードにしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ブランド表示とメニュー）: 浮いた白い角丸カードにロゴとハンバーガーを置く
2. ファーストビュー（世界観とキャッチ）: 赤地の人物写真に大きな頭文字を重ね、白の極太キャッチと英字サブを置く
3. コンセプト（事務所の想いを伝える）: 縦書きの見出しと英字。赤いカーブの帯が横切り、下に太字の短い文章を置く
4. 特長（強みを5つ見せる）: 多色カードを縦に5枚。番号バッジ・極太見出し・マーカー付きの説明・3D小物
5. 誘導ボタン（詳細ページへ送る）: 黒いピル型ボタンを中央に置く
6. 所属クリエイター（実在感を出す）: 円形写真を横スクロールで並べ、名前と所属を添える。下にボタン
7. コラム記事（ノウハウで集客する）: 色違いの記事カードを縦に4枚。日付とタグをつける。下にボタン
8. フッター（ナビと権利表記）: 白いカードにロゴ、大きな英字ナビと和文の小さな添え字、赤いキャッチを流す
9. 固定CTA（相談への常時誘導）: 画面下にメニューと相談バーを固定する

Imagery

• 人物は単色の背景で撮る（赤・ピンク・水色・白）。明るく彩度の高いポートレート
• カードの地色と背景色が合う写真を選ぶ
• 光沢のある3Dイラストの小物（風船、ギフト、コイン、ヘッドホン、飛行機）を添える
• FVでは人物の背後に大きな頭文字を淡い色で置く
• 記事サムネイルはスマホやハートなどSNSを連想させるストック写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは3枚の色違い人物カードを横に並べる
• PCの特長カードは横長にし、写真と文字を左右交互に配置する
• PCの記事カードは2カラム
• PCは右側に固定の相談カード（コードと誘導）を常に表示する
• PCのフッターナビは英字の横に和文を添える

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 行書くと起動時に読み込まれる。