--- version: alpha name: Icy Navy and Lemon Yellow Summer Snack LP description: 濃紺の帯と鮮やかな黄色のコントラストに、氷の写真の水色をのせた夏季限定の菓子・冷菓 LP。極太の見出し文字と氷のあしらいでひんやり感を出し、商品特徴は黄色の箱にまとめ、動画と大きな購入バナーで締める短い構成。 colors: primary: '#031E83' secondary: '#FFEB01' background: '#FFFFFF' background-alt: '#F8F8F9' tint-1: '#B4EBFA' dark-section: '#010D32' text: '#022989' text-body: '#010D32' cta: '#FDEB0C' on-cta: '#022989' accent-1: '#E8338A' line: '#022989' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.3em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 700 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 4px full: 999px spacing: unit: 8px card: 12px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-visual: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.display}' height: 340px band-headline: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.display}' height: 90px usage-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 220px label-heading: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 36px outline-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px feature-box: backgroundColor: '{colors.secondary}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 520px video-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 300px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 80px badge-new: backgroundColor: '{colors.accent-1}' typography: '{typography.note}' height: 14px --- # DESIGN.md — 紺×レモン黄と氷の夏向け菓子 LP（Icy Navy and Lemon Yellow Summer Snack LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 力強い・インパクト、清潔・爽やか、ポップ・元気 - **キーワード**: 濃紺×黄色・氷のあしらい・極太見出し・夏の清涼感・商品パッケージ主役 - **地の質感**: 氷の写真の質感と、フラットな単色の帯を組み合わせる - **形**: 角丸なしの四角い帯と箱が中心。氷は輪郭どおりに切り抜いて散らす - **温度感**: 寒色ベースに暖色の黄色を差した、冷たいのに元気な温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#031E83` | ブランド濃紺（ヘッダー・帯・見出しラベル） | 10% | 画素の実測 | | `secondary` | `#FFEB01` | レモン黄（特徴ボックス・見出し文字） | 13% | 画素の実測 | | `background` | `#FFFFFF` | ページの白地 | 21% | 画素の実測 | | `background-alt` | `#F8F8F9` | 薄グレー地（ヒーロー下・小見出し帯） | 9% | 画素の実測 | | `tint-1` | `#B4EBFA` | 氷の水色（動画セクション地・枠） | 8% | 画素の主要色に補正 | | `dark-section` | `#010D32` | 最濃紺（ヘッダー・フッター帯） | 6% | 画素の主要色に補正 | | `text` | `#022989` | 見出し・小見出しの紺文字 | 2% | 画素の主要色に補正 | | `text-body` | `#010D32` | 本文の濃紺グレー | 3% | 画素の主要色に補正 | | `cta` | `#FDEB0C` | 購入バナーの黄地 | 2% | 画素の実測 | | `on-cta` | `#022989` | 購入バナーの紺文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#E8338A` | NEWバッジ等のピンク | 0% | 推定 | | `line` | `#022989` | 動画キャプション下の紺罫線 | 0% | 画素の主要色に補正 | - 地は白と薄グレーを基本にし、区切りに濃紺の全幅帯を入れる - 黄色は特徴ボックスとCTAなど『見せたい面』に限定する - 見出し文字は紺地に黄、黄地や白地に紺で反転させる - 動画など後半は氷の水色写真を地にして涼感を出す - ピンクは新商品バッジなど極小面積だけに使う - 最下部は濃紺帯に黄色の購入バナーを置き最大コントラストにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローと帯の極太キャッチ | ゴシック | Dela Gothic One | 900 | 48px | 1.1 | 0.0em | | `headline-lg` | 商品名などの縦組み大見出し | 明朝 | Shippori Mincho | 800 | 40px | 1.1 | 0.02em | | `headline-md` | 紺ラベル・枠囲みのセクション見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.3 | 0.3em | | `headline-sm` | 特徴ボックス内の小見出し | 明朝 | Noto Serif JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 特徴の本文 | 明朝 | Noto Serif JP | 500 | 12px | 1.8 | 0.02em | | `note` | 注釈・動画キャプション | 明朝 | Noto Serif JP | 700 | 10px | 1.5 | 0.0em | | `label-button` | 購入バナーの文字 | ゴシック | Noto Sans JP | 900 | 22px | 1.2 | 0.02em | - キャッチは極太ゴシックに紺の縁取りや影をつけて黄色で置く - 本文と小見出しは明朝体にして情報部分を落ち着かせる - セクション見出しは字間を大きく開けて短く置く - 縦組みの商品名で和の雰囲気を足す - 本文は12px前後に抑え、見出しとの差をはっきりつける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央寄せで特徴ボックスと商品画像を 2 カラム - **本文ブロックの幅**: 画面幅の約 96% - **余白**: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算） - ヒーローは全幅の写真ビジュアルに文字を焼き込む - 特徴は黄色の大きな箱1つに小見出し帯と本文を交互に積む - 見出しラベルは左寄せで箱の上辺にかぶせる - 動画は横幅いっぱいに縦に並べ、下にキャプションと罫線 - 右下に固定のページトップボタンを置く ## Elevation & Depth - 影はほぼ使わずフラットな面で構成する - 氷の切り抜き画像だけが立体感の担い手になる - キャッチ文字には紺の太い縁取りやドロップシャドウで浮かせる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は四角の全幅、商品と氷は輪郭どおりに切り抜き - **セクション境界**: 直線の全幅色帯で切り替える - ボタンや箱は角丸なしの長方形 - 見出しは塗りの四角ラベルか紺の線枠で囲む - 氷のかけらをセクションの境界やすみに散らす - ページトップボタンだけ小さな角丸の四角 ## Components - **ヒーロービジュアル**（`hero-visual`）: 人物写真と氷を背景に、黄色の極太キャッチと商品パッケージを重ね、下に紺文字の一行コピー - **紺帯キャッチ**（`band-headline`）: 全幅の濃紺帯に黄色の極太文字を一行で置く - **使い方ボックス**（`usage-box`）: 水色の線枠内にイラストと番号付き手順、右に商品画像 - **紺ラベル見出し**（`label-heading`）: 紺の長方形に黄色の字間広めの見出しを左寄せ - **線枠見出し**（`outline-heading`）: 白地に紺の太線枠、中央に紺の字間広め見出し - **特徴ボックス**（`feature-box`）: 黄色の箱に薄グレーの小見出し帯と本文を3組積む - **動画カード**（`video-card`）: 16:9の埋め込み動画、下に明朝の太字キャプションと紺罫線 - **購入バナー**（`button-primary`）: 濃紺帯上の黄色横長バナー。左にカートアイコン、中央に大きな文言と矢印、右に商品画像 - **NEWバッジ**（`badge-new`）: 商品画像下のピンク小ラベル ## Do's and Don'ts **Do** - 紺と黄の反転配色を見出しとCTAに徹底する - 氷の切り抜き画像をセクション間に散らして涼感を保つ - 商品パッケージを大きく切り抜いて主役にする - 特徴は一つの黄色い箱にまとめて簡潔に書く - 最後は濃紺帯＋黄色バナーで購入へ誘導する **Don't** - 暖色系の写真や背景を広く使わない - 角丸の大きいカードやピル型ボタンにしない - 細く軽い書体をキャッチに使わない - 紺・黄・水色以外の強い色を増やさない - 長文の説明セクションを何段も重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランド表示とメニュー）: 濃紺の細い帯に左ハンバーガー、右ロゴ 2. **ファーストビュー**（季節感と商品の一目訴求）: 人物と氷の写真に黄色極太キャッチ、商品画像、下に薄グレー帯の一行コピー 3. **用途キャッチ**（利用シーンの強調）: 濃紺帯に黄色の極太文字 4. **商品紹介**（パッケージと商品名を見せる）: 大きなパッケージ切り抜きと縦組みの商品名、氷のあしらい、NEWバッジ 5. **使い方**（食べ方の手順説明）: 水色線枠にイラストと番号付き3ステップ 6. **食べ方キャッチ**（特徴的な食べ方を印象付ける）: 氷に囲まれた紺縁取りの黄色ロゴ風文字 7. **商品特徴**（3つの特長説明）: 紺ラベル見出しと黄色ボックス内の小見出し帯＋本文 8. **商品ラインナップ**（個包装の種類と入数を示す）: 包装を斜めに並べた画像に吹き出し風の文字と注釈 9. **CM動画**（広告映像で興味喚起）: 氷写真地に線枠見出し、動画2本を縦並び、キャプションと罫線 10. **購入CTA**（通販ページへの送客）: 濃紺帯に黄色の横長バナー、カートアイコンと商品画像 ## Imagery - 透明感のある氷のかけらを白抜きで切り抜き、角度を変えて散らす - 人物は夏柄シャツなど鮮やかな衣装で、青い背景に明るく撮る - 商品パッケージは正面と斜めの切り抜きで大きく見せる - 手順説明はシンプルな線と面の手のイラスト - 背景面は氷を敷き詰めた水色の写真テクスチャ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツを中央約70%幅に収め、左右に氷写真を広げる - PC のヘッダーはテキストのグローバルナビを左に並べる - PC では商品紹介を横並びにし、使い方とキャッチを左右に配置 - PC の特徴は黄色ボックス左、ラインナップ画像右の2カラム - 動画とCTAは PC でも中央1カラムで幅を約70%に ## 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-c9378c1b`（元 LP の URL から採番） - **元 LP**: https://www.uha-mikakuto.co.jp/iceslurry/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。