DESIGN.md — 深緑と生成りの静かな温泉施設 LP（Calm Forest Green Onsen Retreat LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、ナチュラル、上品・高級、やさしい・柔らかい
• キーワード: 深緑・生成り・明朝の字間・雲形モチーフ・余白多め・静けさ
• 地の質感: フラットな生成りの地。写真は自然光で、空気感のあるもの。フッターは淡い緑から深緑への縦グラデーション
• 形: 角丸カードを基本に、雲・花形のもこもこした輪郭をバッジやボタン角に使う。FVの下端は緩い弧
• 温度感: やや涼しく穏やか。緑とグレーの寒色寄りに、生成りの温かさを足す

Colors

• 地は生成りと白だけにする。色付きの地はフッターのグラデーションに限る
• 深緑は面で使う場所（カード・バッジ・ボタン）を絞る
• 見出しのキャッチは中間の緑、本文は墨色にして階層を分ける
• セクションのつなぎは生成りから白へ縦グラデーションで溶かす
• ページ下部は淡い緑灰から深緑へのグラデーションで締める
• 原色やビビッドな色は使わない
• news-card は文字 #212529 × 背景 #3A684D のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#559971、4.54:1）を使う。

Typography

• 見出しは明朝体にして、字間を0.3em以上空ける
• セクション名は縦書きにして、小さな英字ピルラベルを添える
• 本文は小さめのゴシック体。短い行で改行し、段落の間を1行空ける
• カテゴリ名は和文の明朝を大きく、英字を小さく横に並べる
• 太字はほぼ使わず、静かなウェイトで揃える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。お知らせは横スクロールのカード列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• 左右の余白は12〜16px
• お知らせ一覧は約120pxの正方形カードを横に並べ、はみ出させてスクロールを示す
• コンセプト見出しは中央揃え、本文は左揃え
• 写真カードは横幅いっぱい、縦横比16:9前後で縦に積む
• セクション間はたっぷり空け、グラデーションでつなぐ

Elevation & Depth

• 影はほぼ使わず、フラットにする
• ヘッダーボタンは白い角丸の枠に入れ、ごく淡い影をつける
• 奥行きは写真と雲形の重なりで出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸8pxの長方形。右下に雲形の白い「詳しく見る」バッジを重ねる
• セクション境界: FVの下端は緩い凸型の弧。ほかはグラデーションで溶かす
• 雲・花形のもこもこ輪郭をモチーフにする
• 営業状況のバッジは深緑の花形にし、白い点線の円をあしらう
• ロゴは左上の白い雲形の中に置く
• リンクは下線と小さな花形アイコンを右端に置いた横長の形

Components

• 花形の営業状況バッジ（status-badge-cloud）: FV右下に重ねる深緑の花形。日付・営業状態・時間を3段で載せる
• 雲形ロゴ枠（logo-cloud）: 左上の白い雲形の中にロゴを置く
• ヘッダーの時間・料金ボタン（header-button）: 白枠の中に深緑の小ボタンとハンバーガーを並べる
• お知らせカード（news-card）: 深緑の正方形にロゴを置き、右下に雲形の詳細バッジ。下に日付と明朝のタイトル
• 縦書きセクション名（vertical-heading）: 英字の小ピルラベルの下に明朝の縦書き見出しを置く
• 下線テキストリンク（underline-link）: 緑の細い下線を引き、左に文字、右に花形アイコンを置く
• 写真カテゴリカード（photo-category-card）: 角丸写真の左下に白い明朝の和文と英字、アイコンを重ね、右下に雲形の詳細バッジ
• グラデーションフッター（gradient-footer）: 淡い緑灰から深緑への縦グラデーションの上に、白いロゴ・ナビ・コピーライト

Do's and Don'ts

Do - 見出しは明朝で字間を広く、余白をたっぷり取る - 雲形・花形モチーフを詳細バッジや営業バッジで繰り返す - 地は生成りと白に絞り、深緑を面で少しだけ使う - セクション境界はグラデーションでやわらかくつなぐ - 写真は自然光で静かな施設や景色を選ぶ

Don't - 太いゴシックの大見出しや派手な装飾を入れない - 赤や黄色などのビビッドな色を使わない - 強い影や立体的なボタンを使わない - 情報を詰め込みすぎない - 角の鋭い四角いバッジを使わない

Page Structure

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

1. ファーストビュー（景色と施設の空気感を伝える）: 全面写真の左に白い明朝のキャッチ3行。下端は弧で、右下に花形の営業バッジ
2. お知らせ（営業情報を知らせる）: 縦書きの見出しと、横スクロールの深緑カード。下に一覧への下線リンク
3. コンセプト（施設の魅力を情緒的に伝える）: 中央揃えの緑の明朝見出し2行と、左揃えの短い段落4つ
4. カテゴリ導線（温泉や施設の詳細ページへ誘導する）: 角丸の写真カードを縦に積み、和文と英字のラベル、雲形の詳細バッジを重ねる
5. アクセス（所在地と営業時間を示す）: グレースケールの地図の下に、明朝の見出しと住所、地図への下線リンク
6. フッター（ブランドで締め、ナビを置く）: 深緑のグラデーションの上に白いロゴ、横並びのナビ、コピーライト

Imagery

• 自然光で撮った木質の空間や露天、山の景色。彩度はやや低め
• 人物は入れず、空間の静けさを見せる
• 地図はグレースケールにして色を抑える
• ロゴは山と湯気を線画で描いた円形のマーク
• 装飾は雲・花形のシルエットと小さな線画アイコンに限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではFVを全幅にし、キャッチを左に大きく置く。バッジは右下
• お知らせカードはPCで4枚並べて見せる
• コンセプトはPCで左に本文、右に写真カード2枚を縦に並べる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 行書くと起動時に読み込まれる。