紺×氷水色の爽快アイス新商品LP
Icy Blue Frozen Dessert Brand Hub LP
濃紺の帯見出しと氷のような水色グラデーションの地で、冷たさと勢いを出したアイス商品のブランドLP。商品パッケージの並び、ゲーム・CM動画、キャンペーン、特集バナー、リンク集を縦に積み、最下部に固定タブナビを置く。
菓子・スイーツ清潔・爽やかポップ・元気力強い・インパクトSPPC
Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。
COLORS
配色
- 地は水色の縦グラデーションにし、白一色にはしない
- 動画・ゲームのゾーンだけ鮮やかな青の面にして、波形で切り替える
- セクション見出しは必ず濃紺の帯に白の極太文字
- 赤はNEWバッジに限り、面積を小さく抑える
- フッターと固定ナビは濃紺と白で締める
TYPOGRAPHY
書体
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
- 見出しは極太ゴシックで帯いっぱいに大きく置く
- 本文は太字・中央揃えで短く3行程度まで
- 英字見出しは大文字にする
- 細い書体や明朝は使わない
PAGE STRUCTURE
セクション構成
- ヘッダーロゴとシェア導線濃紺帯に白ロゴとSNSアイコン
- ファーストビューCMの世界観で掴む放射状の青背景に人物と商品、極太の立体コピー、動画への丸バッジ
- 商品ラインナップ全商品を見せる水色地にパッケージを2列、箱商品は1列
- オリジナルゲーム体験への誘導青地に帯見出し+NEW、横長バナーと短い紹介文
- TVCM動画視聴白枠の動画埋め込み、下端は波形
- キャンペーン応募告知バナーに暗幕と白文字で終了表示も可能
- 特集関連企画へ回遊横長バナーを3枚縦積み
- リンク公式SNS・通販へ白カードやカラーバナーを縦積み
- シェア・フッター拡散と規約白帯にSNSアイコン、濃紺フッターに三角記号付きリンク
COMPONENTS
部品
- 濃紺帯見出し heading-band濃紺の長方形に白の極太文字
- NEWバッジ badge-new見出し帯の左上に重ねる赤い丸バッジ
- 商品パッケージグリッド product-grid透過パッケージを2列に並べ影を付ける
- 動画・ゲーム枠 media-frame白い細枠の横長サムネイル、下部に帯リンク
- 特集・リンクバナー banner-card横長バナーを縦に積む
- シェアボタン列 share-row白帯に紺見出しとSNSアイコン3つ
- 固定タブナビ bottom-nav紺アイコンと小ラベルの5タブ
DO
守ること
- 見出しは必ず濃紺帯で統一する
- 地に水色グラデーションと光の筋を入れて冷たさを出す
- 商品は透過画像を影付きで整列させる
- 新しい要素には赤いNEWバッジを添える
- 動画ゾーンは青面と波形で区切る
DON'T
避けること
- 暖色の地色を広く使わない
- 見出しを角丸や細字にしない
- 本文を長文にしない
- 赤をボタンや見出しに多用しない
- 影を強く重くしない
DESIGN.MD
design.md 全文
読みやすい形で表示する
DESIGN.md — 紺×氷水色の爽快アイス新商品LP(Icy Blue Frozen Dessert Brand Hub LP)
AI コーディングツール(Claude Code / Cursor / v0 など)に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML(トークン)が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。
Overview
- 業種: 菓子・スイーツ / 雰囲気: 清潔・爽やか、ポップ・元気、力強い・インパクト
- キーワード: 氷水色グラデーション・濃紺の帯見出し・パッケージ並べ・動画・ゲーム訴求・バナー集約
- 地の質感: 淡い水色の縦グラデーションに光の筋。動画ゾーンだけ鮮やかな青の面。
- 形: 角のない長方形の帯見出しとバナー。区切りは波形の曲線。
- 温度感: 寒色で冷たく爽快
Colors
| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
primary |
#1C1E83 |
見出し帯・ヘッダー・フッターの濃紺 | 12% | 画素の実測 |
on-primary |
#FFFFFE |
濃紺の上の白文字 | 2% | 画素の実測 |
secondary |
#137CCE |
動画ゾーンの鮮やかな青 | 12% | 画素の実測 |
background |
#CAEBFC |
ページ地の氷水色 | 35% | 画素の実測 |
background-alt |
#E1F3FD |
グラデーションの明るい側 | 10% | 画素の実測 |
surface |
#FEFFFE |
シェア帯・リンクカードの白 | 8% | 画素の実測 |
accent-1 |
#E0151F |
NEWバッジ・赤バナーの赤 | 2% | 推定 |
accent-2 |
#C8E9FA |
波形区切りの明るい青 | 4% | 画素の実測 |
text |
#110F57 |
白地の見出し文字の紺 | 1% | 画素の実測 |
dark-section |
#0D1C4F |
終了キャンペーンの暗幕 | 3% | 画素の主要色に補正 |
line |
#FFFFFF |
バナーの細い白枠 | 1% | 画素の主要色に補正 |
- 地は水色の縦グラデーションにし、白一色にはしない
- 動画・ゲームのゾーンだけ鮮やかな青の面にして、波形で切り替える
- セクション見出しは必ず濃紺の帯に白の極太文字
- 赤はNEWバッジに限り、面積を小さく抑える
- フッターと固定ナビは濃紺と白で締める
Typography
| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ(375px 幅) | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
display |
セクション帯見出し(英字・カナ) | ゴシック | Noto Sans JP | 900 | 40px | 1.2 | 0.02em |
headline-md |
シェア見出しなど小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.03em |
body-lg |
青地上の紹介文(中央揃え) | ゴシック | Noto Sans JP | 700 | 16px | 1.7 | 0.04em |
body-md |
フッターリンク | ゴシック | Noto Sans JP | 700 | 14px | 2.2 | 0.02em |
note |
コピーライト・ナビのラベル | 欧文サンセリフ | Noto Sans JP | 700 | 10px | 1.4 | 0.0em |
accent |
NEWバッジの斜体 | 欧文サンセリフ | Montserrat | 900 | 12px | 1.0 | 0.02em |
- 見出しは極太ゴシックで帯いっぱいに大きく置く
- 本文は太字・中央揃えで短く3行程度まで
- 英字見出しは大文字にする
- 細い書体や明朝は使わない
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。
Layout
- カラム: SP は 1 カラム、商品は 2 列グリッド
- 本文ブロックの幅: 画面幅の約 90%
- 余白: セクション間 100px、基本単位 8px、カード内 12px(375px 幅換算)
- 見出し帯は中央に置き、幅は文字に合わせる
- 動画・バナーは幅90%の16:9か横長比率
- 特集バナーは幅約60%で縦に積む
- セクション間はたっぷり空ける
- 画面下にアイコン付き5タブ固定ナビ
Elevation & Depth
- 商品パッケージに柔らかいドロップシャドウ
- バナーは白枠のみでほぼ影なし
- 固定ナビは白地で上に薄い影
Shapes
- 角丸: 小 0px / 中 4px / 大 12px。ボタンは角丸の長方形。
- 写真の切り抜き: 長方形のバナー切り抜き、商品は背景透過
- セクション境界: 青ゾーンの下端は大きな波形曲線、他はグラデーションで連続
- 見出し帯とバナーは角丸なし
- NEWバッジのみ円形か平行四辺形
- SNSアイコンは角丸正方形
Components
- 濃紺帯見出し(
heading-band): 濃紺の長方形に白の極太文字 - NEWバッジ(
badge-new): 見出し帯の左上に重ねる赤い丸バッジ - 商品パッケージグリッド(
product-grid): 透過パッケージを2列に並べ影を付ける - 動画・ゲーム枠(
media-frame): 白い細枠の横長サムネイル、下部に帯リンク - 特集・リンクバナー(
banner-card): 横長バナーを縦に積む - シェアボタン列(
share-row): 白帯に紺見出しとSNSアイコン3つ - 固定タブナビ(
bottom-nav): 紺アイコンと小ラベルの5タブ
Do's and Don'ts
Do - 見出しは必ず濃紺帯で統一する - 地に水色グラデーションと光の筋を入れて冷たさを出す - 商品は透過画像を影付きで整列させる - 新しい要素には赤いNEWバッジを添える - 動画ゾーンは青面と波形で区切る
Don't - 暖色の地色を広く使わない - 見出しを角丸や細字にしない - 本文を長文にしない - 赤をボタンや見出しに多用しない - 影を強く重くしない
Page Structure
LP 独自の章。上から順に、カッコ内が各セクションの役割。
- ヘッダー(ロゴとシェア導線): 濃紺帯に白ロゴとSNSアイコン
- ファーストビュー(CMの世界観で掴む): 放射状の青背景に人物と商品、極太の立体コピー、動画への丸バッジ
- 商品ラインナップ(全商品を見せる): 水色地にパッケージを2列、箱商品は1列
- オリジナルゲーム(体験への誘導): 青地に帯見出し+NEW、横長バナーと短い紹介文
- TVCM(動画視聴): 白枠の動画埋め込み、下端は波形
- キャンペーン(応募告知): バナーに暗幕と白文字で終了表示も可能
- 特集(関連企画へ回遊): 横長バナーを3枚縦積み
- リンク(公式SNS・通販へ): 白カードやカラーバナーを縦積み
- シェア・フッター(拡散と規約): 白帯にSNSアイコン、濃紺フッターに三角記号付きリンク
Imagery
- 人物は笑顔で商品を掲げ、残像やスピード線で勢いを出す
- 背景は青の放射線と光で集中線風にする
- 商品は正面で背景透過、パッケージ色を生かす
- コピーは白と青の立体パースの文字
- 特集バナーは写真や青い幾何学柄で作る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。
Responsive Behavior
- PCは商品を4列グリッドで並べる
- PCの見出し帯は小さめで中央、コンテンツ幅は約50%
- 特集バナーはPCで3列横並び
- リンクバナーは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 行書くと起動時に読み込まれる。
SOURCE
出典と注意
- この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
- 元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
- 色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
- 元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。
似た LP の design.md
菓子・スイーツ山吹色×えんじの絵本風お菓子 LPWarm Picture-Book Confectionery Campaign LP
菓子・スイーツピンク×水色ストライプのポップなスイーツ LPPop Pastel Stripe Dessert Topping LP
菓子・スイーツ桃色×金箔の季節限定スイーツドリンク LPPeach Pink and Gold Premium Dessert Drink LP
菓子・スイーツ金色きらめきの新作フローズンスイーツ LPGolden Shimmer Frozen Dessert LP
菓子・スイーツクラフト紙とチョコ色のサステナ菓子 LPKraft Chocolate Sustainability LP
菓子・スイーツ星空ネイビー×ゴールドのコラボスイーツ LPCosmic Night Collab Dessert Campaign LP