--- version: alpha name: Bright Fruit Bead-Divider Food LP description: 白い地にグレーの中央揃え文章を置き、果実の色を並べたビーズ状の区切り線でセクションを分けるやさしい食品 LP。写真は角を大きく丸め、ラインアップは味ごとの色で枠と文字を塗り分ける。 colors: background: '#FFFFFF' primary: '#3E75A5' text-body: '#6E6E6E' text: '#5A5A5A' background-alt: '#EBFFFE' accent-1: '#C34361' accent-2: '#F2A31B' accent-3: '#7BAA2E' secondary: '#CE7D95' tint-1: '#C56E5E' line: '#DFE1D8' surface: '#FEFDFD' typography: headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em display: fontFamily: Quicksand fontSize: 26px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 500 lineHeight: 1.3 body-lg: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 rounded: sm: 6px md: 14px lg: 36px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' bead-divider: rounded: '{rounded.full}' height: 8px section-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 30px rounded-photo: rounded: '{rounded.lg}' height: 220px timeline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 360px radar-chart: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 340px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 330px link-text: textColor: '{colors.primary}' typography: '{typography.display}' height: 40px slider-dots: textColor: '{colors.primary}' rounded: '{rounded.full}' height: 8px --- # DESIGN.md — 白地×果実色ビーズ線のフルーツ食品 LP（Bright Fruit Bead-Divider Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル、かわいい - **キーワード**: 白地・果実カラー・ビーズ区切り線・大きな角丸写真・中央揃え・余白多め - **地の質感**: フラットな白地。テクスチャは使わず、写真の果実の照りで質感を出す - **形**: 写真とカードは大きな角丸。点と線をつないだビーズ柄の区切り線 - **温度感**: 明るく軽い。暖色の果実色と淡い水色の対比 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページ地色 | 63% | 画素の主要色に補正 | | `primary` | `#3E75A5` | ブランドの青（年号・小見出し・リンク） | 1% | 画素の実測 | | `text-body` | `#6E6E6E` | 本文グレー | 3% | 推定 | | `text` | `#5A5A5A` | 見出しの濃いグレー | 1% | 推定 | | `background-alt` | `#EBFFFE` | ラインアップ帯の淡い水色 | 3% | 画素の実測 | | `accent-1` | `#C34361` | いちご色（カード枠・文字・グラフ） | 1% | 画素の実測 | | `accent-2` | `#F2A31B` | オレンジ色（カード枠・文字） | 1% | 推定 | | `accent-3` | `#7BAA2E` | グリーン（区切り線のビーズ・注記マーク） | 0% | 推定 | | `secondary` | `#CE7D95` | 英字見出しのピンク | 0% | 画素の実測 | | `tint-1` | `#C56E5E` | グラフの赤みテラコッタ | 0% | 画素の実測 | | `line` | `#DFE1D8` | フッター上の区切り線・年表線 | 0% | 画素の主要色に補正 | | `surface` | `#FEFDFD` | カード内の白面 | 2% | 画素の実測 | - 地はほぼ全面を白にし、ラインアップ帯だけ淡い水色を敷く - 本文と見出しは黒を使わず中〜濃いグレーにする - 年号・小見出し・リンクはブランドの青 1 色に統一する - 商品ごとの色（いちご・オレンジ・ブルーベリー等）をカード枠と文字色にそのまま使う - 区切り線は複数の果実色のビーズを規則的に並べる - 強い色の面は作らず、色は線・文字・写真で入れる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `headline-lg` | セクション見出し（中央揃え） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `display` | 英字セクション見出し | 欧文サンセリフ | Quicksand | 500 | 26px | 1.3 | 0.05em | | `headline-sm` | 年表の小見出し・年号 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 中央揃えの本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.1 | 0.05em | | `headline-md` | 商品カードの商品名 | 丸ゴシック | M PLUS Rounded 1c | 500 | 22px | 1.3 | 0.0em | | `body-lg` | 商品カードの色付き説明文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.6 | 0.03em | | `note` | 注記・コピーライト | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | - 本文は中央揃えにし、1 行 15〜20 字前後の短い行で改行する - 本文の行間は 2 倍前後と広く取る - 見出しは太字グレーで飾りをつけない - 英字見出しは細めの丸いサンセリフを色付きで使う - 商品カードの説明文だけ太字で商品色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ラインアップは横スライダーで 2 枚見せ - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - 各セクションはビーズの区切り線→見出し→本文→写真の順に並べる - 写真は左右 6% 程度の余白を残して幅いっぱいに置く - 年表は左に年号、右に小見出しと本文を置き、縦線でつなぐ - セクションの上下に 60px 以上の余白を取る ## Elevation & Depth - 基本はフラットで影なし - 商品カードだけ薄い影をつけて浮かせる ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 36px。ボタンは角丸の長方形。 - **写真の切り抜き**: 横長の写真を角丸 36px 前後で大きく丸める - **セクション境界**: 果実色の玉と短い線をつないだビーズ柄の横線 - 写真は四隅を大きく丸め、やわらかい印象にする - 商品カードは 2px の色線で囲み、角丸 14px にする - 区切り線は全セクションで同じ柄を繰り返す ## Components - **ビーズ区切り線**（`bead-divider`）: 赤・緑・橙・青・紫の玉を細線でつないだ 1 行の装飾線。セクションの境目に置く - **中央見出し**（`section-heading`）: 装飾なしの太字グレー見出しを中央に置き、下に中央揃えの本文を続ける - **大角丸写真**（`rounded-photo`）: 利用シーンや果実のアップを角丸の大きい横長写真で見せる - **年表**（`timeline`）: 左に青い年号、縦の青線、右に青い小見出しとグレー本文 - **比較レーダーチャート**（`radar-chart`）: 六角形のグラフで新旧を濃淡 2 色の線で比べ、凡例を下に置く - **味別商品カード**（`product-card`）: 商品色の枠で囲み、上に商品名、中央に商品写真、下に商品色の太字説明文 - **英字テキストリンク**（`link-text`）: 青い英字と右向き矢印だけのリンク。下に小さな注記 - **スライダーのドット**（`slider-dots`）: 灰色の小さな丸を並べ、表示中の丸だけ青にする ## Do's and Don'ts **Do** - 白地を広く取り、色は果実の写真と線で入れる - セクションの境目はすべてビーズの区切り線にする - 本文は中央揃えの短い行で、行間を広く取る - 商品ごとに決めた色を枠・名前・説明文で揃える - 写真は大きな角丸で切り抜く **Don't** - 黒の太い文字や濃い色の背景帯を使わない - 見出しに帯・下線・アイコンなどの飾りを足さない - 写真を角丸なしの四角で置かない - 派手なボタンや割引バッジで売り込まない - 本文を左揃えの長い行にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ロゴと商品の全体を見せる）: 明るい白背景にロゴを置き、木の台に並べた商品写真をスライダーで見せる。左右に丸い矢印ボタン 2. **商品コンセプト**（使いやすさを短く伝える）: 中央見出しと中央揃え本文の下に、利用シーン 3 つを縦に分けて並べた大角丸写真 3. **素材のこだわり**（果実感を説明する）: 中央見出し、本文、果実のアップ写真を大角丸で 4. **進化の歴史**（改良の流れを年表で伝える）: 青い年号と縦線の年表。小見出しは青で本文はグレー 5. **比較データ**（改良の効果を見える化する）: 2 行の見出しとレーダーチャート、凡例と注記 6. **ラインアップ**（味の種類を見せる）: ピンクの英字見出しと本文の下に、淡い水色帯に商品色の枠カードを並べたスライダー 7. **レシピ誘導**（外部レシピへ送る）: 青い英字リンクと矢印、小さな注記 8. **フッター**（企業サイト導線と SNS）: グレー線で区切り、ロゴ、文字リンクのグリッド、シェアボタン、SNS の丸アイコン、ページ上部へ戻るボタン ## Imagery - 商品は明るい白背景と薄い木の台の上に並べ、正面からやわらかい光で撮る - 利用シーンはパン・ヨーグルト・紅茶などを真上やななめ上から撮り、淡いピンク・黄・緑の背景で分ける - 果実のアップは照りと粒が見えるくらいまで近づけて撮る - 商品パッケージは雫のような菱形模様の柄にし、味ごとに色を変える - イラストは使わず、写真と線の装飾だけで作る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も白地・中央揃えの 1 カラムで、本文幅は約 70% に絞る - PC のファーストビューは全商品を横 1 列に並べた広い写真にする - PC では本文の改行を減らし、1 行を長くする - PC の年表は本文を左、レーダーチャートを右の 2 カラムに置く - ラインアップは PC で 3 枚、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-677fd91c`（元 LP の URL から採番） - **元 LP**: https://www.aohata.co.jp/spoonfree/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。