--- version: alpha name: Washi Texture Regional Food Journey LP description: 生成りの和紙風の地に、切り絵調の野菜・魚・木のイラストを散らした地域グルメと車旅のプロモーションLP。朱赤と深緑の見出し、木枠の弁当写真、全幅の旅シーン写真を交互に並べ、ゆったりした物語調で見せる。 colors: background: '#EEEDEA' primary: '#1F7A5A' secondary: '#C8261E' accent-1: '#5BA84A' accent-2: '#EBA302' accent-3: '#1D2933' surface: '#E2C9A0' text-body: '#333A39' dark-section: '#1A1A1A' on-dark: '#F4F3F1' cta: '#586860' on-cta: '#F4F3F1' text-muted: '#747474' line: '#C8261E' text-muted-accessible: '#6F6F6F' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' heading-ruled: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 64px step-card: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 110px bento-frame: backgroundColor: '{colors.surface}' height: 260px map-card: textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 260px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 44px photo-caption: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 120px status-bar: backgroundColor: '{colors.text-muted}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 24px profile-block: textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 160px --- # DESIGN.md — 和紙地×切り絵イラストの食旅プロモLP（Washi Texture Regional Food Journey LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自動車・バイク ／ **雰囲気**: 和風、親しみ・手作り感、ナチュラル - **キーワード**: 和紙テクスチャ・切り絵イラスト・地図モチーフ・お品書き・旅と食・家族 - **地の質感**: 生成り地に細かい紙の粒状ノイズ。イラストにもかすれ・版ズレ風の質感を付ける - **形**: 四角い木枠の弁当、丸い木や山の切り絵、細い二重罫線で挟む見出し - **温度感**: 温かい。暖色の生成りに朱と緑の差し色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#EEEDEA` | 和紙風の生成り地 | 45% | 画素の実測 | | `primary` | `#1F7A5A` | 見出し・ラベルの深緑 | 4% | 推定 | | `secondary` | `#C8261E` | 見出しの朱赤 | 2% | 推定 | | `accent-1` | `#5BA84A` | 切り絵の若草緑 | 3% | 推定 | | `accent-2` | `#EBA302` | 山・装飾の山吹色 | 1% | 画素の実測 | | `accent-3` | `#1D2933` | 魚イラストの藍紺 | 1% | 画素の主要色に補正 | | `surface` | `#E2C9A0` | 弁当の木枠 | 2% | 推定 | | `text-body` | `#333A39` | 本文の墨色 | 2% | 画素の主要色に補正 | | `dark-section` | `#1A1A1A` | フッターの黒 | 8% | 画素の実測 | | `on-dark` | `#F4F3F1` | 黒地・写真上の白文字 | 1% | 画素の主要色に補正 | | `cta` | `#586860` | 案内ボタン・ラベルの濃緑灰 | 1% | 画素の主要色に補正 | | `on-cta` | `#F4F3F1` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text-muted` | `#747474` | 終了表示などのグレー帯 | 1% | 画素の実測 | | `line` | `#C8261E` | 見出しを挟む罫線 | 0% | 推定 | | `text-muted-accessible` | `#6F6F6F` | AA を満たす補正値（計算） | | 計算 | - 地は全面を生成りの和紙調で統一し、白ベタは使わない - セクション見出しは朱赤と深緑を交互に使い分ける - 強調は見出しとラベルに限定し、本文は墨色 - 切り絵イラストは若草緑・朱・山吹・藍の4色で彩度を抑える - 写真セクションは全幅で、文字は白で写真の上に置く - フッターのみ黒地で締める - `status-bar` は文字 `#F4F3F1` × 背景 `#747474` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#6F6F6F`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ型タイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.02em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 900 | 26px | 1.3 | 0.08em | | `headline-md` | 料理名・体験名 | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | ステップ名・小見出し | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.04em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.05em | | `note` | 注釈・キャプション | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 英字セクション見出し | 欧文サンセリフ | Montserrat | 700 | 24px | 1.2 | 0.12em | | `label-button` | ボタン・ラベル | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.2 | 0.06em | - 見出しは太い丸ゴシックで親しみを出す - 見出しは上下を細罫線で挟んで中央揃え - 導入文は中央揃え・行間広め - 料理説明は左揃えで短い段落 - 字間はやや広めに取り和の落ち着きを出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ステップは横スクロールか縦積み - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 料理紹介は木枠写真と説明文の2段構成 - 料理紹介と全幅の体験写真を交互に配置 - 余白に切り絵イラストを画面端から半分はみ出させて散らす - 導入の楽しみ方は番号付き3ステップ - 販売情報は日時リストと簡易地図を並べる ## Elevation & Depth - 木枠の弁当写真に右下へ柔らかい落ち影 - ボタン・カードはほぼフラット - 写真上の文字は影なしで暗部に置く ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 料理は正方形の木枠、体験写真は全幅の横長矩形 - **セクション境界**: 直線で切り替え。上端に切り絵の山や波をはみ出させる - 角はほぼ直角で端正に - イラストは有機的な丸みのある切り絵形 - ラベルは小さな四角い塗り帯 ## Components - **罫線挟み見出し**（`heading-ruled`）: 上下に細い罫線を引き中央に太丸ゴシックの見出し - **番号付きステップ**（`step-card`）: 丸数字と小見出し、横長写真、短いキャプションの3枚並び - **木枠の料理写真**（`bento-frame`）: 真俯瞰の料理を薄い木枠で囲み落ち影を付ける - **地図イラストカード**（`map-card`）: 地図イラストの中央に商品パッケージ、下に版の名前ラベル - **案内ボタン**（`button-primary`）: 濃緑灰の角丸小ボタンに白文字 - **写真上キャプション**（`photo-caption`）: 全幅写真の暗部に白の見出しと短い本文を重ねる - **終了表示帯**（`status-bar`）: 販売日時を灰色の帯に白文字で並べる - **監修者プロフィール**（`profile-block`）: 写真と肩書・名前・紹介文を横並び ## Do's and Don'ts **Do** - 地に紙の粒状テクスチャを必ず敷く - 切り絵イラストを余白に散らし画面端ではみ出させる - 料理写真は真俯瞰で木枠に入れる - 見出しは朱赤と深緑の2色で統一 - 全幅の人物写真で物語のテンポを作る **Don't** - 純白のフラット背景にしない - 蛍光色や強いグラデーションを使わない - イラストを写実的にしない - ピル型の派手なCTAを乱用しない - 本文を写真の明るい部分に重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の世界観を一目で伝える）: 地図イラストを背景に中央へ判子型ロゴ、産地と食材名を周囲に配置 2. **企画紹介**（企画の趣旨を説明）: 罫線挟み見出しと中央揃えの導入文 3. **楽しみ方**（体験の流れを示す）: 番号付き3ステップと動画サムネイル 4. **お品書き**（商品ラインナップ）: 地図イラストカード2枚を並べ版名ラベル 5. **キャンペーン**（応募案内）: 濃緑灰の枠囲みボックス、終了時は白枠の告知を重ねる 6. **料理紹介**（各品の魅力を伝える）: 木枠の料理写真と緑の料理名・説明文 7. **体験写真**（旅と家族の体験を見せる）: 全幅写真に白文字キャプション、料理紹介と交互 8. **販売情報**（販売場所と日時）: 日時リストと簡易な施設マップ 9. **監修者紹介**（信頼性の付与）: 英字見出しと写真＋プロフィール 10. **注釈・フッター**（注意事項とリンク）: 小さな注釈の後に黒地4列のリンク ## Imagery - 野菜・魚・木・山を単純化した切り絵調イラスト、かすれ質感付き - 料理は真俯瞰で木枠の中に詰めた状態 - 人物写真は自然光の明るい屋外や車内で笑顔の家族 - 車の走行シーンは山道の横構図 - 地図は太い道の線と地名ラベルで手描き風 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPは1カラムで料理写真の下に説明文を置く - ステップ3つは縦積みにする - お品書きカードは1枚ずつ縦並び - イラストは縮小し画面端に数点のみ残す - フッターリンクはアコーディオンか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-7e5c4a16`（元 LP の URL から採番） - **元 LP**: https://www2.nissan.co.jp/SP/SERENA/MICHIBEN/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（4/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。