紺×氷水色の爽快アイス新商品LP

Icy Blue Frozen Dessert Brand Hub LP

濃紺の帯見出しと氷のような水色グラデーションの地で、冷たさと勢いを出したアイス商品のブランドLP。商品パッケージの並び、ゲーム・CM動画、キャンペーン、特集バナー、リンク集を縦に積み、最下部に固定タブナビを置く。

菓子・スイーツ清潔・爽やかポップ・元気力強い・インパクトSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。

COLORS

配色

TYPOGRAPHY

書体

displayセクション帯見出し(英字・カナ)ゴシック / Noto Sans JP 900 / 40px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
headline-mdシェア見出しなど小見出しゴシック / Noto Sans JP 700 / 16px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
body-lg青地上の紹介文(中央揃え)ゴシック / Noto Sans JP 700 / 16px / 行間 1.7
あなたの LP を、もっと伝わる形に。Aa 123
body-mdフッターリンクゴシック / Noto Sans JP 700 / 14px / 行間 2.2
あなたの LP を、もっと伝わる形に。Aa 123
noteコピーライト・ナビのラベル欧文サンセリフ / Noto Sans JP 700 / 10px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
accentNEWバッジの斜体欧文サンセリフ / Montserrat 900 / 12px / 行間 1.0
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ヘッダーロゴとシェア導線濃紺帯に白ロゴとSNSアイコン
  2. ファーストビューCMの世界観で掴む放射状の青背景に人物と商品、極太の立体コピー、動画への丸バッジ
  3. 商品ラインナップ全商品を見せる水色地にパッケージを2列、箱商品は1列
  4. オリジナルゲーム体験への誘導青地に帯見出し+NEW、横長バナーと短い紹介文
  5. TVCM動画視聴白枠の動画埋め込み、下端は波形
  6. キャンペーン応募告知バナーに暗幕と白文字で終了表示も可能
  7. 特集関連企画へ回遊横長バナーを3枚縦積み
  8. リンク公式SNS・通販へ白カードやカラーバナーを縦積み
  9. シェア・フッター拡散と規約白帯にSNSアイコン、濃紺フッターに三角記号付きリンク
COMPONENTS

部品

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 独自の章。上から順に、カッコ内が各セクションの役割。

  1. ヘッダー(ロゴとシェア導線): 濃紺帯に白ロゴとSNSアイコン
  2. ファーストビュー(CMの世界観で掴む): 放射状の青背景に人物と商品、極太の立体コピー、動画への丸バッジ
  3. 商品ラインナップ(全商品を見せる): 水色地にパッケージを2列、箱商品は1列
  4. オリジナルゲーム(体験への誘導): 青地に帯見出し+NEW、横長バナーと短い紹介文
  5. TVCM(動画視聴): 白枠の動画埋め込み、下端は波形
  6. キャンペーン(応募告知): バナーに暗幕と白文字で終了表示も可能
  7. 特集(関連企画へ回遊): 横長バナーを3枚縦積み
  8. リンク(公式SNS・通販へ): 白カードやカラーバナーを縦積み
  9. シェア・フッター(拡散と規約): 白帯に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

出典と注意

似た LP の design.md