--- version: alpha name: Warm Greige Serene Relaxation Salon LP description: 生成りのベージュ地に、くすんだモカブラウンと濃いチョコ色の文字を重ねた、静かで上品なリラクゼーションサロンのサイト。明朝の見出しと欧文セリフの英字見出しを組み合わせ、角丸のない矩形ボタン、丸く切り抜いた写真、金色の月桂樹バッジで信頼感と癒やしを出している。 colors: background: '#F5F2ED' primary: '#978176' cta: '#978176' on-cta: '#FEF7F2' text: '#372620' text-body: '#462C21' text-muted: '#BDB7B3' secondary: '#C4B7AE' dark-section: '#52352B' surface: '#FFFFFF' background-alt: '#EEE9E3' accent-1: '#D4A334' line: '#948074' accent-2: '#9C8550' cta-accessible: '#836E64' secondary-accessible: '#836E60' accent-1-accessible: '#906D1F' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2em headline-lg: fontFamily: Libre Baskerville fontSize: 34px fontWeight: 700 lineHeight: 1.2 headline-md: fontFamily: Shippori Mincho fontSize: 21px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Libre Baskerville fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 600 lineHeight: 2.2 letterSpacing: 0.25em label-button: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 54px heading-en: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px heading-underline: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px news-tab: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 46px category-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 20px laurel-badge: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 95px rank-medal: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px more-link: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 24px area-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 62px guide-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 105px --- # DESIGN.md — 生成り×モカブラウンの上品リラクゼーションサロン LP（Warm Greige Serene Relaxation Salon LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル、シンプル・ミニマル - **キーワード**: 生成り・モカブラウン・明朝見出し・欧文セリフ・余白多め・柔らかな光 - **地の質感**: フラットな生成り地に、ぼけた光の玉や薄い樹木シルエットを淡く重ねる - **形**: 角丸なしの矩形ボタン・カードと、円形に切り抜いた写真の組み合わせ - **温度感**: 暖かく落ち着いた中間トーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F5F2ED` | ページ全体の生成り地 | 54% | 画素の実測 | | `primary` | `#978176` | ボタン・ショップリスト帯のモカブラウン | 6% | 画素の実測 | | `cta` | `#978176` | 店舗検索などの主ボタン | 1% | 画素の実測 | | `on-cta` | `#FEF7F2` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#372620` | 見出し・本文の濃いチョコ色 | 4% | 画素の実測 | | `text-body` | `#462C21` | 本文のやや柔らかい焦げ茶 | 2% | 画素の主要色に補正 | | `text-muted` | `#BDB7B3` | 補足小見出しの薄いグレージュ文字 | 0% | 画素の実測 | | `secondary` | `#C4B7AE` | 非選択タブ・グレージュ面 | 4% | 画素の実測 | | `dark-section` | `#52352B` | カテゴリラベル・メニューボタンの濃茶 | 0% | 画素の実測 | | `surface` | `#FFFFFF` | エリア選択カードの白面 | 5% | 画素の実測 | | `background-alt` | `#EEE9E3` | 下部バナー帯の薄いグレージュ地 | 4% | 画素の実測 | | `accent-1` | `#D4A334` | 月桂樹バッジ・順位メダルの金色 | 0% | 画素の実測 | | `line` | `#948074` | 区切り線・カード枠線 | 0% | 画素の主要色に補正 | | `accent-2` | `#9C8550` | アイコン・コピーライトのオリーブ金 | 0% | 推定 | | `cta-accessible` | `#836E64` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#836E60` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#906D1F` | AA を満たす補正値（計算） | | 計算 | - 生成り地を全体の半分以上に敷き、白は店舗カードなどの面だけに使う - ボタン・帯面はくすんだモカブラウン1色に統一し、彩度の高い色は使わない - 文字は濃いチョコ色。純粋な黒は使わない - 金色は実績バッジと順位メダルのみに限定 - 非選択タブや補足文字はグレージュで一段トーンを落とす - 店舗一覧だけ全幅のモカ帯にして、場面が切り替わったことを示す - `button-primary` は文字 `#FEF7F2` × 背景 `#978176` のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#836E64`、4.52:1）を使う。 - `news-tab` は文字 `#FEF7F2` × 背景 `#C4B7AE` のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#836E60`、4.54:1）を使う。 - `rank-medal` は文字 `#FEF7F2` × 背景 `#D4A334` のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#906D1F`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ（明朝・字間広め） | 明朝 | Shippori Mincho | 500 | 30px | 1.6 | 0.2em | | `headline-lg` | セクション英字見出し | 欧文セリフ | Libre Baskerville | 700 | 34px | 1.2 | 0.0em | | `headline-md` | 特長・コース名などの和文見出し | 明朝 | Shippori Mincho | 500 | 21px | 1.5 | 0.12em | | `headline-sm` | News等の小さな英字見出し・番号 | 欧文セリフ | Libre Baskerville | 700 | 16px | 1.4 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.05em | | `note` | 英字見出し下の和文ラベル・補足 | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.05em | | `accent` | リード文（明朝・字間広め） | 明朝 | Shippori Mincho | 600 | 14px | 2.2 | 0.25em | | `label-button` | ボタン文字 | 明朝 | Shippori Mincho | 700 | 14px | 1.4 | 0.15em | - 英字見出しは欧文セリフで大きく、下に小さな和文ラベルを添える - 和文見出しとリード文は明朝にし、字間を0.1em以上取る - 本文はゴシックで行間2.0にする - キャッチは2行を左右にずらして段組みする - 太すぎるウェイトは使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。コースは大1枚→2カラム→画像左＋テキスト右のリストの順で並べる - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 左右の余白は約24px - セクション間は70〜100pxと広く取る - 特長は中央揃えにし、細い区切り線で区切る - 英字見出しは左寄せで大きく置き、背景にぼけた光を重ねる - ボタンは幅75%で中央に置く ## Elevation & Depth - 影は使わずフラットにする - 奥行きは写真の重なりと淡い光のぼけで出す - カードは白面または1pxの枠線だけで区切る ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 特長は円形、コースは角なしの矩形、背景写真は全幅 - **セクション境界**: 直線で切り替える。写真帯に色帯を重ねる - ボタン・カードは角丸0 - ボタン右端に横線の矢印を突き出す - 円形はSNSアイコンと特長写真だけに使う ## Components - **横線付き矩形ボタン**（`button-primary`）: モカの面に白い明朝文字。右端から細い横線がはみ出す - **英字＋和文ラベル見出し**（`heading-en`）: 大きな欧文セリフの下に小さな和文を置く - **下線付き小見出し**（`heading-underline`）: 中央に置いた欧文に短い下線を引く - **お知らせタブ**（`news-tab`）: 選択中は枠線のみ、非選択はグレージュの面 - **カテゴリラベル**（`category-label`）: 日付の横に置く濃茶の小さな矩形と白文字 - **月桂樹実績バッジ**（`laurel-badge`）: 金色の月桂樹の中に実績の数字。3つ横に並べる - **順位メダル**（`rank-medal`）: 写真の左上に置く金・銀・銅の丸メダルと数字 - **moreリンク**（`more-link`）: 短い横線＋欧文セリフ - **エリア選択カード**（`area-card`）: モカ帯の上に白い矩形を並べ、右端に横線 - **アイコン付き案内カード**（`guide-card`）: 1px枠。金色の線画アイコン＋明朝タイトル＋薄い補足 ## Do's and Don'ts **Do** - 生成り地と余白を広く取り、静けさを保つ - 見出しは明朝と欧文セリフを組み合わせる - ボタンは角のない矩形にし、横線の矢印を付ける - 写真は暖色の柔らかい光でそろえる - 金色は実績と順位だけに使う **Don't** - ピル型ボタンや強い角丸は使わない - 赤・ビビッドな色のCTAは置かない - 濃い影やグラデーションボタンは使わない - 純粋な黒文字や太いゴシック見出しは使わない - テキストを詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ナビ導線）: 左にロゴ。右に線画アイコン付きリンク2つと濃茶の四角いメニュー 2. **ファーストビュー**（癒やしの世界観を伝える）: 全幅の施術写真の下に、明朝の2行キャッチをずらして置き、字間の広いリード文と縦のscroll表示を添える 3. **お知らせ**（最新情報）: 下線付き英字見出し・矩形タブ・日付＋ラベル＋タイトルのリストを細線で区切る 4. **ギャラリー・実績**（店内の雰囲気と信頼）: 大きな写真と小さなサムネイルを横に並べ、月桂樹バッジ3つ、明朝見出し、主ボタンを続ける 5. **コンセプト・特長**（選ばれる理由）: 英字見出しと本文のあと、円形写真＋番号＋明朝見出し＋本文の3項目を区切り線で縦に並べる 6. **コース紹介**（メニュー提示）: 全幅写真に大きな透かし英字を重ねる。順位メダル付きの大カード、2カラムのカード、横型リストの順に並べ、主ボタンで締める 7. **店舗一覧**（店舗探しへ誘導）: キャンドル写真の帯に続けてモカ帯を置き、白い英字見出しと白いエリアカードを縦に並べる 8. **案内リンク**（初来店・ギフト・FAQへの誘導）: 線画アイコン付きの枠線カードを3つ縦に並べる 9. **採用・法人バナー**（サブ導線）: 写真に白い明朝文字を載せたバナーと説明文。背景は薄いグレージュ 10. **フッター**（サイト内リンク）: ロゴ、2列のテキストリンク、円形のSNSアイコン、セリフ体のコピーライト ## Imagery - 自然光の暖色トーンで、目を閉じてくつろぐ女性の施術シーンを撮る - ハイキーで白く飛ばし、前景にぼけた光の玉を入れる - 店内写真は木目とブラウン系のタオルで落ち着いた色にそろえる - キャンドルやアロマディフューザーの暗めの写真で場面転換する - 樹木の淡いシルエットや日本地図を薄く背景に敷く - アイコンはオリーブ金の細い線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはキャッチを写真の上に重ね、ロゴとリード文を左に置く - PCのギャラリーは写真を左、実績と見出しを右の2カラムにする - PCの特長は円形写真を左、テキストを右に横並びにする - PCのコースは4カラムのグリッドにする - PCの店舗一覧は地図を左、エリアカードを右に置く - PCの案内カードは3つ横に並べる ## 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-cfc0e855`（元 LP の URL から採番） - **元 LP**: https://www.tilleul-web.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。