DESIGN.md — 水色×パステル幾何学の観光写真 LP（Pastel Geometric Photogenic Travel LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、清潔・爽やか、かわいい、やさしい・柔らかい
• キーワード: パステル幾何学・多角形の写真切り抜き・水色の水彩風グラデ・手書き風の明朝・コラージュ・クラフト紙の質感
• 地の質感: 淡い水彩のにじみとクラフト紙の粒子感がある。全体にマットな印象。
• 形: 三角形・八角形・円などの幾何学パーツ。写真は多角形や傾けた矩形で切り抜き、ボタンはピル型。
• 温度感: 前半は水色が中心でやや涼しげ。後半はベージュで温かみが出る。

Colors

• 地の色はセクションごとに切り替える。順番は水色グラデ→淡黄→白→水色→ベージュ→白。
• ピンク・黄・ミント・青の 4 色を幾何学パーツとして均等に散らし、どれか 1 色が強くなりすぎないようにする。
• エリア見出しの漢字はエリアごとにピンク・青・ミントを当てて色分けする。
• ボタンは水色のピル型に白文字で統一する。黒い面は検索ボタンだけに使う。
• 文字は真っ黒を避け、濃いグレーと青グレーを使う。
• button-primary は文字 #FFFFFF × 背景 #6BB3E3 のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#227BB6、4.59:1）を使う。
• filter-bar は文字 #4D4642 × 背景 #6BB3E3 のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7EBDE7、4.55:1）を使う。
• speech-bubble は文字 #FFFFFF × 背景 #6BB3E3 のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#227BB6、4.59:1）を使う。

Typography

• 見出しは手書き風の明朝を使い、ゴシックの本文と対比させる。
• 見出しの文字の背後には、淡い黄・水色の三角形や多角形を半透明で重ねる。
• 本文は中央揃えか左揃えの短い行で、3〜4 行にまとめる。
• 強調したい語には色付きの「！」を添えて軽さを出す。
• タイトル文字は一文字ずつ白い紙片に載せる演出も使ってよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 3 列グリッドか、大小の写真を非対称に組んだコラージュ。
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 白いカードは左右に約 7% の余白を取って中央に置く。
• 写真のコラージュは大 1 枚＋小 2 枚を左右交互に組む。
• セクション間は 60〜80px 空けてゆったり見せる。
• テキストと写真は左右に振り分け、ジグザグに配置する。

Elevation & Depth

• 影はほとんど使わず、フラットに仕上げる。
• 白いカードは影なしで、地の色との差だけで浮かせる。
• 地図の操作ボタンだけに薄い影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 八角形・円・三角形の切り抜きか、傾けた四角形。後ろに色付きの多角形をずらして重ねる。
• セクション境界: 手描き風の波線と破線。そのほか地の色をまっすぐ切り替える。
• ボタンとタグはピル型にする。
• 写真の背後には黄・青・ピンクの不規則な多角形を敷く。
• カードは角丸を小さく（約 4px）する。

Components

• 水色のピル型ボタン（button-primary）: 幅 85% ほどのピル型ボタン。中央に白の太字。
• ハッシュタグ型の絞り込みチップ（tag-chip）: 「#」付きのラベル。白地に青緑の枠線を付けたピル型。
• 黒の検索ボタン（button-search）: 白太字を載せた濃いグレーの小さな矩形ボタン。
• 絞り込みの見出し帯（filter-bar）: 水色の帯。ピンアイコンと下線付きのテキストを載せる。
• エリア別写真カード（spot-card）: 白いカードの中に、色分けした見出しと写真 3 枚の横スライダーを入れる。左右に色付きの三角矢印を付ける。
• リボン型のラベル（ribbon-label）: 写真の角に斜めに掛けるクラフト調のリボン。茶色の縁取りと手書き文字。
• 水色の吹き出し（speech-bubble）: 白の手書き文字を載せた、傾いた水色の吹き出し。
• 多角形の写真フレーム（polygon-photo）: 八角形や円で切り抜いた写真。背後に色の付いた多角形をずらして重ねる。

Do's and Don'ts

Do - 幾何学パーツは 4 色をバランスよく、余白に散らす。 - 写真は多角形か傾けた形で切り抜き、背後に色の多角形を敷く。 - 見出しには手書き風の明朝を使い、淡い図形を重ねる。 - 後半はクラフト紙の質感に切り替えて、温度に変化を付ける。 - ボタンは水色のピル型で統一する。

Don't - 彩度の高い原色や真っ黒の大きな面を使わない。 - 写真を四角く整列させただけのレイアウトにしない。 - 幾何学パーツを本文の上に重ねて読みにくくしない。 - 影やグラデーションを強くかけない。

Page Structure

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

1. ファーストビュー（写真映えする旅のイメージを伝える）: 水色グラデの地に、円形の白いメダリオンを置く。周りに三角形で切り抜いた写真と色図形を万華鏡のように並べ、中央にタイトルを入れる。
2. リード文（ページの趣旨を短く伝える）: 青グレーの文字で 3 行を中央揃えにする。
3. エリア別おすすめ（地域ごとのスポットを写真で見せる）: 淡黄の地に白いカードを置く。エリアごとに見出しの色を変え、写真 3 枚のスライダーを入れる。
4. スポット検索（条件で絞り込ませる）: 手書き風の見出しの下に、水色の帯・チップ群・黒の検索ボタンを並べる。
5. 地図（スポットの位置を示す）: カード幅いっぱいに埋め込み地図を置く。
6. 交通手段の紹介（前半）（移動手段そのものの魅力を伝える）: 波線で区切った水色の地に、説明文と多角形の写真コラージュを左右交互に置き、最後にピル型ボタンを付ける。
7. 特別車両の紹介（企画列車で楽しさを訴求する）: ベージュの紙の地に、白い紙片を並べたタイトルと吹き出しを置く。リボンラベル付きの写真グリッドを 2 組並べ、ボタンで締める。
8. CTA（お得なきっぷへ誘導する）: 白地に水色のピル型ボタンを置き、補足を 1 行添える。
9. フッター（運営元を表示する）: 枠付きのロゴバナーを置き、水色の帯にコピーライトを入れる。

Imagery

• 自然光で撮った明るい観光写真を使う。彩度はやや高めで、空・緑・海が映えるもの。
• スイーツや料理は真上か斜めから撮った、カフェ風の写真にする。
• パステル 4 色の三角形・八角形・円を、水彩のようにわずかにかすれた質感で描く。
• 後半の背景は、クラフト紙の粒子テクスチャと手描きの破線にする。
• 写真の背後に、色の付いた不規則な多角形をずらして重ねるコラージュにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも本文は SP と同じ幅（約 480px）の 1 カラムで、画面中央に置く。
• PC の左右の余白には、大きくぼかしたパステルの幾何学図形を背景として敷き詰める。
• PC でもセクションの構成と順番は SP と同じにする。
• PC ではチップが 1 行に多く並ぶ。

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