--- version: alpha name: Quiet Gray Washi Sake Brewery LP description: 明るいグレーの地に、明朝体の大きな漢字一文字と縦書きのコピーを置いた、余白の多い和モダンな酒蔵サイト型 LP。商品は切り抜き写真で並べ、細い罫線で区切る。差し色は藍紺の丸ボタンと朱の丸バッジだけに絞る。フッターは深い藍紺で締める。 colors: background: '#EBEBEB' background-alt: '#DCDCDC' surface: '#E4E4E4' primary: '#2C3A52' secondary: '#355564' dark-section: '#40485F' accent-2: '#283651' on-dark: '#F0F0F0' accent-1: '#DB3413' text: '#010101' text-body: '#3A3A3A' line: '#DEDAD4' cta: '#535E72' accent-1-accessible: '#CD3112' typography: display: fontFamily: Shippori Mincho fontSize: 62px fontWeight: 500 lineHeight: 1.0 headline-md: fontFamily: Shippori Mincho fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.3em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em accent: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.4em body-lg: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.3em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' kanji-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 80px circle-link: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 75px badge-season: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px arrow-link: textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 26px line-label: textColor: '{colors.text}' typography: '{typography.note}' height: 20px date-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 52px topics-box: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 70px news-row: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 90px footer-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 38px --- # DESIGN.md — 薄墨グレーと藍紺の和モダン酒蔵 LP（Quiet Gray Washi Sake Brewery LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 和風、上品・高級、シンプル・ミニマル - **キーワード**: 和モダン・余白・縦書き・漢字一文字見出し・薄墨グレー・藍紺 - **地の質感**: 紙のようなフラットなライトグレー。墨絵の梅を淡く散らす - **形**: 基本は直線と細い罫線。円形は丸ボタンとバッジだけ - **温度感**: やや寒色寄りで静か。商品写真の生成りと焼き色が温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#EBEBEB` | ページ全体の地色 | 55% | 画素の主要色に補正 | | `background-alt` | `#DCDCDC` | イベント欄の一段濃い地 | 6% | 画素の実測 | | `surface` | `#E4E4E4` | ファーストビュー写真枠の明るい面 | 6% | 画素の実測 | | `primary` | `#2C3A52` | ブランドの藍紺。丸ボタンと日付ラベル | 4% | 画素の主要色に補正 | | `secondary` | `#355564` | 灰紺の丸ボタン | 1% | 画素の実測 | | `dark-section` | `#40485F` | フッター上段の灰紺 | 7% | 画素の実測 | | `accent-2` | `#283651` | フッター下段の深い藍 | 6% | 画素の実測 | | `on-dark` | `#F0F0F0` | 暗い地の上の文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#DB3413` | 季節限定の朱の丸バッジ | 0% | 画素の実測 | | `text` | `#010101` | 見出しの墨色 | 2% | 画素の実測 | | `text-body` | `#3A3A3A` | 本文のチャコール | 2% | 推定 | | `line` | `#DEDAD4` | 区切りの細い罫線 | 0% | 画素の主要色に補正 | | `cta` | `#535E72` | フッターの四角いボタン面 | 1% | 画素の実測 | | `accent-1-accessible` | `#CD3112` | AA を満たす補正値（計算） | | 計算 | - 地はライトグレー 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション冒頭の漢字一文字 | 明朝 | Shippori Mincho | 500 | 62px | 1.0 | 0.0em | | `headline-md` | 漢字の横に添える見出し | 明朝 | Shippori Mincho | 500 | 16px | 1.4 | 0.3em | | `headline-sm` | 施設名・イベント見出し | 明朝 | Noto Serif JP | 500 | 15px | 1.5 | 0.15em | | `accent` | 縦書きのコピー・タグライン | 明朝 | Noto Serif JP | 400 | 15px | 1.8 | 0.4em | | `body-lg` | 短い詩的なリード文 | 明朝 | Noto Serif JP | 400 | 13px | 2.1 | 0.3em | | `body-md` | 説明文・お知らせのタイトル | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.05em | | `note` | 日付・注釈・英字ラベル | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.05em | | `label-button` | 丸ボタン内の短いラベル | ゴシック | Noto Sans JP | 500 | 11px | 1.4 | 0.05em | - 見出しは漢字一文字（約 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 ```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-ee688e0d`（元 LP の URL から採番） - **元 LP**: https://www.kikusui-sake.com/home/jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。