DESIGN.md — 生成り×4色テーマの南国エシカル旅行 LP（Soft Coral Ethical Island Travel LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: やさしい・柔らかい、上品・高級、ナチュラル、親しみ・手作り感
• キーワード: 生成りグラデーション・4色カテゴリ・欧文セリフ見出し・縦書き明朝・波形切り抜き写真・筆記体の装飾文字
• 地の質感: ざらっとした紙のような淡いノイズ地。ヤシの葉の薄い影を重ね、セクションごとに地の色をほのかに変える
• 形: 角丸カード、花びらのような波形マスクの写真、波打つセクション境界
• 温度感: 暖かい。肌色・砂浜色がベースで、テーマ色は彩度を少し落としている

Colors

• 地は生成り #FCF3EC を基本に、テーマごとに緑・ピンク・黄・オレンジを淡く混ぜたグラデーションを敷く
• 4テーマにそれぞれ1色を割り当て、英字見出し・小見出し・番号・プランボタンを同じ色でそろえる
• 主 CTA は全体基調のテラコッタオレンジ。テーマ内のボタンだけテーマ色にする
• 本文は純黒を使わず濃いグレー。英字ラベルは基調色を薄く、字間を広く
• クーポン・注意書きはベージュ地で分け、券面だけ白カードにする
• button-primary は文字 #FFFFFE × 背景 #D88038 のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B06223、4.55:1）を使う。
• button-theme は文字 #FFFFFE × 背景 #4C9D7D のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#3F8267、4.56:1）を使う。
• link-card は文字 #FFFFFE × 背景 #EDB294 のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C05620、4.57:1）を使う。
• coupon-ticket は文字 #4C9D7D × 背景 #FDFDFD のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#3F8267、4.6:1）を使う。
• category-nav は文字 #FFFFFE × 背景 #4C9D7D のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#3F8267、4.56:1）を使う。

Typography

• 英字大見出しは細めのセリフ体の大文字で、2行に分けて組む
• テーマ名とキャッチは縦書き明朝で写真の横に置く
• 見出しは明朝、本文・情報はゴシックと使い分ける
• 英字の小ラベル（MOVIE / COUPON など）は 11px ほどで字間 0.3em 以上
• スポット番号は小さな英字ラベル＋大きめのセリフ数字の2段にする
• カード名の下に斜線ハッチのマーカーを薄く敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スポットカードは横スライダー
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは左右 10% 前後の余白をとる
• スポットカードは次のカードを右端に少しのぞかせて横スクロールを示す
• テーマの導入は英字見出し＋波形写真＋縦書きテーマ名＋2行の導入文
• テーマの最後に色付きのプラン帯（筆記体の飾り文字＋見出し＋ボタン）を置く
• フォームと問い合わせ表は装飾を抑えた白基調で最下部に置く

Elevation & Depth

• CTA ボタンの下側だけに、ずらした薄い影（0 3px 0 rgba(0,0,0,.15)）をつける
• クーポン券カードはごく薄いぼかし影で浮かせる
• スポットカードは影なしで、写真の角丸と地色の差だけで区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: テーマ導入の写真は花びらのような不定形の波形マスク。カード写真は角丸 16px で、片側の角に番号タブを重ねる
• セクション境界: ゆるいサイン波の曲線で地色を切り替える
• CTA は角丸 6〜8px の横長長方形にし、右端に細い矢印を添える
• 番号タブは白地で角丸、写真の上の角に食い込ませる
• 小見出しは写真の下端にかかる白いタブの中に入れる
• SNS 検索窓だけピル型にする

Components

• 主 CTA ボタン（button-primary）: オレンジ地に白い明朝の文字、右端に細い長矢印。幅はコンテンツ幅いっぱい
• テーマ別プランボタン（button-theme）: 主 CTA と同じ形で、色だけテーマ色に替える
• 上部が丸いリンクカード（link-card）: サーモン地で上端が半円に盛り上がった2枚並びのカード。アイコン・2行ラベル・矢印を入れる
• 細線つき英字ラベル（section-label）: 中央に字間の広い英字、左右に細い横線。下に明朝の日本語見出しを置く
• スポット紹介カード（spot-card）: 角丸の写真＋番号タブ＋左右の丸い送りボタン、テーマ色の小見出し、ゴシックの名前、本文。点線で区切って施設名と住所アイコン行を並べる
• クーポン券カード（coupon-ticket）: 白いカードの左右に半円の切り欠き。左上に緑の小バッジ、緑の大きな数字で割引額、下段に獲得リンク
• 4色カテゴリナビ（category-nav）: 4テーマ色の正方形タイルを横一列に並べる。白い線画アイコンと小さなラベル入り
• アウトラインのサブボタン（outline-button）: 白地に黒枠の小ボタン。外部リンクアイコンつき
• 点線枠の注意書き（notice-box）: ベージュ地に灰色の点線枠、中央揃えの小さな注意文

Do's and Don'ts

Do - 4テーマの色を見出し・番号・小見出し・ボタンで一貫させる - 導入写真は波形マスクで切り抜き、キャラクターイラストを端に重ねる - 英字セリフ見出しと縦書き明朝を組み合わせ、上品な余白をとる - 地は純白にせず、生成りに各テーマ色を淡く混ぜたグラデーションにする - プラン帯の背景に筆記体の飾り文字を大きく薄く置く

Don't - 彩度の高い原色や純黒を広い面に使わない - 太いゴシックの見出しや派手な影で売り込み感を出さない - テーマ色を1テーマの中で混ぜて使わない - 写真を四角いまま縁なしで並べない（角丸か波形にする） - セクション境界を直線だけで区切らない

Page Structure

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

1. ファーストビュー（旅の雰囲気と世界観を一目で伝える）: 写真を縦に分割して並べ、白い縦書き明朝の短いキャッチを重ねる
2. コンセプト紹介（旅の考え方を伝える）: 大きな英字セリフ見出し、左に本文、右に縦書きのキャッチ。地図のシルエットと切り抜き写真を添える
3. 関連リンク（公式サイトや資料への導線）: 筆記体の飾り文字を添え、上部が丸いサーモンのカードを2枚並べる。下にピル型の SNS 検索窓
4. 動画（体験イメージを動画で見せる）: 細線つき英字ラベルの下に 16:9 の動画を置く
5. クーポン（特典の提示と予約への誘導）: ヤシの葉の影を敷いたベージュ地。期間表、注意書き、白い券カード、オレンジの主 CTA を並べる
6. カテゴリナビ（4テーマへのジャンプ）: 4色の正方形タイルを横一列に並べる
7. テーマ別スポット紹介（×4）（テーマごとの体験・施設を紹介する）: テーマ色の英字見出し＋波形写真＋縦書きテーマ名。その下に番号つきスポットカードのスライダー
8. テーマ別プラン帯（×4）（テーマに合う宿泊プランへ送る）: 波形境界の淡いテーマ色の帯に、筆記体の飾り文字、明朝の見出し、テーマ色ボタン
9. 注意書き（情報の時点と変更の可能性を伝える）: ベージュ地の点線枠
10. アクセス（所在地を地図で示す）: 珊瑚イラストを添えた英字＋明朝の見出しの下に、埋め込み地図
11. 空室検索フォーム（その場で予約検索させる）: 白い枠のフォーム。ラジオボタン、日付、セレクト、赤い検索ボタン
12. 問い合わせ・運営者（問い合わせ先と運営者を示す）: 灰色の見出しセルを持つシンプルな罫線表

Imagery

• 自然光の明るい旅行写真。人物は自然体で、ゆったりした服装で過ごす様子を撮る
• テーマ導入の写真は不定形の波形マスクで切り抜き、背面に同系色の影をずらして重ねる
• ハイビスカス・貝殻・シーサー・カカオなどの切り抜き素材をセクションの境目に散らす
• 民族衣装を着たゆるいマスコットのイラストを写真の角に重ね、テーマに合う小道具を持たせる
• 背景にヤシの葉の薄い影や、筆記体の英字を透かして重ねる
• カテゴリには白い線画アイコンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 75% に収め、背景グラデーションは全幅に広げる
• PC のスポットカードは写真と本文を横に並べ、行ごとに左右を入れ替えるジグザグ配置にする
• PC のテーマ導入は、縦書きテーマ名と縦書き導入文を写真の左右に分けて置く
• PC の FV は写真4枚を横に並べる
• PC の空室検索フォームは2列でコンパクトに組む
• 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 行書くと起動時に読み込まれる。