--- version: alpha name: Calm Greige Feather Furniture LP description: くすんだグレージュとオリーブゴールドを基調に、細い明朝と大きな欧文セリフ数字で静かな高級感を出す家具 LP。写真を全面に敷いてその上に白文字を重ね、仕様部分は淡いグレーのパネルとピル型ラベルで整理する。 colors: primary: '#7D7650' on-primary: '#FFFFFF' accent-1: '#C9A85E' background: '#FFFFFF' background-alt: '#ECECEC' dark-section: '#7C6C5B' secondary: '#A3A3A3' on-dark: '#FAF9F2' text: '#1C2320' text-muted: '#D3D3D3' surface: '#EEEEED' accent-2: '#B8323A' typography: display: fontFamily: Playfair Display fontSize: 100px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.2em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em accent: fontFamily: Cormorant Garamond fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.15em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px point-list-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px feature-number: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 110px outline-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px spec-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 700px compare-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 190px color-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' height: 50px caution-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.body-md}' height: 150px --- # DESIGN.md — グレージュ×オリーブ金の上質ソファ LP（Calm Greige Feather Furniture LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: 上品・高級、ナチュラル、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: くすみトーン・細身の明朝・大きなセリフ数字・写真主体・余白多め・オリーブ金のピル - **地の質感**: ファブリックの起毛感が伝わる柔らかな写真が中心。背景は無地の淡いグレーでフラット。 - **形**: ピル型ラベル、角丸控えめのパネル、大きな円弧で切り抜いた背景。 - **温度感**: やや暖かいニュートラル（グレージュ寄り） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7D7650` | オリーブゴールドのラベル・ピル | 2% | 推定 | | `on-primary` | `#FFFFFF` | ピル上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#C9A85E` | 見出しのゴールド文字 | 0% | 推定 | | `background` | `#FFFFFF` | ページ地色の白 | 16% | 画素の実測 | | `background-alt` | `#ECECEC` | 仕様パネルの淡いグレー | 10% | 画素の実測 | | `dark-section` | `#7C6C5B` | 特長セクションのくすみブラウン地 | 12% | 画素の実測 | | `secondary` | `#A3A3A3` | 特長パネルのミディアムグレー | 4% | 画素の実測 | | `on-dark` | `#FAF9F2` | 写真上の白文字 | 1% | 画素の実測 | | `text` | `#1C2320` | 見出し・本文の濃い墨色 | 2% | 画素の主要色に補正 | | `text-muted` | `#D3D3D3` | 大きな欧文透かし文字 | 1% | 画素の実測 | | `surface` | `#EEEEED` | 比較・注釈ボックスの白 | 2% | 画素の主要色に補正 | | `accent-2` | `#B8323A` | 注意ボックスの赤枠・赤文字 | 0% | 推定 | - 地は白と淡いグレーを交互に使い、派手な色は入れない。 - 特長セクションは写真を全面に敷き、くすみブラウン系の写真トーンに白文字を重ねる。 - ラベル・タブはオリーブゴールド塗りに白文字で統一する。 - ゴールド文字はロゴや POINT 見出しなどの象徴的な箇所だけに使う。 - 赤は注意書きの枠と文字に限定する。 - カラーバリエーションは写真と生地サンプルの正方形で見せる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 特長番号・英字見出しの大きなセリフ | 欧文セリフ | Playfair Display | 400 | 100px | 1.0 | -0.02em | | `headline-lg` | 特長タイトル（写真上の白文字） | 明朝 | Shippori Mincho | 400 | 30px | 1.4 | 0.2em | | `headline-md` | セクション見出し | 明朝 | Noto Serif JP | 500 | 24px | 1.4 | 0.12em | | `headline-sm` | ボックス内の小見出し | 明朝 | Noto Serif JP | 500 | 18px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.1em | | `accent` | カラー名の英字（細いセリフ） | 欧文セリフ | Cormorant Garamond | 400 | 34px | 1.2 | 0.04em | | `label-button` | ピルラベル内の文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.15em | | `note` | 注釈・画像はイメージ表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.05em | - 見出しは細めの明朝で字間を広く取る。 - 番号や英字は大きなセリフ体にして、写真の端で裁ち落とすくらい大きく置く。 - 本文は小さめのゴシックで、行間 1.9 前後でゆったり組む。 - 英字の見出しは透かし風の淡いグレーで背景に敷く。 - 太字は使いすぎない。ラベルと仕様の項目名にだけ使う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は全幅、ギャラリーは 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は端まで広げ、余白は白またはグレーの地で取る。 - 仕様と選択肢は左右 6% 余白の淡いグレーのパネルにまとめる。 - 特長は番号＋見出し＋短い本文＋写真の順で繰り返す。 - カラー紹介は生地サンプル＋英字名、メイン写真 1 枚、サブ写真 2 枚の構成。 - 寸法図はグレー背景の写真に細い白線と数値を重ねる。 ## Elevation & Depth - 影はほぼ使わず、フラットな面で構成する。 - 写真の上のパネルは半透明の白かグレーで浮かせる。 - ギャラリー写真の間は白い細いガターで区切る。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 基本は角なしの矩形。ポイント紹介とセット紹介は上辺を大きな円弧で切り抜く。 - **セクション境界**: 直線の切り替えが基本。一部で大きな円弧を使う。 - ラベルはすべてピル型にする。 - パネルの角丸は 4〜8px に抑える。 - 注意書きは角丸なしの細い赤枠で囲む。 - フェザーなど素材の写真は円形に切り抜く。 ## Components - **オリーブのピルラベル**（`label-pill`）: サイズ・タイプ名を示す塗りのピル - **番号付きポイントバー**（`point-list-pill`）: 白丸の番号＋特長名の横長ピル。4 本を縦に並べる - **巨大セリフ番号**（`feature-number`）: 01〜04 の白い数字を写真の端に大きく配置 - **枠線ピル見出し**（`outline-pill`）: 細い黒枠のピルに小見出しを入れる（素材名や間取りなど） - **仕様パネル**（`spec-panel`）: 淡いグレーの地に見出し、ラベル、製品写真、寸法線をまとめる - **比較ボックス**（`compare-box`）: 従来品と自社品を左右に並べ、吹き出し風のラベルで比べる - **カラー名見出し**（`color-heading`）: 生地サンプルの正方形＋英字セリフ名＋／＋和名 - **注意書きボックス**（`caution-box`）: 赤い細枠に赤文字の中央揃えで注意を書く ## Do's and Don'ts **Do** - 写真はくすみトーンにそろえ、生地の質感がわかる距離で撮る。 - 見出しは明朝で字間を広く取り、静かに見せる。 - 仕様情報はピルラベルで区切って、図と数値で示す。 - セクションごとに番号と英字を大きく置いてリズムを作る。 - 白とグレーの地を交互に使い、間延びしないようにする。 **Don't** - 彩度の高い色をボタンや背景に使わない。 - 太いゴシックの見出しで煽らない。 - 影や光沢、立体的なボタンを使わない。 - テキストを詰め込みすぎない。本文は 3〜4 行までにする。 - カラー紹介で生地サンプルを省かない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品を一目で伝える）: 淡い羽根柄の背景にゴールドの筆記体ロゴと欧文サブ、全幅の商品写真を置く 2. **イメージ写真とリード**（使う場面を想像させる）: くつろぐ人物の全幅写真、明朝のコピー、中央揃えの短い本文 3. **カラー一覧**（選べる色の幅を見せる）: 白地に切り抜きの商品を 2 段で横に並べる 4. **ポイント目次**（特長を要約する）: 円弧で切り抜いたグレーの地にゴールドの英字見出しと番号付きピル 4 本 5. **特長 01〜04**（機能を一つずつ訴求する）: 全幅写真に巨大セリフ番号と白い明朝見出しを重ね、構造図や比較ボックスを添える 6. **付属品・お手入れ**（細かな利点を補う）: 写真 2 枚の横並びカードと枠線ピルのラベル 7. **タイプ選択**（サイズ展開を示す）: グレーのパネルにピルラベル、商品写真、寸法線を縦に並べる 8. **セット提案・レイアウト**（組み合わせと配置を提案する）: 大きな英字を重ねた写真、上から見た図、間取り図 9. **カラー詳細**（色ごとの印象を伝える）: 生地サンプル＋英字名、メイン写真、サブ写真 2 枚を色ごとに繰り返す 10. **商品仕様**（寸法・素材を明示する）: 大きな明朝見出しと寸法入りの写真、グレーの素材ボックス 11. **注意事項・配送**（不安を解消する）: 赤枠の注意ボックスと、写真＋テキストの梱包案内 ## Imagery - 自然光の入る明るいリビングで、グレージュの壁と木の小物、観葉植物を添える。 - 人物は寝そべる・読書するなど脱力したポーズで、生成りの服を着せる。 - 生地の起毛がわかる手元のアップ写真を入れる。 - 構造は断面図風のレイヤー図にパステル色のラベルを付ける。 - 間取り図は白地に黒の線画で簡潔に描く。 - 写真全体を低彩度・暖かいグレーのトーンに補正する。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後のカラムに SP と同じ縦長の構成を置く案を推奨する。 - PC の左右の余白は淡いグレーで埋める。 - PC では特長を写真と文字の左右 2 カラムにしてもよい。 - カラー詳細のサブ写真は PC で 3 枚並べにできる。 - 巨大番号は PC では 160px 程度まで拡大する。 ## 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-2807e89a`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/rack-kan/115294/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。