--- version: alpha name: Celestial Tarot Beige Fortune Content LP description: 生成りのベージュとミルクブラウンの2トーンに、細い線画の太陽・星・手を散らした占い風のコンテンツLP。アーチ型に切り抜いた写真に沿わせた曲線ロゴ、タロット風の淡いピンクのカード、12星座を線画アイコンのカードで3列に並べたグリッドが特徴。全体を低彩度・低コントラストでまとめ、静かで神秘的、上品にやさしい印象をつくる。 colors: background: '#ECE9E4' primary: '#866E54' surface: '#EBEAE4' accent-2: '#FEDACC' text: '#7B6954' text-body: '#6D5A44' on-dark: '#FFFEFA' accent-1: '#A3886E' line: '#C7B7A5' tint-1: '#BFBAAE' secondary: '#6D5A44' text-accessible: '#786652' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Playfair Display fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em headline-sm: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Zen Maru Gothic fontSize: 11px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Playfair Display fontSize: 24px fontWeight: 800 lineHeight: 1.2 rounded: sm: 6px md: 10px lg: 200px full: 999px spacing: unit: 8px card: 8px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' arch-hero: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 520px section-heading-sun: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 80px tarot-card: backgroundColor: '{colors.accent-2}' rounded: '{rounded.md}' height: 280px zodiac-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 170px advisor-profile: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 190px lead-with-hands: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 160px --- # DESIGN.md — 生成りベージュの神秘的な占い風美容 LP（Celestial Tarot Beige Fortune Content LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル、シンプル・ミニマル - **キーワード**: 占い・タロット・線画の天体モチーフ・アーチ型写真・ベージュ×ブラウン・星座カードグリッド - **地の質感**: 紙のようなマットな単色面。グラデーションや光沢はなく、細い線画の星・太陽・手で余白を飾る - **形**: アーチ（上が半円）の写真枠、角丸の小さいカード、内側に細い枠線を二重に引いたタロット風カード - **温度感**: 暖かいが低彩度。くすんだ茶系で落ち着いた温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#ECE9E4` | ファーストビューの生成りの地 | 35% | 画素の実測 | | `primary` | `#866E54` | ブランドを代表するミルクブラウン。後半セクションの地 | 38% | 画素の実測 | | `surface` | `#EBEAE4` | 星座カードの面 | 9% | 画素の実測 | | `accent-2` | `#FEDACC` | タロット風メインカードの淡いピンク | 4% | 画素の実測 | | `text` | `#7B6954` | 大見出し・欧文ロゴの濃いブラウン | 1% | 画素の実測 | | `text-body` | `#6D5A44` | 本文・カード内の星座名 | 1% | 画素の主要色に補正 | | `on-dark` | `#FFFEFA` | ブラウン地の上の見出し・本文 | 1% | 画素の実測 | | `accent-1` | `#A3886E` | 太陽・星・手などの線画装飾 | 3% | 画素の主要色に補正 | | `line` | `#C7B7A5` | カード内側の枠線・区切り線 | 4% | 画素の主要色に補正 | | `tint-1` | `#BFBAAE` | カード内のアイコン線画・淡い補助色 | 3% | 画素の実測 | | `secondary` | `#6D5A44` | プロフィール枠など一段濃いブラウン | 1% | 画素の主要色に補正 | | `text-accessible` | `#786652` | AA を満たす補正値（計算） | | 計算 | - 地はファーストビューを生成り、それ以降をミルクブラウンにして、上下の2トーンで切り替える - ブラウン地の上には生成りのカードと白文字を置き、カードの中は茶系の文字にする - 差し色はタロットカードの淡いピンク1色だけ。メインカードにだけ使う - 線画装飾は地の色より少し濃いか薄いくらいの同系色にして、主張させない - 彩度の高い色・純黒・原色の赤や青は使わない - 強調は色を変えず、文字サイズと太さで付ける - `arch-hero` は文字 `#7B6954` × 背景 `#ECE9E4` のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#786652`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | アーチに沿った曲線の欧文タイトル | 欧文セリフ | Playfair Display | 500 | 44px | 1.1 | 0.02em | | `headline-lg` | 年号などの欧文サブタイトル | 欧文セリフ | Playfair Display | 400 | 34px | 1.2 | 0.02em | | `headline-md` | セクション見出し（ブラウン地に白） | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.4 | 0.06em | | `headline-sm` | 星座カードの名前・人物名 | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 1.4 | 0.04em | | `body-md` | リード文・プロフィール本文 | 丸ゴシック | Zen Maru Gothic | 500 | 14px | 2 | 0.08em | | `note` | カード内の日付・肩書き | 丸ゴシック | Zen Maru Gothic | 500 | 11px | 1.5 | 0.04em | | `accent` | 欧文ロゴ風の太いワードマーク | 欧文セリフ | Playfair Display | 800 | 24px | 1.2 | 0em | - 欧文タイトルはセリフ体で、写真のアーチに沿わせて円弧状に配置する - 和文はやわらかい丸ゴシックで統一し、字間を広めにとる - リード文は中央揃え・行間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 ```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-b579b45a`（元 LP の URL から採番） - **元 LP**: https://ohora.co.jp/pages/fortunenail2023 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。