DESIGN.md — 水色と若草のエリア色分け観光グルメLP（Island Gourmet Travel Coupon LP with Area Color Bands）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ナチュラル、親しみ・手作り感、清潔・爽やか、情報量多め・訴求型
• キーワード: エリア色分け・不定形の写真切り抜き・手描きイラスト・縦書きの写真キャプション・クーポン訴求・旬カレンダー
• 地の質感: 地色にうっすら紙のような粒状ノイズをのせる。白地はフラット。境界は波線や山並みの手描き風カーブ
• 形: 写真は有機的なブロブ形と丸形。カードは角丸12px前後。ボタンはピル型
• 温度感: 明るく暖かい。水色の爽やかさと、サーモンやクリームの温かみが混ざる

Colors

• 基本は白地。エリアのセクションごとに若草・水色・サーモン・クリームの地色に切り替える
• 店名の見出し色は、そのエリアの色を濃くした色にそろえる（緑・青・オレンジ・黄土）
• 主CTAは青のピル型。オレンジは一覧へ誘導するサブCTAに限って使う
• クーポン金額は緑の太字で、白いチケット型カードにのせる
• キャンペーン帯は黄色地にターコイズのボタンを置き、ほかと分けて目立たせる
• 店舗情報はベージュの面にまとめ、本文と区別する
• button-secondary は文字 #FFFFFF × 背景 #FE7A14 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C25501、4.57:1）を使う。
• coupon-ticket は文字 #0B880B × 背景 #F5F1E6 のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#0A7F0A、4.59:1）を使う。
• season-calendar は文字 #2A8FD0 × 背景 #D3EEF9 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#216FA1、4.51:1）を使う。

Typography

• 大見出しは明朝にする。エリア名は大きな漢字のあとに『エリア』を小さく続ける
• 見出しの一部の語だけ青・オレンジの手書き風フォントで差し色にする
• 見出しの背景に、薄い筆記体の英字を透かしで重ねる
• 写真の右上に、白帯に明朝の縦書きキャプションを重ねる
• 本文は14px前後。行間を1.8と広めにとる
• クーポン金額は数字を極太・特大にし、『円OFF』は小さめにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。プランカードだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• エリアは毎回『地色帯の紹介 → 白地の飲食店リスト → 観光スポットカード』の順に繰り返す
• 飲食店は『写真 → 店名 → 本文 → 情報ボックス＋丸い店舗写真』の縦積みにする
• 観光スポットのカードは白で、地色の上に浮かせる
• クーポンはチケット型カードを縦に並べる
• CTA は画面幅の80%で中央に置く

Elevation & Depth

• プランカードとクーポンカードには、ごく薄い影（0 2px 8px rgba(0,0,0,.08)）をつける
• 観光スポットの白カードは影なしで地色とのコントラストで浮かせる
• CTAボタンは影なしのフラットにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: FV とエリア紹介の写真は不定形のブロブ形。サブ写真と店舗外観は円形。料理写真は角丸の長方形
• セクション境界: 山並みや波のような有機的なカーブ。一部は波線のギザギザ
• エリア帯の上下は直線にせず、カーブで切り替える
• 観光スポットのバッジは円形で、縁を点線にする
• クーポンカードは左右に半円の切り欠きを入れたチケット形にする
• エリア紹介には島の地図のシルエットを添え、該当エリアを色で塗る

Components

• 青のピル型CTA（button-primary）: 右端に三角の矢印をつけた、青い塗りのピル型ボタン
• オレンジのピル型CTA（button-secondary）: 宿泊プラン一覧へ誘導する、幅の広いボタン
• クーポンチケット（coupon-ticket）: 白地に小さなタグと緑の大きな金額を置く。左右に切り欠きを入れ、下段に獲得リンクを置く
• 宿泊プランカード（plan-card）: 写真の左上に丸いエリアバッジを重ね、宿名・説明・青ボタンを並べる。2カラム
• 観光スポットバッジ（area-badge）: エリア色の円の縁を点線にし、白文字で『エリア＋観光スポット』と入れる
• 店舗情報ボックス（shop-info-box）: ベージュの面に住所・電話・営業時間を並べる。右側に円形の外観写真をはみ出させる
• 縦書きキャプション（vertical-caption）: 料理写真の右上に、白帯の明朝縦書きで短いコピーを重ねる
• エリアタブナビ（area-nav）: 明朝のエリア名を5つ並べ、下線をエリア色で色分けする
• 旬カレンダー（season-calendar）: 月ごとの横帯を季節の色で塗り、食材の期間を青い縦バーとイラストで示す

Do's and Don'ts

Do - エリアごとに地色を変え、店名の色もその地色に合わせる - 写真はブロブ形・円形で切り抜き、手描きのイラストを添える - 見出しは明朝。差し色の語だけ手書き風にする - 飲食店ブロックは同じ型で繰り返し、情報はベージュの箱にまとめる - お酒が登場するセクションには、年齢の注意書きを小さく添える

Don't - 写真を全部同じ四角で並べない - 濃い色や黒の地色を広い面に使わない - セクション境界を直線だけで区切らない - CTAの色を増やさない（青・オレンジ・ターコイズの3色まで） - 本文を明朝にしない

Page Structure

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

1. ファーストビュー（ご当地グルメ旅の世界観を一目で伝える）: 白地の中央にタイトルロゴを置き、周囲に料理写真をブロブ形で散らす。下に英字の透かしを入れる
2. 導入文とアクセス地図（行き方と魅力を短く伝える）: 左寄せのリード文と明朝の問いかけを置き、青いシルエットの地図にフェリー航路を描く
3. 旬カレンダー（季節ごとの食材を見せる）: 月の帯を季節色で塗り、食材の期間を縦のバーとイラストで示す
4. クーポン案内（宿泊クーポンの期間と金額を示す）: 水色の地に、期間をピル型ラベル付きの白ボックスで示し、チケット型クーポンを縦に並べる
5. おすすめ宿泊プラン（対象宿への送客）: 2カラムのカードに青いボタンを置き、最後にオレンジの一覧CTAを置く
6. 飲食店キャンペーン（街なかの飲食クーポンを訴求する）: 黄色の角丸パネルに写真グリッドと円形ロゴを置き、ターコイズのボタンを2つ並べる
7. エリアナビとグルメ店導入（エリア別に案内する）: 色分けした下線のタブと、地図付きの見出しを置く
8. エリア紹介（繰り返し）（各エリアの風景と特徴を伝える）: 地色帯に大きな明朝のエリア名、ブロブ形の写真、丸いサブ写真3枚を置く
9. おすすめ飲食店（繰り返し）（店ごとの詳細）: 写真に縦書きキャプションを重ね、店名・本文・情報ボックスを続ける
10. 観光スポット（エリアの名所を紹介する）: 点線縁の丸バッジと写真を置き、地色の上に白カードで見出し・本文・情報をまとめる
11. おみやげ（特産品の紹介）: 商品写真を円形に切り抜き、青い小見出しと説明を縦に並べる
12. ふるさと納税（外部サイトへの送客）: 水色の地に手描きイラストと写真4枚のグリッドを置き、青いピル型CTAで締める
13. 交通・アクセス・検索（旅行の手配へつなぐ）: クリーム地に交通の案内バナーを置き、続けて地図、ルート表、空室検索フォームを並べる

Imagery

• 料理は真上か斜め上から明るく撮り、彩りを強調する
• 風景は青空の下で撮った自然光の広角写真にする
• 細い線と水彩風の塗りで、食材・酒器・ビールジョッキなどのイラストを描く
• 英字の筆記体を薄く透かして重ねる
• 地色帯の中に、地図シルエットや鳥・山並みの切り抜き写真を配置する
• 波線・点・小さな三角の模様を余白に散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せ。コンテンツ幅を約70%に絞る
• PCの飲食店は写真と本文を左右に並べ、行ごとに左右を入れ替える
• PCの宿泊プランは4カラム、クーポンは2カラムで横に並べる
• PCの旬カレンダーは月を横に並べ、食材の期間を横バーで示す
• 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 行書くと起動時に読み込まれる。