--- version: alpha name: Washi Ink Storytelling Pet Treat LP description: 生成りの和紙調の地に、焦げ茶の文字と墨絵風の挿絵を重ねたペットおやつの LP。縦書きの物語調コピー、筆文字の見出し、赤・緑・橙の和柄ラベルで「昔ながら・手仕事・国産」の印象を出している。写真は不定形の有機的なシェイプで切り抜いてリズムをつける。 colors: background: '#F1E6CB' background-alt: '#FEF7E5' text: '#462E11' primary: '#4B2B17' secondary: '#C2A162' accent-1: '#940D0C' accent-2: '#79884E' accent-3: '#E8862B' marker: '#B38C34' headline-color: '#B34202' text-muted: '#866C3F' on-primary: '#FBF8EC' secondary-accessible: '#8B6E36' typography: display: fontFamily: Yuji Syuku fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 800 lineHeight: 1.9 letterSpacing: 0.15em headline-sm: fontFamily: Zen Old Mincho fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Shippori Mincho B1 fontSize: 32px fontWeight: 800 lineHeight: 1.0 rounded: sm: 4px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 48px brush-circle-mark: textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 72px badge-volume: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 96px speech-blob: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 120px dog-bubble: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px info-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 180px check-list: textColor: '{colors.text}' typography: '{typography.note}' height: 140px recommend-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 240px tag-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 40px --- # DESIGN.md — 和紙と墨絵の和風ペットおやつ LP（Washi Ink Storytelling Pet Treat LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ペット ／ **雰囲気**: 和風、親しみ・手作り感、ナチュラル、レトロ - **キーワード**: 和紙・墨絵・縦書き物語・筆文字・焼き色・国産 - **地の質感**: 和紙の繊維感と淡い麻の葉模様を全面に敷き、墨絵の挿絵がにじむように溶け込む - **形**: 写真は不定形の有機シェイプや楕円で切り抜く。ラベルは角張った矩形とひし形を組み合わせる - **温度感**: 暖色寄り。生成り・きつね色・焦げ茶で温かく素朴 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F1E6CB` | 和紙調のページ地 | 40% | 画素の実測 | | `background-alt` | `#FEF7E5` | 淡い生成りのカード・本文ボックス | 11% | 画素の実測 | | `text` | `#462E11` | 本文と見出しの焦げ茶 | 8% | 画素の実測 | | `primary` | `#4B2B17` | 焦げ茶の主色（容量バッジなど） | 3% | 画素の主要色に補正 | | `secondary` | `#C2A162` | きつね色の吹き出し・ラベル | 8% | 画素の主要色に補正 | | `accent-1` | `#940D0C` | 臙脂の帯見出し・強調文字 | 2% | 画素の実測 | | `accent-2` | `#79884E` | 抹茶色の帯見出し | 2% | 画素の実測 | | `accent-3` | `#E8862B` | 橙のひし形つなぎ記号 | 1% | 推定 | | `marker` | `#B38C34` | 強調語の金茶文字 | 1% | 画素の実測 | | `headline-color` | `#B34202` | | 1% | 画素の実測 | | `text-muted` | `#866C3F` | 墨絵の線・注釈 | 6% | 画素の主要色に補正 | | `on-primary` | `#FBF8EC` | 濃色面上の白文字 | 1% | 画素の主要色に補正 | | `secondary-accessible` | `#8B6E36` | AA を満たす補正値（計算） | | 計算 | - 地は生成りの和紙色で統一し、本文ボックスだけ一段明るい生成りにする - 文字は黒ではなく焦げ茶を使う - キャッチ見出しは赤茶の筆文字で焼き色を表現する - 帯見出しは臙脂と抹茶の矩形を橙のひし形でつなぐ - 強調語は金茶の文字色か、淡い緑の下地マーカーで示す - 吹き出しやラベルにはきつね色の面に白文字を使う - `speech-blob` は文字 `#FBF8EC` × 背景 `#C2A162` のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#8B6E36`、4.51:1）を使う。 - `tag-label` は文字 `#FBF8EC` × 背景 `#C2A162` のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#8B6E36`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大見出しの筆文字キャッチ | 手書き・筆 | Yuji Syuku | 700 | 36px | 1.2 | 0.05em | | `headline-lg` | 帯ラベル見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 26px | 1.2 | 0.08em | | `headline-md` | 縦書きの物語コピー | 明朝 | Shippori Mincho | 800 | 18px | 1.9 | 0.15em | | `headline-sm` | サブ見出し・吹き出し | 明朝 | Zen Old Mincho | 700 | 18px | 1.4 | 0.05em | | `body-lg` | 横書きの説明本文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.7 | 0.03em | | `note` | チェックリスト・注記 | ゴシック | Noto Sans JP | 500 | 12px | 1.5 | 0.02em | | `accent` | 円形ロゴの一文字・数値 | 明朝 | Shippori Mincho B1 | 800 | 32px | 1.0 | 0.0em | - 物語パートは明朝体の縦書きで、行間を広めに取る - 説明の本文は太めのゴシックで横書きにする - キャッチは筆文字を大きく使い、写真の上に重ねてもいい - 見出しの一文字を円形の筆跡モチーフに入れて区切りにする - 強調語は色だけで目立たせ、太さは本文のままにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と縦書き文章を左右にずらして交互に置く - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 縦書きの文章ブロックと挿絵を左右に振り分ける - 写真は画面端まで寄せてはみ出させ、文字と重ねる - 本文ボックスは角丸の淡い面で包む - 犬の切り抜き写真をセクションの角に置いて視線を誘導する - セクション間は余白と挿絵で区切り、罫線は使わない ## Elevation & Depth - 影はほぼ使わず、平面的に重ねる - 切り抜き写真は輪郭を生かし、浮かせない - カードは影なしで、明るい生成りの面だけで区別する ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 不定形の有機シェイプ・楕円・丸。人物や犬は背景を抜いて切り抜く - **セクション境界**: 直線の境界は使わず、墨絵のにじみと余白でつなぐ - 帯見出しは角丸なしの矩形にする - つなぎにはひし形の小さな記号を使う - 吹き出しは丸みのある不定形にして、しっぽを付ける - バッジは円形か六角形にする ## Components - **二色帯見出し**（`heading-band`）: 臙脂と抹茶の矩形帯を橙のひし形でつなぐ見出し - **筆円の一文字マーク**（`brush-circle-mark`）: 筆で描いた円の中に漢字一文字を置き、章の区切りにする - **容量バッジ**（`badge-volume`）: 焦げ茶の円に白文字で容量を大きく入れる - **きつね色吹き出し**（`speech-blob`）: 写真に重ねる不定形の面に白い太字ゴシックを入れる - **犬のセリフ吹き出し**（`dog-bubble`）: 白い面を焦げ茶の線で囲んだ手描き風の吹き出し - **説明カード**（`info-card`）: 明るい生成りの角丸カード。キーワードは金茶の文字にする - **チェック特長リスト**（`check-list`）: 緑のチェックで特長を3つ並べ、筆の円弧で囲む - **おすすめ対象リスト**（`recommend-list`）: 見出しの下に、小アイコンと太字の文を並べる角丸カード - **産地ラベル**（`tag-label`）: きつね色の小さな矩形に白文字を2行入れる ## Do's and Don'ts **Do** - 地には和紙の質感と淡い麻の葉模様を敷く - 物語のパートは明朝体の縦書きにして、墨絵の挿絵と組み合わせる - 写真は不定形のシェイプで切り抜き、画面端からはみ出させる - 犬の切り抜き写真で、親しみやすさをこまめに足す - 強調には臙脂・抹茶・金茶を少しだけ使う **Don't** - 純白や純黒をベタ塗りで使わない - 寒色やビビッドな原色を入れない - 四角い写真をグリッドで均等に並べない - 影の強いカードや光沢のあるボタンを使わない - 細い欧文フォントで現代的にしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（和の世界観と商品名を一目で伝える）: 墨絵の犬と寺の挿絵で筆文字のロゴを挟み、下に小さなサブコピーを入れる 2. **物語（素材の由来）**（原料の歴史で価値をつくる）: 縦書きの明朝コピーと、田園や船の墨絵を左右交互に置く 3. **物語のまとめ**（原料と犬の暮らしをつなぐ）: 太字ゴシックの横書き本文を4〜5行で入れる 4. **製法（技）**（手仕事で焼いていることを伝える）: 筆円の一文字マークを置き、不定形の写真ときつね色の吹き出しを重ねる 5. **手仕事の文化**（不揃いさが価値だと伝える）: 明るい面の上に縦書きの長文を置き、背景に墨絵を薄く敷く 6. **商品紹介**（中身と容量を見せる）: 大きな商品写真に縦帯のロゴと容量の円バッジを重ねる 7. **素材の訴求**（無添加であることを伝える）: 墨絵の米袋の横に、マーカーで強調した短い文を置く 8. **心（届けたい想い）**（情緒的な共感をつくる）: 油絵調の風景を不定形に切り抜き、人物の挿絵と本文を添える 9. **コンセプト説明**（商品名の意味を説明する）: 白い和紙カードに赤と黒の縦書きを入れ、ひし形の帯で見出しを組む 10. **安心ポイント**（アレルゲンが少なく国産で安全だと伝える）: 二色帯見出し、チェックリスト、丸写真、六角バッジ、説明カードを使う 11. **味わい**（香ばしさで食欲を刺激する）: 赤茶の筆文字キャッチと焼き網の丸写真を使い、犬の吹き出しを添える 12. **おすすめ対象**（自分に向いていると思ってもらう）: 角丸カードに、アイコン付きの対象者を3行並べる ## Imagery - 挿絵はセピア色の墨絵・銅版画風。江戸の町並み、田園、職人を描く - 商品写真は暖色光で撮り、焼き色を強調する。網焼きのシズル感を入れる - 柴犬は笑顔の切り抜き写真にして、ページのあちこちに置く - 風景は油絵調に加工して、懐かしい雰囲気にする - 地には和紙の繊維と麻の葉の幾何学模様を薄く敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版も 650px 幅の縦長 1 カラムなので、中央寄せでそのまま使う - SP では縦書きブロックを 2 列までにし、文字は 16〜18px にする - PC では左右の余白に和紙の地を広げ、本文は 650px 程度に収める - はみ出す写真は SP でも片側の端に寄せて残す ## 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-5bc47b5f`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/e48/20020/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。