DESIGN.md — 白地と深海色の静謐な海辺リゾートホテル LP（Minimal Seaside Luxury Resort LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 上品・高級、シンプル・ミニマル、清潔・爽やか、ナチュラル
• キーワード: 余白・海の写真・細身セリフ・明朝・手書き筆記体・静謐
• 地の質感: フラットな白地。質感は写真の水しぶきや砂浜が担う
• 形: 角を残した矩形写真、写真を互い違いに散らしたコラージュ、円形の切り抜き1つと円弧に沿った文字
• 温度感: やや涼しい。白と青緑で海風のような温度

Colors

• 地はほぼ全面を白にし、色は写真に任せる
• UI の色は黒〜グレーの無彩色だけにする
• 深い青緑は筆記体や円弧文字など装飾だけに使う
• 特長スライダーの背面だけに淡いグレーベージュの帯を敷く
• 原色の CTA は置かない。予約は白いタブと黒文字で控えめに見せる

Typography

• 英字見出しは細身セリフで大きく、和文は明朝で添える
• 見出しの上に「番号 / 和文ラベル」を小さく置く
• 和文は字間を 0.1em ほど空けてゆったり組む
• 太字は使わず、文字サイズの差で階層をつける
• 筆記体の英字を見出しの下に斜めに重ね、余韻を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右へずらし、端まで出すものもある
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 110px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション間は 100px 以上空ける
• コンセプトの写真は大きさの違う 3〜4 枚を互い違いに散らす
• アクティビティは写真を左寄せ・右寄せと交互にずらす
• 見出しは中央揃え、本文は左揃え
• 特長は横スライダーにし、隣のカードを少し見せる

Elevation & Depth

• 影は基本的に使わない
• 奥行きは写真の重なりと余白で出す
• 予約タブは FV 写真の下端に白い面を重ねて浮かせる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形が基本。スライダー内のカードだけ小さい角丸。締めの写真は正円に切り抜く
• セクション境界: 直線や余白で切り替え、波形などの装飾は使わない
• ヘッダーのアイコンは細線の円で囲む
• 円弧に沿わせた英字を写真の角に重ねる
• 装飾は線と円だけにする

Components

• 予約タブ（reserve-tab）: FV 下端に重ねる白いタブ。カレンダーアイコンと和英併記の文言を入れる
• 円形ヘッダーアイコン（header-icons）: 細線の円で囲んだメールアイコンと、濃色の丸に載せたハンバーガーメニュー
• 番号付き英字見出し（section-heading）: 上に「02 / 和文」のラベル、下に大きな細身セリフの英字を置く
• 筆記体の飾り（script-overlay）: 見出しに斜めに重ねる深海色の筆記体
• 特長スライダー（feature-slider）: 縦写真のカードの横に縦書きの「Feature 0X.」を添える。下に矢印と一時停止ボタン
• 円弧テキスト（circular-text）: 地名などの英字を円弧状に並べ、写真の角にかぶせる
• アクセスのアコーディオン（accordion）: 上下に細線を引いた行。左に明朝の項目名、右に細い＋を置く
• モノクロ地図（map-gray）: グレースケールの埋め込み地図。下にピンアイコンと地図へのリンクを置く

Do's and Don'ts

Do - 余白は贅沢にとる - 英字見出しは細身セリフ、和文は明朝で揃える - 写真は海・水・光の質感がわかるものを大きく使う - UI は無彩色にとどめ、色は写真に任せる - セクション番号を振って、章立てのように順に見せる

Don't - 鮮やかな色の大きな CTA ボタンを置かない - 太いゴシック・極太文字を使わない - 影・グラデーションのボタンや派手なバッジを使わない - 文字や情報を詰め込まない - イラストやアイコンを多用しない

Page Structure

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

1. ファーストビュー（世界観と開業時期を伝える）: 全面に海の俯瞰写真。中央に細身セリフの大きなロゴ、下に開業時期の小さな英字、下端に予約タブ
2. コンセプト（立地の価値と非日常感を伝える）: 英文キャッチに筆記体を重ね、和文キャッチを3行で置く。写真を散らしたコラージュと短い本文
3. 客室（部屋の魅力を伝える）: 英字見出し、全幅に近い写真のスライド、明朝の小見出しと本文
4. 特長スライダー（設備の特長を並べて見せる）: 淡い帯の上に縦写真カードを横に並べ、縦書きの番号と短い説明を添える
5. アクティビティ（その土地ならではの体験を見せる）: 全幅写真と見出しの後、写真＋英字名＋本文のブロックを左右交互に置く。円弧文字を添える
6. アクセス（所在地と行き方を伝える）: 住所、モノクロ地図、地図へのリンク、交通手段ごとのアコーディオン
7. 締めのメッセージ（余韻を残す）: 和文1行と英訳を小さく置き、円形写真にロゴマークを重ねる
8. フッター（施設情報を載せる）: 円の中にロゴマーク、施設名、住所、電話番号、コピーライトを中央揃えで

Imagery

• 海の俯瞰・水しぶき・波打ち際などを自然光で撮る
• 人物は後ろ姿や小さなシルエットにとどめる
• 客室は白基調の広角写真で、窓の外に海を入れる
• 彩度は自然なままにし、青緑と砂色を基調にする
• 装飾は筆記体の英字・円弧文字・細線のアイコンに限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダー中央に英字のナビを横に並べ、右下に予約タブを置く
• PC のコンセプトは本文の左右に写真を散らすコラージュにする
• PC の客室・アクティビティは写真とテキストの 2 カラムを左右交互にする
• PC の特長スライダーはカードを 4〜5 枚同時に見せる
• 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 行書くと起動時に読み込まれる。