DESIGN.md — 白×若草グリーンの海辺グランピング LP（Fresh Green Seaside Glamping Resort LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 清潔・爽やか、ナチュラル、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 若草グリーン・ミント地・片角丸写真・欧文見出し・葉っぱ地紋・リゾート
• 地の質感: 白地にごく薄い葉のモチーフを地紋として敷き詰め、フラットで軽やかに見せる
• 形: 写真ブロックは右上（または左上）の一角だけを大きく角丸にする。ボタンは下線リンク型が中心
• 温度感: やや涼しめ。自然光の写真で温度感を足す

Colors

• 地は白と淡ミントの 2 色を交互にしてセクションを区切る
• セクション見出しの欧文はすべてグリーン。News だけオレンジにしてアクセントにする
• 本文は純黒を避け、焦げ茶グレーを使う
• グリーンの面塗りは主 CTA と、ファーストビュー背後の帯だけに限る
• 写真の上の文字は白にし、写真の暗い部分に置く
• 白地には薄いベージュの葉っぱ地紋を敷き、ミント地は無地にする
• button-primary は文字 #FEFEFE × 背景 #029D3B のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#028632、4.67:1）を使う。
• button-outline は文字 #089439 × 背景 #FEFEFE のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#078834、4.55:1）を使う。

Typography

• 見出しは大きな欧文と小さな和訳の 2 段組みにし、中央に揃える
• 欧文は丸みのあるジオメトリック系サンセリフにする
• 本文は小さめにし、行間を 1.8 程度まで広げる
• 写真の上の見出しは白い 2 行の和文にし、左下に置く
• 特長の番号は写真の左上に白で大きく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（周辺の宿泊施設リストのみ、サムネイル＋テキストの横並び）
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は左右 8px ほどの余白を残してほぼ全幅に置く
• コンセプト写真は片側を画面端まで出し血抜きにする
• 特長カードは写真、説明文、中央の下線リンクの順に縦に積む
• セクションの冒頭には中央揃えの見出しブロックを置く
• ギャラリーは全幅の横スクロール帯にする

Elevation & Depth

• 影はほぼ使わずフラットにする
• 奥行きは写真の重なりと背後の色帯で出す
• 地図の吹き出しだけに軽い影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の写真の右上一角だけを大きく角丸にする。部屋カードは左右の角を交互に丸める
• セクション境界: 直線で切り替え、地色の違いで区切る
• 角丸は写真の 1〜2 角だけに限り、全角丸にはしない
• CTA ボタンは小さめの角丸長方形にする
• More ボタンは緑の細線で囲んだ四角にする

Components

• 欧文＋和訳見出し（section-heading）: 大きな緑の欧文の下に、小さな和訳を中央揃えで置く
• 番号付き特長カード（feature-card）: 片側だけ角丸の写真に、白の番号と 2 行の見出しを重ね、下に本文と下線リンクを置く
• 下線リンク（link-underline）: 緑文字の横に丸矢印アイコンを付け、下に緑の細線を引く
• 部屋の写真バナー（room-banner）: 横長の写真の左に大きな白い欧文、右下に白い下線リンクを置く
• 観光スポットカード（spot-card）: 写真の下に太字のタイトル、緑の下線、省略付きの短い説明文を並べる
• メール問い合わせボタン（button-primary）: 緑の面に白文字とメールアイコンを置く
• More ボタン（button-outline）: 白地を緑の細線で囲み、三角アイコンと文字を入れる
• お知らせリスト（news-list）: 緑の日付とタイトルを 2 行にし、区切り線を入れ、枠内でスクロールさせる
• 左縦線付きの小見出し（access-subheading）: 左に緑の縦線を引いた太字の小見出しにする

Do's and Don'ts

Do - 白地とミント地を交互に使ってリズムを作る - 写真は明るく彩度の高い晴天の自然光のものを使う - 見出しは欧文と和訳のペアで統一する - リンクは下線と矢印アイコンの型で揃える - 白地に淡い葉っぱの地紋を敷く

Don't - 写真の 4 角すべてを丸めない - グリーン以外の強い色を見出しに使わない（オレンジ 1 箇所まで） - 濃い影やグラデーションのボタンを使わない - 本文を大きく太くしすぎない - 暗いトーンの写真を並べない

Page Structure

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

1. ファーストビュー（客室や施設の魅力を一目で伝える）: 片側角丸の大きな写真の背後に緑の帯をずらして重ね、上部にロゴとメニューを置く
2. お知らせ（最新情報を伝える）: オレンジの欧文見出しに横線を添え、日付付きのリストを並べる
3. キャンペーンバナー（割引プランへ誘導する）: 横スライドのバナーにし、前後のバナーを少しのぞかせる
4. コンセプト（施設の全体像を伝える）: ミント地に空撮写真を置き、緑の欧文見出し、2 行キャッチ、本文の順に並べる
5. 特長（6 つの強みを示す）: 番号付きの写真カードを縦に積み、各カードに下線リンクを付ける
6. お部屋（宿泊タイプ別のページへ誘導する）: ミント地に、欧文の部屋名を重ねた横長の写真バナーを 4 枚並べる
7. 周辺観光（滞在の付加価値を示す）: 写真、タイトル、緑の下線、抜粋文のカードを縦に並べ、最後に一覧リンクを置く
8. イベント（季節の催しを告知する）: 観光スポットと同じカード型にする
9. ギャラリー（雰囲気を写真で伝える）: 全幅の写真帯の下に More の枠線ボタンを置く
10. グループ施設（関連施設を紹介する）: 全幅の写真の下に施設紹介文とリンクを置き、続けてサムネイル付きの施設リストを並べる
11. アクセス（所在地と行き方を示す）: ミント地に地図、施設概要表、交通手段、場内図、番号付きのチェックイン写真を順に並べる
12. フッター（回遊と問い合わせ）: 3 列のテキストメニューの下に緑の問い合わせボタンとコピーライトを置く

Imagery

• 晴天の青空と芝生の緑が映える、高彩度の屋外写真を使う
• 客室は木目や革など温かい素材を見せ、明るく撮る
• 敷地の広さはドローンの空撮で見せる
• 料理は寄りのアングルで温かみのある色に撮る
• 装飾は線画の葉っぱモチーフを地紋として淡く敷き詰める
• 案内写真にはオレンジの矢印と番号バッジを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は特長カードを 2 カラムのグリッドにする
• PC のコンセプトは写真左・文章右の横並びにする
• PC のお部屋は 2×2 にし、部屋名の欧文を縦書きにする
• PC の観光スポットとイベントは 3 カラムのカードにする
• PC のヘッダーは横並びメニューにし、右端にオレンジの予約ボタンを置く
• PC の本文幅はおよそ 80% で中央に寄せる

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