DESIGN.md — 生成りベージュの神秘的な占い風美容 LP（Celestial Tarot Beige Fortune Content LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、シンプル・ミニマル
• キーワード: 占い・タロット・線画の天体モチーフ・アーチ型写真・ベージュ×ブラウン・星座カードグリッド
• 地の質感: 紙のようなマットな単色面。グラデーションや光沢はなく、細い線画の星・太陽・手で余白を飾る
• 形: アーチ（上が半円）の写真枠、角丸の小さいカード、内側に細い枠線を二重に引いたタロット風カード
• 温度感: 暖かいが低彩度。くすんだ茶系で落ち着いた温度感

Colors

• 地はファーストビューを生成り、それ以降をミルクブラウンにして、上下の2トーンで切り替える
• ブラウン地の上には生成りのカードと白文字を置き、カードの中は茶系の文字にする
• 差し色はタロットカードの淡いピンク1色だけ。メインカードにだけ使う
• 線画装飾は地の色より少し濃いか薄いくらいの同系色にして、主張させない
• 彩度の高い色・純黒・原色の赤や青は使わない
• 強調は色を変えず、文字サイズと太さで付ける
• arch-hero は文字 #7B6954 × 背景 #ECE9E4 のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#786652、4.54:1）を使う。

Typography

• 欧文タイトルはセリフ体で、写真のアーチに沿わせて円弧状に配置する
• 和文はやわらかい丸ゴシックで統一し、字間を広めにとる
• リード文は中央揃え・行間2.0で3行程度に収める
• 見出しは太字にするが、大きくしすぎない（20px前後）
• カード内は名前を太字、日付を小さく細くして2段組にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。星座カードは 3 列グリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 56px、基本単位 8px、カード内 8px（375px 幅換算）
• 主な要素はすべて中央揃えにする
• 星座カードは3列×4段で、間隔を均等（約10px）にとる
• メインのタロットカードは幅約50%で中央に1枚だけ置く
• 見出しの左右に線画の太陽を左右対称に配置する
• プロフィールは細い枠の中で写真を左、文字を右に置く横並び

Elevation & Depth

• 影はほぼ使わない。面の色の差と細い線で階層を出す
• カードは地との明度の差だけで浮かせる
• 立体感の代わりに、内側に引いた二重の枠線で奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 上が半円のアーチ型。人物写真も同じアーチ型にする
• セクション境界: 直線で背景色を切り替えるだけ。波や斜めの線は使わない
• カードは角丸を小さく（6〜10px）し、内側に細い枠線を入れる
• カード内は上のアイコン部分と下の名前部分を横線で区切る
• メイン写真は大きなアーチに収め、曲線の欧文タイトルを重ねる
• 線画アイコンは1px程度の細い単線で描く

Components

• アーチ写真＋曲線タイトル（arch-hero）: アーチ型に切り抜いた写真の上に、欧文タイトルを円弧状に重ねるファーストビュー
• 太陽線画付き見出し（section-heading-sun）: 中央の白い見出しの左右に、太陽と星の線画を左右対称に置く
• タロット風メインカード（tarot-card）: 淡いピンクの縦長カード。内側に細い枠線と、月・太陽・星の線画を左右対称に配置
• 星座選択カード（zodiac-card）: 生成りの小さなカード。上は線画アイコン、下は横線で区切って名前と日付。3列で並べる
• 監修者プロフィール（advisor-profile）: 細い枠線のボックス。左にアーチ型の人物写真、右に肩書き・名前・紹介文
• 手の線画付きリード文（lead-with-hands）: 中央揃えのリード文の左右に、手を差し出す線画ときらめく星を置く
• 星のちりばめ装飾（sparkle-scatter）: 十字の星・小さな点を余白にランダムに散らす背景装飾

Do's and Don'ts

Do - 地は生成りとミルクブラウンの2色だけで組む - 装飾は細い単線の線画（太陽・星・月・手）にし、左右対称に置く - 写真はアーチ型に切り抜いてトーンを揃える - 選択肢はカード型のグリッドで並べ、すべて同じ形・同じサイズにする - 余白を広めにとり、静かな印象を保つ

Don't - 彩度の高い色や黒ベタを使わない - 太い線や塗りつぶしのアイコンを使わない - 強い影・グラデーション・光沢を付けない - 角張った四角い写真や斜めの区切りを入れない - 派手な装飾文字や赤い強調色で煽らない

Page Structure

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

1. ファーストビュー（企画のテーマと世界観を一目で伝える）: 生成り地にロゴ、アーチ写真、円弧状の欧文タイトル、その下に欧文の年号。四隅に太陽の線画
2. リード文（コンテンツの内容を短く案内する）: 中央揃え3行の丸ゴシック。左右に手と星の線画
3. 選択の導入（自分に当てはまるものを選ぶよう促す）: ブラウン地に切り替え、白の見出しと太陽の線画。中央にタロット風のピンクのカード
4. 選択グリッド（12個の選択肢から個別ページへ誘導する）: 線画アイコン入りの生成りカードを3列×4段で均等に並べる
5. 監修者紹介（専門家の監修で信頼感を出す）: 細い枠のボックスにアーチ写真と肩書き・名前・紹介文。下に星の装飾

Imagery

• 写真は手元や商品を寄りで撮り、ベージュ・ピンク・ゴールド系のくすんだトーンでまとめる
• 小物にタロットカードや指輪を入れて神秘的な雰囲気を出す
• イラストは1px前後の細い単線で描いた太陽・月・星・星座の線画
• 星座アイコンは同じタッチ・同じ線幅で、カードの中央にそろえて置く
• 余白には十字の星と小さな点を控えめに散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラムで、星座カードは3列を保つ（狭い場合は2列にする）
• PCでは中央に480〜600px程度の細い本文幅で組み、左右は同じ地の色で塗る
• アーチ写真はSPで幅約70%、PCでは最大幅を決めて中央に置く
• プロフィールの横並びはSPで写真を小さくして維持し、狭い場合は縦積みにする
• 四隅の線画装飾は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 行書くと起動時に読み込まれる。