DESIGN.md — 墨と霧のモノクロ日本酒ブランドLP（Ink Wash Monochrome Sake Story LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 酒類 ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル、ナチュラル
• キーワード: 水墨画・霧・余白・明朝体・中央揃え・物語性
• 地の質感: 和紙のような白地に墨のにじみ・かすれが広がる。霧がかった山の写真で湿った空気を出す
• 形: 角丸なしの四角い写真。墨の形が有機的な境界を作る
• 温度感: 冷たく静かな無彩色。写真の緑で少しだけ温かみを足す

Colors

• 地は白一色。色面のセクション分けはせず、墨のにじみや霧の写真で区切る
• 文字は墨色と濃いグレーだけ。色付きの文字は使わない
• 色が出るのは写真（稲の緑・料理）だけにする
• 暗い面は酒器の写真ブロックだけ。高級感の締めに使う
• 落款のような赤や企業ロゴの緑はごく小さく置く

Typography

• 見出しも本文も明朝体で統一し、ゴシック体は使わない
• 本文は中央揃え。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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。