ミント大理石×チョコ茶の涼感アイスLP
Cool Mint Marble Ice Cream LP
淡いミント色の大理石テクスチャを地にして、ミントの葉やチョコのカールを周りに散らした季節限定アイスのLP。斜めに傾けたミント色の帯と、ボルドーに近い茶色の明朝体で、涼しさと上質さを出す。
菓子・スイーツ清潔・爽やか上品・高級ナチュラルSPPC
Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。
COLORS
配色
- 地はページ全体を淡いミント色の大理石で統一する
- 見出しや導入文は、傾けたミント色の帯の上に置く
- 文字は黒にせず、ボルドーがかった茶色にそろえる
- 黄色のマーカーは「期間限定」のような短いラベルだけに使う
- ボルドーと茶色は、パッケージや装飾でアクセントとして使う程度にとどめる
- 白は半透明の吹き出しカードにだけ使う
TYPOGRAPHY
書体
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
- 基本は太めの明朝体で上品にまとめる
- 大見出しは少し傾けるかイタリック風にして、勢いを出す
- 導入文は中央揃えにし、字間を広めに取る
- 特長の本文は左揃えにする
- 欧文は商品名の下に添えるだけにする
PAGE STRUCTURE
セクション構成
- ファーストビュー季節感と商品を印象づける縦書き風のコピー、大きな商品写真、期間限定マーカー、商品名を重ねる
- 導入コピー商品の魅力を短い文で伝える傾けたミント帯の上に、4行の中央揃えの文を置く
- 商品カットパッケージを見せる中央に商品を置き、左右にミントの葉を添える
- 特長素材ごとのこだわりを伝える見出しと本文を矢印で中身の写真につなぐ。これを2項目並べる
- お客様の声共感を得る帯の見出しの下に吹き出しを3つ交互に並べ、注釈を添える
- CTA他の商品ページへ誘導する斜め帯のボタンを置き、その下にSNSアイコンを並べる
COMPONENTS
部品
- 傾いた見出し帯 band-tiltedブラシ目のあるミント色の帯を傾けて敷き、その上に文字を中央揃えで載せる
- 期間限定マーカー badge-marker短いラベルの下半分に黄色のマーカーを引く
- 白帯付き商品名 title-whiteband大きな明朝体の後ろに、半透明の白い斜め帯を敷く
- 矢印付き特長 feature-arrow見出しと本文から、細い曲線の矢印で写真の部位を指す
- 声の吹き出し voice-bubble半透明の白いカードに三角のしっぽを付け、左右交互に置く
- 斜め帯のボタン button-primaryミント色の斜め帯に、文字と細い右向き矢印を並べる
- 右上の情報ボタン button-sub白地に細い枠線の小さなピル型ボタン
- SNS共有アイコン share-icons丸いSNSアイコンを3つ横に並べる
DO
守ること
- 大理石の地とミント色の帯で、涼しさを出す
- 文字は茶色の明朝体にそろえる
- 葉やチョコの切り抜きを周囲に散らす
- 帯やボタンは傾けて動きを出す
DON'T
避けること
- 真っ黒の文字や太いゴシック体を使わない
- 角丸のカードやピル型の大きなボタンは使わない
- 原色の赤やオレンジを入れない
- 背景を無地の白にしない
DESIGN.MD
design.md 全文
読みやすい形で表示する
DESIGN.md — ミント大理石×チョコ茶の涼感アイスLP(Cool Mint Marble Ice Cream LP)
AI コーディングツール(Claude Code / Cursor / v0 など)に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML(トークン)が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。
Overview
- 業種: 菓子・スイーツ / 雰囲気: 清潔・爽やか、上品・高級、ナチュラル
- キーワード: ミント・大理石・涼感・季節限定・斜め帯・明朝体
- 地の質感: 淡い水色の大理石の上に、ブラシ目のあるミント色の帯を重ねる
- 形: わずかに傾けた帯や吹き出し。角丸は使わず直線で切る
- 温度感: 寒色が中心。チョコの茶色で温かみを少し足す
Colors
| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
primary |
#A3E3D4 |
ブランドを代表するミント色の帯 | 12% | 画素の実測 |
background |
#CCDCDC |
大理石の地の色 | 40% | 画素の実測 |
background-alt |
#D4E3E5 |
大理石の明るい部分 | 15% | 画素の実測 |
surface |
#FAFBFC |
お客様の声の吹き出しカード | 6% | 画素の実測 |
text |
#5A2E2E |
見出しと本文(ボルドーがかった茶色) | 4% | 推定 |
secondary |
#4D0A2D |
パッケージのボルドー色。アクセントの面に使う | 3% | 画素の実測 |
accent-1 |
#6C5651 |
チョコの茶色 | 4% | 画素の主要色に補正 |
marker |
#F2EE8A |
「期間限定」に引く黄色のマーカー | 1% | 推定 |
accent-2 |
#68A16D |
ミントの葉の緑 | 5% | 画素の主要色に補正 |
line |
#2F6470 |
写真を指す矢印線(青緑) | 0% | 推定 |
cta |
#A4E3D4 |
遷移ボタンの斜め帯 | 2% | 画素の実測 |
on-cta |
#4A2A2A |
ボタンの文字 | 0% | 推定 |
- 地はページ全体を淡いミント色の大理石で統一する
- 見出しや導入文は、傾けたミント色の帯の上に置く
- 文字は黒にせず、ボルドーがかった茶色にそろえる
- 黄色のマーカーは「期間限定」のような短いラベルだけに使う
- ボルドーと茶色は、パッケージや装飾でアクセントとして使う程度にとどめる
- 白は半透明の吹き出しカードにだけ使う
Typography
| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ(375px 幅) | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
display |
メインコピーと商品名 | 明朝 | Shippori Mincho | 800 | 44px | 1.2 | 0.05em |
accent |
欧文の商品名 | 欧文セリフ | Playfair Display | 700 | 24px | 1.2 | 0.03em |
headline-md |
特長の見出し(斜体ぎみ) | 明朝 | Shippori Mincho | 700 | 24px | 1.3 | 0.05em |
body-lg |
帯の上の導入文 | 明朝 | Shippori Mincho | 700 | 17px | 1.8 | 0.08em |
body-md |
本文と声カード | 明朝 | Noto Serif JP | 600 | 14px | 1.8 | 0.08em |
label-button |
遷移ボタン | 明朝 | Noto Serif JP | 700 | 16px | 1.4 | 0.05em |
note |
注釈と右上の小さなボタン | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.03em |
- 基本は太めの明朝体で上品にまとめる
- 大見出しは少し傾けるかイタリック風にして、勢いを出す
- 導入文は中央揃えにし、字間を広めに取る
- 特長の本文は左揃えにする
- 欧文は商品名の下に添えるだけにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。
Layout
- カラム: SP は 1 カラム
- 本文ブロックの幅: 画面幅の約 86%
- 余白: セクション間 48px、基本単位 8px、カード内 12px(375px 幅換算)
- 商品写真は画面の端から少しはみ出させ、迫力を出す
- 見出し帯は左右の端まで伸ばし、約3〜5度傾ける
- 特長は見出し→本文→写真の順に並べ、矢印でつなぐ
- 声カードは左右交互にずらして置く
- 装飾の葉やチョコは四隅に散らす
Elevation & Depth
- 影はほとんど付けない
- 写真や装飾は切り抜き画像を重ねて奥行きを出す
- 吹き出しは半透明の白で地から浮かせる
Shapes
- 角丸: 小 0px / 中 0px / 大 0px。ボタンは角丸の長方形。
- 写真の切り抜き: 商品と食材は背景を抜いた切り抜き画像にする
- セクション境界: 斜めに傾いたミント色の帯で区切る
- 角丸は使わない
- 吹き出しは小さな三角のしっぽ付きにする
- ボタンも斜めの帯で作る
Components
- 傾いた見出し帯(
band-tilted): ブラシ目のあるミント色の帯を傾けて敷き、その上に文字を中央揃えで載せる - 期間限定マーカー(
badge-marker): 短いラベルの下半分に黄色のマーカーを引く - 白帯付き商品名(
title-whiteband): 大きな明朝体の後ろに、半透明の白い斜め帯を敷く - 矢印付き特長(
feature-arrow): 見出しと本文から、細い曲線の矢印で写真の部位を指す - 声の吹き出し(
voice-bubble): 半透明の白いカードに三角のしっぽを付け、左右交互に置く - 斜め帯のボタン(
button-primary): ミント色の斜め帯に、文字と細い右向き矢印を並べる - 右上の情報ボタン(
button-sub): 白地に細い枠線の小さなピル型ボタン - SNS共有アイコン(
share-icons): 丸いSNSアイコンを3つ横に並べる
Do's and Don'ts
Do - 大理石の地とミント色の帯で、涼しさを出す - 文字は茶色の明朝体にそろえる - 葉やチョコの切り抜きを周囲に散らす - 帯やボタンは傾けて動きを出す
Don't - 真っ黒の文字や太いゴシック体を使わない - 角丸のカードやピル型の大きなボタンは使わない - 原色の赤やオレンジを入れない - 背景を無地の白にしない
Page Structure
LP 独自の章。上から順に、カッコ内が各セクションの役割。
- ファーストビュー(季節感と商品を印象づける): 縦書き風のコピー、大きな商品写真、期間限定マーカー、商品名を重ねる
- 導入コピー(商品の魅力を短い文で伝える): 傾けたミント帯の上に、4行の中央揃えの文を置く
- 商品カット(パッケージを見せる): 中央に商品を置き、左右にミントの葉を添える
- 特長(素材ごとのこだわりを伝える): 見出しと本文を矢印で中身の写真につなぐ。これを2項目並べる
- お客様の声(共感を得る): 帯の見出しの下に吹き出しを3つ交互に並べ、注釈を添える
- CTA(他の商品ページへ誘導する): 斜め帯のボタンを置き、その下にSNSアイコンを並べる
Imagery
- 商品は斜め上から撮り、蓋を開けて中身の質感を見せる
- ミントの葉は鮮やかな緑の切り抜きを四隅に置く
- チョコのカールを切り抜いて散らす
- 背景は淡い水色の大理石テクスチャ
- 人物写真は使わない
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。
Responsive Behavior
- PCでは中央に約480px幅のSPカラムを置く
- カラムの外側は大きな大理石の背景にする
- 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