DESIGN.md — 桜色×若緑のアート温泉旅 LP（Pastel Onsen Art Festival Travel LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: やさしい・柔らかい、ナチュラル、和風、情報量多め・訴求型
• キーワード: 桜色の地・若緑の線画・縦書きタブ・角丸写真・章ごとの色替え・ピル型ボタン
• 地の質感: フラットな淡色の面に、細い円や斜線、波線を薄く重ねた軽い装飾
• 形: 大きな角丸の写真と、片側だけ大きく丸めたセクション境界。円形に切り抜いたグルメ写真
• 温度感: 暖かく穏やか。パステル調で落ち着いた旅情

Colors

• 基本の地は桜色で、章が変わる所だけサーモン・ラベンダー・若草・水色の淡色に切り替える
• 見出し・エリア名・線画マップ・小見出しはすべて若緑に統一
• 本文は黒ではなく濃グレーにして柔らかさを保つ
• 主な遷移ボタンは青のピル型。最重要の申込だけコーラルにする
• サブボタンは白抜きで、緑か濃グレーの線と文字にする
• 写真以外に強い彩度は使わず、装飾線は地より少し濃い同系色にする
• button-primary は文字 #FFF4EC × 背景 #4C82C9 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3971BB、4.56:1）を使う。
• button-cta は文字 #FFF4EC × 背景 #ED7155 のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D03816、4.56:1）を使う。
• area-tab-vertical は文字 #FFF4EC × 背景 #00B96E のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#00814D、4.57:1）を使う。
• artwork-card は文字 #00B96E × 背景 #FEFEFF のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#00814D、4.6:1）を使う。
• info-box は文字 #00B96E × 背景 #FEFEFF のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#00814D、4.6:1）を使う。
• tag-small は文字 #FFF4EC × 背景 #00B96E のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#00814D、4.57:1）を使う。

Typography

• エリア名・宿の章見出しは縦書きで組み、和の旅情を出す
• スポット名は緑の太字で大きくし、その下に施設名を緑の小さな文字で添える
• 章見出しは左右に細い横線を引き、中央に置く
• 本文は字間を少し空け、行間 1.75 前後でゆったり組む
• 導入部だけ明朝の緑本文にして、芸術祭らしい品を出す
• ボタンは 2 行まで。2 行目には注釈を小さく入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。宿やスポットのカードは横スワイプのカルーセル
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• エリア写真は画面端まで広げ、白い情報カードを写真の下端に重ねる
• スポットは「見出し→角丸写真→本文→住所→ボタン」の順で繰り返す
• 章の終わりに青いピル CTA を 1 本置く
• 手順は丸い番号と見出しを横に並べ、区切り線に下向きの切り欠きを入れる
• ボタンは左右 8% の余白を取り、ほぼ全幅にする

Elevation & Depth

• 影はほとんど使わず、面の色の差で階層を作る
• 白カードは影を付けず、角丸と地の色の差だけで浮かせる
• フォーム部分だけ細い灰色の枠線で囲む

Shapes

• 角丸: 小 8px ／ 中 20px ／ 大 48px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 20px。グルメ写真は正円。エリアの大写真は片方の上角だけ大きく丸める
• セクション境界: 章の境目は片側の角だけ大きく丸めた色面で切り替える（上端が角丸）
• 縦書きタブは下側を丸めた緑の帯にする
• アートワークカードは白地で片側の角だけ大きく丸める
• 背景に細い円の線や斜めの帯、波線を薄く重ねる
• 番号はアウトラインの白い円で示す

Components

• 青ピル遷移ボタン（button-primary）: 白文字 2 行で、右端に「>」を付ける。章の締めに置く
• コーラル申込ボタン（button-cta）: クーポン探しなど最重要の行動だけに使う
• 緑アウトラインボタン（button-outline）: 白抜きで緑の線と文字。個別スポットの予約や購入に使う
• 縦書きエリア名タブ（area-tab-vertical）: 写真の角に重ねる緑の縦帯。白い明朝体で、副題は小さな帯を横に添える
• 作品情報カード（artwork-card）: 白カードの左に緑の縦線。Artwork・作品名・作家名を緑で積む
• 円形写真の縦ラベル（food-label）: 円形写真の左上に重ねる濃グレーの縦長帯。料理名を白字の縦書きで入れる
• 左右線付き章見出し（heading-lined）: 中央の見出しの左右に細い横線。緑か濃グレーで描く
• ステップ番号行（step-item）: 白い円に Step と数字。右に見出しと説明を置き、下に V 字の切り欠き付きの線
• 開催情報ボックス（info-box）: 薄い白地のカードに［項目名］の緑見出しと日時・料金を並べる
• カテゴリ小バッジ（tag-small）: スポット名の横に付ける緑のピル型ラベル（観光・グルメ）

Do's and Don'ts

Do - 淡いパステル地と若緑の組み合わせを全体で守る - エリアごとに縦書きタブ・大写真・作品カードの型を繰り返す - 章が変わる時は背景色と角丸の境界で切り替える - 写真は角丸か正円で柔らかく切り抜く - CTA は青のピル型で統一し、最重要の 1 つだけコーラルにする

Don't - 真っ黒の文字や濃い背景の章を入れない（FV の写真を除く） - 鋭い角の写真や四角いボタンを使わない - 緑以外の色で見出しを書かない - 強い影やグラデーションのボタンにしない - 1 画面に CTA の色を 3 色以上混ぜない

Page Structure

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

1. ファーストビュー（旅のテーマを情緒的に伝える）: 温泉の写真を全面に敷き、白い明朝の大コピーとイベント名を中央に重ねる
2. 導入（地域とイベントの概要を伝える）: 薄グレー地。左に緑の縦書き欧文、本文は緑の明朝。緑の線画地図と吹き出しでアクセス時間を示す
3. イベント概要（会期・料金・会場を伝える）: 手書き風のロゴと写真を並べ、白いボックスに項目を並べる。テキストリンクと青ピル CTA を置く
4. 会場マップ（会場の位置関係を示す）: 白抜きの線画地図に、緑の線の円で会場名を引き出す
5. エリア紹介（繰り返し）（各会場の作品と周辺スポットを紹介する）: 縦書きの緑タブ付きの大写真と作品カードの後に、スポットを見出し・角丸写真・本文・住所で並べる
6. 食べ歩きグルメ（立ち寄り先を提案する）: サーモン地に正円の写真と濃グレーの縦ラベルを置き、細い円の線で飾る
7. おすすめ宿（宿泊予約へ誘導する）: ラベンダー地に縦書きの見出しと枠付きのキャッチ。宿カードを横スワイプで見せ、青 CTA を置く
8. クーポン案内（返礼品クーポンの使い方と申込）: 若草地に写真 3 枚を横に並べ、斜線で飾った強調見出し、4 ステップ、白い吹き出し、コーラルと青の CTA
9. アンテナショップ（特産品の通販へ誘導する）: 水色地に波線の装飾、コラージュ写真のバナー、青 CTA、注釈
10. アクセス（交通手段を伝える）: 地図を埋め込み、生成りのカードに車・電車・飛行機別のルートを箇条で並べる
11. 空室検索フォーム・問い合わせ（予約と問い合わせ先を案内する）: 灰色の枠のフォームに赤い検索ボタン、表形式の問い合わせ欄

Imagery

• 温泉・街並み・自然は明るく自然光で撮り、彩度は控えめにする
• アート作品の写真は暗めの室内で、光を印象的に見せる
• グルメは手元や器を寄りで撮り、木のテーブルなど和の質感を入れる
• 地図は塗りを白にし、若緑の太い線で描いた単純な線画にする
• 装飾は細い円の線、斜めの帯、波線を地と同系色で薄く入れる
• ロゴは草や苔を思わせる手書き風の文字を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 640px 前後の幅にまとめ、背景色の帯は全幅に広げる
• スポットは写真と本文を左右交互に並べる 2 カラムにする
• グルメの円形写真は 2 つ横並び、宿カードは 3 列にしてカルーセルをやめる
• ステップは横 4 列にし、縦の区切り線を入れる
• 会期と会場を 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 行書くと起動時に読み込まれる。