DESIGN.md — 白黒と琥珀色の縦書き明朝ウイスキーLP（Monochrome Amber Heritage Whisky LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、和風、ラグジュアリー・ダーク、シンプル・ミニマル
• キーワード: 縦書き明朝・モノクロ写真・琥珀色・大きな余白・白黒反転・歴史の物語
• 地の質感: フラットな白・黒の面に写真だけで質感を出す。装飾的なテクスチャや影は使わない
• 形: 角丸なしの矩形。写真は四角く切り、細い罫線だけで区切る
• 温度感: 白黒は無彩色でクール、写真の琥珀色が温かみを添える

Colors

• 地は白と黒の2色だけ。章が歴史に入ると黒へ反転させる
• 色味は写真の琥珀色にまかせ、UI に有彩色を使わない
• 文字は白地で墨色、黒地で白
• 英字の添え見出しはグレーで小さく控えめに
• 企業共通フッターだけ淡い水色地と白カードを使う
• CTA も色面ではなく白地＋細枠で表現する

Typography

• セクション見出しは縦書き明朝にし、横に英字の小見出しを縦に添える
• 本文は明朝で小さめ、行間2倍以上、1行15〜20字で詩のように改行
• 太字やゴシックは本編で使わない（共通フッターだけゴシック）
• 欧文はセリフかスクリプトで、年版名などに限定
• 黒地では大きなスクリプト体を薄く重ね、上に白のセリフ見出しを置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。デザイン紹介は横スクロールのカード
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 140px、基本単位 8px、カード内 0px（375px 幅換算）
• セクション間に画面半分ほどの大きな余白を取る
• 写真は全幅と、左右に寄せた非対称配置を混ぜる
• 黒地の歴史章では小さなモノクロ写真を散らすように配置
• 本文は左揃えで左端に約19pxの余白
• 縦書き見出しは中央に置き、上下に余白を十分取る

Elevation & Depth

• 影は使わない。奥行きは写真の明暗だけで出す
• カード・ボタンは平面で細線か無枠

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。全幅か、片側に寄せて余白を残す
• セクション境界: 白と黒の地を直線で切り替える。終盤は淡い写真がフェードで白地に溶ける
• 角丸は一切使わない
• 罫線は1pxの細線だけ
• アイコンは細い＋記号程度に抑える

Components

• 全画面のファーストビュー映像（hero-video）: 琥珀色の液面に雫が落ちる接写映像の中央に白いロゴを置く。左下に一時停止ボタン
• 縦書き見出し（vertical-heading）: 明朝の縦書き2行に、グレーの英字小見出しを縦に添える
• テイスティング表（tasting-list）: 項目名と内容の2列の文字表。下に香りを表す食材写真の正方形サムネイルを3つ並べる
• デザイン紹介カード（design-carousel）: 黒背景のボトル接写写真の下に小見出しと説明文。横スクロールで次のカードを覗かせる
• 黒地の章タイトル（dark-chapter-title）: 大きな薄グレーの筆記体の上に白いセリフ体の年版名を重ねる
• 過去作のアコーディオン（accordion-other）: 上下に細線、左に年版名と短い説明、右に細い＋
• 細枠のリンクボタン（button-outline）: 白地に薄いグレーの1px枠、中央に明朝の文字。ブランドサイトへ誘導する
• フッターのリンクカード（footer-link-card）: 淡い水色地に白い矩形カードを2列で並べ、関連サービスのロゴを置く

Do's and Don'ts

Do - 見出しは縦書き明朝にして和の格調を出す - 余白を大胆に取り、情報を少なく見せる - 歴史パートは黒地とモノクロ写真で時間の流れを表現する - 色は写真の琥珀色だけに任せる - 本文は短く改行し、ゆっくり読ませるリズムを作る

Don't - 鮮やかな色のCTAボタンや価格の訴求を入れない - ゴシック体や太字を本編の見出しに使わない - 角丸・影・グラデーションのボタンを使わない - 写真を詰め込み、余白を削らない - スタンプ風のバッジや吹き出しを入れない

Page Structure

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

1. ファーストビュー（商品の世界観を一瞬で伝える）: 液面接写の全画面映像の中央に白いロゴと限定版の表記
2. コンセプト（商品の物語の主題を示す）: 白地に縦書き見出しと、短い行の明朝本文
3. イメージ写真（歴史と商品のつながりを暗示する）: 暗い卓上にボトルと古いモノクロ写真を置いた全幅写真
4. 香味の特長（味わいの魅力を語る）: 縦書き見出し、ロックグラスの写真、短い説明、黒背景の商品写真
5. テイスティングノート（色・香り・味・余韻を具体的に示す）: 2列の文字表と食材の正方形サムネイル3枚
6. デザイン紹介（限定ラベル・パッケージの価値を伝える）: 縦書き見出しの下に横スクロールの写真カード
7. 歴史の物語（蒸溜所の歩みでブランドの深みを伝える）: 黒地に筆記体の章タイトル、散らしたモノクロ写真と白い本文を交互に
8. まとめと商品（香味の象徴として商品を締めくくる）: 淡いモノクロ建物写真を背景に、本文とボトル・グラス・化粧箱の切り抜き
9. 過去の製品（シリーズの他の版へ誘導する）: 縦書き見出しと細線のアコーディオン
10. ブランドサイト誘導（公式サイトへ送る）: 中央に細枠の矩形ボタン1つ
11. 企業共通フッター（サイト内回遊と飲酒注意の表示）: メニューのアコーディオン、淡い水色地のリンクカード、SNS、注意表記

Imagery

• 琥珀色の液体を黒背景で低い光で撮り、ハイライトを光らせる
• ボトルは暗い木の卓上や黒いグラデーション背景で撮る
• 歴史パートは粒子の荒いモノクロの古写真を小さめに使う
• 香りの説明は食材を暗い背景で寄って撮った正方形写真
• 終盤は建物の写真を淡く白飛びさせて背景にし、商品を切り抜きで重ねる
• イラストやアイコン装飾は使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文も縦書きにし、見出しと本文を右から左へ並べる
• PC の香味章は写真と文字を左右に分ける2カラム
• デザイン紹介は PC で3枚を横に並べ、スクロールさせない
• 歴史章は PC で写真を広く散らし、縦書き本文と非対称に組む
• フッターは PC で4列のリンク一覧と4列のカードになる

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