--- version: alpha name: Retro Kissaten Workspace Cafe LP description: 生成り色の紙のような地に、焦げ茶の文字とアーチ型の写真を重ねたレトロ喫茶店風のLP。縦書きの導入文、細い下線つきの英字ラベル見出し、茶系の濃いピル型CTAで、落ち着いた大人の作業カフェらしさを出している。 colors: background: '#F5EDE2' primary: '#7D4E2F' cta: '#331C0C' on-cta: '#FEFDFB' secondary: '#A65A2E' text: '#322720' dark-section: '#362E2B' on-dark: '#E0C4B6' background-alt: '#A98E83' surface: '#FEFEFE' accent-1: '#CE6C48' accent-2: '#B8945A' tint-1: '#E9DBCE' line: '#322720' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Zen Old Mincho fontSize: 21px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 14px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.2em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 2.1 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Kumbh Sans fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em note: fontFamily: Zen Kaku Gothic New fontSize: 9px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 120px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 58px button-outline-brand: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 70px button-white: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px section-label: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px badge-status: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 36px arch-photo: textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 370px list-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 170px vertical-tag: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 110px --- # DESIGN.md — 生成りと焦げ茶のレトロ喫茶作業カフェ LP（Retro Kissaten Workspace Cafe LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: レトロ、上品・高級、ナチュラル、やさしい・柔らかい - **キーワード**: 純喫茶・アーチ窓・縦書き・生成り紙・焦げ茶・ステンドグラス - **地の質感**: うっすら粒感のある生成り紙のような背景。写真は暗めで温かい色調の店内写真。 - **形**: 上が半円のアーチ型写真、角を内側にえぐった額縁型のメイン写真、ピル型ボタン - **温度感**: 暖色寄り。ベージュと焦げ茶が中心で、オレンジ寄りの茶色をアクセントに使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F5EDE2` | ページ全体の生成り色の地 | 60% | 画素の実測 | | `primary` | `#7D4E2F` | 見出し・アクセントのブラウン | 2% | 画素の実測 | | `cta` | `#331C0C` | 主CTAボタンの焦げ茶の面 | 2% | 画素の実測 | | `on-cta` | `#FEFDFB` | CTAボタン上の白文字 | 0% | 画素の実測 | | `secondary` | `#A65A2E` | CTAの縁取り・ドット・Slackボタン枠のオレンジ茶 | 0% | 推定 | | `text` | `#322720` | 本文・縦書きコピーの濃い茶黒 | 3% | 画素の主要色に補正 | | `dark-section` | `#362E2B` | アクセス情報の濃いこげ茶の面 | 7% | 画素の実測 | | `on-dark` | `#E0C4B6` | 濃色面上の淡いピンクベージュ文字 | 0% | 画素の実測 | | `background-alt` | `#A98E83` | フッターのくすんだモカ色の面 | 10% | 画素の実測 | | `surface` | `#FEFEFE` | 箇条書きカード・白ボタンの面 | 2% | 画素の実測 | | `accent-1` | `#CE6C48` | インラインリンク強調のオレンジ | 0% | 画素の実測 | | `accent-2` | `#B8945A` | メイン写真の額縁のゴールド | 0% | 推定 | | `tint-1` | `#E9DBCE` | 背景に敷く大きな淡い装飾文字・図形 | 2% | 画素の実測 | | `line` | `#322720` | 英字ラベル下の短い線・バッジ枠 | 0% | 画素の主要色に補正 | - 地は生成りベージュ1色で通し、白い面はカードとボタンに限る - 見出しは茶色、本文は茶黒にして、純黒は使わない - 主CTAは焦げ茶の面にオレンジ茶の縁取りと右向き矢印をつける - アクセスは濃いこげ茶、フッターはモカ色にして、ページの終わりを暗く落ち着かせる - 鮮やかなオレンジはインラインのリンク強調だけに使う - 写真は暗めで温かい色を基本にし、色鮮やかなドリンクで差し色を入れる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 導入の大見出し（横書き・句点つき） | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.4 | 0.1em | | `headline-lg` | 各セクションの2行見出し（茶色） | 明朝 | Zen Old Mincho | 700 | 21px | 1.6 | 0.05em | | `accent` | 英字セクションラベル（POINT・MENU など） | 欧文サンセリフ | Montserrat | 600 | 14px | 1.4 | 0.2em | | `body-lg` | 導入の縦書き本文 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.9 | 0.1em | | `body-md` | 各セクションの説明文 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 2.1 | 0.05em | | `label-button` | CTAボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.4 | 0.08em | | `headline-md` | 濃色面の英字見出し（ACCESS） | 欧文サンセリフ | Kumbh Sans | 700 | 26px | 1.3 | 0.03em | | `note` | 画面端の縦書き小ラベル・写真上の価格 | ゴシック | Zen Kaku Gothic New | 700 | 9px | 1.4 | 0.15em | - 導入文は縦書きにして右から左へ段を並べ、和の喫茶店らしさを出す - セクション見出しは、英字ラベル＋短い下線＋茶色の2行和文の3段で組む - 本文は太めのゴシックで行間を広く取り、左揃えにする - 画面の左右端に店情報を小さな縦書きで置き、余白の飾りにする - 字間はやや広めにとり、詰めた組み方はしない - 写真上の商品名と価格は白い縦書きで端に寄せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真はほぼ全幅、本文は左右に約20pxの余白 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの間は100〜140pxと大きく空け、ゆったりさせる - 見出し→アーチ写真→ページ送りドット→本文→CTA の順を繰り返す - 写真の下に小さなドットを置き、スライダーであることを示す - CTAボタンは中央に置き、幅は画面の約75% - アクセスは左に縦長の写真帯、右に濃色面の情報を置く2分割にする ## Elevation & Depth - 影はほぼ使わず、平面で組む - カードは白い面と大きめの角丸だけで地から浮かせる - ボタンは影ではなく縁取りで立体感を出す ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 上が半円のアーチ型（下の角は小さな角丸）。メイン写真は四隅を内側に丸くえぐった額縁型にし、ゴールドの枠で囲む - **セクション境界**: 直線で切り替え、色の面を変えるだけ（波線や斜線は使わない） - 写真はアーチ窓の形を基本にする - ボタンは完全なピル型にする - バッジは小さな角丸で、細い枠線だけにする - 背景には大きな淡い文字や曲線の図形をうっすら敷いてよい ## Components - **主CTAボタン**（`button-primary`）: 焦げ茶のピル型に、オレンジ茶の太い縁取り。白い太字のラベルと、右端にオレンジの矢印をつける - **外部サービス参加ボタン**（`button-outline-brand`）: 白いピル型にオレンジ茶の太い枠線。左にサービスのロゴ、縦の区切り線、右にラベルを置く - **濃色面の白ボタン**（`button-white`）: 濃いこげ茶の面の上に置く白いピル型ボタン。茶黒の文字と右矢印 - **英字ラベル見出し**（`section-label`）: 字間を広げた英字の小見出しの下に、約70pxの短い横線を引き、その下に茶色の2行和文見出しを置く - **準備中バッジ**（`badge-status`）: 見出しの下に置く、細い枠線だけの小さな角丸ラベル - **アーチ写真スライダー**（`arch-photo`）: 上が半円の縦長写真。下にページ送りのドットを並べ、今のページだけオレンジ茶にする - **箇条書きカード**（`list-card`）: 白い角丸カードに、茶色の点つき箇条書きを5項目ほど並べる - **写真上の縦書きタグ**（`vertical-tag`）: 写真の右端に重ねる白い小さな縦長札。茶色の縦書きで機能を書き、段違いに並べる ## Do's and Don'ts **Do** - 地は生成りベージュで通し、純白の背景にしない - 写真はアーチ窓か額縁の形で切り抜く - 導入文は縦書き、本文は太めのゴシックで行間を広くする - 見出しは英字ラベル＋短い線＋茶色の和文の3段にする - CTAは焦げ茶のピル型に、オレンジ茶の縁と矢印をつける - セクション間の余白はたっぷり取る **Don't** - 青や緑などの寒色をUIの色に使わない（写真の中だけにする） - 純黒の文字や、くっきりした影を使わない - 四角い写真をそのまま並べない - セクションの間を詰め込まない - ポップな丸ゴシックや手書き文字を使わない - 鮮やかなオレンジを広い面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（店の世界観とロゴを最初に見せる）: 中央に線画のレトロなロゴ。その下に額縁型の店の写真を置き、左右の端に営業時間と所在地を小さな縦書きで添える 2. **コンセプト導入**（どんな店かを短く伝える）: 太字の1行見出しの下に、縦書きの本文を2つのブロックに分けて置き、その下に小さなアーチ写真を1枚置く 3. **特長1**（一番の強みを伝える）: POINTの英字ラベルと見出し、全幅のアーチ写真スライダー、ドット、左揃えの本文 4. **特長2**（2つ目の強みと準備中の機能を伝える）: 同じ見出しの型に準備中バッジを足し、アーチ写真・本文・主CTAを並べる 5. **メニュー**（飲み物の魅力を見せて来店したくさせる）: アーチ写真に縦書きで商品名と価格を重ね、本文とメニューCTAを置く 6. **オンラインコミュニティ**（常連向けのオンラインの場に誘う）: 背景に大きな淡い装飾文字を敷き、写真に縦書きタグを重ね、白い箇条書きカードと外部サービスのボタンを置く 7. **アクセス**（場所と営業情報を伝える）: 左に店頭写真の帯、右に濃いこげ茶の面。淡い色の英字見出しと住所・電話番号、白い地図ボタン 8. **フッター**（ブランドの印象で締めくくる）: モカ色の面の中央に、ステンドグラス風のイラストロゴと線画ロゴを大きく置き、端に縦書きのコピーライト ## Imagery - 店内やカウンターを暗めの露出で撮り、ペンダントライトの温かい光を生かす - 木の質感、レンガ、黒い機材など、落ち着いた素材のアップを撮る - クリームソーダなど色鮮やかなドリンクで、写真の中だけに差し色を入れる - ロゴやイラストはステンドグラス風の太い線の幾何学模様にする - 人物は横顔や手元にとどめ、主役は空間と商品にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も 1 カラムの中央揃えで、本文の幅は約600pxに絞る - PC のアーチ写真は中央に1枚、左右に次の写真がはみ出して見えるカルーセルにする - PC のファーストビューは横長の額縁写真にし、左右の端に縦書きの飾りを残す - PC のアクセスは、写真と濃色面を左右半分ずつの2分割にする - PC のボタンは小さめで、幅およそ250pxにする ## 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-c4cd2b04`（元 LP の URL から採番） - **元 LP**: https://displaymonitor-unicoffeeroastery.jp/ - **解析に使った画像**: 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/）からご連絡ください。