DESIGN.md — ピンク×紫のレトロポップなエスニック居酒屋 LP（Retro Pop Pink Purple Ethnic Izakaya LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ポップ・元気、レトロ、かわいい、力強い・インパクト
• キーワード: ピンク×紫・レトロポップ・黒アウトライン・ずらし影・方眼地・ステッカー感
• 地の質感: 白やグレーの方眼地、ドット網点、チェッカー柄、新聞コラージュ風の重ね貼り
• 形: 太い黒線の角丸カード、ギザギザ円バッジ、ジグザグや波線のセクション境界、丸窓の写真
• 温度感: 暖かくにぎやか。夜の飲み屋のネオン感

Colors

• ピンクと紫を交互にセクション地に使い、間に白・方眼地をはさむ
• 黒は文字と太い枠線・ずらし影に限定し、グレーは使わない
• 深緑は箸休めの解説セクション 1 か所だけに使う
• 蛍光黄は電話番号マーカーや斜線・吹き出し線などの小さな強調だけ
• 主 CTA は濃ピンクまたは紫の立体楕円ボタンで、店舗ごとに色を変える
• 淡ピンクはカード内の地やハッシュタグピルに使う
• button-reserve は文字 #FFFFFF × 背景 #E8245F のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E71857、4.5:1）を使う。
• list-dashed は文字 #FFFFFF × 背景 #298A5F のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#28865C、4.51:1）を使う。

Typography

• 本文も太めのゴシックで、字間を広めにとる
• 本文は短い行で中央揃えにし、段落の間は 1 行あける
• 英字見出しはアウトラインのずらしや水色の影で立体にする
• 英字見出しはアーチ状・斜め・縦組みにして遊ぶ
• 和文の訴求コピーは縦書きでも使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央 375px 幅の SP カラムを固定して見せる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右 8% 程度の余白
• 写真は画面端まで出したり枠外にはみ出させる
• カードは黒の太線と右下へのずらし影
• セクションごとに地色を切り替えてリズムをつくる
• 大きな英字を背景に敷いてテキストを重ねる

Elevation & Depth

• ぼかし影は使わず、黒い色面を右下に 4〜6px ずらしたベタ影にする
• ボタンは下に同色の濃い楕円を重ねて立体の台座に見せる
• 写真は少し傾け、紙を貼ったようなコラージュ感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 縦長の丸窓・角丸・斜め置き・切り抜き
• セクション境界: ジグザグ、波（スカラップ）、うねる曲線、チェッカー帯
• ナビボタンは黒線のピル型にずらし影
• 店舗リンクはギザギザ円のバッジ
• ハッシュタグは少し傾けた淡ピンクのピル
• カード下端をめくれた紙のように網点で処理

Components

• 矢印付きピルボタン（button-pill-outline）: 白地に黒の太線、右下にベタ影、右端に細い矢印
• 立体楕円予約ボタン（button-reserve）: 濃ピンクか紫の楕円。下に台座を重ね、背後に薄い英字を透かす
• ギザギザ円 CHECK バッジ（badge-scallop）: 紫かピンクのギザギザ円に斜め英字と矢印。上にロゴのイラストをのせる
• 店舗カード（card-shop）: 上部に色帯で店名と SNS アイコン、本文に電話番号（黄マーカー）・予約ボタン・地図リンク
• お知らせカード（card-info）: 紫の見出し帯にアイコンと英字、白地に下線付き見出しと中央揃えの本文
• ハッシュタグピル（tag-hash）: 淡ピンク地に黒線。傾けて大きな英字の上に重ねる
• もこもこ吹き出し（bubble-thought）: 白地に黒線の雲形に、斜体の太字で一言
• 流れる文字帯（band-marquee）: ピンクの線で挟んだ紫の帯や、ピンクの枠に英字を回り込ませる
• 点線罫の本文（list-dashed）: 緑地の上で、本文 1 行ごとに白い点線を引く

Do's and Don'ts

Do - 黒の太線とベタ影で部品を縁取る - ピンクと紫を交互に面で大きく使う - 英字の見出しは傾け・アーチ・縦組みで動きを出す - 手描きのモノクロ人物イラストやトゥクトゥク風乗り物を添える - キラ星や斜線などの小さな装飾を散らす

Don't - 淡いグレーや細い線だけの上品な見せ方にしない - ぼかしたドロップシャドウを使わない - 本文を細いウェイトにしない - 写真を整然と同じサイズで並べない - 緑や黄を面積の大きいメイン色にしない

Page Structure

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

1. ヘッダー・ファーストビュー（ブランドとジャンルを一目で伝える）: 紫帯のロゴの下に、ピンク地と縦長丸窓の料理俯瞰写真。料理とドリンクへの導線を傾けた旗形タグで置く
2. お知らせ（最新情報を見せる）: 影付きの大きな英字見出し、方眼地に情報カードと日付のリスト、ピルボタン
3. 店舗紹介（店の魅力を語る）: アーチ状の英字とイラスト、極太のアウトライン付き英字ロゴ、中央揃えの本文、店舗別のギザギザバッジ
4. 料理の特長（料理の種類と食べやすさを伝える）: ピンク方眼の枠にクリップ付きの淡ピンクカード、切り抜き料理を横に並べ、ハッシュタグ・吹き出し・回り込み本文
5. 苦手な人へのコラム（不安を解消する）: ジグザグ境界の深緑地、白枠の写真、点線罫の中央揃え本文
6. ドリンク（お酒の充実をアピールする）: 店内写真に巨大セリフ英字を重ね、ボトル切り抜きを SNS 投稿風の枠からはみ出させ、縦書きコピー
7. 来店の後押し（興味を店舗詳細へつなぐ）: 紫地にうねる境界、影付きの英字、ネオン写真、縦書きの問いかけとギザギザバッジ、チェッカー帯で閉じる
8. 予約（電話・WEB 予約へ誘導する）: 三角形の装飾とアーチ英字の見出し、店舗ごとに色を変えたカードを縦に並べる
9. SNS・アプリ案内（継続接点をつくる）: 英字が回り込むピンク枠の中に、傾けたハッシュタグピルと公式アイコン
10. 採用バナー（求人へ誘導する）: スタッフ写真のコラージュに影付き英字と回転テキストの丸シール
11. フッター（共有と著作権表示）: 紫地に白の下線リンクとシェアボタン、乗り物イラストのトップへ戻るボタン

Imagery

• 料理は木のテーブルで真上から撮り、カラフルな絵皿と手を入れて食卓の臨場感を出す
• 料理は切り抜きで少し傾け、枠からはみ出させる
• 店内はピンクと紫の壁、裸電球、ネオンで夜の雰囲気にする
• イラストは白黒の線画の女性 2 人と、ピンク紫 2 色の乗り物
• キラ星・爆発の吹き出し・煙・びっくりマークなどのマンガ的装飾を添える
• スタッフ写真は笑顔でカジュアル。切り抜きを重ねてコラージュにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP と同じ幅のカラムを固定し、左右は淡ピンクのベタ地
• PC の上部には全幅の紫ロゴ帯を流す
• PC の右側には店舗の電話・予約カードとナビボタンを固定表示する
• PC の左側には料理写真とアーチ英字の装飾を置く
• カラム内のレイアウトは SP と同じものを使う

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