--- version: alpha name: Warm Bakery Kraft Paper Corporate LP description: 生成り地に、パンの焼き色を思わせるクラフト紙調の茶色セクションを重ねた食品メーカーの LP。食パンの山形のような波打つ境界、黄色のピル型ボタン、緑のフッターとキャラクターのイラストで、親しみやすく手作り感のある雰囲気にまとめている。 colors: background: '#FAF8EC' primary: '#AA6337' secondary: '#DE9256' dark-section: '#15793B' cta: '#FFD833' on-cta: '#331C00' surface: '#FEFEFE' background-alt: '#FAF8EC' tint-1: '#F1DDBD' text: '#3A2E22' on-dark: '#FEFBF7' accent-1: '#C53B20' accent-2: '#039146' marker: '#FEC67B' accent-2-accessible: '#038540' typography: display: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-lg: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 8px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px icon-circle-nav: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 60px category-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 150px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 220px heading-hatch: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 60px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 36px arrow-circle: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 30px news-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px --- # DESIGN.md — 焼き色クラフト紙と緑の親しみパンメーカー LP（Warm Bakery Kraft Paper Corporate LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 親しみ・手作り感、ナチュラル、かわいい、ポップ・元気 - **キーワード**: 焼き色・クラフト紙・生成り・食パンの山形・キャラクター・黄色ボタン - **地の質感**: 茶色の面には紙の繊維やパン生地のようなざらつきを加え、縦の薄い継ぎ目線を入れる。生成り地はフラットにする。 - **形**: 角丸の白カード、ピル型ボタン、食パンの耳のような連続アーチや破れ紙風の境界、パン型にくり抜いた写真枠。 - **温度感**: 暖色寄り。茶とオレンジが主役で、緑と黄色を差し色にする。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FAF8EC` | ページの生成り地 | 24% | 画素の実測 | | `primary` | `#AA6337` | 焼き色クラフトのセクション地 | 20% | 画素の主要色に補正 | | `secondary` | `#DE9256` | 明るい焼き色のインスタ帯 | 12% | 画素の実測 | | `dark-section` | `#15793B` | フッターの緑 | 10% | 画素の実測 | | `cta` | `#FFD833` | 黄色のピル型ボタン | 2% | 画素の実測 | | `on-cta` | `#331C00` | ボタンの文字 | 0% | 画素の実測 | | `surface` | `#FEFEFE` | カードの白 | 7% | 画素の実測 | | `background-alt` | `#FAF8EC` | カードの写真枠のクリーム色 | 3% | 画素の実測 | | `tint-1` | `#F1DDBD` | パン生地色の境界帯 | 5% | 画素の実測 | | `text` | `#3A2E22` | 見出しと本文のこげ茶 | 1% | 推定 | | `on-dark` | `#FEFBF7` | 濃い地の上の白文字 | 0% | 画素の実測 | | `accent-1` | `#C53B20` | パッケージの赤 | 1% | 画素の主要色に補正 | | `accent-2` | `#039146` | キャラクターの緑と問い合わせ丸ボタン | 1% | 画素の主要色に補正 | | `marker` | `#FEC67B` | 見出し下の斜線の飾り | 0% | 画素の実測 | | `accent-2-accessible` | `#038540` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと焼き色の茶を交互に置き、セクションごとに切り替える - 茶の面はクラフト紙のような質感にし、文字は白にする - 主な CTA と矢印アイコンは黄色だけを使う - 緑はフッターとキャラクター、問い合わせボタンに限って使う - 本文は黒ではなくこげ茶にする - 赤は商品パッケージの写真に任せ、UI には使わない - `icon-circle-nav` は文字 `#FEFBF7` × 背景 `#039146` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#038540`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチ | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.3 | 0.1em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.4 | 0.08em | | `headline-sm` | カードのタイトル | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.5 | 0.08em | | `body-md` | リード文とお知らせ | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.7 | 0.05em | | `note` | 日付とフッターのリンク | 欧文サンセリフ | Noto Sans JP | 500 | 11px | 1.6 | 0.03em | | `label-button` | ピル型ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.2 | 0.05em | | `accent` | 吹き出しのせりふ | 丸ゴシック | M PLUS Rounded 1c | 700 | 11px | 1.4 | 0.05em | - 文字は全体を太めの丸ゴシックでそろえる - 見出しは中央に置き、字間を広めにとる - FV のキャッチは縦書きにし、横に細い縦線を添える - 見出しの下に黄色の斜線を短く並べて飾る - サブ見出しは左右に斜線を置いた「＼ ／」の形にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品カテゴリだけ 2 列のグリッドにする - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右 16px の余白で横幅いっぱいに並べる - カテゴリカードは上が写真、下が名前の縦組みにする - セクション見出しの上下は 40px ほど空ける - CTA は各セクションの末尾中央に置く - セクション境界は装飾を重ねて区切る ## Elevation & Depth - カードは白地に右下へずらした薄茶のベタ影（ぼかしなし）を付ける - 黄色ボタンにも下向きに濃い黄色のベタ影を付ける - 写真棚はこげ茶の板と影で立体的に見せる ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: カード上部を角丸の長方形に切り抜く。インスタの写真は食パン形のシルエットで切り抜く。 - **セクション境界**: 上辺は食パンの山形をつなげたアーチにし、紙が破れたようなギザギザや手描きの縁も使う - ボタンは常にピル型にする - 丸いアイコンボタンは正円にする - FV の写真は左上の角だけ大きく丸める ## Components - **黄色のピル型 CTA**（`button-primary`）: 黄色地にこげ茶の太字。右端に黒丸の矢印アイコンを置き、下にベタ影を付ける - **右上の丸型ナビ**（`icon-circle-nav`）: 緑の問い合わせボタンと黄色のメニューボタンを並べた円形ボタン。アイコンの下に小さなラベルを付ける - **商品カテゴリカード**（`category-card`）: 上はクリーム地に商品の切り抜き写真、下は白地に中央寄せのカテゴリ名を置く - **横長の写真カード**（`feature-card`）: 上に全幅の写真、下に白い帯とタイトルを置き、ベタ影を付ける - **斜線の飾り付き見出し**（`heading-hatch`）: 白の太字見出しの下に黄色の短い斜線を並べる - **キャラクターの吹き出し**（`speech-bubble`）: 白い角丸の吹き出しに短いせりふを入れ、キャラクターのイラストに添える - **黄色の丸い矢印**（`arrow-circle`）: 一覧へのテキストリンクやスライダー操作に付ける黄色の円形アイコン - **お知らせ行**（`news-item`）: 見出し、グレーの日付、太字のタイトル、右寄せの一覧リンクを縦に並べる ## Do's and Don'ts **Do** - 茶の面には紙やパン生地のざらついた質感を入れる - セクションの境界は食パンの山形や破れ紙の形にする - ボタンは黄色のピル型にベタ影を付ける - キャラクターと吹き出しを要所に置き、親しみを出す - 文字は太めの丸ゴシックにする **Don't** - 寒色のグラデーションやガラス風の効果を使わない - 真っ黒の文字や細い明朝体を使わない - セクション境界をまっすぐな直線にしない - ぼかした大きなドロップシャドウを使わない - CTA を黄色以外の色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの温かみを伝える）: 左に縦書きのキャッチとロゴ、右に左上を大きく丸めた商品写真のスライダーを置く。右上に丸型ナビを配置する 2. **お知らせ**（最新情報を伝える）: 生成り地にお知らせを 1 件表示し、キャラクターと吹き出しを添える 3. **商品紹介**（商品カテゴリへ案内する）: 茶のクラフト地を山形の境界で始め、見出しの下に 2 列×2 段のカテゴリカードと黄色の CTA を置く 4. **特集・コンテンツ**（おすすめ商品や企業の歴史を紹介する）: 生成り地に横長の写真カードを縦に 3 枚並べる 5. **SNS 紹介**（SNS のフォローを促す）: 明るい焼き色の地に配送車のイラストを置き、パン形の写真を棚の上に横スクロールで並べ、黄色ボタンで締める 6. **フッター**（ページトップへの導線と規約リンク）: パン生地色の帯から緑の面へ切り替え、寝転ぶキャラクターと吹き出しのトップへ戻るボタン、縦線で区切った白文字のリンクを置く ## Imagery - 商品は個包装のまま白背景で切り抜き、カードに浮かせる - シーン写真は木目の机など暖色の環境で、浅い被写界深度で撮る - キャラクターは太い白フチで縁取ったフラットなイラストにする - 配送車やパンなどの小物は手描き風のイラストで添える - 背景は茶系の紙やパン生地の質感の画像にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はグローバルナビをアイコン付きで横に並べ、右上に緑の問い合わせボタンを置く - PC のカテゴリカードは横長にし、左に写真、右に名前を置く 2 列にする - PC の特集カードは横長の 2 列グリッドにする - PC の SNS 写真は 3 枚を中央の棚に並べる - PC は内容の幅を約 60% に絞り、両側に地の質感を見せる ## 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-45fa4d2d`（元 LP の URL から採番） - **元 LP**: https://www.gushikenpan.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。