--- version: alpha name: Playful Red and Cream Anniversary Food Brand LP description: 鮮やかな赤とクリーム地、山吹色のアクセントを組み合わせたブランドサイトです。写真を斜めに切り、赤い太枠を傾けて置くことで動きを出しています。手書き風の太い見出し、波形の境界、方眼の地、王冠付きのランキングなどを使い、親しみのある周年ブランドページに仕上げています。最後はこげ茶の暗いセクションで動画とバナーをまとめます。 colors: primary: '#E8372F' background: '#FFFFFF' background-alt: '#FFF6D9' surface: '#FFFBEB' secondary: '#FDD264' dark-section: '#551900' text: '#4A1200' text-body: '#5A3A2A' on-primary: '#FFFFFF' accent-1: '#FAB706' tint-1: '#FCE3DC' line: '#EBE5CA' on-dark: '#FFFFFF' primary-accessible: '#E6251D' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Yomogi fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Klee One fontSize: 14px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' tilted-frame: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 340px logo-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 100px link-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px sign-label: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 64px rank-item: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 260px scallop-header: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 240px profile-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 560px campaign-banner: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 290px --- # DESIGN.md — 赤×クリームの斜め構図ポップな菓子ブランドLP（Playful Red and Cream Anniversary Food Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい、力強い・インパクト - **キーワード**: 赤×クリーム・斜めの構図・紙吹雪・手書き風見出し・方眼の地・周年 - **地の質感**: クリーム地にはうっすら紙の質感を入れる。方眼の地とザラついた山吹色の面も使う。 - **形**: 傾けた角丸の太枠、斜めに切った写真、波形のスカラップ境界、看板風のラベル - **温度感**: 暖色寄りで、明るく陽気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E8372F` | ブランドの赤（帯・枠・ロゴ） | 11% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 13% | 画素の実測 | | `background-alt` | `#FFF6D9` | クリームのセクション地 | 14% | 画素の実測 | | `surface` | `#FFFBEB` | 方眼地とプロフィール地 | 13% | 画素の実測 | | `secondary` | `#FDD264` | 山吹色のセクション地と見出し | 9% | 画素の実測 | | `dark-section` | `#551900` | こげ茶のフッター・動画エリア | 12% | 画素の実測 | | `text` | `#4A1200` | 見出しのこげ茶文字 | 1% | 画素の実測 | | `text-body` | `#5A3A2A` | 本文の茶色文字 | 2% | 推定 | | `on-primary` | `#FFFFFF` | 赤地の上の白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#FAB706` | 黄色の見出しと紙吹雪 | 1% | 画素の実測 | | `tint-1` | `#FCE3DC` | 淡いピンクのバナー地 | 2% | 画素の実測 | | `line` | `#EBE5CA` | 方眼線と点線区切り | 4% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い地の上の白文字 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#E6251D` | AA を満たす補正値（計算） | | 計算 | - 地の色はセクションごとに白→赤→クリーム→山吹→赤→クリーム→こげ茶の順で切り替え、リズムを作る - 赤は帯・太枠・ラベルにまとめて使い、白文字を乗せる - 黄色は見出しと紙吹雪のアクセントに限って使う - 本文には黒を使わず、茶系の文字色で暖かさを保つ - 最後のセクションはこげ茶で締め、動画やバナーを目立たせる - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャッチの白抜きロゴ風文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.02em | | `headline-lg` | セクション見出し（カタカナ） | 装飾・ディスプレイ | Dela Gothic One | 700 | 28px | 1.2 | 0.08em | | `headline-md` | 手書き風のメッセージ見出し | 手書き・筆 | Yomogi | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | ランキングの商品名・サブ見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.4 | 0.1em | | `body-md` | 中央揃えの詩的な本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.05em | | `accent` | コメント吹き出しの手書き文字 | 手書き・筆 | Klee One | 600 | 14px | 1.6 | 0.05em | | `note` | プロフィール・著作権表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | - 見出しは太いディスプレイ書体のカタカナで、字間を広めに取る - メッセージ本文は短い行で改行し、中央揃えか左揃えで余白を多めに取る - 感情を込めたい見出しは手書き風の書体で赤くする - キャッチの文字は赤い四角に白抜きで載せ、少し傾ける - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-72f9ea24`（元 LP の URL から採番） - **元 LP**: https://www.misterdonut.jp/misdo55th/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。