DESIGN.md — 赤×クリームの斜め構図ポップな菓子ブランドLP（Playful Red and Cream Anniversary Food Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい、力強い・インパクト
• キーワード: 赤×クリーム・斜めの構図・紙吹雪・手書き風見出し・方眼の地・周年
• 地の質感: クリーム地にはうっすら紙の質感を入れる。方眼の地とザラついた山吹色の面も使う。
• 形: 傾けた角丸の太枠、斜めに切った写真、波形のスカラップ境界、看板風のラベル
• 温度感: 暖色寄りで、明るく陽気

Colors

• 地の色はセクションごとに白→赤→クリーム→山吹→赤→クリーム→こげ茶の順で切り替え、リズムを作る
• 赤は帯・太枠・ラベルにまとめて使い、白文字を乗せる
• 黄色は見出しと紙吹雪のアクセントに限って使う
• 本文には黒を使わず、茶系の文字色で暖かさを保つ
• 最後のセクションはこげ茶で締め、動画やバナーを目立たせる
• tilted-frame は文字 #E8372F × 背景 #FFFFFF のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E6251D、4.52:1）を使う。
• logo-badge は文字 #FFFFFF × 背景 #E8372F のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E6251D、4.52:1）を使う。
• link-card は文字 #FFFFFF × 背景 #E8372F のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E6251D、4.52:1）を使う。
• rank-item は文字 #E8372F × 背景 #FFFBEB のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E6251D、4.52:1）を使う。
• scallop-header は文字 #FFFFFF × 背景 #E8372F のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E6251D、4.52:1）を使う。
• campaign-banner は文字 #E8372F × 背景 #FCE3DC のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E6251D、4.51:1）を使う。

Typography

• 見出しは太いディスプレイ書体のカタカナで、字間を広めに取る
• メッセージ本文は短い行で改行し、中央揃えか左揃えで余白を多めに取る
• 感情を込めたい見出しは手書き風の書体で赤くする
• キャッチの文字は赤い四角に白抜きで載せ、少し傾ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ランキングは 2 列＋1 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真と枠は 5〜8 度傾け、画面端からはみ出させてもよい
• 本文ブロックは左右に余白を大きく取り、狭い幅に収める
• セクション見出しは中央に置き、上下に 32px 以上の余白を取る
• 動画は横幅いっぱいに近い 16:9 で縦に並べる

Elevation & Depth

• 影はほぼ使わず、色面の重なりで奥行きを出す
• コメントカードは白地に、ごく薄い影を付ける程度にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は平行四辺形に斜めに切るか、角丸の長方形にする
• セクション境界: 斜めの直線・波形のスカラップ・大きな曲線で区切る
• 赤い太枠は角丸 24px 程度で、傾けて配置する
• 矢印ボタンは白いピル型にする
• 王冠アイコンで順位を示す

Components

• 傾いた赤い太枠（tilted-frame）: 白地に太さ約 12px の赤い角丸枠を傾けて置き、中にメッセージと人物の切り抜きを配置する
• 白抜きキャッチ札（logo-badge）: 赤い四角を 2 段ずらして重ね、白い太文字を傾けて載せる
• 赤帯付きリンクカード（link-card）: 上半分が写真、下に赤い帯を付け、白文字の説明と右端の白いピル型矢印ボタンを置く
• 吊り看板ラベル（sign-label）: 山吹色の札を 2 本の紐で吊ったデザインで、こげ茶の見出しを載せる
• 王冠付きランキング（rank-item）: 金・銀・銅の王冠に番号、赤い商品名、切り抜いた商品写真、白いコメントカードを縦に並べる
• 波形の赤ヘッダー（scallop-header）: 赤地の下端を波形に切り、白い見出しと星形のきらめきを散らす
• 斜めカットのプロフィール（profile-card）: 赤地の上にクリーム色の面を大きな曲線で重ね、角丸の人物写真・名前・点線・経歴を並べる
• キャンペーンバナー（campaign-banner）: 暗い地の上に角丸の大きなバナーを置く。イラストと赤い面に白抜き文字、淡いピンクの面に赤いハッシュタグ文字を配置する

Do's and Don'ts

Do - 赤とクリームを主役にし、黄色は紙吹雪と見出しで少しだけ差す - 写真・枠・文字札は傾けて置き、動きを出す - セクションの境界は斜線・波形・曲線などで変化をつける - 本文は短い行で改行し、詩的なリズムで見せる - 商品写真は切り抜いて白やクリームの地に置く

Don't - 寒色や灰色をメインの色にしない - 本文に純黒を使わない - セクションをすべて水平な直線で区切らない - 影やグラデーションを多用して重く見せない - 細身の明朝体で見出しを作らない

Page Structure

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

1. ファーストビュー（ブランドの世界観と周年を伝える）: 白地に斜めに切った人物写真を置き、白抜きの赤い札のキャッチを重ねる。周囲に紙吹雪を散らし、下にページ内リンクを並べる
2. ブランドメッセージ（ブランドに込めた想いを語る）: 傾いた赤い太枠の中に短い行の詩的な本文を入れ、人物の全身切り抜きを添える
3. ブランドムービー（CM 動画を見せる）: 黄色の見出しの下に動画を置き、その下の赤い帯に白文字の解説を入れる
4. 周年の感謝（ブランドのビジョンを示す）: クリーム地に赤い手書き風見出し、街のイラスト、中央揃えの長い本文、ロゴを置く
5. ヒストリー（歴史や過去の商品へ誘導する）: 山吹色のザラついた地に、赤帯付きのリンクカードを 2 枚縦に並べる
6. アンバサダーのお気に入り（商品を親しみやすく紹介する）: 吊り看板と波形の赤ヘッダーの下、方眼地に王冠付きランキングとコメントカードを並べる
7. アンバサダー紹介（起用人物のプロフィールを示す）: 赤地に斜めのクリーム面を重ね、写真・名前・経歴を配置する
8. イベント動画とキャンペーン（話題の施策を伝えて参加を促す）: こげ茶の地に動画を縦に並べ、最後に角丸のキャンペーンバナーと著作権表記を置く

Imagery

• 人物写真は自然光が入る明るい店内で撮り、笑顔で手を振るなどの動きを入れる
• 服装に赤白ボーダーなどのブランドカラーを入れる
• 商品は真上か斜め上から撮り、背景を切り抜いて使う
• イラストは暖色の俯瞰した街並みで、細かい人物を描き込む
• 装飾には赤と黄色の紙吹雪・星のきらめき・ドーナツのアイコンを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では赤枠メッセージを写真とテキストの 2 カラムにする
• PC ではムービーと周年メッセージを、画像と本文の左右 2 カラムで並べる
• ヒストリーのカードは PC で横 2 列にする
• ランキングは PC で 3 列横並びにし、見出しの横に人物を添える
• 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 行書くと起動時に読み込まれる。