--- version: alpha name: Apricot Beige Minimal Confectionery Shop LP description: 杏色のベージュ一色を地にして余白を広く取り、細いゴシックと欧文の小見出しで静かに組む洋菓子店のブランドサイト型 LP。商品写真は角丸の正方形にパステル単色背景で並べ、縦書きのコピー、カプセル型の写真、大きく透けた欧文ロゴ文字で雑誌のような品の良さを出している。 colors: background: '#F0D3B5' background-alt: '#FFE7CD' primary: '#AC7A4E' text: '#1F1A16' surface: '#FFFFFF' tint-1: '#F9EBBE' tint-2: '#FDDFD6' accent-1: '#EE9AA6' accent-2: '#FFFD8A' line: '#3A3029' text-muted: '#F1D2B0' typography: display: fontFamily: Jost fontSize: 72px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em headline-md: fontFamily: Jost fontSize: 22px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em label-button: fontFamily: Jost fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-capsule: backgroundColor: '{colors.background}' rounded: '{rounded.full}' height: 200px vertical-copy: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 160px section-title: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 56px product-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 320px season-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 32px underline-subhead: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 28px profile-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px news-list: textColor: '{colors.text}' typography: '{typography.note}' height: 40px --- # DESIGN.md — 杏色ベージュの余白系洋菓子店 LP（Apricot Beige Minimal Confectionery Shop LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、シンプル・ミニマル、やさしい・柔らかい、ナチュラル - **キーワード**: 杏色ベージュ・広い余白・縦書きコピー・パステル商品写真・細い欧文見出し・カプセル型写真 - **地の質感**: フラットな単色面。影もグラデもなく、紙のようなマットな質感 - **形**: 角丸正方形の商品写真、カプセル型・楕円の写真、細い罫線、ピル型の線のボタン - **温度感**: 暖かく穏やか。焼き菓子のような淡い暖色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F0D3B5` | ページ全体の地色（杏色ベージュ） | 55% | 画素の実測 | | `background-alt` | `#FFE7CD` | ブランド紹介セクションの淡いピーチ地 | 10% | 画素の実測 | | `primary` | `#AC7A4E` | ブランドの焼き色ブラウン（透かし欧文・焼き菓子の色） | 4% | 推定 | | `text` | `#1F1A16` | 見出しと本文のほぼ黒の文字 | 3% | 推定 | | `surface` | `#FFFFFF` | プロフィールの白カード | 2% | 画素の実測 | | `tint-1` | `#F9EBBE` | 抹茶など商品写真のパステル黄色背景 | 2% | 画素の実測 | | `tint-2` | `#FDDFD6` | 桜など商品写真のパステルピンク背景 | 2% | 画素の実測 | | `accent-1` | `#EE9AA6` | 季節限定バッジのピンク | 0% | 推定 | | `accent-2` | `#FFFD8A` | 季節限定バッジのレモンイエロー | 0% | 画素の実測 | | `line` | `#3A3029` | セクション区切り・サブ見出しの下線 | 0% | 推定 | | `text-muted` | `#F1D2B0` | 透かしの大きな欧文文字 | 4% | 画素の主要色に補正 | - 地色は杏色ベージュ 1 色で通し、ブランド紹介だけ淡いピーチに切り替える - 文字はほぼ黒の 1 色だけを使い、色付きの見出しは作らない - 色は写真と商品写真の背景のパステル単色で足す - 季節限定バッジだけに小さな円で彩度の高いピンク・黄・くすみ茶を使う - 白は人物プロフィールのカードだけに使う - CTA 用の目立つ色は置かず、線のボタンで控えめに誘導する ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション背景に透かして置く大きな欧文ロゴ文字 | 欧文サンセリフ | Jost | 400 | 72px | 1.0 | 0.02em | | `headline-lg` | コンセプトの縦書きキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 22px | 1.6 | 0.15em | | `headline-md` | 英小文字のセクション見出し（下に和文の小ラベル） | 欧文サンセリフ | Jost | 400 | 22px | 1.3 | 0.03em | | `headline-sm` | 商品の欧文名・下線付きの特徴サブ見出し | ゴシック | Zen Kaku Gothic New | 500 | 15px | 1.5 | 0.08em | | `body-md` | 本文と商品説明 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 2.0 | 0.1em | | `note` | 和文の小ラベル・日付・番号・フッター | ゴシック | Zen Kaku Gothic New | 500 | 10px | 1.6 | 0.15em | | `label-button` | 線のピル型ボタンの文字 | 欧文サンセリフ | Jost | 500 | 12px | 1.0 | 0.05em | - 見出しは英小文字で書き、すぐ下に小さな和文ラベルを中央揃えで添える - コンセプトのキャッチは縦書きにし、横に小さな英字のサブコピーを縦に添える - 本文は小さめにし、行間 2.0・字間 0.1em で軽く見せる - 太字はほとんど使わず、400〜500 のウェイトに留める - 商品番号は 01, 02 の 2 桁で小さく添える - サブ見出しは文字幅だけの細い下線で装飾する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC の商品紹介は写真と説明の 2 カラム - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの上下に大きな余白を取り、密度を低くする - 本文ブロックは幅を狭くし、行の長さを短く保つ - 写真ギャラリーは余白なしで画面いっぱいに 3×2 のグリッドで敷く - 商品は写真と説明を 1 セットにして縦に等間隔で並べる - 後半のセクションは全幅の細い罫線で区切る - お知らせは日付とタイトルの 2 列のテキストリストにする ## Elevation & Depth - 影は使わず、すべてフラットに組む - 奥行きは色面の重なりで出す（楕円の写真に白カードを重ねる） - 透かしの欧文文字は地色よりわずかに濃い色で背景に沈める ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は角丸の正方形、ヒーローはカプセル型、人物は楕円、ギャラリーとメインビジュアルは角なしの全幅 - **セクション境界**: 直線の色面切り替えか、全幅の細い罫線 - 商品写真は角丸 20px 前後の正方形でそろえる - ヒーロー写真は左右が半円のカプセル型に抜く - ボタンは細い線のピル型で、塗りは使わない - 季節限定バッジは写真の左上に置く小さな円 ## Components - **カプセル型ヒーロー写真**（`hero-capsule`）: カプセル型に抜いた写真の上に、線画のロゴマークを白い線で重ねる - **縦書きキャッチ**（`vertical-copy`）: 右寄せに置く縦書きの和文キャッチと、縦向きの英字サブコピー - **英小文字のセクション見出し**（`section-title`）: 中央に英小文字の見出しを置き、下に小さな和文ラベルを添える - **商品紹介セット**（`product-card`）: パステル単色背景の角丸正方形写真に、番号・欧文名・和名・下線付きサブ見出し・説明文を組み合わせる - **季節限定バッジ**（`season-badge`）: 写真の左上に置く直径 32px ほどの色付きの円。中に小さな黒文字 - **下線付きサブ見出し**（`underline-subhead`）: 文字幅だけの 1px 黒線を下に引いた短い見出し - **人物プロフィールカード**（`profile-card`）: 楕円の人物写真に白い角丸カードをずらして重ね、肩書きを縦書きで添える - **線のピル型ボタン**（`button-outline`）: 黒の細い線だけで描くピル型のボタン。SNS などへのリンクに使う - **お知らせリスト**（`news-list`）: 左に日付、右にタイトルを並べたテキストのみの行。最後に下線付きの「もっと見る」リンクを右寄せで置く ## Do's and Don'ts **Do** - 地色は杏色ベージュ 1 色にし、余白をたっぷり取る - 商品写真は商品ごとにパステル単色の背景で撮り、角丸の正方形でそろえる - 見出しは英小文字＋和文の小ラベルの 2 段で組む - 文字は小さく細く、字間を広めに取る - ブランド名の欧文は巨大な透かし文字として背景に使う **Don't** - 赤やオレンジの塗りつぶし CTA ボタンを置かない - 影・グラデーション・太い枠線を使わない - 太字の大きな和文見出しで煽らない - 価格訴求のバッジやアイコンを詰め込まない - 写真の背景に柄や複数の色を入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（素材感と世界観を一枚で伝える）: ベージュの地にカプセル型の写真を置き、白い線のロゴマークを重ねる 2. **コンセプト**（贈り物としての価値と作り方を語る）: 右側に縦書きのキャッチ、左下に短い行の本文を広い余白の中に置く 3. **素材ギャラリー**（原材料と店舗の空気感を見せる）: 素材と店舗の写真を全幅 3×2 のグリッドに隙間なく敷く 4. **商品ラインナップ**（味の種類と特徴を伝える）: 角丸写真と番号付きの説明を縦に 6 セット並べ、限定品にはバッジを付ける 5. **作り手紹介**（監修者の顔と経歴で信頼を作る）: 淡いピーチ地に巨大な透かし欧文、楕円の人物写真、白カードを重ねる 6. **メインビジュアル**（商品断面のシズル感を見せる）: 断面のアップ写真を全幅で大きく置く 7. **店舗情報**（来店を促す）: 地図を埋め込み、下に店名・住所・営業時間を中央揃えで置き、線のボタンを添える 8. **お知らせ**（最新の動きを伝える）: 罫線で区切り、日付とタイトルのテキストリストにする 9. **メディア掲載**（第三者からの評価で信頼を補う）: 黒の単色ロゴを横一列に並べる 10. **フッター**（規約などへの導線）: 罫線の下に小さなテキストリンクとコピーライトを左右に置く ## Imagery - 商品は真横から撮り、無地のパステル単色を背景にして柔らかい影だけを付ける - 素材写真は真上や斜め上からのクローズアップ。ナッツ・蜂蜜・メレンゲなど質感が伝わるもの - 店舗写真はグレーの壁と植物で、低い彩度の落ち着いたトーンにする - 人物は自然光で撮った横顔の笑顔。ガラス越しの映り込みでやわらかく見せる - ロゴマークは鳥のような細い一筆書きの線画 - 断面写真は寄りで撮り、具材の色が見えるようにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では商品の写真と説明を縦に積み、写真幅は 80% 前後にする - 縦書きのキャッチは SP でも縦書きのまま中央寄りに置く - ギャラリーは SP で 2 列にする - 透かしの欧文文字は SP で画面幅いっぱいまで縮める - PC は中央寄せの狭い本文幅を保ち、余白をさらに広げる - お知らせの日付とタイトルは SP で 2 段に分けてもよい ## 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-d38119c3`（元 LP の URL から採番） - **元 LP**: https://nougatshop.jp/ - **解析に使った画像**: 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/）からご連絡ください。