DESIGN.md — 山吹×焦げ茶の秋の商業施設イベントLP（Autumn Mustard Seasonal Mall Event LP）

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

Overview

• 業種: その他 ／ 雰囲気: ポップ・元気、親しみ・手作り感、やさしい・柔らかい、レトロ
• キーワード: 秋の季節感・コラージュ・紙の質感・ミニチュア人形・横スクロールカード・タイムライン
• 地の質感: 地に細かな紙ノイズ。生成りパネルの縁はちぎった紙のような不揃いな輪郭。
• 形: 角丸カード、ピル型の矢印ボタン、丸いプラスボタン、ちぎり紙風のセクション境界。
• 温度感: 暖かい。黄色〜橙の暖色が主で、焦げ茶で引き締める。

Colors

• 上部は山吹→オレンジの縦グラデーション地で季節の熱量を出す。
• カテゴリ別一覧は生成りの紙パネルに載せ、黄色地から一段落ち着かせる。
• 文字は黒ではなく焦げ茶で統一する。
• オレンジは日付ラベル・選択中タブ・強調語だけに使う。
• 矢印とプラスボタンは臙脂の塗りに白アイコン。
• カードは白地にして写真や告知画像を引き立てる。
• date-badge は文字 #FFFFFE × 背景 #EF5821 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D5440F、4.5:1）を使う。
• tab-toggle は文字 #FFFFFE × 背景 #EF5821 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D5440F、4.5:1）を使う。
• clock-step-icon は文字 #EF5821 × 背景 #FFFFFF のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D5440F、4.5:1）を使う。

Typography

• セクション見出しは大きな英字セリフ＋下に小さな日本語の2段にする。
• カテゴリ見出しは英字の横に白い紙片を置き、日本語の一部をオレンジで強調する。
• 本文は字間を広めに、行間2.0でゆったり組む。
• FVタイトルは白の手書き風で、太陽の放射線装飾を添える。
• キャッチは縦書きで右上に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは横スクロールで次のカードを右端に見せる
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 0px（375px 幅換算）
• カードは幅約70%で、右に次のカードを覗かせる。
• 見出しの右側に前後の矢印ボタンを並べ、下に進捗バー風の線を引く。
• カテゴリ間は点線で区切る。
• モデルコースは写真→タイトル→本文→縦3点リーダーの順に縦に並べる。
• 左右の余白は約28px。

Elevation & Depth

• カードは影なしの白い面。
• 切り抜き素材とミニチュア人形にだけ柔らかい落ち影を付ける。
• 雲の切り抜きはセクション境界に重ねて奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸10px前後の長方形。告知画像は白い枠の中に収める
• セクション境界: ちぎり紙風の波打つ境界と、雲の切り抜き
• 生成りパネルは角丸大きめで、縁を不揃いにする。
• タブと矢印ボタンはピル型。
• プラスボタンは横長の楕円。
• 日付ラベルは小さめの角丸長方形。

Components

• 英字セクション見出し（section-title-en）: 大きな英字セリフに日本語サブを添えた見出し。
• 紙片キャッチタグ（category-tag-paper）: 英字見出し横の白い紙片。日本語の一部をオレンジで強調。
• スライダー矢印（slider-arrow）: 臙脂のピル型に白い矢印。2つ並べる。
• イベントカード（event-card）: 白枠の画像、日付ラベル、太字タイトル、2行抜粋、詳しく読むの順。
• 開催期間ラベル（date-badge）: オレンジ地に白文字の小ラベルと、その横に日付。
• 詳しく読むボタン（more-plus-button）: テキストの右に、臙脂（Pick Up ではオレンジ）の楕円＋アイコン。
• コース切替タブ（tab-toggle）: 選択中はオレンジ塗り、非選択は白地に薄い文字。どちらもピル型。
• 時計ステップアイコン（clock-step-icon）: 写真の左上に重ねる時計。経過時間をオレンジの扇形で表す。

Do's and Don'ts

Do - 写真や切り抜き（紅葉・木の実・かぼちゃ・雲）を見出しの周りに散らす。 - ミニチュア人形を余白に置き、遊び心を出す。 - 文字色は焦げ茶で統一する。 - カードは横スクロールで、次のカードを右端に見せる。 - 紙のノイズ質感を地に敷く。

Don't - 純黒の文字や寒色のメイン色を使わない。 - カードに強いドロップシャドウを付けない。 - 直線だけの硬いセクション境界にしない。 - オレンジを大面積の地に使いすぎない。 - 装飾フォントを本文に使わない。

Page Structure

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

1. ファーストビュー（季節のテーマを一目で伝える）: 山吹色の地に季節のモチーフを詰めたコラージュを置く。白の手書きタイトルと縦書きキャッチを添える。
2. シーズンコンセプト（季節企画の思いを語る）: スタンプ風の英字見出しを2段で千鳥配置し、下線付きの日本語サブを置く。長めの本文はゆったり組む。
3. ピックアップイベント（注目イベントを見せる）: ちぎり紙の境界と雲で切り替える。黄色地に横スクロールのカードを並べる。
4. 家族向けイベント（ターゲット別の提案）: 生成りの紙パネルに英字見出しと紙片タグ、カードスライダーを置く。
5. グルメイベント（食の企画を紹介）: 点線で区切り、かぼちゃの切り抜きを添えた同じ型のスライダー。
6. 限定コンテンツ（期間限定の楽しみを紹介）: イチョウの葉を添えた同じ型のスライダー。パネルの下端はちぎり紙で終える。
7. モデルコース（1日の回り方を提案）: 紅葉の切り抜きの下にタブ切替を置き、時計アイコン付きの写真を縦3点リーダーでつないだタイムラインにする。
8. フッター・アクセス（アクセスと注記）: 白い角丸パネルにロゴ、最寄り駅からの所要時間、注記、表記事項をまとめる。

Imagery

• 季節の小物をトランクなどから溢れさせたコラージュをメインビジュアルにする。
• 紅葉・どんぐり・かぼちゃ・イチョウはリアルな切り抜き写真に柔らかい影を付ける。
• ミニチュア人形（家族・カップル）を余白に配置する。
• ふわっとした立体的な雲の切り抜きを境界に重ねる。
• 施設写真は明るく自然な色の実写を角丸で使う。
• 線画の太陽の放射線を手描きの装飾として添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビを右上に横並びで置く。
• PC のコンセプトは英字見出しを左、本文を右の2カラムにする。
• PC のカードは3列表示（Pick Up は2列）にする。
• PC のモデルコースは写真と本文を左右に並べ、点線で斜めにつなぐジグザグ配置にする。
• 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 行書くと起動時に読み込まれる。