--- version: alpha name: Ink Wash Monochrome Sake Story LP description: 白地に水墨のにじみと霧の写真を重ね、明朝体の中央揃え本文で田んぼから酒までの物語を静かに語る日本酒LP。色はほぼ無彩色で、写真の緑や料理の色だけがアクセントになる。 colors: primary: '#2A2A2A' background: '#FFFFFF' text-body: '#2A2C2B' secondary: '#828C87' tint-1: '#DBDBDB' accent-1: '#ABB1B1' dark-section: '#1A1B1D' line: '#2A2C2B' text-muted: '#605E57' accent-2: '#3E8E41' typography: display: fontFamily: Yuji Syuku fontSize: 72px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 19px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.08em accent: fontFamily: Cormorant Garamond fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.04em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 0px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' hero-ink-visual: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 620px product-title-line: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 40px story-block: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 260px line-illustration: textColor: '{colors.line}' height: 200px mist-photo-section: backgroundColor: '{colors.accent-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 520px photo-grid: height: 260px signature-message: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 320px dark-photo-collage: backgroundColor: '{colors.dark-section}' height: 380px --- # DESIGN.md — 墨と霧のモノクロ日本酒ブランドLP（Ink Wash Monochrome Sake Story LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 和風、上品・高級、シンプル・ミニマル、ナチュラル - **キーワード**: 水墨画・霧・余白・明朝体・中央揃え・物語性 - **地の質感**: 和紙のような白地に墨のにじみ・かすれが広がる。霧がかった山の写真で湿った空気を出す - **形**: 角丸なしの四角い写真。墨の形が有機的な境界を作る - **温度感**: 冷たく静かな無彩色。写真の緑で少しだけ温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2A2A2A` | 墨色（ロゴ・ボトル・見出し） | 6% | 画素の実測 | | `background` | `#FFFFFF` | 白い地 | 57% | 画素の実測 | | `text-body` | `#2A2C2B` | 明朝体の本文 | 2% | 画素の主要色に補正 | | `secondary` | `#828C87` | 墨のにじみの中間グレー | 8% | 画素の主要色に補正 | | `tint-1` | `#DBDBDB` | 淡い墨のぼかし | 6% | 画素の主要色に補正 | | `accent-1` | `#ABB1B1` | 霧の山の青灰色 | 5% | 画素の実測 | | `dark-section` | `#1A1B1D` | 酒器写真の黒背景 | 5% | 画素の実測 | | `line` | `#2A2C2B` | 線画イラストの細線 | 1% | 画素の主要色に補正 | | `text-muted` | `#605E57` | 英文サブコピー・注記 | 1% | 画素の主要色に補正 | | `accent-2` | `#3E8E41` | パートナーロゴの緑（ごく限定） | 0% | 推定 | - 地は白一色。色面のセクション分けはせず、墨のにじみや霧の写真で区切る - 文字は墨色と濃いグレーだけ。色付きの文字は使わない - 色が出るのは写真（稲の緑・料理）だけにする - 暗い面は酒器の写真ブロックだけ。高級感の締めに使う - 落款のような赤や企業ロゴの緑はごく小さく置く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ブランドの書道ロゴ（画像で置く） | 手書き・筆 | Yuji Syuku | 400 | 72px | 1.1 | 0.0em | | `headline-lg` | 商品名ライン（和文＋欧文セリフ） | 明朝 | Shippori Mincho | 600 | 22px | 1.4 | 0.08em | | `headline-md` | セクション見出し（中央揃え） | 明朝 | Shippori Mincho | 500 | 19px | 1.6 | 0.15em | | `body-md` | 物語の本文（中央揃え） | 明朝 | Noto Serif JP | 400 | 13px | 2.2 | 0.08em | | `accent` | 英文コピーと年号 | 欧文セリフ | Cormorant Garamond | 500 | 14px | 1.4 | 0.02em | | `note` | 企業紹介などの注記 | 明朝 | Noto Serif JP | 400 | 10px | 1.7 | 0.04em | - 見出しも本文も明朝体で統一し、ゴシック体は使わない - 本文は中央揃え。1行を短く切り、行間は2倍以上とる - 見出しは字間を広めにとり、飾りは付けない（ダッシュ程度まで） - 欧文はセリフ体で、和文の横に小さく添える - ブランドロゴは筆文字の画像で大きく見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真ギャラリーは 2 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 96px、基本単位 8px、カード内 0px（375px 幅換算） - 本文ブロックは中央に置き、左右に広い余白をとる - セクション間はたっぷり空け、墨や霧の画像でつなぐ - 写真は3列グリッド（SPは2列）で間隔を狭く並べる - 商品ビジュアルは筆文字ロゴとボトルを横に並べる - CTAボタンを置かず、読ませる構成にする ## Elevation & Depth - 影は使わずフラットにする - 奥行きは墨のぼかしと霧のグラデーションで出す - ボトル写真は切り抜いて白地に直接置く ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形。ボトルは切り抜き - **セクション境界**: 直線では区切らず、墨のにじみや霧の写真が上下にフェードしてつながる - 角丸は使わない - 幾何学的な装飾は置かない - 境界はグラデーションやにじみでぼかす ## Components - **墨のヒーロービジュアル**（`hero-ink-visual`）: 筆文字ロゴと切り抜きボトルを並べ、背景に水墨のにじみを広げる。右上に欧文コピーを小さく添える - **商品名ライン**（`product-title-line`）: 和文の明朝と欧文セリフを横一列に並べる中央見出し - **物語の本文ブロック**（`story-block`）: 中央揃えの見出しの下に、短い行の明朝本文を5〜10行並べる - **農作業の線画**（`line-illustration`）: 田植えをする人・鳥・苗を細いペン画で描き、白地に散らして置く - **霧の山の背景セクション**（`mist-photo-section`）: 霧のかかった山の写真を全幅に敷き、明るい部分に中央揃えの本文を重ねる - **活動写真グリッド**（`photo-grid`）: 田植えなどの記録写真を同じサイズで3列×2段に並べる - **代表メッセージと署名**（`signature-message`）: 中央揃えの本文の後に肩書きと手書きの署名を置き、下に企業ロゴと短い紹介を添える - **酒器写真コラージュ**（`dark-photo-collage`）: 黒背景の大きな写真1枚と小さな写真2枚を左右非対称に組む ## Do's and Don'ts **Do** - 白地と墨色を基調にして、写真以外に色を足さない - 本文は明朝体の中央揃えにし、行間を広くとる - 墨のにじみや霧の画像でセクションを自然につなぐ - 田植えなどの線画で手仕事の温度を加える - 余白を広くとって、静かでゆっくりしたリズムにする **Don't** - 鮮やかな色のボタンやバッジを置かない - ゴシック体や太い見出しで強く訴求しない - 角丸カードやドロップシャドウを使わない - セクションを色の帯ではっきり区切らない - 1行に長い文章を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と商品を一目で見せる）: 筆文字ロゴとボトルを墨のにじみの上に置く。下に商品名ラインを入れる 2. **コンセプト**（自然と生命の物語を詩的に伝える）: 中央の見出しと短い行の本文。右下に墨のにじみと鳥のイラストを添える 3. **取り組みの背景**（持続可能な酒造りと農業への思いを説明する）: 2行の見出しと長めの中央揃え本文。下に農作業の線画を散らす 4. **原料米の産地**（米の育つ環境と作り手を紹介する）: 霧の山の写真を全幅に敷いて本文を重ね、下に活動写真を3列で並べる 5. **代表メッセージ**（作り手の思いで信頼を高める）: 中央揃えの本文、手書き署名、企業ロゴと紹介文 6. **パッケージデザイン**（ボトルと化粧箱のデザインの意図を伝える）: 墨のにじみの上にボトルと箱を並べ、下に短い説明文を置く 7. **味わいとペアリング**（香りや飲み方、料理との相性を伝える）: 黒背景の酒器写真のコラージュと、中央揃えのテイスティング文 ## Imagery - 水墨画のにじみ・かすれを、白地に大きく広げて背景にする - 霧のかかった山や田んぼを低い彩度で撮った風景写真 - 人・鳥・苗を描いた細いペン画で、余白に点在させる - 田植えなど作業の記録写真は自然光で撮り、演出しない - ガラスの酒器は黒背景に低い光を当て、ローキーで撮る - ボトルは白地に切り抜き、筆文字のラベルを主役にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもコンテンツは中央に寄せ、本文の幅は約480pxに収める - SPではヒーローのロゴとボトルを縦に並べるか、ボトルを小さめにして重ねる - 写真グリッドはPCの3列からSPでは2列にする - 酒器コラージュはSPでは大きな写真1枚の下に小さな写真2枚を横に並べる - 本文の改行位置はSPで見直し、1行を15〜20字程度にする ## 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-b851270a`（元 LP の URL から採番） - **元 LP**: https://www.kikumasamune.shop/c/liquor/jyunmaidaiginjyo/nk336 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（4/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。