--- version: alpha name: Organic Wavy Kraft Food EC LP description: 生成りの地とくすんだオリーブベージュの帯を波線で交互に切り替える、地方の精肉通販向けの温かい LP。写真は有機的な不定形で切り抜き、オレンジの手描き風イラストと点線ピルボタンで手作りの親しみを出す。2 つのブランドは赤と緑で色を分ける。 colors: background: '#EFEFE5' background-alt: '#D7D2B4' surface: '#FEFEFE' tint-1: '#E0DAC2' primary: '#C58729' text: '#3A2E26' accent-1: '#93011D' accent-2: '#61751A' secondary: '#D9D2B4' line: '#4A3F35' text-muted: '#D9D4BE' dark-section: '#1C1411' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.1em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em accent: fontFamily: Poppins fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.06em headline-sm: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2em label-button: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Poppins fontSize: 9px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 28px 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-dotted-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px button-brand-more: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px tag-brand: backgroundColor: '{colors.accent-1}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px label-en: textColor: '{colors.primary}' typography: '{typography.accent}' height: 16px badge-weight: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 110px card-recipe: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 260px news-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 62px slider-dots: backgroundColor: '{colors.text-muted}' rounded: '{rounded.full}' height: 6px --- # DESIGN.md — 生成り×オリーブベージュの波形食品通販 LP（Organic Wavy Kraft Food EC LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、親しみ・手作り感、やさしい・柔らかい - **キーワード**: 生成り・波形の区切り・不定形の写真・点線ピル・手描き風イラスト・産地の温度感 - **地の質感**: 紙のようなマットな無地。グラデーションや影はほぼ使わず、平らな色面と点線で質感を出す。 - **形**: ゆるい波線、丸みのある不定形（小石型）マスク、ピル型ボタン、角丸カード。 - **温度感**: 暖色寄りのニュートラル。土や藁を思わせる落ち着いた温かさ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#EFEFE5` | 基本の地色（生成り） | 38% | 画素の実測 | | `background-alt` | `#D7D2B4` | 交互帯の地色（オリーブベージュ） | 28% | 画素の実測 | | `surface` | `#FEFEFE` | ボタン・吹き出し・ロゴ枠の白 | 4% | 画素の実測 | | `tint-1` | `#E0DAC2` | フッターの淡いベージュ | 7% | 画素の実測 | | `primary` | `#C58729` | 英字ラベル・日付・イラストのオレンジ | 1% | 画素の実測 | | `text` | `#3A2E26` | 見出し・本文の焦げ茶 | 3% | 推定 | | `accent-1` | `#93011D` | ブランド A のクリムゾン（タグ・ラベル） | 2% | 画素の実測 | | `accent-2` | `#61751A` | ブランド B のオリーブグリーン | 2% | 画素の実測 | | `secondary` | `#D9D2B4` | ボタン内矢印の丸ベージュ | 1% | 画素の実測 | | `line` | `#4A3F35` | 点線の枠線・区切り線 | 1% | 推定 | | `text-muted` | `#D9D4BE` | スライダーの非アクティブドット | 0% | 画素の主要色に補正 | | `dark-section` | `#1C1411` | ブランドロゴ下段の濃色面 | 1% | 画素の実測 | - 地は生成りとオリーブベージュの 2 色をセクションごとに交互に使い、境目は波線にする。 - ブランド A は赤、B は緑に固定し、タグ・ボタンの矢印丸・英字ラベルの色を揃える。 - オレンジは英字の小見出し・日付・イラストだけに使う。面には使わない。 - ボタンは白か生成りの面に焦げ茶の文字を載せる。強い色のボタン面は作らない。 - 文字は真っ黒ではなく焦げ茶にする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のリードコピー（3 行） | ゴシック | Zen Kaku Gothic New | 700 | 17px | 2.0 | 0.1em | | `headline-lg` | セクション見出し（2 行・中央） | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.8 | 0.08em | | `headline-md` | ブランド名・商品名・レシピ名 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.6 | 0.08em | | `accent` | 英字の小見出しラベル（オレンジ・赤・緑） | 欧文サンセリフ | Poppins | 600 | 11px | 1.4 | 0.05em | | `body-md` | 説明文・中央揃えの短い段落 | ゴシック | Zen Kaku Gothic New | 500 | 10px | 2.0 | 0.06em | | `headline-sm` | 縦書きのセクション名 | 明朝 | Shippori Mincho | 500 | 18px | 1.4 | 0.2em | | `label-button` | ピルボタン・タグの文字 | ゴシック | Zen Kaku Gothic New | 700 | 10px | 1.4 | 0.05em | | `note` | 価格・日付・住所・コピーライト | 欧文サンセリフ | Poppins | 500 | 9px | 1.6 | 0.05em | - 見出しは英字の小ラベル → 日本語の 2 行見出し、の 2 段で組む。 - 本文は中央揃えで短く改行し、行間は 2.0 前後と広めにとる。 - 字間は 0.05〜0.1em 開けて柔らかく見せる。 - 和文は太さを中〜太に揃え、極太は使わない。 - 欧文ラベルは丸みのあるジオメトリック系を使う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ブランド紹介はロゴ大＋写真 2 枚の 2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの上下には波線を置き、余白を大きくとる。 - 商品は 1 枚ずつ横にスライドするカルーセルにし、隣のカードを端から少しのぞかせる。 - ボタンは中央に 1 つ、幅は 6 割ほどにする。 - 写真とイラストは左右に互い違いに配置して動きを出す。 ## Elevation & Depth - 影は基本的に使わずフラットにする。 - 奥行きは地色の切り替えと白い面だけで出す。 - 枠は点線 1px で軽く囲む。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 主要な写真は小石のような不定形の有機シェイプでマスクする。商品写真は角丸 8px の長方形にする。 - **セクション境界**: ゆるやかな波線で地色を切り替える - ボタンとタグはすべてピル型にする。 - サブボタンは白地のピルに点線の枠線をつけ、右端に丸い矢印アイコンを置く。 - フッターは上の角を大きな角丸にする。 - ブランドロゴのパネルは角丸 24px 前後にする。 ## Components - **点線ピルボタン**（`button-dotted-pill`）: 白地のピルに焦げ茶の点線の枠線。左に文字、右端にベージュの丸と「›」を置く。 - **ブランド別もっと見るボタン**（`button-brand-more`）: 生成り地の枠なしピル。右端の矢印丸はブランド色で塗る。 - **ブランドタグ**（`tag-brand`）: 商品名の下に置く小さなピルタグ。ブランド色の地に白文字。 - **英字小見出し**（`label-en`）: 見出しの上に置くオレンジの英字 1 語。 - **内容量の円バッジ**（`badge-weight`）: 商品写真の右上に置く、白い細線の円。中に重量を書く。 - **吹き出し見出し**（`speech-bubble`）: 白い大きな角丸の吹き出しに太字の問いかけを 3 行。横に人物イラストを添える。 - **レシピカード**（`card-recipe`）: 点線の角丸枠。上部に料理の皿写真をはみ出させ、左右に白い丸の矢印ボタンを置く。 - **お知らせリスト**（`news-list`）: 点線で区切った行。左にタイトル、右下にオレンジの日付。 - **スライダードット**（`slider-dots`）: 小さな灰色の丸を並べ、現在位置だけブランド色にする。 ## Do's and Don'ts **Do** - 地色の切り替えには必ず波線を使う。 - メインの写真は不定形の有機シェイプで切り抜く。 - オレンジの素朴な手描き風イラスト（人物・家・トラック）を余白に散らす。 - ブランドごとに色を固定し、ラベル・タグ・アイコンで揃える。 - 本文は中央揃えで短く改行する。 **Don't** - 赤や緑の大きなべた塗りの CTA ボタンを作らない。 - ドロップシャドウや光沢のあるグラデーションを使わない。 - 純黒の文字や直線だけのセクション境界にしない。 - 鮮やかな原色を背景に使わない。 - 情報を詰め込んだ訴求バナーを置かない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとカート導線）: 生成り地。左にロゴ、右にカートとハンバーガーメニュー。 2. **ファーストビュー**（暮らしと食の世界観を伝える）: 不定形に切り抜いた料理写真と風景写真を互い違いに配置。3 行のリードとオレンジのイラストを添える。 3. **ブランド紹介**（産地と 2 つのブランドを紹介する）: ベージュ帯。英字ラベル＋見出し＋段落の横に白い地図のシルエット。ブランドごとにロゴパネルと写真 2 枚を並べ、説明ともっと見るボタンを置く。 4. **商品ラインナップ**（ブランド別に商品を見せる）: 生成り帯。上にトラックのイラスト。ブランドの丸アイコン、商品カードのカルーセル、点線ピルボタンを順に置く。 5. **レシピ**（使い方を提案する）: ベージュ帯。吹き出しの見出しと人物イラストの下に、点線枠のレシピカードのスライダー。 6. **読み物・お知らせ**（産地の情報発信）: 縦書きの見出しと不定形の写真 2 枚。英字ラベル、点線で区切ったお知らせリスト、ボタンを続ける。 7. **フッター**（サイト内リンクと会社情報）: 上角が角丸の淡いベージュ面。2 列のリンク、白い枠のロゴ、住所、法人向けボタンを置く。 ## Imagery - 料理写真は自然光で明るく撮り、箸で持ち上げる手元や白い皿を入れる。 - 生肉は灰色のコンクリート調の背景に置き、真上や斜め上から撮る。 - 風景は青空・草原・渓流など産地の自然を、不定形のマスクで切り抜く。 - イラストはオレンジと茶の平塗り。線は少なく、素朴な人物や家、配送トラックを描く。 - 地図は白いシルエットで、下に向かってグレーへ溶けるようにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はグローバルナビを横に並べ、各項目の下に色付きの英字の小ラベルを添える。 - PC の FV は写真を左に置き、コピーと小さな風景写真を右に置く。 - PC のブランド紹介は 2 ブランドを横 2 列に並べる。 - PC の商品は 3 枚を同時に見せるカルーセルにする。 - PC の読み物は、写真を左、リストを右に置く 2 カラムにする。 - PC のフッターは、ロゴと住所を左、リンクを右に置く。 ## 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-e4e1d718`（元 LP の URL から採番） - **元 LP**: https://yamauchinotori.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。