DESIGN.md — 薄墨グレーと藍紺の和モダン酒蔵 LP（Quiet Gray Washi Sake Brewery LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル
• キーワード: 和モダン・余白・縦書き・漢字一文字見出し・薄墨グレー・藍紺
• 地の質感: 紙のようなフラットなライトグレー。墨絵の梅を淡く散らす
• 形: 基本は直線と細い罫線。円形は丸ボタンとバッジだけ
• 温度感: やや寒色寄りで静か。商品写真の生成りと焼き色が温かみを足す

Colors

• 地はライトグレー 1 色にする。セクションごとに段階的に濃いグレーへ切り替えて区切る
• 文字は墨色と灰色だけを使い、鮮やかな色は文字に使わない
• 藍紺はリンクの丸ボタンと日付ラベルに限って使う
• 朱色は季節・限定バッジ 1 点だけに使う
• フッターは灰紺と深い藍の 2 段にし、文字はすべて白にする
• 写真と商品パッケージの色を主役にし、UI 側の色は控えめにする
• badge-season は文字 #F0F0F0 × 背景 #DB3413 のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CD3112、4.56:1）を使う。

Typography

• 見出しは漢字一文字（約 60px）と小さな明朝見出しの組み合わせを基本にする
• コピーは縦書きを多用し、字間を 0.3em 以上空ける
• 情報系の本文とお知らせはゴシックにして読みやすくする
• 太字は使わず、文字の大きさの差で強弱をつける
• 英字は字間の広い大文字（LETTER SPACED）でラベルとして添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品欄だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px を確保する
• セクション同士は全幅の細い罫線か地色の切り替えで区切る
• 商品グリッドは縦横の罫線で仕切り、上辺にラベル付きの罫線を引く
• リンクは右寄せのテキストに丸い矢印ボタンを添える
• 情報表は■見出しと右寄せの値の 2 列にし、行ごとに罫線を引く

Elevation & Depth

• 影は使わず、完全にフラットにする
• 奥行きは地色の濃淡と写真だけで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。施設写真は全幅の角なし矩形、サムネイルは横長の矩形
• セクション境界: 直線の細い罫線か、地色を切り替える
• 四角い要素はすべて角丸なしにする
• 丸は矢印ボタン（直径約 22px の線の円）、丸リンクボタン、バッジに限る
• 日付ラベルは藍紺の四角いタグにして写真の上辺へ重ねる

Components

• 漢字一文字見出し（kanji-heading）: 大きな明朝の漢字一文字の右下に、小さな明朝見出しを横に並べる
• 丸型の誘導ボタン（circle-link）: 藍紺系の正円に白文字 2 行。ファーストビューの左下に 2 つ重ねて置く
• 季節限定の丸バッジ（badge-season）: 朱色の正円に白の明朝で 2 行。商品写真の脇に置く
• 丸矢印テキストリンク（arrow-link）: 右寄せのテキストに、細線の円で囲んだ「>」を添える
• 罫線ラベル（line-label）: 全幅の罫線の左側に小さな明朝ラベルを載せて、カテゴリーを区切る
• 日付タグ（date-tag）: 藍紺の四角に、年・大きな日付・開催の 3 段を白文字で入れる。カード写真の左上に重ねる
• トピックス枠（topics-box）: 細い罫線の矩形。枠の上辺に英字ラベルを載せ、中に日付と見出しを入れる
• お知らせ行（news-row）: 左に横長サムネイル、右に日付とタイトル。行の下に罫線を引く
• フッターの四角ボタン（footer-button）: 灰紺の地の上に半透明の四角ボタンを置き、アイコンと白文字を入れる

Do's and Don'ts

Do - 余白をたっぷり取り、1 画面に置く要素を少なくする - 見出しは漢字一文字と縦書きのコピーで和の印象をつくる - 商品は切り抜き写真を中央に置き、名前を明朝で添える - 区切りには細い罫線を使い、静かなリズムをつくる - 差し色は藍紺と朱の 2 色に限定する

Don't - 角丸のカードや影を使わない - 太いゴシックの大見出しや派手なグラデーションを使わない - 原色の大きな面を置かない - ピル型の目立つ購入ボタンを並べない - 文字を詰めすぎない（明朝は必ず字間を広げる）

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ロゴ・言語切替・メニューを置く）: グレー地に墨色のロゴ、右端に細い 2 本線のメニュー
2. ファーストビュー（季節の主力商品とブランドの世界観を見せる）: 淡いグレーの枠に商品の切り抜きと墨絵の梅を置く。縦書きコピー、大きな漢字、朱バッジ、丸ボタン 2 つを配置する
3. トピックス（最新の話題を 1 件知らせる）: 細い罫線の枠に日付と見出しを入れる
4. 商品紹介（定番・新作・季節・ノンアルの商品を紹介する）: 漢字見出しの下に詩的な 4 行のリードを置く。罫線ラベルで区切った商品グリッドに、縦書きのキャッチを添える
5. 体験・施設紹介（蔵の施設や体験の魅力を伝える）: 漢字見出しとリード文の後に全幅の写真を置き、施設名と情報表を続ける
6. ワークショップ（開催予定のイベントを案内する）: 横スクロールのカード。写真に日付タグを重ね、下にカテゴリーとタイトルを置く
7. 見学案内（見学の時間・料金と予約先を示す）: 夜景の全幅写真の下に■付きの情報表を置き、丸矢印リンクを添える
8. 店頭イベント（試飲会などの予定を一覧で示す）: 一段濃いグレー地に、日付・地域・内容を罫線で区切ったリストにする
9. おしらせ（ニュースの一覧を見せる）: 漢字見出しの下に、サムネイル付きの行を 6 件並べる
10. フッター（会社情報・リンク・飲酒の注意を載せる）: 灰紺地に白文字で会社情報と四角ボタンを置く。深い藍地にリンクと注意書き、最後にグレー地で SNS アイコンとコピーライトを置く

Imagery

• 商品はボトルや缶を正面から撮り、背景を抜いた切り抜きにする
• 淡い墨絵調の梅の花を、背景にまばらに散らす
• 施設写真は木造建築と自然光、または雪景色の夜景で、暖色の照明を効かせる
• ワークショップは白い卓上に布や花を置いた俯瞰の物撮りにする
• 漢字見出しには筆の勢いのある明朝を使い、必要なら墨絵の小物を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では漢字見出しの右側にリードを縦書きで配置する
• PC の商品欄は左に定番を大きく置き、右に 2 列＋下段 1 つを並べる罫線グリッドにする
• PC の見学案内は写真を左、情報表を右に置く 2 カラムにする
• PC のワークショップでは左右に送りボタンを付け、斜めの縦書き英字ラベルを添える
• PC のフッターは会社情報を左、ボタンを右に置き、リンクは横一列に並べる

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 行書くと起動時に読み込まれる。