DESIGN.md — 切り抜きコラージュの観光プロモーションLP（Paper Collage Pop Tourism LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、親しみ・手作り感、力強い・インパクト
• キーワード: 切り抜きコラージュ・白フチのステッカー・かすれた色紙・手書き風コピー・極太欧文ロゴ・余白多めのグレー地
• 地の質感: 写真に白フチと落ち影をつけたステッカー調。色紙の図形はかすれた版画のような質感。
• 形: 星形・ハート・三角・不定形の色紙と、黒い太枠のピル型。
• 温度感: にぎやかで明るい。少し温かみがある。

Colors

• 地は薄いグレー、フッターだけ白に切り替える。
• 赤は欧文ロゴの一部とハートの図形に絞る。
• 青・黄・緑・赤・グレーの色紙を、1人につき1色ずつ割り当てる。
• 見出しは白文字の黒ピルで目立たせる。
• フッターのナビは青い線と青文字でそろえる。
• グラデーションは使わず、ベタ塗りにかすれの質感を足す。
• person-sticker は文字 #060606 × 背景 #3B6AAD のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4779C0、4.6:1）を使う。
• badge-soon は文字 #FFFFFF × 背景 #939393 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• リード文は1行ずつ中央にそろえ、行ごとに点線の下線を引く。
• 手書き風コピーは2行までにし、上下に斜めの細線を添える。
• ロゴ風の欧文は斜体の極太にし、後半の語だけ赤にする。
• 見出しの中で強調したい1語だけ赤くする。
• 本文の字間はやや広め（0.08em前後）にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物ブロックは左右交互に配置する。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 110px、基本単位 8px、カード内 20px（375px 幅換算）
• 人物と色紙の図形をブロックの片側に寄せ、反対側にコピーとラベルを置く。
• ブロックごとに左右を入れ替え、ジグザグに並べる。
• 装飾の切り抜き素材は画面の端にはみ出してもよい。
• SNSカードは黒い細枠で囲み、中は2列の写真グリッドにする。
• フッターはアコーディオン型のリンクを縦に積む。

Elevation & Depth

• 切り抜き写真には白フチをつけ、右下に濃いグレーのずれた影を落とす。
• ボタンは右下にずらした黒い影で、浮き上がって見せる。
• カードと枠に影はつけない。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物や物は輪郭に沿って切り抜き、白フチをつける。グリッドの写真は四角のまま。
• セクション境界: 直線のみ。フッターの上に青い細線を1本引く。
• 色紙は星・ハート・三角・多角形を使い、縁を少しかすれさせる。
• 見出しは黒いピル型にする。
• 準備中ラベルは角丸の小さな長方形にする。
• フッターのリンクは角丸なしの枠線ボックスにする。

Components

• コラージュのファーストビュー（hero-collage）: 切り抜き写真をすき間なく敷き詰め、白い巨大コピーと極太の欧文ロゴを重ねる。
• 黒いピル見出し（pill-heading）: 黒地に白文字の2行見出し。英字は1文字ずつ色を変えてもよい。
• 点線下線のリード文（dotted-lead）: 短い行を中央にそろえ、行ごとに点線の下線を引く。
• 人物ステッカーと色紙（person-sticker）: 顔の切り抜きを色紙の図形に重ね、手書き風コピーを添える。
• 準備中ラベル（badge-soon）: グレー地に白いセリフ体の文字を入れた小さなラベル。
• 吹き出しタブ（speech-tab）: 黒地に白文字の小さなタブ。カード枠の左上にかけて置く。
• 影つきのピル型ボタン（button-primary）: 白地に黒の太枠。黒いずれ影とアイコンを添える。
• フッターのアコーディオン（footer-accordion）: 青い枠線に青文字を入れ、右端に下向きの矢印を置く。

Do's and Don'ts

Do - 写真は必ず輪郭で切り抜き、白フチとずれた影をつける。 - 色紙の図形はかすれた質感にし、少し傾けて置く。 - 手書き風コピーは短く、1ブロックに1つだけにする。 - 余白をたっぷり取り、素材を散らす。

Don't - グラデーションや光沢のあるボタンは使わない。 - 四角い写真をきれいに整列させすぎない（SNSグリッドは例外）。 - 赤を広い面に使わない。 - 下層を情報で詰め込まない。

Page Structure

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

1. ヘッダー（ブランドの提示とメニュー）: 白地の左にロゴ、右に赤い三本線のメニューを置く。
2. ファーストビュー（楽しさを一目で伝える）: 全面にコラージュを敷き、巨大な白コピーと欧文ロゴを重ねる。
3. コンセプト（旅の魅力を語りかける）: 吹き出しと点線下線のリード文の周りに、ジャンル名つきの切り抜き素材を散らす。
4. 動画紹介（メイン動画へ誘導する）: 黒いピル見出しの下に、黒い太枠の動画を置く。
5. 人物別の紹介（テーマごとの動画を予告する）: 顔ステッカー、色紙、手書きコピー、準備中ラベルを左右交互に5つ並べる。
6. SNS投稿の呼びかけ（ユーザーの投稿を促す）: 黒い細枠のSNS風カードに吹き出しタブと2列の写真を入れ、影つきボタンを置く。
7. フッター（サイト内の案内と運営情報）: 白地に青枠のアコーディオンを積み、ロゴ・住所・黒枠のリンクボタンを並べる。

Imagery

• 人物は大きく笑った顔をアップで切り抜く。
• 名物料理・動物・景色・道具を物ごとに切り抜き、ステッカーのように貼る。
• 色紙は版画のようなかすれた図形にする。
• SNSグリッドには鮮やかな風景や料理を正方形に近い写真で入れる。
• 雪の結晶や紅葉など、季節の小物を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではファーストビューを横長のコラージュにし、巨大コピーを1行に並べる。
• PCの人物ブロックは横1列に小さく並べる。
• PCのSNSカードは写真を4列にする。
• PCのフッターは5列のリンク一覧に展開する。
• 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 行書くと起動時に読み込まれる。