DESIGN.md — 方眼紙×黄三角のポップな立ち飲み体験レポLP（Playful Grid Paper Izakaya Report LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい、レトロ
• キーワード: 方眼紙・体験レポート・斜め見出し・黄色三角・吹き出し・ネオン
• 地の質感: 生成り地に薄いグレーの方眼線。紙のノートやスクラップブックのような質感
• 形: 不定形の角丸写真・三角の枠・ピンクの丸いブロブ・黒枠の吹き出し・ピル型ボタン
• 温度感: 暖かい。電球色の写真とクリーム地で夜の店の温かさを出す

Colors

• 地は生成りの方眼紙に統一し、黒い塗りのセクションは作らない
• 黄色は三角形の装飾とボタンに使い、ネオンと響き合わせる
• 青緑は見出し文字と帯状マーカーに使う
• ピンクは人物の背後のブロブと、気持ちを表す強調語に限る
• 文字・枠線・吹き出しの線は黒で細く統一する
• パステルの面は小さく散らし、写真の暖色を主役にする

Typography

• 大見出しは -5〜-8° 傾け、一部の語だけ色や太さを変える
• 見出しの一部の語に青緑か黄の帯マーカーを敷く
• レポート番号は 1 文字ずつ細い線の箱で囲む
• 縦書きの小キャッチを写真の横に置く
• 本文は中央揃えか短い行で組み、字間を広めにとる
• 英字はジオメトリックで細めの書体にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と文字は左右にずらして重ねる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真と文字をジグザグに互い違いに置く
• 写真同士を細い折れ線でつなぎ、動線を作る
• 装飾の三角はカンバスの端からはみ出させる
• レポートの各章は「番号→斜め見出し→写真→本文」の順にする
• 店舗情報は角丸の大きな白枠で 2 列の表にする

Elevation & Depth

• 影はほぼ使わない。平面のスクラップ感を出す
• 吹き出しやボタンは黒の細線と右下にずらした黒いベタ影（2px）で浮かせる
• 写真の重なりは前後関係で奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 四隅の丸みを不揃いにした不定形の角丸か、斜めに傾けたポラロイド風の帯
• セクション境界: 直線は使わない。波形やちぎれ紙風のカーブ、斜めの帯で切り替える
• 三角は塗りと太い線の 2 種類を混ぜて使う
• 人物の背後にピンクの丸いブロブを置く
• ボタンは黒い細枠のピル型にし、右端に丸いアイコンを付ける
• 店舗情報は角丸 32px の大枠で囲む

Components

• レポート番号（report-number）: 英字と数字を 1 文字ずつ細線の箱に入れた章ラベル
• 斜め見出し（tilted-heading）: 傾けた大見出し。一部の語の色を変え、帯マーカーを敷く
• 吹き出し（speech-bubble）: 白地に黒の細枠と、ずらしたベタ影を付けた台詞の枠
• メニュー誘導ボタン（button-menu）: 黄か水色のピル型。黒い細枠と右端の丸プラスアイコン
• SNSボタン（sns-button）: ピンクと黄緑の角丸ボタン。黒枠に SNS のアイコン
• 不定形写真（blob-photo）: 角の丸みが不揃いの写真。三角とブロブの装飾を重ねる
• 電話番号バッジ（tel-badge）: 白地に黒枠の角丸。空席確認の電話番号を入れる
• フィルム風ギャラリー（photo-strip）: 斜めのグレーの帯に、小さな英字キャプション付きの写真を並べる
• 店舗情報カード（info-card）: 大きな角丸の枠。線画のロゴと、項目名＋内容の 2 列リスト

Do's and Don'ts

Do - 方眼の地と黄色の三角を全章で繰り返す - 見出しは必ず少し傾け、遊びを出す - 人物写真には吹き出しで台詞を添える - 写真同士を細い線でつなぎ、読む順番を誘導する - 価格や注釈は小さな文字で写真の近くに置く

Don't - 黒や濃色のベタ面でセクションを大きく塗らない - 写真を直角の四角だけで並べない - 原色の赤や青を使わない - 影をぼかしの強いドロップシャドウにしない - 見出しを全部水平にそろえない

Page Structure

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

1. ファーストビュー（店の雰囲気と企画の趣旨を一目で伝える）: 縦書きのナビ、線画ロゴ、ネオン看板の写真。下端は波形で切り、斜めのタイトルを重ねる
2. 導入文（レポートの趣旨と登場人物を紹介する）: 中央揃えの短い文と、黄色三角の装飾
3. 悩みの提起（来店前の不安を代弁する）: 斜めの問いかけ見出し。2 人の切り抜き写真に、ピンクのブロブと吹き出しを添える
4. レポート1 雰囲気（居心地の良さを伝える）: 番号の箱、斜め見出し、ずらした写真、縦書きキャッチ
5. レポート2 ドリンク（品ぞろえと価格を伝える）: 不定形の写真を折れ線でつなぐ。英字を重ねた写真カード 2 枚と、水色のボタン
6. レポート3 料理（名物と日替わりを訴求する）: 帯マーカーの見出し、縦書きの名物紹介、価格、黄色のボタン
7. 感想まとめ（体験後の満足を伝える）: ピンクのブロブ上の店頭写真に、両側から吹き出しを出す
8. フォトギャラリー（楽しい空気を写真で見せる）: 斜めのグレーの帯にフィルム風の写真を並べ、続けて全幅の写真を置く
9. お知らせ・SNS（最新の情報とフォロー導線）: 小さなニュースカードと、パステルの SNS ボタン
10. 店舗情報（来店に必要な情報をまとめる）: 角丸の大枠に、ロゴ、電話の吹き出し、2 列の情報表。姉妹店の深緑バナーを付ける
11. 地図・フッター（アクセスとサイト内の回遊）: 大きな英字見出しと地図、小さなボタン、横並びのナビ、半円のトップへ戻るボタン

Imagery

• 電球色の夜の店内で、人物が笑顔で乾杯する自然なスナップ
• 人物の切り抜き写真に、考える仕草や驚きのリアクションを付ける
• 料理は真上か斜め 45° から寄り、和柄の器で温かみを出す
• 黒い細線の手描きイラストで人物やロゴを描く
• 装飾は黄色の三角（塗りと線）、ピンクのブロブ、細い曲線
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 480px 相当の幅にまとめる。SP では同じ構成を全幅 1 カラムにする
• SP の縦ナビはハンバーガーメニューに置き換える
• ジグザグの配置は SP では写真→文字の縦積みにし、ずらしは 16px 程度に抑える
• 店舗情報の 2 列表は SP では 1 列にする
• 飲み物の写真カード 2 枚は SP では 2 列のまま小さくするか、横スクロールにする

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 行書くと起動時に読み込まれる。