DESIGN.md — 淡い青と生成りの離島観光クーポン LP（Pastel Island Resort Travel Campaign LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 清潔・爽やか、上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: 離島の絶景・淡いパステル地・明朝×筆記体・写真主役・クーポン券・旅情
• 地の質感: 水彩のにじみやボタニカル線画を薄く敷いた、紙のようにやわらかい地。写真はシャープで色鮮やか。
• 形: 四角い写真に白い文字カードをずらして重ねる。円形の吹き出し、アーチ型の見出し台、切り欠きのあるクーポン券。
• 温度感: やや涼しめ。水色と生成りが中心で、ピンクとマゼンタが温かみを足す。

Colors

• セクションごとに地色を変える：導入は灰青、絶景・グルメは生成り、アクティビティは淡い水色。
• 強調色はマゼンタピンク1色に絞り、筆記体英字と目的地マーカーだけに使う。
• クーポン枠は宿泊=薄ピンク、パック=薄ラベンダーで種類を色分けする。
• 取得済み・終了状態のクーポンは暗いグレーの半透明で覆う。
• 予約系ボタンは濃紺、最終の検索ボタンだけ赤にして目立たせる。
• 写真の上には色をかぶせず、写真の色をそのまま見せる。
• coupon-ticket は文字 #068D06 × 背景 #FDFEFD のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#068806、4.58:1）を使う。
• coupon-tab は文字 #FFF3F2 × 背景 #BC67A8 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AC4C95、4.58:1）を使う。

Typography

• 大見出しは明朝の細字で、字間を少し広げる。
• 大見出しには必ずピンクの筆記体英字を斜めに重ねる。
• 本文は中央揃えか左揃えのゴシック体。行間は1.8前後で広めにとる。
• クーポン・フォーム部分は太字ゴシックで実務的にまとめる。
• 金額・所要時間の数字は大きくし、セリフ体のマゼンタで目立たせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と文字カードを左右交互にずらして重ねる
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• 写真は画面端まで寄せ、白い文字カードを下に重ねて非対称にずらす。
• スポット紹介は左右交互の配置にする。
• 写真の脇に上下矢印の縦スクロールインジケーターを置く。
• クーポンは白い枠の中にまとめた縦長の箱にする。
• セクション見出しは、写真の下から点線の縦線を引いて円弧に入れる。

Elevation & Depth

• 基本は影を使わずフラットにする。
• クーポン券カードだけごく弱いドロップシャドウをつける。
• 重ねた文字カードは影ではなく白地とのずれで奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 基本は四角。グルメは片側だけ角を大きく丸める。アクティビティは台形状に傾けて切り抜く。補足写真は円形にする。
• セクション境界: 直線で地色を切り替える。見出し部分はアーチ型の台座と大きな円弧で区切る。
• クーポンは左右に半円の切り欠きがあるチケット型にする。
• クーポン切替タブは両端がくの字に切れた札型にする。
• スイーツ・土産は上部がアーチに膨らむ点線枠のカードにする。
• 吹き出しは淡い水彩の円形にする。

Components

• 円弧付きセクション見出し（section-heading-arc）: 点線の縦線と円弧の下に明朝の見出しを置き、ピンクの筆記体英字と水彩のにじみを重ねる。
• 重ね文字カード（spot-card）: 写真に重ねる白いカード。灰青のキャッチ帯、見出し、本文の順に並べる。
• 斜線付きキャッチ帯（catch-band）: 両端に短い斜線を入れた帯。明朝の小さな文字を中央に置く。
• クーポン券（coupon-ticket）: 左右に切り欠きがある白いチケット。緑の大きな金額と取得リンクを載せる。
• クーポン切替タブ（coupon-tab）: 紫ピンクの札型タブ。2つ並べ、下向き矢印をつける。
• 商品一覧ボタン（button-navy）: 濃紺の角丸ボタン。右端に矢印をつける。
• 検索ボタン（button-primary）: フォーム末尾に置く横幅いっぱいの赤ボタン。
• 手順番号（step-number）: 白い水彩の円に筆記体風の数字を入れ、図と短い説明を横に並べる。
• 円形吹き出し（bubble-circle）: 写真の角に重ねる淡い水色の円。明朝の短いフレーズを入れる。
• 空室検索フォーム（search-form）: 灰色の線で囲んだ枠。ラジオボタン、日付、人数、エリアを縦に並べる。

Do's and Don'ts

Do - 写真は大きく使い、鮮やかな風景の色を活かす。 - 見出しには明朝とピンクの筆記体をセットで使う。 - 地色は淡いパステル系だけにして、セクションごとに切り替える。 - 写真とカードはずらして重ね、余白を広くとる。 - 水彩のにじみやボタニカルの線画を背景に薄く敷く。

Don't - 濃いベタ塗りの背景を広い面積に使わない。 - マゼンタピンクを本文やボタンの面に使わない。 - 太い角ゴシックの見出しで鑑賞パートの品を崩さない。 - 写真の上に強い色の帯や文字を重ねない。 - 全セクションを同じ地色にしない。

Page Structure

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

1. ファーストビュー（旅先の魅力を一目で伝える）: 海の写真を全面に敷き、細い欧文タイトル、明朝の地名、短いキャッチを白で重ねる。
2. アクセス概要マップ（都心からの近さを示す）: 淡い地図に目的地をマゼンタで示し、所要時間を大きな数字で添える。
3. 導入文（旅の情緒を語る）: 中央揃えの明朝見出しと本文。下に小さな写真3枚を散らし、空と海の写真へつなぐ。
4. ページ内ナビ（各セクションへ移動させる）: 白地に和文と薄い英字を重ねたリンクを、縦線で区切って2段に並べる。
5. クーポンキャンペーン（割引で予約を後押しする）: 二重線の白枠に、切替タブ、色分けしたクーポン枠、チケット型カード、濃紺ボタンを並べる。
6. クーポンの使い方（利用手順を示す）: 番号円、図、短い説明を横に並べた4ステップを、区切り線と下向き三角でつなぐ。
7. 絶景紹介（見どころを情緒的に伝える）: 生成り地に大きな写真を置き、重ね文字カードを左右交互に配置する。
8. グルメ（郷土料理の魅力を伝える）: 角丸写真のスライダー、濃グレーのキャッチ帯、見出し、本文の順。円形の補足写真を添える。
9. スイーツ・お土産（買い物の楽しみを伝える）: アーチ頭の点線カードにリボン型見出しを置き、写真に縦書きの品名を重ねる。
10. アクティビティ・温泉（体験の魅力を伝える）: 水色地に傾けた写真のスライダーを置き、大きな白い円に説明、円形吹き出しを重ねる。
11. アクセス（交通手段を案内する）: 地図を埋め込み、アイコン付きの見出しと点線下線で交通手段ごとの所要時間を並べる。
12. 空室検索（予約へ進ませる）: 線で囲んだフォームを置き、最後に赤い検索ボタンを横幅いっぱいに配置する。
13. 問い合わせ・広告主（運営情報を示す）: 灰色の見出し行がある罫線の表。

Imagery

• 透明度の高い海、星空、夕景など、彩度の高い風景写真を使う。
• 人物は後ろ姿や小さなシルエットにして、風景を主役にする。
• 料理は寄りで暖色の照明、浅い被写界深度で撮る。
• 背景にグレーのボタニカル線画や水彩のにじみを淡く敷く。
• 手順やアイコンは単色のシンプルなピクトグラムにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の約900px幅にまとめ、背景のボタニカル柄を左右に見せる。
• PC の導入は、地図を左、文章を右の2カラムにする。
• PC のスポット紹介は、写真を横長にして文字カードを右下・左下に重ねる。
• PC のクーポン券は2列、手順は横4列に並べる。
• PC のフォームはラベルと入力を横2列で並べる。

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