DESIGN.md — 水色と黄色の線画コラージュ観光自治体 LP（Illustrated Travel Campaign Sketchbook LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ポップ・元気、親しみ・手作り感、清潔・爽やか、情報量多め・訴求型
• キーワード: 線画イラスト・旅のコラージュ・水色の空・黄色マーカー・イベント告知・SNS連動
• 地の質感: 白地の線画イラストに写真の切り抜き人物を重ねたスケッチブック風。面はフラットで、紙のような薄いグレー地も使う
• 形: 四角いカードと、手描き風に歪んだ黄色の帯・旗・吹き出し。ボタンはピル型と角丸長方形が混在
• 温度感: 明るく軽快でやや涼しげ。赤とピンクのアクセントで温かみを足す

Colors

• イベント・旅関連の大ブロックは水色の地、その中に白カードを置く
• SNS系ブロックは薄グレーの地で区別する
• 黄色は見出しラベル・手描き帯・CTAボタンにだけ使う
• 赤ピンクは日付バッジと開催情報の帯に限定する
• 金額など数字の強調には赤を使い、大きな太字にする
• SNSボタンは各サービスのイメージ色（ピンク・水色）で塗り分ける
• フッターは一段濃い水色で締める

Typography

• 見出しは中央揃え、本文は左揃え
• 大見出しは手描き風の太字書体にし、行間を詰める
• 英字のコンデンス書体を和文ロゴの補助として重ねる
• 強調語だけ一回り大きくする（例: 地名だけ大きい）
• 数字は欧文の極太書体で大きく見せる
• 本文は14px前後で行間1.7を保つ
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物紹介はラベル＋写真の 2 分割、SNS 写真は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• ページ左右に約4%の余白を取り、色地ブロックを箱状に並べる
• 水色ブロック内に白カードを入れ子にする
• SNS写真は3列の正方形グリッドで隙間を小さくする
• 各ブロックの最後に中央揃えのボタンを置く
• イラスト（鳥・新幹線・キャラ）をブロックの角にはみ出させる

Elevation & Depth

• 影はほぼ使わずフラットに作る
• 情報枠は白や薄グレーの面の差だけで区切る
• 写真カードには薄いグレーの1px枠を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は四角い枠から少しはみ出す切り抜き、SNS写真は正方形
• セクション境界: 直線の箱区切り。水色ブロックの上端は雲や山なりのゆるいカーブ
• SNS・外部リンクボタンはピル型
• 応募ボタンは角丸なしの黄色長方形
• 見出しラベルは黒枠の傾いた四角や旗の形にする
• 日付は赤ピンクの正円バッジにする
• 黄色の帯は手描き風に端を歪ませる

Components

• 応募ボタン（button-apply）: 黄色の長方形に濃い文字。ブロック下で中央揃え
• SNS公式アカウントボタン（button-sns-pill）: 見出し横に置くピル型の小ボタン。白い文字
• 外部サイトボタン（button-external）: 濃紺の角丸ボタンに白文字で2行
• 日付バッジ＋開催情報帯（date-badge）: 赤ピンクの正円に日付と曜日を入れ、右へ同じ色の帯を伸ばして時間・費用を載せる
• 人物の視点ラベル（profile-label）: 黒いL字の枠付きの黄色ボックスに視点見出しと肩書き・名前。右に人物写真
• 旗型の見出しタグ（flag-heading）: 手描き風の旗や傾いた黒枠ラベルに英字や場所名を入れる
• SNS見出し（sns-heading）: アイコン＋英字の見出しに、色付きの太い下線帯を敷く
• キャラ挟みボタン（character-banner）: 白いボタンの左右からキャラが看板を持つように挟む

Do's and Don'ts

Do - 線画イラストと写真人物を混ぜたコラージュを使う - 水色の地の中に白カードを入れて情報をまとめる - 黄色は手描き帯とボタンに絞って目立たせる - 鳥や乗り物のイラストをブロックの角にはみ出させる - 日付・金額は大きな数字で一目で分かるようにする

Don't - 濃いグラデーションや強い影を使わない - 黄色・赤を本文の地に広く使わない - 写真だけで構成せず、線画の余白感を失わない - 書体を明朝に寄せて堅くしない - ボタンの色を一つのブロック内で混在させない

Page Structure

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

1. ヘッダー・ロゴ（キャンペーン名を示す）: 白地に和英併記のロゴを中央に置き、下に水色地の関連バナー帯
2. ファーストビュー（地域の魅力を一枚で伝える）: 白地に地図・名所の線画と写真人物をコラージュし、大きな和文と英字のロゴを重ねる
3. 告知バナー（公式情報へ誘導）: 手描き風の黄色い楕円にコピーと白いピル型ボタン、キャラと乗り物を添える
4. お知らせ（最新情報を表示）: 薄グレー枠に英字見出しとSNS埋め込み
5. イベント告知（トークイベントの内容を伝える）: 水色地に旗型タグと手描き風の大見出し、登壇者写真3枚、中央揃えの見出しと本文
6. 開催概要（日時・場所・定員を伝える）: 白カードに赤ピンクの日付バッジと帯、下に項目を隅付き括弧の見出しで列挙
7. 登壇者紹介（登壇者の信頼性を伝える）: 白カードに黄色ラベル＋人物写真＋紹介文を縦に3名並べ、最後にキャラ挟みボタン
8. SNS投稿キャンペーン（参加と投稿を促す）: 黄色の手描き枠に大見出し、赤い大数字の賞品額と商品イラスト、説明文
9. SNSギャラリー（投稿事例を見せ参加を促す）: 薄グレー地にSNS見出しとピル型ボタン、3列写真グリッド、黄色の応募ボタン
10. 設置場所紹介（フォトスポットの場所を案内）: 水色地にピンクの大見出し、傾いたラベル付き写真、白カードの館内図と期間、濃紺ボタン
11. 展開事例（広告展開の広がりを示す）: 横スクロールの写真カルーセルと注釈
12. 動画予告（今後の公開を予告）: 生成り地に薄い線画を散らし、中央に丸みのある英字
13. ポスター一覧（シリーズ展開を見せる）: 縦長ポスター3枚を横並び
14. フッター（ブランドとSNSで締める）: 濃い水色地に大きなロゴ、SNS埋め込み、コピーライト

Imagery

• 名所・特産・乗り物を黒い細線で描いた線画イラストを白地に散らす
• 線画の一部だけを緑・赤・黄でフラットに塗る
• 人物は全身写真を切り抜き、線画の中を旅しているように配置
• カモメなどの鳥、キャラクター、新幹線の車体をブロックの端に添える
• 人物写真は明るい背景のバストアップで並べる
• SNS写真は実際の会場・展示風景のスナップ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央固定幅で、左右に余白を取る
• イベント見出しと登壇者写真をPCでは横並びにする
• 登壇者紹介はPCで3カラムのカードにする
• Instagram と Twitter ブロックはPCで2カラム並列
• 設置場所の写真2枚と館内図＋期間をPCで横並びにする
• フッターはPCでロゴとSNS埋め込みを横並び

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