DESIGN.md — 紺×金×赤のアイスブランド年表 LP（Navy Gold Red Ice Cream Brand Story LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: トリコロール・斜め切替・イタリック年号・雲形吹き出し・リボン帯・ブランド年表
• 地の質感: ベタ塗りの面と細線イラスト。きらめき星や音符の線画を散らす
• 形: 斜め・波形のセクション境界、雲形の吹き出し、端が切れ込んだリボン帯、スカラップ形のメダル
• 温度感: クリーム地で温かく、濃紺で引き締めた明るく元気な温度感

Colors

• 地はクリームを基本に、濃紺のセクションを交互に挟む
• 年表は年代ごとに淡金→濃金→赤と地色を切り替え、時代の移り変わりを見せる
• 赤は強調語・小さな丸矢印・操作ボタンに限定する
• キーフレーズは赤文字＋赤い下線で目立たせる
• 濃紺の地では文字を白に、金のきらめき星を添える
• 年号は紺の白抜きアウトライン数字と紺のベタ数字を組み合わせる

Typography

• 大見出しと年号はイタリックの極太体で勢いを出す
• セクション見出しは字間を広く取り、アーチ線の帯に入れる
• 本文は中央揃えで行間を広くする
• 強調語は二重かぎ括弧で囲み、赤にする
• 年号は前 2 桁を白抜きアウトライン、後 2 桁をベタにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。目次は 3＋2、図鑑は 4 列グリッド、メダルは 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 年表は中央の縦線を軸にして、左右交互に配置する
• 商品写真は縦線の上に、リボン帯は反対側へ伸ばす
• セクションの上下に斜めの境界を入れる
• 見出しの上には放射線の飾りを置く

Elevation & Depth

• 影はほぼ使わず、平面的に作る
• 赤ボタンは紺のずらしベタ影で立体感を出す
• 商品写真は白フチ切り抜きで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は白フチ付きの切り抜き。図鑑は角丸の正方形に縞やドット柄の背景を敷く
• セクション境界: 斜めの直線境界と、ゆるい波形の境界
• 吹き出しは雲形のモコモコ輪郭にする
• リボン帯は端に V 字の切れ込みを入れる
• テキストボックスは角を切った二重線の枠にする
• メダルはスカラップ形にリボンを付ける

Components

• 目次リンク（nav-index-card）: 線画アイコン、平行四辺形の紺線ラベル、右端の赤い丸矢印で構成する
• アーチ帯見出し（section-arch-heading）: 上下を紺の弧線で挟み、上に放射線の飾りを置く
• 雲形吹き出し（cloud-bubble）: 白地に紺線のモコモコ吹き出し。補足説明に使う
• 年表リボン帯（timeline-ribbon）: 紺の帯に白文字を入れ、端を切れ込み形にする
• 年代タブ（era-tab）: 選択中は紺ベタに白文字、それ以外は白地に紺枠でイタリック数字
• 図鑑カード（catalog-card）: 柄背景の角丸正方形に商品・名称・年を載せる
• メダル型リンク（medal-link）: スカラップ形に紺リボンを付け、中に商品とラベル、赤い丸矢印を置く
• 赤い操作ボタン（button-primary）: 赤い矩形に白アイコンを載せ、紺のずらし影を付ける
• 二重線フレーム（framed-box）: 角を切った二重線の白ボックスに、強調文を赤下線付きで入れる

Do's and Don'ts

Do - 紺・金・赤・クリームの 4 色を守る - 年号と大見出しはイタリックの極太体にする - セクション境界は斜めか波形にする - きらめき星や線画のスプーンを余白に散らす - 強調文は赤文字＋赤下線にする

Don't - パステルや黒基調にしない - 影の強いリッチな UI にしない - 境界をすべて水平直線にしない - 赤を広い面の本文背景に多用しない（年代の地は例外） - 細い明朝体を使わない

Page Structure

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

1. ファーストビュー（目次）（問いかけ見出しで興味を引き、各コンテンツへ誘導する）: 金地に白い大円を置き、斜体見出しと疑問符・感嘆符の飾り、5 つのアイコン目次を配置する
2. おいしさの秘密（味の特徴を理屈で伝える）: クリーム地に中央揃えの本文、赤下線の強調、大きなキーワード、グラフ図解、雲形吹き出しを並べる
3. ネーミングの秘密（名前の由来を伝える）: 紺地に星を散らす。中央に商品と英単語の雲吹き出し 2 つ、下に二重線の白ボックスを置く
4. 年表（ロングセラーの歴史を見せる）: 中央の縦線に商品と年号を左右交互に配置する。年代ごとに地色を斜めに切り替える
5. 商品図鑑（歴代フレーバーを一覧で見せる）: 年代タブの下に柄背景カードの 4 列スライダー、続けてメダル型のサブリンク 3 つを置く
6. サウンドロゴ（音のブランド資産を体験させる）: ロゴと音符の線画の下に、二重線の楽譜フレームと赤い再生ボタン 3 つを置く
7. 関連バナー（関連コンテンツへ回遊させる）: 紺地にバナーのスライダーを置き、下端に金と赤のライン

Imagery

• 商品は白フチの切り抜きで少し斜めに配置する
• アイコンは紺の単色線画（スプーン・鍵・巻物・本・音符）
• 装飾は金色の線画（スプーン・カップ・音符・きらめき星）
• 図鑑の背景は縞・ドット・チェックのポップな柄
• グラフは青のグラデーション曲線に、赤と金の丸いラベルを付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央 1 カラムで、幅は約 1000px
• PC ではグラフと雲吹き出しを横並びにする
• PC の図鑑は 4 列 2 段を一度に見せる
• PC の関連バナーは 3 枚並びのスライダーにする
• ヘッダーナビは SP・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 行書くと起動時に読み込まれる。