DESIGN.md — 藍色×生成り和紙の大衆居酒屋 LP（Indigo and Washi Japanese Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 和風、レトロ、力強い・インパクト、親しみ・手作り感
• キーワード: 藍色・和紙テクスチャ・縦書き見出し・短冊ラベル・二重線枠・斜め写真
• 地の質感: 生成りの和紙のような細かい繊維の地紋と、藍色の布目テクスチャ
• 形: 四角い写真と二重線の枠。ボタンは二重線で縁取ったピル型。セクションの境目に細い斜線を入れる
• 温度感: 生成りの温かみと藍色の落ち着きが同居する、やや温かめのトーン

Colors

• 生成りの和紙地と藍色の地をセクションごとに交互に使う
• 見出しは生成りの地なら墨色、藍の地なら白にする
• ボタンはすべて藍色の地に白文字で、内側に白の細い二重線を入れる
• 強調色を増やさず、料理写真の赤や茶色をアクセントにする
• 白い短冊ラベルは墨色の文字と墨色の細い枠線で作る
• フッターは藍の布目テクスチャで締める

Typography

• 大見出しは縦書きの太い明朝体で、写真に重ねて置く
• 見出しの助詞は小さく、名詞を大きくしてサイズに強弱をつける
• 大見出しの一部は白い帯の中に墨色の文字で入れる
• 本文はゴシック体で行間を2.0にとり、読みやすくする
• 装飾英字は欧文セリフを薄い色で大きく置き、背景の模様として使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書き見出しを重ねて非対称に組む
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文ブロックは左右に16px前後の余白をとる
• 写真は画面の片側にはみ出すように置き、斜めに傾けることもある
• セクションの最後には説明文とピル型ボタンを中央に置く
• 店舗情報は項目名と内容の2列にし、行ごとに細い線で区切る
• FVは藍色の二重線の縦枠でページの端を囲む

Elevation & Depth

• 影はほとんど使わず、平面的に組む
• 切り抜いた牡蠣や料理の写真にだけ、ごく薄い落ち影をつける
• 斜めに置く写真には薄い影をつけて、紙を置いたように見せる

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は基本的に角丸なしの四角。斜めに傾けたもの、食材を切り抜いたもの、皿の形の丸も混ぜる
• セクション境界: 直線で切り替える。細い斜線を横切らせてアクセントにする
• ボタンは外側を藍色の線、内側を白の細線で囲む二重線のピル型
• ボタンの右端には、枠からはみ出す白い横線の矢印を入れる
• 注意書きは墨色の二重線で四角く囲む
• 短冊ラベルは白い四角に細い枠をつけて少し傾ける

Components

• 二重線ピルボタン（button-primary）: 藍色の地に白文字。内側に白の細線を入れ、左にアイコン、右端に横線の矢印を置く
• 藍地の上のアウトラインボタン（button-outline）: 藍色のセクションの中で使う、白い線だけのピル型ボタン
• 短冊ラベル（tanzaku-label）: 縦書きの白い短冊に墨色の文字。写真の上に傾けて重ね、産地やキャッチを示す
• 縦書き大見出し（vertical-heading）: 太い明朝体を縦書きで置き、横に細い二重線の縦罫を添える
• 営業時間の吹き出し（time-bubble）: 下の角に尾がついた線だけの吹き出しに、時間を明朝体で入れる
• 利用シーンの和紙ボード（scene-board）: 和紙地の四角に、利用シーンを縦書きで2段に並べる
• 店舗情報の表（info-table）: 左に項目名、右に内容を置き、行ごとに細い線で区切る
• 二重線の注意書き（notice-box）: 墨色の二重線で囲んだ枠。見出しは【】で囲み、中央に置く
• ニュースカード（news-card）: 白いカードの上に写真、その下に欧文セリフの見出し、日付、2行の抜粋を並べる

Do's and Don'ts

Do - 生成りと藍色の地をセクションごとに交互に使う - 見出しは縦書きの太い明朝体にし、写真に重ねる - 写真を斜めにしたり切り抜いたりして、紙面に置いたような動きを出す - ボタンは二重線のピル型に統一する - 背景には和紙と布目の質感を薄く敷く

Don't - 鮮やかな原色の強調色やグラデーションを足さない - ボタンを角丸の小さい四角やフラットな塗りにしない - 見出しを丸ゴシックやポップな書体にしない - 強い影や光沢を使わない - 真っ白な背景で全面を平坦にしない

Page Structure

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

1. ファーストビュー（看板の2品と店の世界観を一目で伝える）: 和紙地を藍色の二重線の縦枠で囲む。丸いロゴ、切り抜いた料理写真、縦書きの大コピー、傾けた短冊を重ねる
2. お知らせ（最新情報への導線）: 白いカードに写真、欧文見出し、日付、抜粋を並べ、下にピル型ボタンを置く
3. 店のコンセプト・利用シーン（営業時間の長さと使いやすさを伝える）: 藍色の地に時間の吹き出しと白帯の見出しを置く。乾杯写真の下に、利用シーンを縦書きで並べた和紙ボードと説明文を続ける
4. 看板商品1の魅力（産地や品質へのこだわりを訴える）: 和紙地に切り抜き写真を縦に3つ並べ、産地を短冊で示す。右側に縦書き見出し、下に斜めの写真、本文、ボタンを置く
5. 看板商品2・一品料理（もう1つの名物と料理の幅を伝える）: 藍色の地に縦書き見出しと料理写真を重ね、写真を互い違いに配置する。そのあと和紙地に本文とボタンを置く
6. 店内紹介（席の広さや個室、貸切できることを伝える）: 全幅の店内写真に縦書き見出しと短冊ラベルを重ねる。スライダー写真、手書き風の吹き出し、本文、藍色の席配置図を続ける
7. 店舗情報（予約と来店に必要な情報を示す）: 横書き見出しと二重下線、ロゴ、電話番号、予約ボタンを鉤括弧型の枠で囲む。そのあと情報の表と地図を置く
8. 注意書き・姉妹店（キャンセル規定と関連店舗への導線）: 二重線の枠で注意書きを示し、姉妹店は角丸のバナーカードで案内する
9. フッター（SNSシェアとページ上部への戻り）: 藍の布目地にシェアボタン、コピーライト、ページ上部に戻るリンクを中央にそろえて置く

Imagery

• 料理は暖色の照明で寄り、湯気や艶感を出して撮る
• 食材は白い背景で切り抜き、和紙地に浮かせて置く
• 乾杯や店内の写真は、賑わいを感じる手持ち風の構図にする
• 背景には大きな欧文セリフ文字や筆書き風の模様を薄く敷く
• ロゴ風の丸い紋章や手書き風の吹き出しを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは2カラムの非対称レイアウトにし、写真と文章を左右に組む
• PCは左上に縦書きの縦並びナビ、右上に電話番号と予約ボタンを固定する
• 藍色のブロックは画面幅の半分ほどにして、和紙地とずらして重ねる
• 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 行書くと起動時に読み込まれる。