DESIGN.md — 水彩の海と赤キャラの観光キャンペーンLP（Watercolor Seaside Travel Campaign LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、親しみ・手作り感、和風、情報量多め・訴求型
• キーワード: 水彩の海・和紙テクスチャ・ゆるキャラ・地方グルメ・鉄道割引・セクションごとの色替え
• 地の質感: 水彩のにじみ、和紙の繊維感、細かいドット地。面はベタ塗りにせず、紙の質感を残す
• 形: 白い角丸カード、ピル型ボタン、波形・手描き風のセクション境界
• 温度感: 暖色の赤と寒色の水色を組み合わせた、明るくにぎやかな温度感

Colors

• セクションごとに地の色を変える：白ドット→水彩ピンク→水彩水色→若草和紙→白
• 情報は必ず白カードに載せ、地のテクスチャと分離する
• 赤はキャラ・ラベル・強調語だけに使い、見出しの一部の語を赤で強調する
• 割引セクションは緑で統一し、お得額のみ赤の吹き出しで目立たせる
• 地域タブや矢印ボタンは青、補助の丸矢印はからし金
• 別商品・会員系は紫で区別する
• region-tab は文字 #0294D4 × 背景 #FEFEFD のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#027DB3、4.54:1）を使う。
• carousel-arrow は文字 #FFFFFF × 背景 #0294D4 のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#027DB3、4.58:1）を使う。

Typography

• 大見出しは極太で、キーワードだけ赤色にする
• 本文は中央揃え・行間広めで短い行に区切る
• 見出しの下に県名ローマ字を小さく字間広めで添える
• 価格の数字は大きく太く、単位「円」は小さくする
• 背景の飾りに薄い点線の巨大英字を敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、記事カードは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の約90%で中央配置
• カルーセルは左右に丸矢印ボタンを重ねる
• 割引表は 区間帯→比較バー→通常価格 の縦積み
• タブは県ごとに4つ並べ、SPは2×2
• キャラクターはカードの角にはみ出して配置

Elevation & Depth

• カードは影なし、薄いグレー線か色線で囲む
• 白カードは背景テクスチャとの対比で浮かせる
• 吹き出しのみ小さな影を許容

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 記事サムネは角丸小の縦長、料理写真は角丸の横長、商品は切り抜き
• セクション境界: 水彩の波形・にじみ境界、和紙のちぎれた縁
• 主要ボタンは白地に枠線のピル型＋右端の丸矢印
• ラベルは赤のピル型、和柄の波模様を添える
• タブは上だけ角丸の白タブ
• 地図・カードは青や緑の太枠で囲む

Components

• 詳細ピルボタン（button-primary）: 白地に緑枠のピル型、中央に文字、右端に緑の丸矢印
• 続きを見るボタン（button-more）: 白地に赤枠のピル型、右に赤丸矢印
• 赤ラベル見出し（label-red）: 赤いピルに白文字、両脇に波模様
• 県別タブ（region-tab）: 白い上角丸タブに青文字＋ローマ字小書き
• 記事サムネカード（article-card）: 縦長写真＋番号バッジ＋手書き風タイトル
• 割引比較バー（price-bar）: 緑の割引価格バーと灰の通常価格バー、差額を赤い吹き出しで表示
• 丸矢印（carousel-arrow）: カード両脇の円形矢印、セクション色に合わせる
• スポット情報カード（spot-card）: 番号バッジ・見出し・灰の情報表・写真の2段組

Do's and Don'ts

Do - 地色には水彩・和紙のテクスチャを使う - キャラクターを各セクションに1〜3体ずつ表情を変えて置く - 手描き風の魚介イラストを群れのように散らす - 情報は白カードにまとめ、余白を広めにとる - 割引額は数字を大きくし、赤い吹き出しで示す

Don't - フラットな単色ベタの背景だけで組まない - 暗い・高級感のある色調にしない - 赤を本文の大部分に使わない - カードに強い影をつけない - 細い明朝体で見出しを組まない

Page Structure

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

1. ファーストビュー（旅とグルメの魅力を一目で伝える）: 左に赤と青の極太コピー、右に海鮮丼の写真とキャラクター
2. キャンペーンバナー（お得なきっぷへの誘導）: 赤枠に囲まれたにぎやかなイラストバナー
3. キャラクター紹介（世界観とキャラクターの紹介）: 中央揃えの短文→水彩の海にキャラ3体→白抜き大見出し
4. メンバー紹介（キャラ個別プロフィール）: 点線の巨大英字地にキャラと白カードのカルーセル
5. 特集記事一覧（現地取材記事への回遊）: 赤ラベル＋見出し、3列（SPは2列）写真カード、続きを見るボタン
6. 海の幸図鑑（名物の魚介を紹介）: 水彩の海の上に魚介イラストを並べて名前を添える
7. 郷土料理（各県のおすすめ料理）: ピンク和紙地、縦長の見出しカードと料理カードのカルーセル
8. 旅行マップ（現地スポットの位置）: 水色地、県別タブと青枠のイラスト地図
9. モデルコース（巡り方の提案）: 番号付きスポットカードのカルーセル、情報表と写真
10. 旅行商品誘導（県別の予約導線）: 写真と車両のバナー、2×2のピルボタン
11. 割引料金（価格メリットの訴求）: 若草和紙地に白カード、区間ごとの緑帯と比較バー、注釈と詳細ボタン
12. 特典案内（利用者向け特典）: 緑枠カード、イラストと吹き出し、期間表とボタン
13. 会員向けきっぷ（別商品の紹介）: 紫ラベルと横長写真帯、紫ボタン

Imagery

• 赤いカニのゆるキャラを太い線と水彩塗りで描く
• 魚・エビ・貝などを手描き水彩風イラストに
• 人物は冬服で市場や駅を歩く自然光の取材写真
• 料理は真上〜斜めから撮った明るい写真
• 背景は水彩の波、和紙の繊維、小魚の群れを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せの広いカード、SPは幅90%の1カラム
• 記事カードはPC3列→SP2列
• FVはPCの左右分割をSPではコピー上・写真下の縦積みに
• 県別ボタン・タブはSPで2×2
• カルーセル矢印はSPではカード端に小さく重ねる

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