DESIGN.md — 紙質グレーと金枠・理容ストライプの観光イベントLP（Retro Barber Pole Town Event LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: レトロ、ポップ・元気、和風、情報量多め・訴求型
• キーワード: 紙質テクスチャ・金茶の細枠・理容ストライプ・縦書きコピー・レトロ装飾書体・ユーモア
• 地の質感: 全面にうっすら和紙・新聞紙のようなノイズがかかったライトグレー。ベージュ面は生成りの紙調。
• 形: 角の立った長方形の枠と表組みが基本。ギザギザ縁の円形バッジ、リボン型見出し、ピル型の枠付きラベルを差し込む。
• 温度感: 落ち着いたグレーと金茶でやや温かく、赤のアクセントで祭りの賑わいを出す。

Colors

• 地は紙質ライトグレーで統一し、イベント案内ブロックは金茶の細枠で囲む。
• 金枠内は生成り、さらに個別イベントはベージュ面で一段区切る。
• 赤は強調語・円形バッジ・手書き風下線だけに使う。
• 赤×青×白の斜めストライプは店舗写真枠と要項カードの縁取り専用。
• 黄色は水玉の区切りセクションとフッター帯にのみ使う。
• 見出しは墨黒か金茶。青は店舗のDATAラベルとリンクに限る。
• button-primary は文字 #F4F4F3 × 背景 #828282 のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#6F6F6F、4.57:1）を使う。

Typography

• ABOUTの語りは縦書きで右から左へ並べ、山場の語だけ大きく太くする。
• 見出しは明朝とレトロ装飾体の二本立て。本文はゴシック。
• 強調語は赤字にし、手書き風の赤い波線下線を添える。
• 日付は太い欧文数字で大きく、曜日は縦組みの小さな英字。
• STEP番号は小さな赤の欧文セリフで見出し上に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（店舗カードも縦積み）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 案内ブロックは左右16px内側の金枠で囲み、枠上辺の中央に見出しアイコンを食い込ませる。
• STEPはイラスト→小番号→見出し→本文の順で縦に積む。
• 店舗カードは写真・店名・DATA（住所・電話）・右側の地図サムネとMAPの順。
• 要項は2列の表（項目名：内容）を黒罫線で区切る。
• セクション間はたっぷり空けて余白でリズムを作る。

Elevation & Depth

• 基本はフラット。影は使わない。
• 要項カードのみ周囲にごく薄い影で紙が浮いた表現。
• 立体感は枠線とテクスチャで出す。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角の立った矩形。店舗写真は赤青の斜めストライプ枠で囲む。
• セクション境界: 直線の切り替え。水玉帯や巨大斜め文字の背景で区切る。
• メインボタンは角の立った長方形。
• リンク系サブボタンは細い黒線のピル型。
• 円形のギザギザ縁バッジでイベント番号を示す。
• 見出し帯は両端が切り込まれたリボン形。

Components

• 金茶の細枠ブロック（frame-gold）: 4px前後の金茶線で囲む案内ブロック。上辺中央に見出しを食い込ませる。
• リボン見出し（ribbon-heading）: 濃茶の帯で両端を切り込み、白の手書き風文字。
• ギザギザ円形バッジ（badge-burst）: 赤い星形縁の円に白い欧文で番号。カード左上にはみ出させる。
• STEP札（step-tag）: 濃茶の角丸札に白いセリフ英字でSTEP番号。
• 日時ラベル行（info-row）: 左に濃茶のラベル、右に黒枠の内容。
• 店舗カード（shop-card）: ストライプ枠の写真、店名、青のDATA、赤のtel、右に地図サムネと赤のMAP。
• エアメール柄の要項カード（airmail-card）: 四辺を赤青の斜めストライプで縁取った白カード。中は罫線の表。
• 応募ボタン（button-primary）: 金枠の下辺中央に重なる角の立った矩形ボタン。
• 細線ピルボタン（button-outline）: 細い黒線のピル型で、動画などへのリンク。
• 注意事項ボックス（notice-box）: 黒の2px枠。中を細い横罫で区切り、太字の小さな文字を置く。

Do's and Don'ts

Do - 紙質テクスチャ地は全面に敷く。 - 赤青ストライプは店舗と要項に限って使い、理容室らしさを出す。 - コピーはユーモアを交えた縦書きで語る。 - 強調語には赤字と手書き下線を添える。 - イラストは単色の線画で、黒か金茶にする。

Don't - 角丸の大きいカードやグラデーションボタンは使わない。 - ビビッドな色を多用しない。赤・青・黄はアクセントに限る。 - 影の強いカードは使わない。 - 見出しを細いゴシックだけで済ませない。 - 金枠の中に別の色の枠を重ねない。

Page Structure

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

1. ファーストビュー（イベントの世界観を一撃で伝える）: 全幅の集合写真。中央にロゴを白抜きで重ねる。
2. イベントタイトル（名称・日付・場所の告知）: 雲形の装飾を背に、明朝の大タイトル、赤の副題、太数字の日付、黒地の開催場所ラベル。
3. コンセプト（ABOUT）（企画の背景を楽しく語る）: 線画と組み合わせた巨大英字。背後に放射線と灰色の円。下に縦書きの語りを並べる。
4. 動画（雰囲気の補強）: 暗いトーンの全幅動画と細線ピルのリンクボタン。
5. 告知バナー（当日の目玉企画を知らせる）: 赤地のバナーとイラストのバナーを縦に並べる。
6. プラスイベント（関連企画の案内）: 金枠と生成り地の中にリボン見出しを置く。ベージュカードの左上にギザギザバッジ。STEPは手順で示す。
7. 参加方法（応募から特典までの流れ）: 金枠ブロック。線画イラストとSTEP番号、金茶の見出しで4段に進める。
8. 注意事項とCTA（条件の確認と応募）: 黒枠の注意事項ボックスと、枠下辺に重なるボタン。
9. 参加店舗一覧（参加店を紹介する）: 黄色の水玉帯に英字ロゴを置き、その下にストライプ枠の店舗カードを並べる。
10. 募集要項（正式な条件の明示）: 巨大な斜め文字の背景に、エアメール柄の白カードと2列の罫線表。
11. フッター（運営の明示）: 黄色の帯にロゴを置き、その下に小さなコピーライト。

Imagery

• 写真は人物の誇張した表情を活かしたセピア寄りの暖色の集合写真。
• 店舗は晴天の正面外観を素直に撮り、ストライプ枠で統一する。
• イラストは単色の線画（顔・手順・小物）。金茶か黒で描く。
• 紙のバナーは秋色のフラットイラストで、屋台やスタンプを描く。
• 装飾は放射線・雲形・水玉・巨大な斜め英字。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約900pxに抑え、紙質の地を左右に広く見せる。
• PCの店舗一覧は4カラムのグリッドにする。
• PCのSTEPは左にイラスト、右にテキストの2カラム。
• プラスイベント内の手順はPCで横並びにまとめる。
• ナビはPCで上部に英字とハートを並べたメニュー、SPではハンバーガー。

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