DESIGN.md — 紅×紫×紺の和柄モダン季節限定アイス LP（Japanese Pattern Seasonal Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 和風、上品・高級、やさしい・柔らかい
• キーワード: 和モダン・麻の葉文様・扇形・雲形・季節限定・明朝縦書き
• 地の質感: 深紅や紫の地に細い線の和柄を同系色で重ね、布のような質感を出す。白い地には薄いざらつきがある。
• 形: 扇形の写真枠、波打つ雲形の面、角を落とした和風の額縁、円形の和柄メダリオン。
• 温度感: 暖色寄り。深紅と金茶に紫と紺を加え、落ち着いた華やかさを出す。

Colors

• 地色はファーストビューの淡いグレージュから、深紅、白、紺・赤茶・紫の順に切り替えて場面を変える。
• 濃い地には必ず同系色で細線の和柄を薄く重ね、べた塗りにしない。
• 金茶（#A97A45〜#DAAF85）は CTA と番号ラベル・扇の縁取りに限定して使う。
• 装飾の和柄メダリオンは赤・紺・紫・金を混ぜ、地色とは違う色を置く。
• 白地の文字は焦げ茶にし、真っ黒は使わない。濃い地の文字は白か薄いピンクにする。
• button-primary は文字 #FEF9E9 × 背景 #BB844B のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#976939、4.54:1）を使う。

Typography

• キャッチと特長見出しは明朝、本文はやわらかいゴシックに分ける。
• ファーストビューのキャッチは縦書きで 2〜3 行にし、右から左へ読ませる。
• リード文は短い行で改行し、中央揃えで行間を広め（2.2 以上）にとる。
• 特長の見出しは左揃えと右揃えを交互にして、紙面にリズムをつける。
• 注釈は本文の右下に小さく置き、＊で始める。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と装飾は画面端からはみ出させる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文は左右に約 30px の余白をとる。
• 扇形の写真は画面端まで寄せ、テキストブロックと交互に置く。
• 和柄メダリオンは画面端で半分切れるように置く。
• セクションの切り替えは波形や雲形で重ね、直線では区切らない。
• 商品のカップ画像はセクションの境目にまたがるように置く。

Elevation & Depth

• 影はほぼ使わず、平面的に作る。
• 商品カップの画像にだけ、ごく薄い落ち影をつける。
• CTA ボタンには下側にわずかな影をつけて立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 扇形・半円の窓に写真を切り抜き、金色の細い縁をつける
• セクション境界: 波打つ雲形や大きな曲線で前後のセクションを重ねる
• 額縁カードは角を内側に切り込んだ和風の形にし、二重線の枠をつける。
• 見出しラベルには八角形や扇形を使う。
• 限定バッジは紫の円の中に 2 行の白文字を置く。
• ボタンはピル型で、右端に矢印をつける。

Components

• 金茶のピル型 CTA（button-primary）: 紫の地に置く横長のボタン。白の太字に右向きの矢印を添える。
• 期間限定の丸バッジ（badge-limited）: 紫の円の中に白文字を 2 行で置く。商品写真の右上に配置する。
• 商品名の和風額縁（title-cartouche）: 雲の形をした白い額縁。上に小さな欧文の弧文字を載せ、枠線は緑と赤のグラデーションにする。
• 素材説明の額縁カード（card-framed）: 深紅の地に浮かせる白いカード。二重線の和風の枠で囲み、右上に素材の円形写真を重ねる。
• 扇形の番号ラベル（label-number-fan）: 深緑か金の扇形の中に、小さな見出しと大きな数字を置く。
• お客様の声の八角見出し（heading-medallion）: ピンクの八角形の中に金の細い円枠を入れ、和文と欧文の 2 段で見出しを組む。
• 雲形の声ブロック（review-cloud）: 紺・赤茶・紫の雲形の面を重ね、それぞれに短い感想を薄いピンクの文字で載せる。
• 和柄メダリオン（pattern-medallion）: 麻の葉・七宝・結び紐を円の中に描いた装飾。画面端で半分切れるように置く。

Do's and Don'ts

Do - 濃い地には必ず細線の和柄を同系色で敷く。 - 写真は扇形や半円の窓に入れ、金の縁取りをつける。 - セクションの境目は曲線にし、商品画像を境目にまたがせる。 - 本文は短い行で改行し、行間をたっぷりとる。 - 装飾の和柄メダリオンは画面端に置き、配色は 3〜4 色に絞る。

Don't - 四角い写真を画面幅いっぱいに並べるだけにしない。 - 原色の赤や青のポップな配色にしない。 - 見出しを太いゴシックにしない。 - 強い影やグラデーションのボタンを多用しない。 - 和柄を濃く大きくして、文字が読みにくくならないようにする。

Page Structure

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

1. ファーストビュー（季節感と商品の世界観を一目で伝える）: 木漏れ日の影が落ちるグレージュ地に、ドリンク写真と和柄の皿を置く。右側に明朝の縦書きキャッチ、左下に額縁の商品名、右に限定バッジを配置する。
2. 商品紹介リード（味の魅力を短くまとめて伝える）: 麻の葉柄の深紅地に、白文字の 4 行のリードを中央揃えで置く。上に商品カップをまたがせる。
3. 素材の説明（原料のこだわりを説明する）: 白い額縁カードに小見出しと本文を入れ、右上に素材の円形写真を重ねる。
4. おいしさの秘密 1（味わいの特長を伝える）: 扇形に切り抜いたアイスの写真に、緑の扇形の番号ラベルをつける。下に左揃えの明朝見出しと本文を置く。
5. おいしさの秘密 2（もう一つの素材のこだわりを伝える）: 金縁の扇形にミルクの写真を入れ、金の扇形の番号ラベルをつける。見出しと本文は右揃えにし、注釈を添える。
6. お客様の声（実際の感想で共感を得る）: 紺・赤茶・紫の雲形の面を重ね、ピンクの八角見出しと 2 件の感想を載せる。
7. 締めの CTA（関連商品のページへ誘導し、シェアを促す）: 和柄の紫地に商品カップを大きく置き、その下に金茶のピル型ボタンと SNS の丸アイコン 3 つを並べる。

Imagery

• 商品とドリンクは自然光で撮り、窓辺の葉の影を落としてやわらかく見せる。
• 九谷焼のような色鮮やかな和皿や茶葉など、産地を感じる小物を添える。
• ミルクが渦を巻く様子などのシズル写真は、暖かい茶色のトーンで寄りで撮る。
• 装飾は麻の葉・七宝・結び紐・菊などの和柄を細い線のベクターで描く。
• 商品カップは切り抜きにして、セクションの境目に浮かせる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも SP と同じ約 375〜430px 幅の 1 カラムを中央に置く。
• PC の左右の余白には、ファーストビューと同じ木漏れ日の写真と和柄メダリオンを広げて敷く。
• ファーストビューより下では、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 行書くと起動時に読み込まれる。