--- version: alpha name: Modern Japanese Tea Cafe Brand Site description: 白地に薄グレーとベージュの帯を重ね、焦茶のフッターで締める和モダンな日本茶カフェのサイト。欧文の太いサンセリフ見出しと細い和文本文を組み合わせる。丸い枠線の矢印ボタンと、余白の多い写真グリッドで落ち着いた上質感を出している。 colors: background: '#FFFFFF' background-alt: '#E1E1E1' tint-1: '#E3E1D5' dark-section: '#433D3D' on-dark: '#EBEAE7' text: '#121111' text-body: '#666666' line: '#E1E1E1' primary: '#3D2919' accent-1: '#01BA01' accent-2: '#C5A96A' surface: '#F3F2F2' cta: '#0F0B09' on-cta: '#3A393B' typography: display: fontFamily: Montserrat fontSize: 30px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.2em headline-lg: fontFamily: Montserrat fontSize: 22px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.2em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.08em label-button: fontFamily: Montserrat fontSize: 10px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 30px fontWeight: 500 lineHeight: 1.0 letterSpacing: 1.2em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 0px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-circle-more: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 34px slider-arrows: textColor: '{colors.text}' rounded: '{rounded.full}' height: 24px tag-outline: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 14px filter-tabs: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 20px event-list-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 240px photo-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 140px footer-nav: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 34px --- # DESIGN.md — 白×薄グレー×焦茶の和モダン茶カフェ LP（Modern Japanese Tea Cafe Brand Site） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: シンプル・ミニマル、上品・高級、和風、ナチュラル - **キーワード**: 和モダン・余白・欧文見出し・円形矢印ボタン・焦茶フッター・写真主体 - **地の質感**: フラットな単色面と写真。木目・レンガ写真をバナー背景に使う - **形**: 角丸なしの四角い写真と面。ボタンだけ正円の枠線 - **温度感**: やや暖かいニュートラル。グレーとベージュに焦茶を合わせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページの地 | 35% | 画素の実測 | | `background-alt` | `#E1E1E1` | 見出し横の薄グレー帯 | 10% | 画素の実測 | | `tint-1` | `#E3E1D5` | MENU 紹介のベージュ帯 | 5% | 画素の実測 | | `dark-section` | `#433D3D` | フッターの焦茶グレー | 12% | 画素の実測 | | `on-dark` | `#EBEAE7` | フッター上の白文字 | 1% | 画素の実測 | | `text` | `#121111` | 見出しの黒文字 | 1% | 画素の実測 | | `text-body` | `#666666` | 本文のグレー文字 | 2% | 推定 | | `line` | `#E1E1E1` | リスト区切り線・タグ枠 | 1% | 画素の主要色に補正 | | `primary` | `#3D2919` | ブランドの焦茶 | 5% | 画素の実測 | | `accent-1` | `#01BA01` | お茶の緑（FV・LINE） | 3% | 画素の実測 | | `accent-2` | `#C5A96A` | ギフト枠の金線 | 0% | 推定 | | `surface` | `#F3F2F2` | ギフトバナーの淡グレー面 | 3% | 画素の実測 | | `cta` | `#0F0B09` | 円形矢印ボタン枠 | 0% | 画素の主要色に補正 | | `on-cta` | `#3A393B` | ボタン横ラベル | 0% | 画素の実測 | - 地は白。セクションの片側に薄グレーやベージュの帯を敷いて区切る - 文字は黒見出しとグレー本文の 2 段階のみ - 有彩色は写真に任せる。UI に色はほぼ使わない - フッターとお問い合わせは焦茶グレーの暗い面で締める - 緑は SNS（LINE）や FV のアクセントに限定する - 金の細線はギフト系バナーの枠だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真上の大きな欧文タイトル | 欧文サンセリフ | Montserrat | 600 | 30px | 1.2 | 0.2em | | `headline-lg` | セクション見出し（欧文） | 欧文サンセリフ | Montserrat | 600 | 22px | 1.3 | 0.02em | | `headline-md` | ブランドメッセージの和文 | ゴシック | Zen Kaku Gothic New | 400 | 15px | 1.8 | 0.2em | | `headline-sm` | イベント記事のタイトル | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.05em | | `body-md` | 本文・カード説明 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.08em | | `note` | 日付・タグ・注記 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.08em | | `label-button` | VIEW MORE 等のボタン文字 | 欧文サンセリフ | Montserrat | 600 | 10px | 1.2 | 0.05em | | `accent` | 字間を大きく開けた欧文の装飾文字 | 欧文サンセリフ | Montserrat | 500 | 30px | 1.0 | 1.2em | - 見出しは欧文の大文字で書き、和文は添える程度にする - 和文本文は細めにし、字間をやや広く取る - 本文はグレーにして黒見出しとの差をつける - 装飾の欧文は字間を極端に広げ、写真と帯の境目にまたがせる - 日付は欧文数字にし、本文より小さい灰色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。メニューは 3 列、写真は 2〜3 列の横並び - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算） - 左右余白は 21px 前後 - 見出し左・スライダー矢印右の配置で揃える - カードは枠なし。写真の下に日付と文字を置く - VIEW MORE はセクション右下に置く - グレー帯は画面端から裁ち落としで敷き、反対側に余白を残す ## Elevation & Depth - 影は基本使わない - 奥行きは帯の重なりと写真の裁ち落としで作る - 写真上の文字には暗いオーバーレイを敷いて読ませる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。正方形〜4:3 で裁ち落とす - **セクション境界**: 直線。背景色の切り替えと全幅写真で区切る - 丸は矢印ボタンとスライダードットだけ - タグは細い線の四角枠にする - 四角い枠線ボタンは写真の境目に重ねて置く ## Components - **円形矢印ボタン**（`button-circle-more`）: 欧文ラベルの右に、細い線の正円と小さな三角を置く - **四角い枠線ボタン**（`button-outline-box`）: 白地に黒の細枠を付け、欧文を中央に置く。写真の下端にまたがせる - **スライダー送り矢印**（`slider-arrows`）: 見出しの右に小さな正円を 2 つ並べる。前へはグレー、次へは黒 - **カテゴリタグ**（`tag-outline`）: 細いグレー枠の小さな四角に、カテゴリ名を入れる - **絞り込みタブ**（`filter-tabs`）: 選択中のタブだけ薄グレーで塗る。ほかは文字のみ - **イベント記事行**（`event-list-item`）: 左にタイトル・タグ・日付・本文、右に正方形の写真を置き、下に区切り線を引く - **写真背景バナー**（`photo-banner`）: 暗い写真の上に字間の広い白い欧文タイトルを置く - **フッターナビ**（`footer-nav`）: 焦茶の面に白い欧文メニューを並べ、細い白線で区切る ## Do's and Don'ts **Do** - 余白を広く取り、写真に語らせる - 見出しは欧文大文字にし、和文は小さく添える - ボタンは細い線の円形か四角枠に統一する - セクションの片側だけに薄グレー帯を敷き、リズムを作る - 最下部は焦茶の暗い面で締める **Don't** - 鮮やかな塗りボタンや角丸カードを多用しない - 影やグラデーションの装飾を付けない - 本文を太字や大きな文字にしない - UI に複数の有彩色を使わない - 文字を写真の上に詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューへの導線）: 白地の中央にロゴ、右にハンバーガーメニューを置く 2. **ファーストビュー**（商品と空間の世界観を伝える）: 全幅の写真スライダーにドットを付け、下にメッセージを 2 行で中央揃えにする 3. **お知らせ**（最新情報を伝える）: 欧文見出しと矢印を置き、横スクロールのカードと円形 VIEW MORE を並べる 4. **コンセプト**（ブランドの思想を伝える）: 全幅写真に白い欧文見出しと 1 行コピー、円形ボタンを重ねる 5. **メニュー紹介**（提供する商品の柱を示す）: ベージュ帯に字間の広い欧文装飾と中央揃えの本文を置き、写真 3 列の下にラベルを付ける 6. **イベント**（体験企画への誘導）: 絞り込みタブの下に、線で区切ったテキストと写真の記事リストを並べる 7. **店舗案内**（実店舗への誘導）: 写真 2 枚を横に並べ、下端に枠線ボタンを重ねる 8. **ギフト・EC 誘導**（ノベルティとオンラインショップへ誘導する）: 金線で囲んだ淡色のバナーと、暗い商品写真に欧文を載せたバナーを置く 9. **新商品**（商品を紹介する）: 薄グレー帯の上で、商品写真カードを横スクロールさせる 10. **SNS**（SNS への導線）: 小さな欧文見出しの下に、埋め込みフィードとギャラリーグリッドを置く 11. **バナー群**（LINE・予約・採用への導線）: 写真や単色のバナーを縦に並べる 12. **お問い合わせ・フッター**（連絡先とサイトマップを載せる）: レンガ写真に欧文見出しと円形ボタンを置き、焦茶の面にロゴ・電話番号・ナビを並べる ## Imagery - 自然光で撮った落ち着いた店内や庭の写真に、人物が茶を淹れる所作を入れる - 料理と菓子は器ごと斜め上から撮り、木の卓に載せた実物感を出す - 商品は白や淡いグレーの背景で物撮りする - バナーの背景には暗い木目・レンガ・店内写真を使う - イラストは使わず、写真と欧文タイポで構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーに横並びのグローバルナビを置く - PC の FV は右寄せの写真にし、左に縦書きのメッセージを置く - PC のイベントは左に見出しとタブ、右に記事リストの 2 カラムにする - PC の新商品カードは 5 列、SNS は 2 列に並べる - PC はコンテンツ幅を約 80% にし、余白をさらに広く取る ## 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-b56dd6eb`（元 LP の URL から採番） - **元 LP**: https://www.haruichi-style.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。