--- version: alpha name: Retro Pop Yellow Timeline Snack History LP description: 鮮やかな黄色を地に、黒帯と水色の年代バナーで区切るスナック菓子の歴史紹介 LP。縦一本線のタイムラインに筆記体風の年号と丸い国旗アイコンを並べ、アメリカンレトロでポップな印象を作る。 colors: primary: '#FFF100' background: '#FFFFFF' dark-section: '#000000' on-dark: '#FFFFFF' background-alt: '#EEEEEE' secondary: '#5EDFFF' accent-1: '#FE9B34' accent-2: '#E4011C' text: '#030202' text-body: '#333333' line: '#FFFFFF' text-muted: '#888888' tint-1: '#E1F4FA' typography: display: fontFamily: Lobster fontSize: 36px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Pacifico fontSize: 30px fontWeight: 400 lineHeight: 1.2 headline-md: fontFamily: Playfair Display fontSize: 28px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 700 lineHeight: 1.2 rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' era-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.display}' height: 95px timeline-item: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px flag-node: backgroundColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 38px related-button: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px story-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 70px story-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 90px package-road: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 560px brand-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 120px --- # DESIGN.md — 黄×黒×水色のレトロポップなお菓子年表 LP（Retro Pop Yellow Timeline Snack History LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、レトロ、情報量多め・訴求型 - **キーワード**: ビビッドイエロー・年表タイムライン・アメリカンレトロ・筆記体年号・黒帯見出し・パッケージ変遷 - **地の質感**: フラットな単色面に、放射線・ストライプ・ギザギザ縁の装飾と切り抜き写真を重ねる - **形**: 円形アイコン、細い縦線、角のない帯、ドット下線、白い太い蛇行矢印 - **温度感**: 暖かく明るい。黄色の高彩度と黒のコントラストで元気な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFF100` | 年表セクションの地色 | 40% | 画素の実測 | | `background` | `#FFFFFF` | 導入文・フッターの地 | 22% | 画素の実測 | | `dark-section` | `#000000` | Story見出し帯・参考文献帯 | 8% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒帯上の文字 | 1% | 画素の主要色に補正 | | `background-alt` | `#EEEEEE` | ストーリー見出しリストの地 | 9% | 画素の実測 | | `secondary` | `#5EDFFF` | 年代バナーの水色地 | 4% | 画素の実測 | | `accent-1` | `#FE9B34` | タイトルリボンのオレンジ | 1% | 画素の実測 | | `accent-2` | `#E4011C` | 日の丸アイコンの赤 | 0% | 画素の実測 | | `text` | `#030202` | 年号・見出し文字 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文・ストーリー見出し | 3% | 推定 | | `line` | `#FFFFFF` | タイムライン縦線 | 0% | 画素の主要色に補正 | | `text-muted` | `#888888` | ドット下線・矢印 | 0% | 推定 | | `tint-1` | `#E1F4FA` | 導入文背景の世界地図 | 2% | 画素の実測 | - 年表本体は必ず純黄色の地に黒文字で組む - 時代の切り替えは水色バナー、物語の要約は黒帯+薄グレー面で区切る - 赤・オレンジはアイコンやリボンなど小面積のみ - タイムライン線は白で黄地に溶け込ませる - 導入文とフッターは白地で落ち着かせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 年代バナーの大きな年号範囲 | 欧文スクリプト | Lobster | 700 | 36px | 1.1 | 0.0em | | `headline-lg` | Story・英字セクション見出し | 欧文スクリプト | Pacifico | 400 | 30px | 1.2 | 0.0em | | `headline-md` | タイムラインの年号 | 欧文セリフ | Playfair Display | 900 | 28px | 1.1 | -0.02em | | `headline-sm` | ストーリー見出しの和文 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `body-lg` | 和暦ラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.0em | | `body-md` | 導入文・出来事の本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.02em | | `note` | 出典記号・キャプション | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.0em | | `label-button` | 黒丸の関連ボタン | ゴシック | Noto Sans JP | 700 | 7px | 1.2 | 0.0em | - 年号は太い斜体の筆記体風で大きく - 出来事本文は斜体ゴシックで手書き年表の雰囲気に - 導入文は中央揃えで短く改行 - 英字見出しの上に小さな和文ラベルを添える - 出典はアルファベット記号で本文末尾に小さく - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、年表は左に年号・縦線、右端に丸ボタン - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - 縦線は左から約28%の位置に固定 - 年号+丸アイコンを横並びにし下に和暦と本文 - 関連写真は右寄せで傾けて配置 - セクション区切りは全幅の帯 - 黒帯の高さは約70px ## Elevation & Depth - 基本はフラットで影なし - 切り抜き写真に白フチと軽い影 - 丸アイコンは白い円で縦線から浮かせる ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品・写真は切り抜き、古写真は白フチ付きで斜めに重ねる - **セクション境界**: 直線帯。水色バナーの下端はギザギザ縁 - ボタンは正円の黒 - 国旗は円形クロップ - 見出しの下はドット下線とV字矢印 ## Components - **年代バナー**（`era-banner`）: 水色地に素材写真を散らし、筆記体の年号範囲と黒ラベルの小見出し - **年表項目**（`timeline-item`）: 年号+円形国旗、太字和暦、斜体の出来事文 - **円形ノード**（`flag-node`）: 縦線上に乗る白縁の円形国旗アイコン - **関連ボタン**（`related-button`）: 右端の黒丸に白文字2行と三角 - **Story黒帯**（`story-band`）: 黒地に白の筆記体見出し - **ストーリー見出しリスト**（`story-list`）: グレー地に太字見出し、ドット下線、下向き矢印 - **パッケージ変遷ロード**（`package-road`）: 白い太い蛇行道に商品を年代順に配置し吹き出しラベル - **ブランド誘導バナー**（`brand-banner`）: 黒枠のストライプ柄バナーと吹き出し文 ## Do's and Don'ts **Do** - 黄地・黒帯・水色帯の3色リズムを守る - 年号は大きく斜体筆記体で - 縦線と円ノードで時系列を明示 - 写真は傾けて重ねスクラップ感を出す - 出典を記号で示し信頼性を補う **Don't** - 淡いパステルや低彩度の黄色にしない - 年表をカードや表で囲まない - 本文を大きなブロックで詰め込まない - 角丸の大きいボタンを多用しない - グラデーション背景を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（テーマ提示）: 黄色の放射線背景に商品写真、アーチ状英字とオレンジのリボン見出し 2. **導入文**（歴史紹介の背景説明）: 白地に薄水色の世界地図、中央揃えの短い改行文 3. **年代バナー1**（前半時代の区切り）: 水色帯に素材写真と筆記体年号 4. **年表前半**（出来事の時系列）: 黄地に白縦線、年号+国旗ノード、右に関連ボタン 5. **ストーリー要約**（読み物への導線）: 黒帯の英字見出し+グレー面の見出しリスト 6. **年代バナー2・年表後半**（自社史の時系列）: 同型の繰り返し、受賞メダル等を右に添える 7. **ストーリー要約2**（要点の再提示）: 黒帯+3つの見出しリスト 8. **参考文献**（出典表示）: 黒地に白の斜体小文字を中央揃え 9. **パッケージ変遷**（デザイン史の可視化）: 黄地に雲型模様、蛇行する白い道に商品画像と年代 10. **ブランド誘導**（商品サイトへ送客）: 黒枠のストライプバナー 11. **フッター**（サイト内回遊）: 白地にアコーディオンリンク一覧と灰帯コピーライト ## Imagery - 商品やポップコーンは白背景切り抜きで散らす - 古写真はモノクロ・白フチ・やや傾けて重ねる - 国旗は円形アイコン化 - 背景装飾は放射線、ストライプ、雲形の淡い線画 - 吹き出しは黒線の手描き風 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約60%幅に年表を収め、年号を縦線左、本文を右に配置 - PC ではストーリー見出しを1行化し矢印を右端へ - 年代バナー・黒帯は PC でも全幅 - フッターは PC で多カラムのリンク一覧 - パッケージ変遷図は PC で拡大し年号ラベルを追加 ## 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-5a7bb115`（元 LP の URL から採番） - **元 LP**: https://www.fritolay.co.jp/ourbrands/mike/history/ - **解析に使った画像**: 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/）からご連絡ください。