DESIGN.md — クリーム×紺緑ピンクのポップな旅行コラボ LP（Playful Flat Illustration Travel Collab LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい
• キーワード: フラットイラスト・色ブロック切替・波形境界・黄色ピルボタン・丸ゴシック・紙吹雪装飾
• 地の質感: グラデーションや影のないベタ塗り。手描き風の線と紙吹雪を散らす
• 形: 円形ナビ、ピル型ボタン、角丸カード、波や円弧のセクション境界
• 温度感: 暖かく陽気。クリームと黄色が温度を上げ、紺と緑で引き締める

Colors

• セクションごとに地の色を変える。クリーム→紺→緑→白円→ピンク→クリームの順
• 主 CTA はどの地の上でも黄色に黒文字で統一する
• 色地の上の文字は白。注意喚起だけレモン色にする
• 情報カードは白地に黄色の枠かラベルで囲む
• 円形ナビの 3 色は各セクションの地の色と対応させる

Typography

• 見出しは極太の丸ゴシックで力強く見せる
• 大見出しは和文と大きな欧文を 2 段に組む
• 日付の数字は大きく、曜日や年月は小さくして差をつける
• 本文の強調は太字だけにする。色は変えない
• 注釈は ※ を付け、ぶら下げインデントで揃える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円形ナビだけ 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は 12〜16px
• カードとボタンは画面幅いっぱいに近い幅で積む
• セクション見出しの下に 40px の余白をとる
• 地図は全幅に近く配置し、上に吹き出しボタンを重ねる

Elevation & Depth

• 影はほぼ使わない
• ボタンは白い外枠か黒い太枠で浮かせる
• 人物プロフィールは白い楕円の上に置く

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物は角丸の正方形、または丸アイコン。商品は長方形
• セクション境界: 山並みの波形と大きな円弧
• ボタンは全てピル型にする
• カードは角丸 12px で黄色の枠を付ける
• 円形ナビの下に小さな下向き三角を付ける
• 見出しの帯は片側だけ雲形に丸める

Components

• イラスト入り主 CTA（button-primary）: 黄色のピル型に白い外枠。左に白線イラスト、右に矢印を置く
• 開閉ボタン（button-toggle）: 黄色地に黒の太枠。右端に黒丸の＋を付ける
• 円形セクションナビ（nav-circle）: 紺・緑・ピンクの円を 3 つ並べ、上にイラストを乗せる
• エピソードカード（card-episode）: 白地に黄色の枠。上部に黄色ラベル帯、続けてタイトルと日付を置く
• 黄色ラベル帯（label-band）: 短い分類名を載せる黄色の矩形帯
• 人物プロフィール楕円（profile-blob）: 白い楕円に写真・名前・経歴を収める
• 地図の吹き出しピン（map-pin-button）: 地図上に置く黄色ピル。＋アイコン付き
• 日付の下線マーカー（date-marker）: 太字の日付の下に黄色の帯を敷く

Do's and Don'ts

Do - セクションの境界は波や円弧でつなぐ - CTA は必ず黄色のピル型に黒文字 - キラキラや紙吹雪を見出しの周囲に散らす - イラストは紺・緑・ピンク・黄の 4 色に絞る - 注意事項は開閉ボタンに収めて短く見せる

Don't - 写真に重いグラデーションや影を付けない - 明朝体を使わない - 直線のセクション区切りを多用しない - 黄色以外の色の CTA を作らない - 本文を色地の上で長く続けない

Page Structure

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

1. ファーストビュー（コラボを告知し、旅の気分を作る）: クリーム地にロゴを並べ、太字のタイトルと乗り物・名所のフラットイラストを置く。紙吹雪を散らす
2. 期間と目次（開催期間と 3 つの楽しみ方を示す）: 黄色の下線を敷いた日付と、3 色の円形ナビを並べる
3. 導入文（企画の趣旨を説明する）: 段落を 4 つほど置き、要点を太字にする
4. 出演者紹介（親しみと信頼を伝える）: 白い楕円に角丸写真・名前・経歴を左右交互に配置する
5. 移動中の特典（移動中に楽しめるコンテンツを案内する）: 山の波形から紺地に入る。雲形の帯見出しと特典カード 2 枚、主 CTA、注釈を置く
6. 現地での特典（現地スポットへの来訪を促す）: 緑地に塔のアイコン付き見出し。開閉ボタン、イラスト地図とピン、スポット一覧カード、CTA を並べる
7. 撮影企画（参加型の写真企画を案内する）: 斜線で挟んだ前置きと、マーカー付きの大見出しを置く。白い円弧の中にスマホのモック画像と CTA を入れる
8. 補足情報（注意事項をまとめる）: 緑地に開閉ボタンを 2 つ縦に並べる
9. 特別企画（コラボ商品の販売を告知する）: ピンクの円弧地にキラキラ付きの見出しを置く。白い帯、商品画像と放射線、価格、黄色ボタンを続ける
10. フッター（ブランドで締める）: クリーム地の中央にロゴだけを置く

Imagery

• ベタ塗りのフラットイラスト。名所・乗り物・自然を紺・緑・ピンク・黄で描く
• 人物は丸顔のゆるい線画キャラクターにする
• 手描き風の短い線・点・波線を紙吹雪として散らす
• 地図はベージュ地に太い道路線と黒丸の駅名で簡略化する
• ボタン内のアイコンは白い線画にする
• 商品の周囲に放射状の短い線を描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅のカラムに要素を収め、左右に地の色を広げる
• PC の人物紹介は 2 列に並べる
• PC の CTA は、QR コード付きの黄色カードに置き換える
• 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 行書くと起動時に読み込まれる。