--- version: alpha name: Pastel Illustrated Interior Appliance LP description: オフホワイトと生成りの地に、商品カラーと同じパステル色の帯を重ねた、インテリア雑貨のような LP。手描きイラストと実写のインテリア写真を組み合わせ、黄色のマーカー下線とラベルで要点を目立たせる。欧文の幾何学サンセリフと細めのゴシックで、軽く上品にまとめている。 colors: background: '#FAFAFA' background-alt: '#F1F0EC' primary: '#7E6E68' text: '#171717' text-body: '#555555' marker: '#F8D96A' tint-1: '#D0E3E9' tint-2: '#F8E7C9' accent-1: '#EDDDDD' accent-2: '#C5CCDE' accent-3: '#D9A13A' surface: '#EEEDE9' cta: '#2A2B2D' on-cta: '#DDDEE0' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em headline-lg: fontFamily: Poppins fontSize: 26px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.06em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.06em headline-sm: fontFamily: Poppins fontSize: 20px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.08em accent: fontFamily: Poppins fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Poppins fontSize: 13px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-en: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 56px marker-underline: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 8px point-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 22px step-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 220px color-band: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 460px more-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 360px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 160px button-more: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 生成り×パステルの手描きイラスト家電 LP（Pastel Illustrated Interior Appliance LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: やさしい・柔らかい、ナチュラル、シンプル・ミニマル、上品・高級 - **キーワード**: パステル・手描きイラスト・インテリア・余白多め・波形の区切り・黄色マーカー - **地の質感**: フラットな単色面。紙の質感はなく、イラストの手描き線が温かみを出す - **形**: 角丸 12px 前後の写真とカード、ゆるい波形のセクション境界、ピル型の小ボタン - **温度感**: ややあたたかい中間色（生成り・グレージュ）に、くすんだパステルを差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FAFAFA` | ページの基本地 | 36% | 画素の実測 | | `background-alt` | `#F1F0EC` | 生成りの波形セクション地 | 18% | 画素の実測 | | `primary` | `#7E6E68` | ブランドを代表するグレージュ（ロゴ・見出し周りの基調） | 4% | 画素の主要色に補正 | | `text` | `#171717` | 見出しの文字（ほぼ黒） | 2% | 画素の実測 | | `text-body` | `#555555` | 本文の文字 | 2% | 推定 | | `marker` | `#F8D96A` | 見出しの黄色マーカー・Point ラベル | 1% | 推定 | | `tint-1` | `#D0E3E9` | 水色の商品紹介帯 | 7% | 画素の実測 | | `tint-2` | `#F8E7C9` | クリーム黄色の商品紹介帯 | 5% | 画素の実測 | | `accent-1` | `#EDDDDD` | ピンクの商品紹介帯 | 4% | 画素の実測 | | `accent-2` | `#C5CCDE` | くすんだネイビー紫の商品紹介帯 | 4% | 画素の実測 | | `accent-3` | `#D9A13A` | 商品名の欧文に使うからし色 | 0% | 推定 | | `surface` | `#EEEDE9` | More ブロック・店舗リストのカード地 | 3% | 画素の実測 | | `cta` | `#2A2B2D` | お問い合わせボタンの地 | 0% | 画素の実測 | | `on-cta` | `#DDDEE0` | ボタン上の文字 | 0% | 画素の実測 | - 地は #F9F9F9 と生成りの #F1F0EC の 2 色を、波形の境界で交互に切り替える - カラー展開の紹介帯は、商品色を淡くしたパステルを全幅に敷き、色ごとに 1 帯ずつ使う - 強調は黄色のマーカー下線と Point ラベルだけに使い、ほかの強調色は足さない - 見出しはほぼ黒、本文はグレーにし、純黒のベタ面は CTA だけにする - 彩度の高い色はイラストと商品写真に任せ、UI の色は抑える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチコピー | ゴシック | Zen Kaku Gothic New | 500 | 24px | 1.6 | 0.08em | | `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Poppins | 600 | 26px | 1.3 | 0.06em | | `headline-md` | 各ブロックの和文見出し | ゴシック | Zen Kaku Gothic New | 500 | 18px | 1.7 | 0.06em | | `headline-sm` | カラー名・小見出し | 欧文サンセリフ | Poppins | 500 | 20px | 1.3 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.06em | | `note` | 英字見出しの下の和文サブ見出し・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.08em | | `accent` | Point 番号ラベル | 欧文サンセリフ | Poppins | 600 | 13px | 1.2 | 0.04em | | `label-button` | ボタンの文字 | 欧文サンセリフ | Poppins | 600 | 13px | 1.0 | 0.05em | - 英字のセクション見出しの下に、小さい和文サブ見出しを黄色マーカー付きで置く - 和文見出しは 2 行に分け、太くしすぎず中くらいの太さにする - 本文は行間 2.0・字間広めにして、ゆったり見せる - カラー名は欧文の小文字にし、横に読み・漢字表記を小さく添える - 和文見出しの中の言葉はカギ括弧でくくって強調する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は写真とテキストの左右 2 カラムを交互に入れ替え、ステップと Point は 3〜4 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真とテキストのブロックは、左右を交互に入れ替えて並べる - 写真の角にイラストをはみ出させて重ねる - カラー紹介は帯ごとに同じレイアウトを繰り返す - ステップは番号付きのカードを横並びにする（SP は 2 列か縦積み） - 余白は広めにとり、セクションの上下は 64〜96px あける ## Elevation & Depth - 影はほぼ使わず、面の色の差で階層を出す - 商品の切り抜き写真にだけ、ごく薄い接地影をつける - カードは影なしで、生成りの面と角丸で区切る ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸 12px の長方形。商品は背景を抜いた切り抜き - **セクション境界**: ゆるい波形カーブで生成りと白の地を切り替える。カラー帯は直線で区切る - ボタンとラベルはピル型にする - Point ラベルは黄色の角丸長方形にする - More ブロックは大きめの角丸 20px で、右上に見出しを載せる - 鋭い角や斜めの切り返しは使わない ## Components - **英字見出し＋和文サブ見出し**（`section-title-en`）: 中央または左寄せの英字見出しの下に、小さい和文を黄色マーカー付きで添える - **黄色マーカー下線**（`marker-underline`）: 見出しの末尾や下に、短い黄色の下線を半分の高さで敷く - **Point 番号ラベル**（`point-label`）: 「Point.01」形式の黄色いラベル。特長見出しの上に置く - **番号付き楽しみ方カード**（`step-card`）: クリーム色の角丸カードの左上に大きな番号を置き、イラスト・見出し・短い説明を入れる - **カラー紹介帯**（`color-band`）: 商品色のパステル全幅帯。カラー名・商品切り抜き・コーディネート写真を重ねて並べる - **追加特長のまとめカード**（`more-card`）: 生成りの大きな角丸パネルに、Point を縦線で区切って 3 列に並べる - **メンテナンス案内枠**（`notice-box`）: 細い枠線で囲み、中央に太字の見出し、左にロゴ、右に説明文を置く - **小さなピル型ボタン**（`button-more`）: 黄色のピル型で、英字の後ろに＋アイコンをつける - **お問い合わせボタン**（`button-primary`）: 濃いグレーのピル型。白い英字と矢印を入れる ## Do's and Don'ts **Do** - 地は白と生成りを交互にし、波形の境界でやわらかくつなぐ - 強調には黄色のマーカーとラベルだけを使う - 実写の写真に手描きイラストの人物や小物を重ねて、生活感を出す - 見出しは英字と和文の 2 段にする - 余白を広くとり、本文は行間 2.0 にする **Don't** - 原色や蛍光色で UI を塗らない - 濃い影やグラデーションのボタンを使わない - 太すぎる見出しや詰めた字間にしない - 四角い角のカードや斜めの区切りを使わない - 1 画面に強調色を 2 色以上並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品のある暮らしの世界観を伝える）: 左に短いキャッチとロゴ、右に部屋でくつろぐ人の大きな手描きイラスト 2. **コンセプト**（商品の価値をひとことで示す）: 生成りの波形地に 2 行の見出しと黄色マーカー。下にカラー展開の切り抜き写真を横 5 つ並べる 3. **ブランド紹介**（ほかにない特徴と、信頼できる作り手であることを伝える）: 写真とテキストの 2 カラムを 2 回、左右を入れ替えて並べ、イラストを重ねる 4. **楽しみ方**（使い方を 4 ステップで想像させる）: 番号付きのクリーム色カード 4 枚に、イラスト・見出し・説明を入れる 5. **カラー別コーディネート**（色ごとのインテリア提案）: 商品色のパステル帯を 5 色続け、カラー名・説明・切り抜き写真・部屋の写真を配置する 6. **特長**（機能を具体的に説明する）: Point ラベル付きの写真とテキストを、左右交互に 6 つ並べる 7. **追加特長**（細かな機能をまとめて見せる）: 生成りの角丸パネルに、Point を 1 つと 3 列並べる 8. **スペック・保証**（仕様とアフターサポートで安心させる）: 仕様のテキストリストとカラー一覧、枠線で囲んだメンテナンス案内 9. **よくある質問**（疑問を解消する）: 英字見出しと黄色の more ボタンだけを置く、シンプルな導線 10. **ユーザーギャラリー**（実際の使用例で共感を得る）: 波形の生成り地に見出しとイラスト。下に SNS 投稿写真の横スライダー 11. **取扱店舗**（購入先を案内する）: 生成りの角丸カードに見出しと more ボタン 12. **フッター**（ブランドの印象を残し、各ページへ誘導する）: 線画イラストとロゴを中央に置き、下にサイトマップを 4 列と黒のピル型問い合わせボタン ## Imagery - 人物や小物は、くすんだ色の手描き水彩・色鉛筆風イラストにし、輪郭線を細く残す - インテリア写真は明るい自然光の北欧風の部屋で、商品を小さめに写す - 商品は背景を抜いた切り抜きを正面から撮り、ごく薄い接地影をつける - ワインボトルやグラス、植物の小さなイラストを余白に散らす - フッターは墨一色の線画イラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では 2 カラムを縦積みにし、写真を先、テキストを後に置く - 楽しみ方カードは SP で 2 列×2 段にする - カラー帯の写真は SP で全幅、切り抜き写真は写真に重ねて小さく置く - 追加特長の 3 列は SP で縦積みにし、区切りの縦線を横線に変える - ギャラリーは SP で 1.5 枚見える横スクロールにする ## 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-bda36037`（元 LP の URL から採番） - **元 LP**: https://www.globalwine.co.jp/muni/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。