DESIGN.md — ターコイズ×イエローの夏リゾートホテル LP（Summer Ocean Resort Pop LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感
• キーワード: 夏休み・海辺・家族・ターコイズ・イエロー・手書き風
• 地の質感: 白地が中心。写真の背面にドットや斜線のハッチングを敷いて軽い手作り感を出す
• 形: 角丸の写真、ピル型ボタン、正円の装飾、波形の区切り線、斜めにカットしたヒーロー写真
• 温度感: 明るく暖かい夏の昼。海の青と太陽の黄を対にする

Colors

• 地は白を基本にする。ホテル紹介はターコイズの帯、締めの帯は淡い水色の地にする
• 見出しはすべてターコイズにする。濃い背景は使わない
• 主ボタンはイエロー地に黒文字。サブのボタンだけターコイズ地にする
• 装飾の丸はイエローとターコイズの塗り、オレンジの線を混ぜて使う
• キャッチの強調語はターコイズ文字にし、黄色のマーカーを下に敷く
• button-secondary は文字 #3A3B3E × 背景 #0CA5AE のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0DB7C1、4.57:1）を使う。
• icon-nav は文字 #0CA5AE × 背景 #FFFFFF のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0DB7C1、4.54:1）を使う。
• brand-band は文字 #FAFEFE × 背景 #49A6B7 のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#377F8C、4.52:1）を使う。

Typography

• 体験の見出しは細めの手書き風ゴシックで大きく組み、下にターコイズの筆記体欧文を添える
• 本文は行間を広めに取り、読みやすく組む
• 導入文は短い行で区切り、行の間をさらに広く空ける
• 最後の帯だけは明朝にして、ブランドとしての格を出す
• 開催日は見出しのすぐ下に本文サイズで置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文章を左右に振り分ける 2 カラムで、左右を交互に入れ替える
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出し→日付→本文→ボタン→写真の順で積む
• 写真は本文より少し広く取り、地紋が左右にはみ出してよい
• 写真を 2 枚重ねるときは、斜めにずらしてオーバーラップさせる
• アイコンの目次は 4 列のグリッドにする
• 波形の区切り線を目次の上と下に入れる

Elevation & Depth

• 影はほぼ使わずフラットにする
• 奥行きは、写真の背面にずらして敷いたドットや斜線の地紋で出す
• 写真の重なりには影を付けない

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸 12px の長方形。ヒーローは斜めにカットした多角形、ホテル紹介は正円
• セクション境界: 淡い水色の山が並ぶ波形
• ボタンはピル型。右端の白い円の中に矢印を入れる
• 写真のまわりに大小の正円を 2〜3 個散らす
• ヒーロー写真は右上と左下を斜めに落とす
• 地紋の面も写真と同じくらいの角丸にする

Components

• 詳しく見るボタン（button-primary）: イエローのピル型。左に文字、右端の白い円に黒い矢印を入れる
• サブボタン（button-secondary）: 形は主ボタンと同じで、色だけターコイズにしたもの
• 体験見出し（heading-feature）: ターコイズの和文の見出しの下に、筆記体の欧文を小さく添える
• マーカーキャッチ（catch-marker）: 手書き風の 2 行コピーを少し斜めに置き、黄色の帯を下に敷く
• アイコン目次（icon-nav）: フラットなイラストのアイコンとターコイズのラベルを 4 列に並べ、ページ内リンクにする
• 地紋付き写真（photo-pattern）: 角丸の写真の背面に、ドットか斜線の地紋をずらして敷く。周りに丸い装飾を添える
• 波形区切り（wave-divider）: 淡い水色の山形を横に 4 つ並べる
• ホテル紹介帯（brand-band）: ターコイズの帯に、白い欧文名と紹介文、正円の空撮写真、黄色のボタンを縦に 3 つ並べる

Do's and Don'ts

Do - ターコイズとイエローの 2 色を軸に、白地を広く残す - 写真には必ず角丸と、ずらした地紋を付ける - 体験ごとに同じ構成をくり返して、情報を揃える - 装飾の丸は、塗りと線を大小混ぜて散らす - ボタンには必ず円の中の矢印を付ける

Don't - 黒やネイビーの重い背景を多用しない - 角ばった四角いボタンにしない - 見出しを太い角ゴシックにしない - 写真に強い影を付けない - 彩度の低いくすんだ色を混ぜない

Page Structure

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

1. ヘッダー（メニューとロゴの表示）: 白地。両端にオレンジのハンバーガーアイコン、右にロゴを置く
2. ファーストビュー（夏のバカンスの世界観を見せる）: 斜めにカットした家族の写真に、白抜き+影付きの欧文タイトルと筆記体を重ね、丸い装飾を散らす
3. 導入（旅の魅力を情緒的に伝える）: マーカー付きの手書き風キャッチを置き、短い行の本文を広い行間で組む
4. 楽しみ方の目次（体験の一覧とページ内リンク）: 波形の区切り線で挟み、アイコンを 4 列のグリッドで並べる
5. 体験紹介（くり返し）（各イベント・施設の詳細）: 見出し+欧文→日付→本文→黄色のボタン→地紋付き写真の順。7 つほどくり返す
6. ホテル紹介（ブランドと予約への導線）: ターコイズの帯を波形で挟み、正円の写真と黄色のボタンを 3 つ置く
7. アクセス（所在地を示す）: ターコイズの欧文見出しの下に、住所と横幅いっぱいの地図を置く
8. ブランドバナー（グループの他施設へ誘導する）: 淡い水色の地に明朝の見出しを置き、枠線で囲んだ画像付きのバナーを入れる
9. フッター（注釈とリンク）: 小さな注釈、縦線で挟んだリンク、グレー帯のコピーライト

Imagery

• 晴天の海辺で家族が遊ぶ、明るく彩度の高い写真
• 夜の花火や夕暮れのテラスで、時間帯の変化を見せる
• 料理は真上からにぎやかに撮る
• アイコンはターコイズ・イエロー・オレンジのフラットなイラスト
• 装飾として正円、ドット、斜線のハッチング、波形を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は体験紹介を写真と文章の 2 カラムにし、左右を交互に入れ替える
• PC のアイコン目次は 4 列×2 行の横長にする
• PC のホテル紹介は、文章を左、正円の写真を右に置き、ボタン 3 つを横に並べる
• PC のファーストビューは横長の写真を斜めにカットし、欧文タイトルを 1 行にする
• 本文の幅は PC では約 40% に抑える

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