DESIGN.md — 夜空紫×金の幻想的な占い師募集 LP（Mystic Night Purple Gold Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 夜空・三日月・タロット・金の装飾線・星のきらめき・明朝体
• 地の質感: 星屑が散る紫の夜空グラデーションと、ランタンや水晶の暖かい光。金の細線と飾り罫が質感を足す
• 形: 細い金線で囲った角丸少なめのカード、八角形の装飾枠、円形アイコンバッジ
• 温度感: 寒色の紫を地にして金と灯りで暖かさを足す、神秘的で落ち着いた温度感

Colors

• 地は深い紫〜濃紺の夜空グラデーションが基本。情報整理部分のみ淡いピンクベージュや白ラベンダーに切り替える
• 見出しの強調語だけを金色グラデーションにし、他は白（暗地）か濃紫（明地）
• 罫線・枠・装飾はすべて細い金線で統一する
• CTA は濃紺紫地に金縁＋白文字、強調語「無料」相当のみ金色
• 明地のカード内はアイコンを紫の塗りに金縁で置く

Typography

• 全体を明朝体で統一し、上品で神秘的な印象を保つ
• 見出しは 2 行構成で、強調語を一回り大きく金色にする
• 暗地の白文字には淡い光彩（グロー）を添える
• 英字見出しはセリフ体の大文字で、下に日本語見出しを添える
• 本文は中央揃えが基本、カード内のみ左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンは 3〜4 列の円形バッジ、カリキュラムは 2 列リスト
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは画像背景で隙間なく連結し、境界は背景色の切替で示す
• 各セクション冒頭に飾り罫付き見出しを中央配置
• POINT 番号ラベルを八角形の金枠で見出し上に置く
• カードは縦積みで 8〜12px 間隔
• 人物イラストを片側に寄せ、反対側にテキストやリストを重ねる

Elevation & Depth

• カードは影よりも細い金線と二重枠で浮かせる
• 暗地の文字・アイコンに金や白の柔らかいグロー
• CTA ボタンは金縁＋外側に淡い光
• ランタン・星の光でボケ光を散らし奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は全面背景に溶け込む切り抜きなしイラスト。コミュニティ写真は円形切り抜きを金の光線でつなぐ
• セクション境界: 直線の背景切替。上下に金の飾り罫や細線フレームを添える
• カード枠は角丸小さめ＋四隅に金のアラベスク飾り
• アイコンは円形の紫バッジに金縁
• 見出し上下に中央の星付き飾り罫
• ロゴ枠などは角を落とした八角形フレーム

Components

• LINE エントリーボタン（button-primary）: 濃紺紫のピル型に金縁と光彩。左に緑の LINE アイコン、強調語のみ金色
• 飾り罫付き見出し（heading-ornament）: 見出しの上下に中央星付きの金の装飾線。強調語を金で大きく
• POINT 番号ラベル（point-label）: 八角形の細い金枠に欧文セリフで POINT＋番号
• 悩みチェックリスト（check-list-card）: 半透明の白カードに紫のチェックボックスと 2 行の悩み文、項目間に細線
• 円形アイコンバッジ（icon-badge）: 紫の円に金縁、白いアイコンと短いラベルを 3〜4 個横並び
• サポート内容カード（feature-card）: 左に紫スマホ型アイコン、右に明朝見出しと箇条書き。金の細線枠
• エントリーの流れステップ（step-card）: 左にイラスト、右に金縁の紫円で 01〜03 の番号と見出し、強調語は金
• カリキュラム枠（curriculum-box）: 金の細線フレームに見出し、星印の箇条書きを 2 列で並べる

Do's and Don'ts

Do - 紫の夜空グラデーションと星のきらめきを全面に敷く - 強調語だけを金色グラデーションにする - 枠・罫線は金の細線と飾り模様で統一する - 見出しは明朝で 2 行、中央揃えにする - 三日月やランタン、水晶玉など占いモチーフを各セクションに置く

Don't - ゴシック体の太字やポップな丸ゴシックを使わない - 原色の赤・黄などの派手な色を足さない - 濃いドロップシャドウや立体的なボタンにしない - 金色を本文全体に使い過ぎない - 白一色のフラットな背景を長く続けない

Page Structure

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

1. ファーストビュー（テーマと価値を一目で伝え、即エントリーへ誘導）: 夜空背景に三日月と人物イラスト、ネオン風ロゴ見出し、明朝キャッチ、半透明リード枠、下部に LINE CTA
2. 悩みの提起（ターゲットの悩みに共感させる）: 金強調の見出しの下、白カードにチェック付きの悩みを 5 つ並べ、右に悩む人物
3. 解決の提示（必要なのは仕組みだと橋渡し）: 淡いピンクベージュ地に濃紫明朝 2 行、強調語を金に
4. 提供価値の概要（サービスが両方を提供すると示す）: 紫夜空に見出しと金強調、円形アイコン 3 つを金の光線で連結
5. 特長1（育成プログラム）（学べる内容を具体化）: POINT ラベル、イラスト、円形アイコン 4 つ、2 列カリキュラム枠、受講形式ラベル
6. 特長2（サポート体制）（手厚い伴走を示す）: 分析画面風のイラストの下に、アイコン付きカードを 4 枚縦積み
7. 特長3（コミュニティ）（仲間とのつながりを訴求）: 円形切り抜きの人物をノート PC 周りに配置、下にチェック付き特長カード 3 枚
8. 運営会社紹介（信頼性を伝える）: 英字セリフ見出し、八角形枠にロゴ並列、点線区切りで中央揃え本文、金強調
9. エントリーの流れ（応募の手順を明確化）: 三日月付き見出し帯、3 ステップをイラスト＋番号円で縦に、金の光の流れで連結
10. クロージング（背中を押して行動を促す）: 英字セリフ大見出し、白明朝の 4 行メッセージ、夜景を見下ろす人物の全面イラスト

Imagery

• 紫のローブを着た長髪の女性占い師を後ろ姿や横顔で描く幻想的なイラスト
• タロットカード、水晶玉、ランタン、ラベンダー、キャンドルを手前に配置
• 金の線画で描いた透かし模様の三日月を右上に置く
• 星屑・光のボケ・星座線を散らしたきらめく夜空
• スマホ、リングライト、ノート PC など SNS 要素を占いの世界観に融合
• 人物写真は暖色の室内光で、円形に切り抜き金の光線でつなぐ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP 幅のコンテンツを中央に固定表示する
• 左右の余白には夜空と三日月、ラベンダーの背景画像を敷く
• PC 左側にロゴとページ名、右側にアンカーナビと小さめのピル型 CTA を固定
• 中身のレイアウトや文字サイズは SP と同じ

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