DESIGN.md — 生成り×蜂蜜金の明朝 洋菓子店 LP（Cream and Honey Gold Patisserie Storytelling LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 生成り・蜂蜜色の金・明朝体・縦書き・手描き線画・アーチ切り抜き
• 地の質感: 紙のような生成りの無地。金の細い線とモノクロの線画が版画のような手触りを出す
• 形: 上辺が弧を描くアーチ型の写真とセクション、細い枠線のピル型ボタン
• 温度感: 温かく、静か

Colors

• 地はほぼ全面を生成り 1 色にし、白も黒の帯も使わない
• 金はボタンの枠線・装飾ループ・線画の差し色に限り、面で使うのはお知らせ帯の 1 か所だけにする
• 文字は真っ黒にせず、焦げ茶寄りの墨色にする
• 金の面の上の文字や罫線は白にする
• 写真の暖かい木の色や焼き色をそのまま配色に生かし、彩度の高い色は足さない
• button-on-gold は文字 #FFFAF5 × 背景 #B7983B のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#87702B、4.62:1）を使う。
• footer-frame は文字 #CFCAA5 × 背景 #FFFBF2 のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7B7442、4.6:1）を使う。

Typography

• 見出しは縦書きの明朝にし、頭に金のループ記号を添える
• 導入文は中央揃えにし、1 行 15〜20 字で改行して詩のように見せる
• 説明文はゴシックの小さい文字を左揃えで組む
• 太字は使わず、ウェイト 400〜500 で統一する
• 欧文は字間を大きく空けたセリフ体を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 110px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真は端から端まで全幅で使い、本文は左右に約 43px の余白を取る
• セクションの間は 100px 以上空ける
• 縦書き見出しは左端か右端に寄せ、写真や本文と組み合わせて非対称に置く
• 店舗情報は項目名と内容の 2 列で、罫線なしに並べる
• カードは使わず、余白だけで区切る

Elevation & Depth

• 影は一切使わず、すべてフラットにする
• 奥行きは写真と生成り地の重なりで表す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 全幅の写真の上辺を、ゆるい弧のアーチ形に切り抜く。小さい写真は角丸なしの長方形にする
• セクション境界: 金の帯の上下を中央が膨らむ弧で切り、フッターは細い金線の枠で囲む
• ボタンは細い金枠の線だけのピル型にする
• 写真の上辺はアーチ、それ以外は直角にする
• ファーストビューの上下には、金線のループを連続させた帯を置く

Components

• 金枠ピルボタン（button-outline）: 生成り地に細い金の枠線。左に明朝のラベル、右に細い矢印を置く
• 金の帯の上の白枠ボタン（button-on-gold）: 金の面の上で、白い枠線と白い文字を使う
• 縦書き見出し（heading-vertical）: 金のループ記号の下に、明朝の縦書きを 1〜2 行で置く
• 写真の上の短冊ラベル（label-tag）: 写真の上に、白い帯に明朝の短い文を 3 段重ねる
• 金線ループの帯（loop-border）: 筆記体の l を連ねたような金の線を、横一列に繰り返す装飾
• お知らせのリスト（news-list）: 金の面に白い罫線を引き、日付と明朝のタイトルを 1 行ずつ並べる
• アーチ写真（arch-photo）: 上辺を弧に切り抜いた全幅の写真
• 金線の枠のフッター（footer-frame）: 細い金線の枠の中に、線画・欧文のロゴ・SNS を収める

Do's and Don'ts

Do - 生成りの地を広く残し、余白で高級感を出す - 見出しには縦書きの明朝を使う - 金は線で使うのを基本にする - 手描きのモノクロ線画に、金を部分的に差す - 写真の上辺はアーチ形に切り抜く

Don't - 鮮やかな赤やオレンジの CTA ボタンを使わない - 太いゴシックや大きな数字で訴求しない - 影・グラデーション・角丸カードを使わない - 純白や純黒の地色にしない - 文字を詰め込まない

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: 全幅の料理写真の上下に金のループの帯を置き、縦書きの白いロゴと短冊ラベル 3 つを重ねる
2. 線画のイラスト帯（物語らしさと遊び心を出す）: 踊り子と花の線画を、横方向に繰り返す
3. コンセプトの詩（土地とこだわりを情緒的に語る）: 明朝を中央揃えにし、行間を広く取った短い行を段落ごとに並べ、最後に金枠のボタンを置く
4. 商品紹介（商品の特長を説明する）: アーチ写真の下に、ゴシックの説明文と縦書き見出しを置く
5. 店舗紹介（店の雰囲気と場所を伝える）: アーチ形の内観写真、右寄せの縦書き見出し、外観写真、本文の順に並べる
6. 店舗情報（住所や営業時間などの実用情報を示す）: 明朝の店名と住所の下に地図ボタンを置き、項目名と内容を 2 列で並べる
7. お知らせ（最新情報を伝える）: 上下を弧で切った金の帯に、白い罫線のリストと白枠のボタンを置く
8. フッター（ブランドの余韻を残して締める）: 金線の枠の中に、PAGE TOP・線画・字間を広く取った欧文ロゴ・SNS を置く

Imagery

• 写真は自然光の暖かい色調で、木のトレイや器、焼き色を浅い被写界深度で撮る
• 店舗の写真は木の内装と窓の光を生かし、彩度を少し抑える
• イラストは黒いペンの手描きの線画で、リボンや花の一部だけを蜂蜜金で塗る
• 装飾は金の細い線のループ記号と連続ループの帯にする
• 写真の上に乗せる文字は、白い短冊か白抜きの明朝にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文の幅を 640px 前後に抑え、中央に寄せる
• 写真は 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 行書くと起動時に読み込まれる。