DESIGN.md — 生成り×青緑の水彩イラスト温泉旅 LP（Watercolor Illustrated Onsen Travel LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 上品・高級、やさしい・柔らかい、和風、ナチュラル
• キーワード: 水彩イラスト・生成りの紙・明朝体・アーチ窓・波形の境界・静かな余白
• 地の質感: 和紙のようなざらつきのある生成り地に、透明感のある水彩のにじみを重ねる
• 形: アーチ型カード・ゆるい波形の境界・細線枠・小さな角丸
• 温度感: やや暖かい中間色に、涼しい青緑を少し差す

Colors

• 地はグレージュ・生成り・セージの 3 色で、セクションごとに切り替える
• 見出しと枠線はくすんだ青 1 色にそろえる
• 珊瑚色はイラストの中だけで使い、UI には使わない
• 主ボタンは青の塗り、サブボタンは淡い青灰に青い文字
• 強調は黄色のマーカー線だけにとどめる
• 最後の CTA は暗い森の写真の上に白文字で置く

Typography

• 見出しと本文はどちらも明朝体で、字間を広めにとる
• 見出しの上には、小さな英字ラベルを必ず添える
• 本文は中央揃えにし、短い行で改行して 2 倍前後の行間をとる
• ファーストビューのコピーだけを縦書きにする
• 細かい注釈やカードの説明だけゴシック体にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード一覧は横スクロール、または 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは中央寄せで幅を狭く保つ
• セクションの間は波形の境界と余白で区切る
• イラストを境界の上にはみ出させて置き、つなぎにする
• 診断カードは細い青線の枠で囲み、中は余白を多めにとる

Elevation & Depth

• 影はほとんど使わず、平面で見せる
• カードは白い塗りと地色の差だけで浮かせる
• コースカードだけごく薄い影（0 2px 6px rgba(0,0,0,.06)）をつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。イラストは丸いリースや円形に配置する
• セクション境界: ゆるやかな波形の曲線
• 導入カードの上辺は半円のアーチ型にする
• 主ボタンは角丸 2px の長方形にし、右端に矢印を置く
• 選択肢ボタンとタグは角丸 full の細長い形にする
• エリアマップの地名は白い円の中に入れる

Components

• アーチ型導入カード（arch-intro-card）: 上辺が半円の白いカード。英字ラベル・2 行見出し・中央揃えの本文を入れる
• 主ボタン（button-primary）: 青い塗りの長方形ボタン。白い明朝体の文字と右端の矢印
• 診断質問カード（quiz-card）: 細い青線の枠の中に、Q マークの質問と選択肢ボタンを縦に並べる
• 選択肢ボタン（choice-pill）: 淡い青灰の塗りに細い青線。中央に選択肢の文字
• エリアマップ（area-map）: 青緑の山のイラストに白い円の地名を散らし、右側に説明カードを出す
• コースカード（course-card）: イラストのサムネイル・コース名・淡い色のボタンを入れた白いカード
• タグ絞り込みバー（tag-bar）: 青灰の帯に、小さなピル型のタグを横に並べる
• 特典カード（bonus-card）: 上部に青緑の番号帯、青い見出し、写真か図、短い説明を入れる

Do's and Don'ts

Do - 水彩のにじみがあるイラストを、セクションの境界に必ず置く - 見出しは明朝体の 2 行・中央揃えにし、上に英字ラベルを添える - 地色は 3 色ほどを交互に替えて、リズムを作る - 余白は広めにとり、本文の幅を狭く保つ - 差し色は青と青緑に限る

Don't - 彩度の高い原色やグラデーションのボタンは使わない - 太いゴシック体の大見出しは使わない - 強い影や立体的な装飾をつけない - 写真を背景いっぱいに多用しない（使うのは締めの 1 か所だけ） - セール風の赤いバッジは置かない

Page Structure

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

1. ファーストビュー（旅の世界観を一目で伝える）: 観光要素の水彩イラストを円形のリースに並べ、中央に縦書きコピーとロゴの丸印を置く
2. 導入（地域の多彩な魅力と旅の提案を示す）: アーチ型の白カードに、英字ラベル・見出し・短い本文を中央揃えで入れる
3. エリア紹介（周辺エリアを地図で見せる）: 左にイラストの地図と円形の地名、右に写真と説明の白カード
4. 旅診断（質問に答えるとおすすめのコースがわかる）: 波形の境界で区切った明るい地に、線枠の質問カードと選択肢ボタンを置く
5. コース一覧（モデルコースをタグで探せるようにする）: タグバーと、イラスト付きのカードを横に並べ、下に主ボタン
6. 特典（予約する理由を補強する）: セージ地に、番号帯付きのカードを 4 枚並べる
7. 締めの CTA（施設ページへ送る）: 暗い森の写真の上に白い明朝体の文と、青いボタンを 2 つ縦に並べる
8. フッター（系列施設を案内する）: 墨色の地に、施設名の一覧を細かいグリッドで並べる

Imagery

• 透明水彩のにじみと紙の質感を生かしたイラストにする
• 人物は小さく描き、後ろ姿や佇む姿にする
• 色は珊瑚・青緑・くすんだ青・生成りに限る
• 地には植物のシルエットを薄く透かして敷く
• 写真は自然光の風景・料理・施設にし、彩度を控えめにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではエリアマップを縦に積み、地図の下に説明カードを置く
• コースカードは横スクロールにする
• 特典カードは 1 列か 2 列で縦に積む
• アーチカードは幅 90% に広げる
• フッターの施設一覧はアコーディオンにまとめる

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