---
version: alpha
name: Fresh Green Seaside Glamping Resort LP
description: 白地と淡いミント地を交互に重ね、鮮やかなグリーンの欧文見出しで区切る宿泊施設 LP。写真は片側だけを大きく角丸にして、のびやかなリゾート感を出す。オレンジは News 見出しや矢印など、要所のアクセントだけに使う。
colors:
  primary: '#089439'
  background: '#FEFEFE'
  background-alt: '#EAF5ED'
  text: '#453A2F'
  secondary: '#029D3B'
  cta: '#029D3B'
  on-cta: '#FEFEFE'
  accent-1: '#D27236'
  line: '#5DBB7A'
  tint-1: '#FEFEFC'
  accent-2: '#2E9E4A'
  on-dark: '#FEFEFE'
  cta-accessible: '#028632'
  primary-accessible: '#078834'
typography:
  display:
    fontFamily: Lexend
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Lexend
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.05em
  accent:
    fontFamily: Lexend
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.0
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.05em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.03em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
rounded:
  sm: 4px
  md: 8px
  lg: 40px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-heading:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 70px
  feature-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 300px
  link-underline:
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 28px
  room-banner:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 95px
  spot-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 260px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 32px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 22px
  news-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 80px
  access-subheading:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 18px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#089439` | 欧文セクション見出し・リンク文字 | 2% | 画素の実測 |
| `background` | `#FEFEFE` | 基本の白地 | 45% | 画素の実測 |
| `background-alt` | `#EAF5ED` | コンセプト・お部屋・アクセスの淡ミント地 | 20% | 画素の実測 |
| `text` | `#453A2F` | 見出し・本文の焦げ茶グレー | 4% | 画素の主要色に補正 |
| `secondary` | `#029D3B` | ファーストビュー写真背後の濃緑帯 | 2% | 画素の実測 |
| `cta` | `#029D3B` | メール問い合わせボタン | 0% | 画素の実測 |
| `on-cta` | `#FEFEFE` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#D27236` | News 見出しのオレンジ | 0% | 画素の実測 |
| `line` | `#5DBB7A` | カード見出しの下線・区切り線 | 0% | 推定 |
| `tint-1` | `#FEFEFC` | 葉っぱ地紋のベージュ | 2% | 画素の実測 |
| `accent-2` | `#2E9E4A` | 日付文字の緑 | 0% | 推定 |
| `on-dark` | `#FEFEFE` | 写真上の白い番号と見出し | 0% | 画素の主要色に補正 |
| `cta-accessible` | `#028632` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#078834` | AA を満たす補正値（計算） |  | 計算 |

- 地は白と淡ミントの 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

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 欧文セクション見出し | 欧文サンセリフ | Lexend | 600 | 32px | 1.2 | 0.02em |
| `headline-lg` | 写真上の部屋名などの欧文 | 欧文サンセリフ | Lexend | 600 | 28px | 1.2 | 0.0em |
| `headline-md` | 和文の小見出し・特長セクションのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.6 | 0.05em |
| `accent` | 特長の番号 | 欧文サンセリフ | Lexend | 600 | 26px | 1.0 | 0.0em |
| `headline-sm` | 欧文見出し下の和訳・カードタイトル | ゴシック | Zen Kaku Gothic New | 700 | 11px | 1.6 | 0.05em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 9px | 1.8 | 0.03em |
| `label-button` | 下線リンクとボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 9px | 1.4 | 0.08em |

- 見出しは大きな欧文と小さな和訳の 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

```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-6909df91`（元 LP の URL から採番）
- **元 LP**: https://glamping.ako-autocamp.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。