--- version: alpha name: Muted Linen Lifestyle Goods LP description: 生成り・グレージュ・くすみ緑や青の地色を交互に使う縦長の物販LPです。布やリネンの質感、白い帯に入った見出し、手書き風の筆記体アクセント、星評価つきのレビュー帯をくり返して、やさしく親しみのある日用品の雰囲気を作ります。 colors: primary: '#5C4F47' background: '#FEFFFE' background-alt: '#D9E6E2' tint-1: '#DAE4EA' tint-2: '#EDE8E4' surface: '#FEFEFD' text: '#3E3A37' accent-1: '#C9AE69' accent-2: '#D9534F' accent-3: '#5BAE7A' secondary: '#4E8A93' marker: '#F3D86A' dark-section: '#3A3634' text-muted: '#6E6A66' accent-2-accessible: '#D43F3A' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Yomogi fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 10px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Playfair Display fontSize: 20px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-white-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 44px point-number: textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 40px kodawari-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px review-arch-label: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 120px review-card: textColor: '{colors.text-muted}' typography: '{typography.body-md}' height: 160px chat-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 56px feature-circle: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px stats-ribbon: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 260px cta-pill: backgroundColor: '{colors.accent-2}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — くすみ色とリネン質感の生活雑貨LP（Muted Linen Lifestyle Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: ナチュラル、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: くすみカラー・リネン地・白帯見出し・手書き風アクセント・レビュー反復・生活感 - **地の質感**: 織り目のあるリネンや方眼紙のテクスチャを背景に薄く敷き、紙のようなアナログ感を出す - **形**: 四角い白帯の見出し、角丸の吹き出し、円形に切り抜いた写真やラベル。曲線はおだやかに使う - **温度感**: 暖かめの中間色。グレーにベージュを混ぜた落ち着いたトーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5C4F47` | ブランドを代表するチャコールブラウン（帯・強調面） | 9% | 画素の実測 | | `background` | `#FEFFFE` | 基本の生成りグレージュ地 | 20% | 画素の実測 | | `background-alt` | `#D9E6E2` | くすみミントのセクション地 | 10% | 画素の主要色に補正 | | `tint-1` | `#DAE4EA` | くすみブルーグレーのレビュー地 | 8% | 画素の実測 | | `tint-2` | `#EDE8E4` | ベージュのレビュー地 | 10% | 画素の実測 | | `surface` | `#FEFEFD` | 見出しの白帯やカードの面 | 12% | 画素の実測 | | `text` | `#3E3A37` | 見出しや本文の濃い文字 | 3% | 推定 | | `accent-1` | `#C9AE69` | Voice番号と星評価のゴールド | 1% | 画素の実測 | | `accent-2` | `#D9534F` | こだわり01の円バッジや強調語のコーラルレッド | 1% | 推定 | | `accent-3` | `#5BAE7A` | こだわり02バッジや会話枠の緑 | 1% | 推定 | | `secondary` | `#4E8A93` | 見出し帯に使うくすみティール | 2% | 推定 | | `marker` | `#F3D86A` | 強調語の下に引く黄色マーカー | 0% | 推定 | | `dark-section` | `#3A3634` | 会話シーンの濃いグレー地 | 4% | 推定 | | `text-muted` | `#6E6A66` | レビュー本文や日付の灰色 | 2% | 推定 | | `accent-2-accessible` | `#D43F3A` | AA を満たす補正値（計算） | | 計算 | - 地色は生成り、くすみミント、くすみブルー、ベージュをセクションごとに交互に切り替える - 見出しの文字はいつも白帯の上に濃い色で置く - 強調色のコーラルレッドは強調語、番号バッジ、決め台詞の帯に絞って使う - 星評価とVoice番号はゴールドに統一する - 強調語の下に黄色マーカーを引き、読ませたい語を示す - 会話シーンだけを濃いチャコールの地にして、場面が切り替わったことを示す - 彩度の高い色は面積を5%以下に抑える - `kodawari-badge` は文字 `#FEFEFD` × 背景 `#D9534F` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D43F3A`、4.55:1）を使う。 - `review-arch-label` は文字 `#D9534F` × 背景 `#FEFEFD` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D43F3A`、4.55:1）を使う。 - `cta-pill` は文字 `#FEFEFD` × 背景 `#D9534F` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D43F3A`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューやPOINTの大見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.4 | 0.08em | | `headline-lg` | セクション見出し（白帯の上） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.06em | | `headline-md` | こだわり見出しや明朝風の訴求文 | 明朝 | Shippori Mincho | 600 | 20px | 1.5 | 0.05em | | `headline-sm` | レビューの要約タイトル | ゴシック | Noto Sans JP | 500 | 17px | 1.6 | 0.05em | | `body-md` | レビュー本文や説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `accent` | 手書き風の一言（例: 筆記体の英字や手書きメモ） | 手書き・筆 | Yomogi | 400 | 18px | 1.5 | 0.05em | | `note` | カラー名や日付などの注記 | 欧文サンセリフ | Montserrat | 400 | 10px | 1.4 | 0.1em | | `label-button` | Voice番号やPOINT番号 | 欧文セリフ | Playfair Display | 600 | 20px | 1.2 | 0.02em | - 見出しはゴシック体と明朝体を一つの見出しの中で混ぜ、語ごとに大きさを変えてリズムを付ける - 強調語には二重引用符の装飾、傍点、マーカーを付ける - POINTやVoiceの番号は欧文セリフ体で大きく組み、和文の見出しと並べる - カラー名は小さな欧文で写真の隅に置く - 手書き風の書体は1セクションに1〜2か所まで - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。レビューは写真と文を左右交互に配置する - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - POINTブロックの後にレビュー3件を置く流れをくり返す - レビューは写真と見出し帯を左右交互に組み、本文はその下に全幅で置く - セクションの区切りは地色を変えて示す - 写真は画面の端まで広げて没入感を出す - 特長アイコンは円形にして3＋2の千鳥配置にする ## Elevation & Depth - カードや紙面にはごく薄い影（0 2px 6px rgba(0,0,0,.08)）を付ける - 白帯の見出しは影なしで平面のまま置く - 円形のレビュー見出しには細い線の円を重ね、立体感を抑える ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 四角が基本。特長アイコンや人物イラストは円で切り抜く - **セクション境界**: 直線で地色を切り替える。レビュー見出しは上半分が円弧になったラベル - 見出しの白帯は角丸なしの長方形にする - 吹き出しは角丸10px程度にし、小さなしっぽを付ける - 強調バッジはピル型か円形にする - 方眼紙風のパネルの上部はちぎった紙のような端にしてよい ## Components - **白帯見出し**（`heading-white-band`）: 地色の上に白い長方形の帯を敷き、濃い文字で見出しを置く - **POINT番号見出し**（`point-number`）: 小さな英字ラベルと大きな欧文セリフの番号に、和文見出しを組み合わせる - **こだわり番号の円バッジ**（`kodawari-badge`）: 色の付いた円の中に白い文字で番号を入れる - **レビュー見出しのアーチ**（`review-arch-label`）: 上が円弧になった白いラベルに、手書き風の見出しと小さな英字を入れる - **レビュー行**（`review-card`）: Voice番号と星5つ、白帯の要約、写真、灰色の本文に日付を添える - **スタッフ会話の吹き出し**（`chat-bubble`）: 円形の人物イラストに白い角丸の吹き出しを添える - **特長の円形アイコン**（`feature-circle`）: 円で切り抜いた写真の左上に番号を付け、下にラベルを置く - **実績の数字ブロック**（`stats-ribbon`）: 金色の月桂樹で大きな明朝の数字を挟み、ランキング画像を重ねる - **決め台詞のピル**（`cta-pill`）: コーラルの面に白い太字を置き、場面転換に使う ## Do's and Don'ts **Do** - 地色はくすんだ中間色だけで組み、白帯の見出しで読みやすさを保つ - 強調語にはマーカー、傍点、引用符を付ける - POINTの後にレビュー3件という流れをくり返し、説得の型を固定する - 写真の隅に小さな欧文でカラー名を添える - 手書きの一言を写真の上に重ね、温かみを出す **Don't** - 原色や蛍光色を広い面に使わない - 黒い太枠や強い影は付けない - 見出しを地色に直接置き、帯なしで並べない - 書体を5種類より多く混ぜない - レビューの写真と文を同じ側にそろえて単調にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の使い方を一目で伝える）: 使用中の全幅写真に縦書きの白帯キャッチを重ね、下に商品カテゴリーを白帯で置く 2. **特長の要約**（安心ポイントを一覧で見せる）: 方眼紙のパネルに番号付きの円形写真を5つ、3＋2の配置で並べる 3. **販売実績**（社会的な証明を示す）: 濃色の帯の下に、月桂樹で挟んだ大きな数字とランキング画像を重ねて置く 4. **開発ストーリー**（開発の動機を会話で伝える）: 濃い地にスタッフのイラストと吹き出しを交互に並べ、コーラルのピルで締める 5. **こだわり紹介**（デザイン上の工夫を説明する）: リネン地に番号バッジ、明朝の見出し、会話、写真付きの白帯結論を置く 6. **スタッフの一言**（作り手の想いを伝える）: 方眼メモ風のカードに手書き書体で一言を書く 7. **詳細の導入**（特長の詳しい説明へ誘導する）: 白い地に線囲みとマーカーを付けた大見出しを置く 8. **POINT＋レビュー（くり返し）**（特長ごとに機能を示し、声で裏付ける）: POINTの写真ブロックの後に、地色を変えたレビュー3件を置くことを6回くり返す 9. **カラーバリエーション**（色の選択肢を見せる）: 手書き風の囲みと赤い大見出しの下に、色名ラベル付きの集合写真と色別のモデル写真を置く ## Imagery - 自然光の室内やスーパーで、生活の中で使っている場面を撮る - 手元や肩から下をクロップし、顔は写さず生活感を出す - 白や木目、くすみ色の背景で、全体を低彩度・明るめに調整する - 人物は線画に淡い色を塗ったやさしいイラストにする - 写真の上に白い手書き文字や小さな吹き出しを添える - 背景にはリネンや方眼紙のテクスチャを薄く敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元のPC版も幅952pxの縦1カラムで、SP版とほぼ同じ構成 - SPでは幅375pxに縮め、見出しは22〜30pxで組む - PCでは中央に最大幅750px程度で置き、左右に地のテクスチャを延ばす - レビューの左右交互の配置はSPでも保ち、写真の幅を45%程度にする - 円形の特長アイコンはSPでも3＋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-f7fa6912`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/auc-risecreation/r0595/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。