DESIGN.md — 若草×水色イラストの古書イベント LP（Pastel Illustrated Book Fair Event LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ポップ・元気、かわいい、レトロ、親しみ・手作り感
• キーワード: イラスト主体・パステル・レトロ欧文・セクション色分け・イベント告知
• 地の質感: 細い横ストライプと斜めストライプで、紙のような地の質感を出す。写真は使わず、フラットなイラストで構成する。
• 形: 角丸の太枠カード、ピル型ボタン、円弧の装飾線を使う。セクション境界は直線。
• 温度感: 春らしく暖かい。若草色と水色で爽やかにしつつ、ピンクの桜で華やかさを足す。

Colors

• セクションごとに地の色を変える。順番は若草、クリーム、白、水色、黒。
• 黄色はボタンだけに使う。
• ピンクは桜のモチーフと、サブイベントの情報に限って使う。
• 欧文見出しはセクションごとにライム、ブルーグレー、白と色を変える。
• 白いカードは濃い青緑の太枠で囲む。
• フッターは黒地に白文字だけにする。
• date-badge は文字 #FFFFFF × 背景 #74CBD5 のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2A818B、4.55:1）を使う。
• nav-bar は文字 #FFFFFF × 背景 #64AD9C のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#448172、4.54:1）を使う。

Typography

• 見出しは、欧文の装飾見出しと和文の小見出しを中央揃えで 2 段に組む。
• 本文は小さめのゴシックにして、情報を簡潔に見せる。
• 日付と時間は太い数字にし、円形バッジの中に入れる。
• フッターは項目名と内容を中央揃えで縦に並べる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央揃え
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しの左右にイラストを配置して、余白を埋める。
• カードは画面幅の 8 割強を使って中央に置く。
• 各セクションの上下には 50〜70px の余白をとる。
• 地図は白い枠の中に大きく配置する。

Elevation & Depth

• 影は使わず、フラットに仕上げる。
• 立体感の代わりに、太い枠線と地の色の差で区切る。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: イラストは背景を透過させ、輪郭のまま切り抜いて配置する。
• セクション境界: 直線で切り替える。
• カードは 3px 程度の太枠と大きめの角丸にする。
• ボタンはピル型にし、黒い太枠を付けて右端に「＞」を置く。
• 日程は円形バッジで見せる。
• ヒーローには細い円弧の線を装飾として入れる。

Components

• 黄色のピル型ボタン（button-pill）: 黒い太枠で囲み、右端に矢印を置く。一覧へ進む導線に使う。
• 2 段見出し（section-heading）: 上段に色付きのレトロ欧文、下段に和文の小見出しを組む。
• お知らせカード（news-card）: 白地を青緑の太枠と角丸で囲む。日付と本文を下線で区切る。
• 日程の円形バッジ（date-badge）: 水色の円の中に、会期と時間を太字で入れる。
• 上部ナビ（nav-bar）: 深緑の帯に白い文字でメニューを並べ、縦線で区切る。
• 会場帯（venue-bar）: ヒーローの下端に置く帯。会場名を桜マークで区切って並べる。
• アクセス地図（map-frame）: 白い枠の中に、簡略化したイラスト地図を入れる。会場は吹き出しで示す。
• 開催概要フッター（footer-info）: 黒地に、項目名と内容を中央揃えで縦に並べる。

Do's and Don'ts

Do - セクションごとに地の色を切り替え、リズムをつくる。 - 見出しの左右には人物や動物のイラストを添える。 - 桜のモチーフは要所に少しだけ散らす。 - ボタンは黄色・黒枠・ピル型に統一する。

Don't - 写真を使わない。リアルな写真は世界観を崩す。 - 影やグラデーションでリッチに見せない。 - 黄色をボタン以外に多用しない。 - 見出しを和文だけにしない。

Page Structure

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

1. ナビゲーション（各セクションへ移動させる）: 深緑の帯に白文字のメニューを並べる。左端にロゴを置く。
2. ファーストビュー（イベント名・日程・世界観を伝える）: 若草色の地に、大きな装飾ロゴ、円形の日程バッジ、手書き風のキャッチ、本を読む人物のイラストを入れる。下端に会場帯を置く。
3. お知らせ（最新情報を伝える）: クリーム色の斜めストライプ地に、太枠の白カードを置く。一覧へ進むピル型ボタンを付ける。
4. 参加店舗（出店者を紹介する）: 白地に細い横罫を引く。見出しの両脇にイラストを置き、準備中の表示を入れる。
5. アクセス（会場への行き方を示す）: 水色の地に、白枠のイラスト地図を置く。会場は吹き出しで示す。
6. 開催概要フッター（名称・会期・主催などをまとめる）: 黒地に白文字を中央揃えで並べる。最下部にコピーライトを入れる。

Imagery

• フラットなイラストにする。細身の人物が本を読む姿を、カラフルな服で描く。
• 擬人化した猫など、かわいい動物キャラクターを描く。
• 色とりどりの背表紙の本を積み上げたモチーフを使う。
• 桜の花のアイコンを、要所に少し散らす。
• 地図は道路を太い灰緑の線で単純化して描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• もう一方の画面幅（狭い側）では、ナビをハンバーガーメニューにする。
• 狭い幅ではお知らせの日付と本文を縦に積む。広い幅では横に並べる。
• 狭い幅では見出し脇のイラストを小さくし、画面端に寄せる。
• ヒーローと地図は幅いっぱいに比率を保って縮小する。

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