--- version: alpha name: Warm Wood Mincho Gift Spread LP description: 木の食卓の写真とセージグレーの面を交互に置いた LP。縦書きの明朝見出しで落ち着いた和モダンの贈答食品らしさを出す。商品ごとに写真と色帯の説明ブロックを組み合わせ、最後はお客様の声とギフト包装の紹介で締める。 colors: primary: '#A2A594' background: '#FEFDFB' background-alt: '#E6E4D8' dark-section: '#554035' on-dark: '#FDFBF7' secondary: '#797542' accent-1: '#9C7148' accent-2: '#0A3B7C' text: '#554035' accent-3: '#883A0F' surface: '#D6CDC4' typography: display: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 0px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' vertical-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 200px time-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 44px description-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 140px voice-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 130px photo-caption-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 70px gift-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.note}' height: 24px watermark-motif: height: 200px --- # DESIGN.md — 木目とセージの和モダン贈答食品 LP（Warm Wood Mincho Gift Spread LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 上品・高級、和風、ナチュラル、やさしい・柔らかい - **キーワード**: 木目の食卓・縦書き明朝・セージグレー・贈答・暖色の自然光 - **地の質感**: 木の質感と生成りの紙っぽい面。線画の食材イラストを薄く敷き詰める - **形**: 角のない四角い写真ブロック。吹き出しだけを楕円にする - **温度感**: 暖かい（焼き色・琥珀色）と落ち着いたくすみ緑の中間 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A2A594` | コンセプト・口コミ帯のセージグレー地 | 14% | 画素の実測 | | `background` | `#FEFDFB` | 商品紹介の白地 | 10% | 画素の実測 | | `background-alt` | `#E6E4D8` | 締めのギフト紹介の生成り地 | 10% | 画素の実測 | | `dark-section` | `#554035` | 商品説明ブロックのこげ茶帯 | 5% | 画素の主要色に補正 | | `on-dark` | `#FDFBF7` | 暗い帯の上の白文字 | 1% | 画素の主要色に補正 | | `secondary` | `#797542` | 抹茶商品の説明帯のオリーブ緑 | 3% | 画素の実測 | | `accent-1` | `#9C7148` | はちみつ商品の説明帯の琥珀茶 | 3% | 推定 | | `accent-2` | `#0A3B7C` | 朝・夕・夜を示すラベルの夜空ブルー | 1% | 画素の実測 | | `text` | `#554035` | 見出しの濃いこげ茶文字 | 2% | 画素の主要色に補正 | | `accent-3` | `#883A0F` | ギフト対応バッジの赤茶 | 1% | 画素の主要色に補正 | | `surface` | `#D6CDC4` | 口コミ吹き出しの淡いベージュ | 4% | 画素の実測 | - 地の色は写真、セージグレー、白、生成りを交互に切り替える - 商品ごとに説明帯の色を変える（こげ茶・琥珀茶・オリーブ緑） - 朝・夕・夜のラベルだけに青系のグラデーションを使って時間帯を表す - 原色や鮮やかな色は使わない。どの色も彩度を落とす - 赤茶は小さなギフトバッジにだけ使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューに縦書きで置くキャッチ | 明朝 | Shippori Mincho | 500 | 22px | 1.5 | 0.15em | | `headline-lg` | 商品名の縦書き見出し | 明朝 | Shippori Mincho | 500 | 26px | 1.4 | 0.12em | | `headline-md` | セクション見出し（縦書き・白文字） | 明朝 | Noto Serif JP | 500 | 22px | 1.5 | 0.1em | | `headline-sm` | ギフト紹介の横書きリード | 明朝 | Noto Serif JP | 500 | 16px | 1.6 | 0.1em | | `body-md` | コンセプト文と商品説明 | 明朝 | Noto Serif JP | 400 | 13px | 2.0 | 0.08em | | `note` | 口コミの年代・性別 | 明朝 | Noto Serif JP | 400 | 11px | 1.6 | 0.05em | | `accent` | 朝・夕・夜のラベル文字 | 明朝 | Shippori Mincho | 600 | 14px | 1.2 | 0.1em | - 見出しは縦書きの明朝で統一する - 本文も明朝にして行間を広く（2.0 程度）取る - 太字はほぼ使わず、字間を広げて上品に見せる - 写真の上に置く文字は白にして、うっすら影をつける - 本文は中央揃えか左揃えの短い行にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は写真と見出しを左右 2 分割にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 0px、基本単位 8px、カード内 20px（375px 幅換算） - セクション同士は余白を挟まずに直接つなげる - 商品ブロックは縦書きの見出しと瓶の写真を並べ、その下に使用シーンの写真と色帯の説明を置く - 商品ごとに左右の配置を入れ替えてリズムを出す - 各セクションは写真を全幅で見せる ## Elevation & Depth - 基本は影なしの平面で作る - 写真の上の白文字だけにうっすら影をつける - 口コミの商品写真は切り抜きにして、軽い落ち影をつける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角のない四角で全幅または半幅に置く。口コミでは商品を切り抜いて使う - **セクション境界**: 直線で区切る（地の色を切り替える） - 吹き出しは楕円の線画にする - ラベルとバッジは角のない四角にする - 背景に大きな結び紋の線画を薄く敷く ## Components - **縦書き明朝見出し**（`vertical-heading`）: 商品名やコンセプトを 2〜3 行の縦書きで写真の横に置く - **時間帯ラベル**（`time-label`）: 写真の端に重ねる正方形のラベル。青のグラデーションの上に漢字 2 文字を白で置く - **色帯の説明ブロック**（`description-band`）: 商品ごとに地の色を変えた帯の上に、白文字で 3〜4 行の説明を置く - **楕円の口コミ吹き出し**（`voice-bubble`）: 線で描いた楕円の中に「」で囲んだ感想を入れ、右下に年代・性別を添える - **写真の上の帯コピー**（`photo-caption-band`）: 写真の下寄りに、半透明の暗い帯を 2 行敷き、白い明朝で置く - **ギフト対応バッジ**（`gift-badge`）: 赤茶の細い線で囲んだ小さな四角に、ギフト対応の文字を入れる - **結び紋の透かし**（`watermark-motif`）: 地の色の上に、大きな結び紋の線画を薄く重ねる ## Do's and Don'ts **Do** - 食卓の写真は暖色の自然光で撮った木目のものを使う - 見出しは縦書きの明朝にする - 商品ごとに説明帯の色を変える - 地の色は彩度を落とした中間色にする - 余白は広めにして本文は短く刻む **Don't** - ゴシック体の太字で大きく訴求しない - 鮮やかな赤・黄色のボタンや価格の煽りを入れない - 角丸のカードやポップなアイコンを使わない - 寒色の背景を広く使わない - 情報を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ギフト商品の世界観を一目で伝える）: 木の食卓に並ぶ商品の全幅写真。右端に縦書きのキャッチを置き、左下にロゴ、左上にギフトバッジを添える 2. **コンセプト**（ブランドの想いを伝える）: セージグレーの地に、左は皿の写真、右は縦書きの見出しと中央揃えの本文。背景に結び紋の透かしを敷く 3. **ラインナップ概要**（3 種の商品があることを示す）: 木のボードに並ぶ瓶の全幅写真。右に白い縦書き見出し、左下に白文字の本文を置く 4. **商品紹介1**（1 つ目の商品の魅力を伝える）: 白地に縦書きの商品名と瓶の写真、横に使用シーンの写真と時間帯ラベル、下にこげ茶の説明帯 5. **商品紹介2**（2 つ目の商品を伝える）: 商品紹介1と左右を入れ替え、説明帯は琥珀茶にする 6. **商品紹介3**（3 つ目の商品を伝える）: 商品紹介1と同じ配置で、説明帯はオリーブ緑にする 7. **イメージ訴求**（贈り物としての特別感を高める）: 3 種を並べた全幅写真の下寄りに、暗い帯のコピーを 2 行重ねる 8. **お客様の声**（購入者の評価で安心感を与える）: 食材の線画を敷いたセージ地に、楕円の吹き出し 4 つと切り抜いた商品写真をジグザグに配置する。中央に縦書き見出し 9. **ギフト包装**（贈答への対応を伝えて締める）: 生成り地に横書きのリード、箱入り商品の写真と包装の写真を並べ、中央揃えの本文で締める ## Imagery - 木のまな板や木のテーブルの上で、暖かい斜光で撮る - トースト・バゲット・木のスプーン・籐かごなどのパン小物を添える - 瓶はラベルが見える角度で撮り、スプーンで中身をすくうシズル感を入れる - 背景に食材の細い線画イラストを薄い色で敷き詰める - 結び紋のような和の幾何学模様を細い線で透かしとして使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では左右 2 分割をやめて縦に積み、縦書きの見出しは写真の横に重ねるか小さくする - SP の説明帯は全幅にし、内側の余白を 20px 取る - 口コミは SP では吹き出しを 1 列に縦に並べる - PC は最大幅 1080px 程度で写真を全幅で見せる ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-e0e6a6eb`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/sonique/n-hoshiawase-3-1/?l-id=shoptop_widget_featured_items - **解析に使った画像**: PC（PC版） - **確度**: 色 中（6/11 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。