DESIGN.md — 桜色ラメ×縦書き明朝の和スイーツアイス LP（Pink Shimmer Japanese Sweets Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 和風、上品・高級、かわいい、やさしい・柔らかい
• キーワード: くすみピンク・ラメ・シマー質感・縦書き明朝・ひし形カード・金のグラデ線・和素材の木枡
• 地の質感: 細かいラメが入った紙のような質感のピンクの面と、ぼかしの入った柔らかいグラデーション
• 形: 斜めに区切った面、45度回したひし形カード、和風の飾り枠、正円のバッジ
• 温度感: 暖かく甘い。ピンクとクリーム色に、焦げ茶の文字で引き締める

Colors

• 地はピンクの濃淡で作り、純色のピンクを平らに塗らずにラメの質感か柔らかいグラデを重ねる
• 説明のブロック（こだわり）だけはクリーム色に切り替え、読みやすさを優先する
• 文字は焦げ茶を基本にし、真っ黒にはしない。ピンクの面の上の文字は白にする
• 見出し・番号バッジ・波線の飾りはローズピンクにそろえる
• ゴールドは枠線・光・カードの角だけに少し使い、面積を広げない
• CTA は落ち着いたピンクに黄色の影を付けて、軽く浮かせる
• ingredient-card は文字 #FEEDED × 背景 #E47C83 のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D12B36、4.51:1）を使う。
• point-badge は文字 #FEEDED × 背景 #E4758A のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D02948、4.53:1）を使う。
• wave-heading は文字 #E4758A × 背景 #FEF1CC のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D02948、4.56:1）を使う。
• button-primary は文字 #FFFAF1 × 背景 #E27589 のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D53653、4.51:1）を使う。
• info-pill は文字 #FEEDED × 背景 #FDADBA のコントラスト比が 1.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DB0528、4.56:1）を使う。

Typography

• 前半の情緒的なパートは縦書きの明朝で、右から左へ読ませる
• 後半の説明パートは横書きの丸ゴシックに切り替え、親しみやすさを出す
• こだわりの見出しはピンクの太い丸ゴシックで 2 行に分ける
• 本文は中央揃えか左揃えで 1 行 20 字前後におさえる
• 欧文はシリーズ名だけに使い、字間を少し広げた太いサンセリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材説明は縦書きカード 2 枚を横に並べ、声カードはひし形を左右に互い違いに置く
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 斜めの面を重ねて、セクションの境目をジグザグに見せる
• 写真と文字ブロックは左右に交互に置き、少し重ねる
• こだわりの番号バッジは見出しの左右に交互に置く
• 素材写真（木枡など）は画面の端で切れるように置く
• 全体の幅は 375px に固定し、PC では中央の細い 1 列として見せる

Elevation & Depth

• ひし形の声カードには大きめのぼかし影（不透明度 15% 程度）を付ける
• 商品カップの写真の下に柔らかい接地影を付ける
• CTA ボタンは黄色の影を下に 4px ずらして付ける
• それ以外の面は影なしで、質感とグラデーションだけで奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と素材は切り抜きで重ねる。こだわりの写真は円か大きな角丸で切り抜き、画面の端で切れるように置く
• セクション境界: 斜めの面とひし形の重なりで区切る。クリーム色のブロックの上下は波線で飾る
• 声カードは正方形を 45 度回したひし形にし、上の角に金のグラデを入れる
• 番号バッジはピンクの正円に白文字を入れる
• ブランド名は和風の雲形の飾り枠で囲む
• 素材カードは白の細線の長方形で、角丸にしない

Components

• 和風飾り枠の商品名（ornate-name-frame）: 雲形の白い枠の中に、欧文シリーズ名と明朝の商品名を 2 段で入れる。左右に葉のアイコンを添える
• 縦書きリード（vertical-copy）: 明朝の縦書き 5〜6 行。葉のアイコンを始めと終わりに置く
• 素材説明カード（ingredient-card）: ピンクのラメ地に白線の枠。縦書きの素材名（大）と説明（小）を白文字で入れ、上の角に金の光を重ねる
• お客様の声ひし形カード（voice-diamond）: 白いひし形に、ラベル・ピンクのひし形番号・3〜4 行の明朝の声を中央揃えで入れる
• こだわり番号バッジ（point-badge）: 直径 70px ほどのピンクの円に、白でラベルと大きな数字を入れる
• 波線で挟んだセクション見出し（wave-heading）: ピンクの波線を上下に引き、欧文の大見出しとその下に日本語の小見出しを入れる
• 他の商品へ誘導するボタン（button-primary）: 横に長い角丸のピンクボタン。白文字の末尾に「>」を付け、黄色の影を付ける
• 成分情報リンク（info-pill）: 右上に置く薄ピンクのピル型の小さなリンク

Do's and Don'ts

Do - ピンクの面にはラメやグレインの質感を入れて、高級感を出す - 情緒を伝える文章は縦書きの明朝で書く - 和の素材（ごま・きなこ・豆）を木枡や粉のまま写真で見せる - ひし形と斜めの面で、リズムのある華やかな構図にする - 説明パートはクリーム色の地と丸ゴシックに切り替える

Don't - 彩度の高いビビッドなピンクや原色を使わない - 文字を純粋な黒にしない - ゴールドを広い面積に塗らない - 縦書きのパートに丸ゴシックを混ぜない - 大きな角丸のカードやピル型のボタンを多用して、ポップに寄せない - 派手な割引の訴求やバッジを入れない

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: ピンクのグラデの上に、スプーンですくったカップの写真を置き、縦書きの短いキャッチを左上に入れる。下に飾り枠の商品名
2. コンセプト（商品の特徴を情緒的に語る）: 白っぽいピンクの地に縦書きの明朝を 6 行。左右の端に素材入りの木枡を切れた状態で置く
3. 素材の紹介（トッピング・ソース・ベースの 3 つの素材を説明する）: 斜めに区切ったラメのピンク面に、白線枠の縦書きカードを置き、カップを真上から撮った写真と重ねる
4. お客様の声（食べたい気持ちを後押しする）: 白いひし形のカード 2 枚を左右に互い違いに置き、下に小さな注釈を入れる
5. 3 つのこだわり（製法と品質への安心感を伝える）: クリーム色のブロックに波線の見出し。番号バッジ・ピンクの見出し・説明文・丸く切り抜いた写真を交互に並べる
6. CTA・シェア（他の商品やブランドサイトへ誘導する）: 白い地にピンクのボタンを置き、その下に SNS アイコンを横に並べる

Imagery

• 商品は斜め上から撮り、スプーンでとろける様子を見せる。背景はピンクのグラデで、少し霧がかったように
• 素材はカップを真上から撮り、断面と粉の質感をアップで見せる
• 粉や種子を木枡に盛り、画面の端で切れるように置く
• こだわりの写真は白っぽく明るいキッチンと牛乳などで清潔感を出す
• 飾りは葉のシルエットのアイコン、金色の光のグラデ、ラメのテクスチャ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP と同じ縦長の 1 列を中央に約 340px 幅で置く
• PC の左右の余白はピンク一色で埋め、左上にロゴとキャッチを固定表示する
• PC では上部に緑の帯のブランドヘッダーを足す
• 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 行書くと起動時に読み込まれる。