DESIGN.md — 苺レッド×紺の手描き風イベント LP（Strawberry Red & Navy Illustrated Event LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ポップ・元気、かわいい、レトロ、親しみ・手作り感
• キーワード: 季節イベント・苺イラスト・赤×紺・薄ピンク地・枠線カード・レトロ欧文
• 地の質感: フラットな面に手描きの質感があるイラストと写真を組み合わせる。背景には苺と葉の小柄パターンを敷く
• 形: 紺の 1px 枠で囲んだ大きな角丸カード、六角形の端を持つ紺のリボン型ボタン、苺の形のバッジ
• 温度感: 暖かい（赤・ピンク主体で、紺で引き締める）

Colors

• 地は白とごく薄いピンクの 2 色。左右の余白には苺柄のパターンを敷く
• 赤はヘッダー、和文の見出し、ラベルのピル、主ボタンに使う
• 紺は帯、カードの枠線、リボン型ボタン、日時などの大きな数字に使う
• 本文は濃いグレー。強調したい段落だけ紺の太字にする
• 注意書きや休業日は赤の小さい文字で書き、先頭に「※」を付ける
• 緑は葉のイラストだけに使い、UI には使わない

Typography

• 見出しは「小さな英字＋大きな赤い和文」の 2 段で中央に揃える
• 欧文の装飾見出しは太く丸みのあるレトロなセリフ体を使う
• 数字は大きく、単位や曜日は小さくして、大小の差を付ける
• 本文は小さめにして行間を広く取る
• 注釈は「※」で始め、文字を一段小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2×2 のグリッドで並べることがある
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 30px、基本単位 8px、カード内 16px（375px 幅換算）
• 苺柄の背景の上に、白いカードを左右 4% の余白を残して置く
• カードの上辺の角に苺と花のイラストをはみ出させて飾る
• 見出しの背後に淡いピンクの三角面を敷く
• カードの下半分を薄ピンク地に切り替えて、説明ブロックを置く
• 下部の開催情報はカードにせず、薄ピンクの全幅地にリストで並べる

Elevation & Depth

• 影はほぼ使わない。紺の細い枠線でカードを浮かせる
• PAGE TOP ボタンだけ苺形の立体的なイラストにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 16〜20px の長方形。2×2 グリッドの場合は外側の角だけを丸める
• セクション境界: カードの枠線と背景パターンで区切る。境界は直線
• 項目ラベルは赤のピル型
• サブボタンは紺の帯で、両端を六角形の矢羽のように尖らせる
• 主ボタンは角丸なしの赤い長方形に、右向きの矢印を付ける
• カウントダウンは苺形の赤いバッジにする

Components

• 赤ヘッダー（header-bar）: 左にロゴ、右に SNS の白アイコンとハンバーガーメニュー
• お知らせ帯（news-bar）: 紺の帯にレトロ英字の見出しと＋ボタン。下に日付と赤文字のリンクを置く
• 枠線カード（outlined-card）: 紺の 1px 枠を付けた白い大きな角丸カード。角に苺のイラストを飾る
• 項目ラベル（label-pill）: 日時・時間・料金などの見出しを、赤のピルに白文字で載せる
• 残り日数バッジ（countdown-badge）: 苺形の赤い面に、白の大きな明朝の数字
• リボン型サブボタン（ribbon-button）: 両端が尖った紺の帯に、白文字 2 行
• 詳細ボタン（button-primary）: 赤い長方形に白い太字と右向きの矢印
• Point 見出し（point-heading）: 赤のレトロ欧文に、大きな番号を組み合わせて中央に置く
• 苺アイコン小見出し（info-list-heading）: 苺のアイコンに紺の太字を続ける。下に本文と注釈を置く

Do's and Don'ts

Do - 苺と葉のイラストを、カードの角や背景にふんだんに散らす - 赤と紺の 2 色で UI を構成する - 数字を大きくして、日時と料金がひと目でわかるようにする - 注意事項は「※」付きの小さい文字でまとめる - 各セクションを枠線カードに入れ、英字と和文の 2 段見出しで始める

Don't - 黒地や暗いグラデーションを使わない - UI に緑や青をメイン色として使わない - 影の強いカードやガラス風の表現は避ける - 細い明朝体だけで見出しを組まない - 背景パターンを本文の下に透かさない

Page Structure

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

1. ファーストビュー（イベント名と会期の告知）: 白地に苺と人物の手描き風イラストを敷き詰め、中央にレトロ欧文のタイトルと日付を置く
2. お知らせ（最新の更新情報）: 紺の帯の見出しと、日付＋赤いリンクのリスト
3. 開催概要（日時・時間・料金の提示）: 枠線カードの中に、赤ラベルと大きな数字の項目を点線で区切って並べる。苺形のカウントダウンバッジを付ける
4. イベント紹介（イベントの背景説明）: リボン型の見出しの下に角丸の写真と本文を置き、地を薄ピンクにする
5. 今年のポイント（今回の見どころの訴求）: リード文の後に、Point 番号の見出し、写真グリッド、紺の太字本文の組を繰り返す
6. アプリ案内（公式アプリのダウンロード誘導）: アプリのバナー画像、ストアのバッジ 2 つ、注釈、赤い詳細ボタンを並べる
7. 開催情報詳細（場所・主催・問い合わせ・注意事項）: 薄ピンクの全幅地に、苺アイコン付きの小見出しを付けたリストを並べる
8. フッター（運営元とコピーライト）: 運営元のロゴとリンクを置き、紺の帯に白文字のコピーライトを入れる。苺形の PAGE TOP ボタンを付ける

Imagery

• イラストは、ガッシュや色鉛筆風の質感がある手描きの苺・葉・白い花と、北欧風の素朴な人物
• 背景パターンは、小さな苺と葉を密に散らした柄
• 写真は、晴れた空の下の会場、苺スイーツのアップ、手に持った苺など、明るく鮮やかなもの
• 写真は角丸で切り抜き、枠は付けない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 1000px のカードに収め、左右に苺柄の背景を見せる
• PC の FV は横長にし、人物を左右に分けて置く
• 開催概要の項目は、PC ではラベルと内容を横に並べる
• Point とアプリ案内は、PC では本文と写真を左右 2 カラムにする
• 下部の開催情報は、PC では 2 カラムのリストにする

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