--- version: alpha name: Playful Grid Paper Izakaya Report LP description: 生成りの方眼紙地に、淡い黄色の三角とピンクの丸型あしらいを散らした体験レポート型の飲食店 LP。見出しは斜めに傾け、写真は不定形に切り抜く。黒い細枠の吹き出しと手描き線画で、遊び心と親しみを出している。 colors: background: '#FAF9F5' line: '#ECE8DE' primary: '#FDF5A4' accent-1: '#C3EEEA' secondary: '#6FA7A3' accent-2: '#F6C6CB' accent-3: '#D98585' cta: '#FCF5A4' on-cta: '#695F4D' text: '#201911' background-alt: '#DEDDD9' dark-section: '#22514B' tint-1: '#DDFCD1' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em accent: fontFamily: Josefin Sans fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.2em headline-sm: fontFamily: Klee One fontSize: 15px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 6px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' report-number: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' height: 24px tilted-heading: textColor: '{colors.secondary}' typography: '{typography.display}' height: 60px speech-bubble: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px button-menu: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px sns-button: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 40px blob-photo: rounded: '{rounded.lg}' height: 220px tel-badge: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 48px photo-strip: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 140px info-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 520px --- # DESIGN.md — 方眼紙×黄三角のポップな立ち飲み体験レポLP（Playful Grid Paper Izakaya Report LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい、レトロ - **キーワード**: 方眼紙・体験レポート・斜め見出し・黄色三角・吹き出し・ネオン - **地の質感**: 生成り地に薄いグレーの方眼線。紙のノートやスクラップブックのような質感 - **形**: 不定形の角丸写真・三角の枠・ピンクの丸いブロブ・黒枠の吹き出し・ピル型ボタン - **温度感**: 暖かい。電球色の写真とクリーム地で夜の店の温かさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FAF9F5` | 方眼紙のページ地 | 48% | 画素の実測 | | `line` | `#ECE8DE` | 方眼の罫線・細い区切り線 | 3% | 画素の主要色に補正 | | `primary` | `#FDF5A4` | ブランドを代表するネオンの黄色・三角あしらい | 6% | 画素の実測 | | `accent-1` | `#C3EEEA` | 見出し用の青緑・水色ボタン | 2% | 画素の実測 | | `secondary` | `#6FA7A3` | 見出しの文字・ハイライト用の青緑 | 1% | 推定 | | `accent-2` | `#F6C6CB` | ピンクのブロブ・強調文字 | 3% | 推定 | | `accent-3` | `#D98585` | 英字見出しのくすみローズ | 0% | 推定 | | `cta` | `#FCF5A4` | メニュー誘導ボタンの淡い黄色 | 1% | 画素の実測 | | `on-cta` | `#695F4D` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#201911` | 見出し・本文・枠線の黒 | 4% | 画素の主要色に補正 | | `background-alt` | `#DEDDD9` | ギャラリーの帯のグレー | 4% | 画素の実測 | | `dark-section` | `#22514B` | 姉妹店バナーの深緑 | 1% | 画素の実測 | | `tint-1` | `#DDFCD1` | LINEボタンの淡い黄緑 | 0% | 画素の実測 | - 地は生成りの方眼紙に統一し、黒い塗りのセクションは作らない - 黄色は三角形の装飾とボタンに使い、ネオンと響き合わせる - 青緑は見出し文字と帯状マーカーに使う - ピンクは人物の背後のブロブと、気持ちを表す強調語に限る - 文字・枠線・吹き出しの線は黒で細く統一する - パステルの面は小さく散らし、写真の暖色を主役にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 章の大見出し（斜めにして使う） | 丸ゴシック | M PLUS Rounded 1c | 700 | 30px | 1.3 | 0.08em | | `headline-lg` | セクションの問いかけ見出し（斜め） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.1em | | `headline-md` | 縦書きキャッチ・小見出し | ゴシック | Zen Kaku Gothic New | 500 | 18px | 1.6 | 0.15em | | `accent` | 英字のレポート番号・英字見出し | 欧文サンセリフ | Josefin Sans | 400 | 20px | 1.2 | 0.2em | | `headline-sm` | 吹き出しの台詞・手書き風の一言 | 手書き・筆 | Klee One | 600 | 15px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.08em | | `note` | 注釈・価格の補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.05em | | `label-button` | ボタンの文字（斜体ぎみ） | ゴシック | Noto Sans JP | 500 | 13px | 1.0 | 0.1em | - 大見出しは -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 ```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-cc7420b1`（元 LP の URL から採番） - **元 LP**: https://www.agarikoguchi.com/yokaru/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。